Download all files FTP
This commit is contained in:
1451
wp-content/plugins/draw-attention-pro/admin/assets/css/admin.css
Normal file
1451
wp-content/plugins/draw-attention-pro/admin/assets/css/admin.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,14 @@
|
||||
.hotspots-container .hotspots-placeholder,
|
||||
.hotspots-container .hotspot-info,
|
||||
.hotspots-container .da-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hotspots-container img[usemap],
|
||||
.hotspots-container map area {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hotspots-container map area {
|
||||
display: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,156 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 600 60"
|
||||
height="60"
|
||||
width="600"
|
||||
id="svg4225"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="spritesheet.svg"
|
||||
inkscape:export-filename="/home/fpuga/development/upstream/icarto.Leaflet.draw/src/images/spritesheet-2x.png"
|
||||
inkscape:export-xdpi="90"
|
||||
inkscape:export-ydpi="90">
|
||||
<metadata
|
||||
id="metadata4258">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs4256" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1056"
|
||||
id="namedview4254"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.3101852"
|
||||
inkscape:cx="237.56928"
|
||||
inkscape:cy="7.2419621"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg4225" />
|
||||
<g
|
||||
id="enabled"
|
||||
style="fill:#464646;fill-opacity:1">
|
||||
<g
|
||||
id="polyline"
|
||||
style="fill:#464646;fill-opacity:1">
|
||||
<path
|
||||
d="m 18,36 0,6 6,0 0,-6 -6,0 z m 4,4 -2,0 0,-2 2,0 0,2 z"
|
||||
id="path4229"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<path
|
||||
d="m 36,18 0,6 6,0 0,-6 -6,0 z m 4,4 -2,0 0,-2 2,0 0,2 z"
|
||||
id="path4231"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<path
|
||||
d="m 23.142,39.145 -2.285,-2.29 16,-15.998 2.285,2.285 z"
|
||||
id="path4233"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
</g>
|
||||
<path
|
||||
id="polygon"
|
||||
d="M 100,24.565 97.904,39.395 83.07,42 76,28.773 86.463,18 Z"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<path
|
||||
id="rectangle"
|
||||
d="m 140,20 20,0 0,20 -20,0 z"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<path
|
||||
id="circle"
|
||||
d="m 221,30 c 0,6.078 -4.926,11 -11,11 -6.074,0 -11,-4.922 -11,-11 0,-6.074 4.926,-11 11,-11 6.074,0 11,4.926 11,11 z"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<path
|
||||
id="marker"
|
||||
d="m 270,19 c -4.971,0 -9,4.029 -9,9 0,4.971 5.001,12 9,14 4.001,-2 9,-9.029 9,-14 0,-4.971 -4.029,-9 -9,-9 z m 0,12.5 c -2.484,0 -4.5,-2.014 -4.5,-4.5 0,-2.484 2.016,-4.5 4.5,-4.5 2.485,0 4.5,2.016 4.5,4.5 0,2.486 -2.015,4.5 -4.5,4.5 z"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<g
|
||||
id="edit"
|
||||
style="fill:#464646;fill-opacity:1">
|
||||
<path
|
||||
d="m 337,30.156 0,0.407 0,5.604 c 0,1.658 -1.344,3 -3,3 l -10,0 c -1.655,0 -3,-1.342 -3,-3 l 0,-10 c 0,-1.657 1.345,-3 3,-3 l 6.345,0 3.19,-3.17 -9.535,0 c -3.313,0 -6,2.687 -6,6 l 0,10 c 0,3.313 2.687,6 6,6 l 10,0 c 3.314,0 6,-2.687 6,-6 l 0,-8.809 -3,2.968"
|
||||
id="path4240"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<path
|
||||
d="m 338.72,24.637 -8.892,8.892 -2.828,0 0,-2.829 8.89,-8.89 z"
|
||||
id="path4242"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<path
|
||||
d="m 338.697,17.826 4,0 0,4 -4,0 z"
|
||||
transform="matrix(-0.70698336,-0.70723018,0.70723018,-0.70698336,567.55917,274.78273)"
|
||||
id="path4244"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="remove"
|
||||
style="fill:#464646;fill-opacity:1">
|
||||
<path
|
||||
d="m 381,42 18,0 0,-18 -18,0 0,18 z m 14,-16 2,0 0,14 -2,0 0,-14 z m -4,0 2,0 0,14 -2,0 0,-14 z m -4,0 2,0 0,14 -2,0 0,-14 z m -4,0 2,0 0,14 -2,0 0,-14 z"
|
||||
id="path4247"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
<path
|
||||
d="m 395,20 0,-4 -10,0 0,4 -6,0 0,2 22,0 0,-2 -6,0 z m -2,0 -6,0 0,-2 6,0 0,2 z"
|
||||
id="path4249"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#464646;fill-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="disabled"
|
||||
transform="translate(120,0)"
|
||||
style="fill:#bbbbbb">
|
||||
<use
|
||||
xlink:href="#edit"
|
||||
id="edit-disabled"
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%" />
|
||||
<use
|
||||
xlink:href="#remove"
|
||||
id="remove-disabled"
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%" />
|
||||
</g>
|
||||
<path
|
||||
style="fill:none;stroke:#464646;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="circle-3"
|
||||
d="m 581.65725,30 c 0,6.078 -4.926,11 -11,11 -6.074,0 -11,-4.922 -11,-11 0,-6.074 4.926,-11 11,-11 6.074,0 11,4.926 11,11 z"
|
||||
inkscape:connector-curvature="0" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
@@ -0,0 +1 @@
|
||||
<?php // Silence is golden
|
||||
1
wp-content/plugins/draw-attention-pro/admin/assets/js/admin-min.js
vendored
Normal file
1
wp-content/plugins/draw-attention-pro/admin/assets/js/admin-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
735
wp-content/plugins/draw-attention-pro/admin/assets/js/admin.js
Normal file
735
wp-content/plugins/draw-attention-pro/admin/assets/js/admin.js
Normal file
@@ -0,0 +1,735 @@
|
||||
;(function ( $, hotspotAdmin, cmb, undefined ) {
|
||||
"use strict";
|
||||
|
||||
var leafletOptions = {
|
||||
color: '#ff1414',
|
||||
weight: 1,
|
||||
fillOpacity: 0.3
|
||||
};
|
||||
var $metabox = cmb.metabox();
|
||||
var $repeatGroup = $metabox.find('.cmb-repeatable-group');
|
||||
var container;
|
||||
var map;
|
||||
var leafletInput;
|
||||
var shapeInput;
|
||||
var currentId;
|
||||
var img;
|
||||
var $img;
|
||||
var drawControl;
|
||||
var editControl;
|
||||
var drawnItems;
|
||||
var resizeTimer = null;
|
||||
var resizing = false;
|
||||
|
||||
hotspotAdmin.reRender = function(){
|
||||
if (!resizing) {
|
||||
resizing = true;
|
||||
}
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function(){
|
||||
leafletDrawInit();
|
||||
resizing = false;
|
||||
}, 250);
|
||||
};
|
||||
|
||||
var leafletDrawInit = function() {
|
||||
if ( ! container ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Sanity check - make sure any old drawing tools are gone
|
||||
leafletDrawRemove();
|
||||
currentId = container.data('iterator');
|
||||
|
||||
// Start with the coordinates input
|
||||
leafletInput = container.find('input[data-image-url]');
|
||||
shapeInput = $('#_da_hotspots_' + currentId + '_shape');
|
||||
var imageSrc = leafletInput.data('image-url');
|
||||
|
||||
// Set up the image
|
||||
img = new Image();
|
||||
img.onload = function(){
|
||||
leafletSetup();
|
||||
};
|
||||
img.src = imageSrc;
|
||||
}
|
||||
|
||||
var leafletSetup = function() {
|
||||
$img = $(img);
|
||||
var wrapper = $('<div id="hotspots-drawing-wrapper-' + currentId + '" class="hotspots-drawing-wrapper"></div>');
|
||||
wrapper.append($img);
|
||||
leafletInput.after(wrapper);
|
||||
|
||||
var drawingContainer = $('<div id="hotspots-drawing-container-' + currentId + '" class="hotspots-drawing-container"></div>');
|
||||
var imgWidth = $img.width();
|
||||
var imgHeight = $img.height();
|
||||
|
||||
drawingContainer.css({
|
||||
'width': imgWidth + 'px',
|
||||
'height': imgHeight + 'px'
|
||||
});
|
||||
$img.after(drawingContainer);
|
||||
|
||||
var natHeight = img.naturalHeight;
|
||||
var natWidth = img.naturalWidth;
|
||||
$img.data('natW', natWidth);
|
||||
$img.data('natH', natHeight);
|
||||
var bounds = [[0,0], [natHeight, natWidth]];
|
||||
var maxBounds = [[-50,-50], [natHeight+50, natWidth+50]]
|
||||
|
||||
map = L.map('hotspots-drawing-container-' + currentId, {
|
||||
attributionControl: false,
|
||||
boxZoom: false,
|
||||
crs: L.CRS.Simple,
|
||||
doubleClickZoom: true,
|
||||
dragging: true,
|
||||
keyboard: false,
|
||||
maxBounds: maxBounds,
|
||||
maxBoundsViscosity: 1.0,
|
||||
maxZoom: 10,
|
||||
minZoom: -1,
|
||||
scrollWheelZoom: false,
|
||||
tap: true,
|
||||
touchZoom: true,
|
||||
zoomControl: true,
|
||||
zoomSnap: 0
|
||||
});
|
||||
|
||||
|
||||
|
||||
var imageLayer = L.imageOverlay($img.attr('src'), bounds).addTo(map);
|
||||
map.fitBounds(bounds);
|
||||
|
||||
/* Add custom drawing toolbar */
|
||||
drawnItems = new L.FeatureGroup();
|
||||
map.addLayer(drawnItems);
|
||||
drawControl = new L.Control.Draw({
|
||||
draw: {
|
||||
circlemarker: false,
|
||||
marker: false,
|
||||
polyline: false
|
||||
}
|
||||
});
|
||||
|
||||
drawControl.setDrawingOptions({
|
||||
rectangle: {
|
||||
shapeOptions: {
|
||||
color: leafletOptions.color,
|
||||
weight: leafletOptions.weight,
|
||||
fillOpacity: leafletOptions.fillOpacity
|
||||
}
|
||||
},
|
||||
circle: {
|
||||
shapeOptions: {
|
||||
color: leafletOptions.color,
|
||||
weight: leafletOptions.weight,
|
||||
fillOpacity: leafletOptions.fillOpacity
|
||||
},
|
||||
showRadius: false
|
||||
},
|
||||
polygon: {
|
||||
shapeOptions: {
|
||||
color: leafletOptions.color,
|
||||
weight: leafletOptions.weight,
|
||||
fillOpacity: leafletOptions.fillOpacity
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
map.addControl(drawControl);
|
||||
|
||||
/* Create an edit only toolbar */
|
||||
editControl = new L.Control.Draw({
|
||||
edit: {
|
||||
featureGroup: drawnItems
|
||||
},
|
||||
draw: false
|
||||
})
|
||||
|
||||
/* Save shapes that are drawn */
|
||||
map.on(L.Draw.Event.CREATED, function(e) {
|
||||
drawnItems.addLayer(e.layer);
|
||||
shapeEvents(e.layer);
|
||||
mapToEditMode();
|
||||
});
|
||||
|
||||
/* When shapes are deleted, restore drawing bar */
|
||||
map.on(L.Draw.Event.DELETED, function(e) {
|
||||
if (drawnItems.getLayers().length === 0){
|
||||
mapToDrawingMode();
|
||||
}
|
||||
});
|
||||
|
||||
L.Draw.Polyline.prototype._onTouch = L.Util.falseFn;
|
||||
|
||||
drawSpot();
|
||||
mapEvents();
|
||||
localizeStrings();
|
||||
}
|
||||
|
||||
var localizeStrings = function(){
|
||||
L.drawLocal = {
|
||||
draw: {
|
||||
toolbar: {
|
||||
actions: {
|
||||
title: 'Cancel drawing',
|
||||
text: 'Cancel'
|
||||
},
|
||||
finish: {
|
||||
title: 'Finish drawing',
|
||||
text: 'Finish'
|
||||
},
|
||||
undo: {
|
||||
title: 'Delete last point drawn',
|
||||
text: 'Delete last point'
|
||||
},
|
||||
buttons: {
|
||||
polyline: 'Draw a polyline',
|
||||
polygon: 'Draw a polygon',
|
||||
rectangle: 'Draw a rectangle',
|
||||
circle: 'Draw a circle',
|
||||
marker: 'Draw a marker',
|
||||
circlemarker: 'Draw a circlemarker'
|
||||
}
|
||||
},
|
||||
handlers: {
|
||||
circle: {
|
||||
tooltip: {
|
||||
start: 'Click and drag to draw circle.'
|
||||
},
|
||||
radius: ''
|
||||
},
|
||||
circlemarker: {
|
||||
tooltip: {
|
||||
start: 'Click map to place circle marker.'
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
tooltip: {
|
||||
start: 'Click map to place marker.'
|
||||
}
|
||||
},
|
||||
polygon: {
|
||||
tooltip: {
|
||||
start: 'Click to start drawing shape.',
|
||||
cont: 'Click to continue drawing shape.',
|
||||
end: 'Click first point to close this shape.'
|
||||
}
|
||||
},
|
||||
polyline: {
|
||||
error: '<strong>Error:</strong> shape edges cannot cross!',
|
||||
tooltip: {
|
||||
start: 'Click to start drawing line.',
|
||||
cont: 'Click to continue drawing line.',
|
||||
end: 'Click last point to finish line.'
|
||||
}
|
||||
},
|
||||
rectangle: {
|
||||
tooltip: {
|
||||
start: 'Click and drag to draw rectangle.'
|
||||
}
|
||||
},
|
||||
simpleshape: {
|
||||
tooltip: {
|
||||
end: 'Release mouse to finish drawing.'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
toolbar: {
|
||||
actions: {
|
||||
save: {
|
||||
title: 'Save changes',
|
||||
text: 'Save'
|
||||
},
|
||||
cancel: {
|
||||
title: 'Cancel editing, discards all changes',
|
||||
text: 'Cancel'
|
||||
},
|
||||
clearAll: {
|
||||
title: 'Clear all layers',
|
||||
text: 'Clear All'
|
||||
}
|
||||
},
|
||||
buttons: {
|
||||
edit: 'Edit layers',
|
||||
editDisabled: 'No layers to edit',
|
||||
remove: 'Delete layers',
|
||||
removeDisabled: 'No layers to delete'
|
||||
}
|
||||
},
|
||||
handlers: {
|
||||
edit: {
|
||||
tooltip: {
|
||||
text: 'Drag handles or markers to edit features.',
|
||||
subtext: 'Click cancel to undo changes.'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
tooltip: {
|
||||
text: 'Click on a feature to remove.'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var mapEvents = function(){
|
||||
map.on('draw:created', function (e) {
|
||||
var type = e.layerType,
|
||||
layer = e.layer;
|
||||
|
||||
writeShape(type);
|
||||
|
||||
switch(type) {
|
||||
case 'polygon':
|
||||
writePolyCoords(layer.getLatLngs());
|
||||
break;
|
||||
case 'circle':
|
||||
writeCircleCoords(layer);
|
||||
break;
|
||||
case 'rectangle':
|
||||
// Saving polycoords for rectangles to make front-end rendering easier
|
||||
writePolyCoords(layer.getLatLngs());
|
||||
break;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
map.on('draw:edited', function(e){
|
||||
var layers = e.layers;
|
||||
var shape = shapeInput.val();
|
||||
layers.eachLayer(function(layer){
|
||||
switch(shape) {
|
||||
case 'polygon':
|
||||
writePolyCoords(layer.getLatLngs());
|
||||
break;
|
||||
case 'circle':
|
||||
writeCircleCoords(layer);
|
||||
break;
|
||||
case 'rectangle':
|
||||
// Saving polycoords for rectangles to make front-end rendering easier
|
||||
writePolyCoords(layer.getLatLngs());
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
map.on('draw:deleted', function(e){
|
||||
leafletInput.val('');
|
||||
});
|
||||
};
|
||||
|
||||
var shapeEvents = function(shape) {
|
||||
shape.on('click', function(){
|
||||
let editButton = document.querySelector('.leaflet-draw-edit-edit');
|
||||
let deleteButton = document.querySelector('.leaflet-draw-edit-remove');
|
||||
let isEditEnabled = editButton.classList.contains('leaflet-draw-toolbar-button-enabled');
|
||||
let isDeleteEnabled = deleteButton.classList.contains('leaflet-draw-toolbar-button-enabled');
|
||||
|
||||
if (!isEditEnabled && !isDeleteEnabled) {
|
||||
editButton.click()
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var writePolyCoords = function(coords) {
|
||||
var inputCoords = new Array();
|
||||
coords[0].map(function(set, index){
|
||||
inputCoords.push(Math.round(set.lng));
|
||||
inputCoords.push($img.data('natH') - Math.round(set.lat));
|
||||
});
|
||||
leafletInput.val(inputCoords);
|
||||
};
|
||||
|
||||
var writeCircleCoords = function(layer) {
|
||||
var inputCoords = new Array();
|
||||
var center = layer.getLatLng();
|
||||
inputCoords.push(Math.round(center.lng));
|
||||
inputCoords.push($img.data('natH') - Math.round(center.lat));
|
||||
inputCoords.push(Math.round(layer.getRadius()));
|
||||
|
||||
leafletInput.val(inputCoords);
|
||||
};
|
||||
|
||||
var writeShape = function(shape) {
|
||||
shapeInput.val(shape);
|
||||
container.addClass('shape-' + shape);
|
||||
}
|
||||
|
||||
var mapToDrawingMode = function(){
|
||||
map.addControl(drawControl);
|
||||
map.removeControl(editControl);
|
||||
};
|
||||
|
||||
var mapToEditMode = function(){
|
||||
map.removeControl(drawControl);
|
||||
map.addControl(editControl);
|
||||
};
|
||||
|
||||
var leafletDrawRemove = function() {
|
||||
if (map) {
|
||||
map.remove();
|
||||
$('.hotspots-drawing-wrapper').remove()
|
||||
map = null;
|
||||
}
|
||||
};
|
||||
|
||||
var drawSpot = function() {
|
||||
var inputVal = leafletInput.val();
|
||||
|
||||
if (!inputVal) {
|
||||
return;
|
||||
}
|
||||
|
||||
mapToEditMode();
|
||||
var coords = leafletInput.val().split(',');
|
||||
var shape = $('#_da_hotspots_' + currentId + '_shape').val();
|
||||
|
||||
switch(shape) {
|
||||
case 'polygon':
|
||||
renderPoly(coords);
|
||||
break;
|
||||
case 'circle':
|
||||
renderCircle(coords);
|
||||
break;
|
||||
case 'rectangle':
|
||||
renderRect(coords);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
var renderPoly = function(coords) {
|
||||
var xCoords = [];
|
||||
var yCoords = [];
|
||||
for (var i = 0; i < coords.length; i++) {
|
||||
if (i % 2 == 0) {
|
||||
xCoords.push(coords[i]);
|
||||
} else {
|
||||
yCoords.push(coords[i]);
|
||||
}
|
||||
}
|
||||
|
||||
var polyCoords = yCoords.map(function(coord, index) {
|
||||
return [$img.data('natH') - coord, xCoords[index]];
|
||||
});
|
||||
|
||||
var poly = L.polygon(polyCoords, {
|
||||
className: 'da-spot',
|
||||
color: leafletOptions.color,
|
||||
weight: leafletOptions.weight,
|
||||
fillOpacity: leafletOptions.fillOpacity
|
||||
});
|
||||
|
||||
drawnItems.addLayer(poly);
|
||||
shapeEvents(poly);
|
||||
};
|
||||
|
||||
var renderRect = function(coords) {
|
||||
var xCoords = [];
|
||||
var yCoords = [];
|
||||
for (var i = 0; i < coords.length; i++) {
|
||||
if (i % 2 == 0) {
|
||||
xCoords.push(coords[i]);
|
||||
} else {
|
||||
yCoords.push(coords[i]);
|
||||
}
|
||||
}
|
||||
|
||||
var polyCoords = yCoords.map(function(coord, index) {
|
||||
return [$img.data('natH') - coord, xCoords[index]];
|
||||
});
|
||||
|
||||
var bounds = [polyCoords[0], polyCoords[2]];
|
||||
|
||||
var rect = L.rectangle(bounds, {
|
||||
className: 'da-spot',
|
||||
color: leafletOptions.color,
|
||||
weight: leafletOptions.weight,
|
||||
fillOpacity: leafletOptions.fillOpacity
|
||||
});
|
||||
|
||||
drawnItems.addLayer(rect);
|
||||
shapeEvents(rect);
|
||||
};
|
||||
|
||||
var renderCircle = function(coords) {
|
||||
var x = coords[0];
|
||||
var y = $img.data('natH') - coords[1];
|
||||
var rad = coords[2];
|
||||
var circle = L.circle([y,x], {
|
||||
radius: rad,
|
||||
color: leafletOptions.color,
|
||||
weight: leafletOptions.weight,
|
||||
fillOpacity: leafletOptions.fillOpacity,
|
||||
showRadius: false
|
||||
})
|
||||
drawnItems.addLayer(circle);
|
||||
shapeEvents(circle);
|
||||
};
|
||||
|
||||
/* Only allow one hotspot editing area to be open at one time. Close them all on page load */
|
||||
var accordion = function() {
|
||||
// When adding a new area, close all others
|
||||
$repeatGroup.on('cmb2_add_row', function(e, $el){
|
||||
let areas = $el.siblings('.cmb-repeatable-grouping').addClass('closed');
|
||||
leafletDrawRemove();
|
||||
container = $el;
|
||||
leafletDrawInit();
|
||||
});
|
||||
|
||||
// When opening an area, close others, init canvas draw
|
||||
$('#field_group').on('click', '.cmb-group-title, .cmbhandle', function(event) {
|
||||
var $this = $(event.target),
|
||||
parent = $this.closest('.cmb-row');
|
||||
|
||||
if (!parent.hasClass('closed')) {
|
||||
var areas = parent.siblings('.cmb-repeatable-grouping').addClass('closed');
|
||||
leafletDrawRemove();
|
||||
container = parent;
|
||||
leafletDrawInit();
|
||||
}
|
||||
});
|
||||
|
||||
// Close all on page load
|
||||
$('.cmb-repeatable-grouping').addClass('closed');
|
||||
};
|
||||
|
||||
/* Events that call hotspotNameUpdate to update the title bar text */
|
||||
var hotspotNames = function(){
|
||||
$('#field_group').on('keyup click', 'input[name$="[title]"]', function(){
|
||||
var $this = $(event.target);
|
||||
hotspotNameUpdate($this);
|
||||
});
|
||||
|
||||
$('input[name$="[title]"]').each(function(){
|
||||
hotspotNameUpdate($(this));
|
||||
});
|
||||
};
|
||||
|
||||
/* Given an input, update the title bar text to match the value */
|
||||
var hotspotNameUpdate = function(input) {
|
||||
var $this = $(input),
|
||||
value = $this.val();
|
||||
|
||||
if (value) {
|
||||
var parent = $this.closest('.cmb-repeatable-grouping'),
|
||||
title = parent.find('.cmb-group-title'),
|
||||
span = title.find('span'),
|
||||
title = (span.length) ? span : title;
|
||||
|
||||
title.text(value);
|
||||
}
|
||||
}
|
||||
|
||||
var layoutSelect = function() {
|
||||
$('input[name="_da_map_layout"]').on('change', function() {
|
||||
showHideEventTriggerMetabox();
|
||||
});
|
||||
}
|
||||
var showHideEventTriggerMetabox = function() {
|
||||
var selectedLayout = $('input[name="_da_map_layout"]:checked').val();
|
||||
if (selectedLayout==='lightbox') {
|
||||
$('#_da_event_trigger').val('click');
|
||||
$('.cmb2-id--da-event-trigger').hide();
|
||||
} else {
|
||||
$('.cmb2-id--da-event-trigger').show();
|
||||
}
|
||||
}
|
||||
|
||||
var executeConditionalLogic = function( area ) {
|
||||
$(area).find('[data-action]').closest('.cmb-row').hide();
|
||||
$(area).find('.wp-editor-wrap').closest('.cmb-row').hide();
|
||||
|
||||
var selectedAction = $(area).find('.cmb2_select.action').val();
|
||||
if ( !selectedAction ) {
|
||||
$(area).find('[data-action="more-info"]').closest('.cmb-row').show();
|
||||
$(area).find('.wp-editor-wrap').closest('.cmb-row').show();
|
||||
} else {
|
||||
$(area).find('[data-action="'+selectedAction+'"]').closest('.cmb-row').show();
|
||||
}
|
||||
}
|
||||
|
||||
var hotspotActions = function() {
|
||||
$('.cmb2-wrap .cmb-repeatable-grouping').each(function() {
|
||||
executeConditionalLogic(this);
|
||||
});
|
||||
$('.cmb2-wrap').on('change', '.cmb2_select.action', function() {
|
||||
var area = $(this).closest('.cmb-repeatable-grouping');
|
||||
executeConditionalLogic(area);
|
||||
});
|
||||
}
|
||||
|
||||
/* Select a new color scheme to be applied to the current Draw Attention */
|
||||
var themeSelect = function() {
|
||||
$('#da-theme-pack-select').on('change', function() {
|
||||
var confirmed = confirm('Applying a new theme will overwrite the current styling you have selected');
|
||||
if ( confirmed ) {
|
||||
themeApply($(this).val());
|
||||
} else {
|
||||
$('#da-theme-pack-select').val('');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* Apply the selected theme */
|
||||
var themeApply = function(themeSlug) {
|
||||
var themeProperties = Object.keys(daThemes.themes[themeSlug].values);
|
||||
$.each( themeProperties, function() {
|
||||
var cfName = this;
|
||||
$('input[name="'+daThemes.cfPrefix+cfName+'"]').val(daThemes.themes[themeSlug].values[cfName]).trigger('change');
|
||||
} );
|
||||
}
|
||||
|
||||
/* Fix weird opacity value bug */
|
||||
var opacityLabelSync = function() {
|
||||
$('.cmb-type-opacity input').on('change', function() {
|
||||
var displayedValue = ($(this).val()-0.01)*100;
|
||||
displayedValue = displayedValue.toFixed(0);
|
||||
$(this).parent().find('.opacity-percentage-value').html(displayedValue);
|
||||
});
|
||||
}
|
||||
|
||||
var hideNotice = function() {
|
||||
$('.da-disable-third-party-js').hide();
|
||||
};
|
||||
|
||||
var sortHotspots = function() {
|
||||
var hotspots = $('#_da_hotspots_repeat');
|
||||
if (hotspots.length) {
|
||||
hotspots.sortable({
|
||||
items: '.cmb-repeatable-grouping',
|
||||
handle: '.cmbhandle-title'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var alwaysVisible = function(){
|
||||
var checkbox = $('#_da_always_visible');
|
||||
toggleVisible();
|
||||
checkbox.on('change', toggleVisible);
|
||||
|
||||
function toggleVisible(){
|
||||
var highlightStyles = $('#cmb2-metabox-highlight_styling_metabox'),
|
||||
multiStyles = $('#cmb2-metabox-styles');
|
||||
if (checkbox.is(':checked')) {
|
||||
highlightStyles.addClass('always-visible');
|
||||
multiStyles.addClass('always-visible');
|
||||
} else {
|
||||
highlightStyles.removeClass('always-visible');
|
||||
multiStyles.removeClass('always-visible');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var multiStyles = function(){
|
||||
var checkbox = $('#_da_has_multiple_styles');
|
||||
toggleStyles();
|
||||
checkbox.on('change', toggleStyles);
|
||||
|
||||
function toggleStyles(){
|
||||
var styles = $('#styles'),
|
||||
hotspots = $('#field_group'),
|
||||
styleSelects = hotspots.find('select[id$="_style"]'),
|
||||
styleSelectContainers = styleSelects.parents('.cmb-repeat-group-field');
|
||||
if (checkbox.is(':checked')) {
|
||||
styles.show();
|
||||
styleSelectContainers.show();
|
||||
} else {
|
||||
styles.hide();
|
||||
styleSelectContainers.hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var multiThemeSelect = function(){
|
||||
var colorSchemeContainer = $('#styles'),
|
||||
colorSchemes = colorSchemeContainer.find('.cmb-repeatable-grouping'),
|
||||
colorSchemeSelect = $('#da-theme-pack-select');
|
||||
|
||||
colorSchemes.each(function(){
|
||||
var colorScheme = $(this),
|
||||
newColorSchemeSelect = colorScheme.find('select');
|
||||
|
||||
if (!newColorSchemeSelect.length) {
|
||||
var iterator = colorScheme.data('iterator');
|
||||
newColorSchemeSelect = colorSchemeSelect.clone().attr('id', 'colorScheme-' + iterator);
|
||||
|
||||
var colorTitle = colorScheme.find('.cmb2-id--da-styles-' + iterator + '-title'),
|
||||
wrapper = $('<div></div>', {
|
||||
'class': 'cmb-row cmb-type-select premade-color-schemes'
|
||||
}),
|
||||
schemeHeader = $('<div></div>', {
|
||||
'class': 'cmb-th',
|
||||
'html': '<label for="colorScheme-' + iterator + '">Color Scheme</label>'
|
||||
}).appendTo(wrapper),
|
||||
schemeBody = $('<div></div>',{
|
||||
'class': 'cmb-td',
|
||||
'html': '<p class="cmb2-metabox-description">Quickly apply a color scheme to this style (you can adjust each color afterwards)</p>'
|
||||
}).appendTo(wrapper);
|
||||
|
||||
schemeBody.prepend(newColorSchemeSelect);
|
||||
colorTitle.after(wrapper);
|
||||
}
|
||||
|
||||
newColorSchemeSelect.on('change', function(){
|
||||
var confirmed = confirm('Applying a new theme will overwite the current styling you have selected for this hotspot style');
|
||||
if (confirmed) {
|
||||
multiThemeApply(colorScheme, $(this));
|
||||
} else {
|
||||
$(this).val('');
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var multiThemeApply = function(colorScheme, select) {
|
||||
var themeSlug = select.val(),
|
||||
themeProperties = Object.keys(daThemes.themes[themeSlug].values);
|
||||
$.each( themeProperties, function(){
|
||||
var cfName = this;
|
||||
var input = colorScheme.find('input[id$="' + cfName + '"]');
|
||||
input.val(daThemes.themes[themeSlug].values[cfName]).trigger('change');
|
||||
});
|
||||
};
|
||||
|
||||
var styleCloning = function(){
|
||||
var repeatGroup = $('#styles .cmb-repeatable-group');
|
||||
repeatGroup.on('cmb2_add_row', function(){
|
||||
multiThemeSelect();
|
||||
});
|
||||
};
|
||||
|
||||
var removeRowReset = function(){
|
||||
// Stop CMB2 from renaming all the areas
|
||||
$metabox.off( 'cmb2_remove_row', '.cmb-repeatable-group', cmb.resetTitlesAndIterator )
|
||||
};
|
||||
|
||||
/* Stuff to fire off on page load */
|
||||
hotspotAdmin.init = function() {
|
||||
removeRowReset();
|
||||
accordion();
|
||||
layoutSelect();
|
||||
showHideEventTriggerMetabox();
|
||||
hotspotNames();
|
||||
hotspotActions();
|
||||
themeSelect();
|
||||
opacityLabelSync();
|
||||
hideNotice();
|
||||
sortHotspots();
|
||||
alwaysVisible();
|
||||
multiStyles();
|
||||
multiThemeSelect();
|
||||
styleCloning();
|
||||
}
|
||||
})(jQuery, window.hotspotAdmin = window.hotspotAdmin || {}, window.CMB2);
|
||||
|
||||
jQuery(document).on('cmb_init', function(){
|
||||
hotspotAdmin.init();
|
||||
});
|
||||
|
||||
jQuery(window).on('resize orientationchange', function(e) {
|
||||
hotspotAdmin.reRender();
|
||||
});
|
||||
@@ -0,0 +1,106 @@
|
||||
export default {
|
||||
draw: {
|
||||
toolbar: {
|
||||
actions: {
|
||||
title: 'Cancel drawing',
|
||||
text: 'Cancel'
|
||||
},
|
||||
finish: {
|
||||
title: 'Finish drawing',
|
||||
text: 'Finish'
|
||||
},
|
||||
undo: {
|
||||
title: 'Delete last point drawn',
|
||||
text: 'Delete last point'
|
||||
},
|
||||
buttons: {
|
||||
polyline: 'Draw a polyline',
|
||||
polygon: 'Draw a polygon',
|
||||
rectangle: 'Draw a rectangle',
|
||||
circle: 'Draw a circle',
|
||||
marker: 'Draw a marker',
|
||||
circlemarker: 'Draw a circlemarker'
|
||||
}
|
||||
},
|
||||
handlers: {
|
||||
circle: {
|
||||
tooltip: {
|
||||
start: 'Click and drag to draw circle.'
|
||||
},
|
||||
radius: 'Radius'
|
||||
},
|
||||
circlemarker: {
|
||||
tooltip: {
|
||||
start: 'Click map to place circle marker.'
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
tooltip: {
|
||||
start: 'Click map to place marker.'
|
||||
}
|
||||
},
|
||||
polygon: {
|
||||
tooltip: {
|
||||
start: 'Click to start drawing shape.',
|
||||
cont: 'Click to continue drawing shape.',
|
||||
end: 'Click first point to close this shape.'
|
||||
}
|
||||
},
|
||||
polyline: {
|
||||
error: '<strong>Error:</strong> shape edges cannot cross!',
|
||||
tooltip: {
|
||||
start: 'Click to start drawing line.',
|
||||
cont: 'Click to continue drawing line.',
|
||||
end: 'Click last point to finish line.'
|
||||
}
|
||||
},
|
||||
rectangle: {
|
||||
tooltip: {
|
||||
start: 'Click and drag to draw rectangle.'
|
||||
}
|
||||
},
|
||||
simpleshape: {
|
||||
tooltip: {
|
||||
end: 'Release mouse to finish drawing.'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
toolbar: {
|
||||
actions: {
|
||||
save: {
|
||||
title: 'Save changes',
|
||||
text: 'Save'
|
||||
},
|
||||
cancel: {
|
||||
title: 'Cancel editing, discard all changes',
|
||||
text: 'Cancel'
|
||||
},
|
||||
clearAll: {
|
||||
title: 'Clear',
|
||||
text: 'Clear'
|
||||
}
|
||||
},
|
||||
buttons: {
|
||||
edit: 'Edit layers',
|
||||
editDisabled: 'No layers to edit',
|
||||
remove: 'Delete layers',
|
||||
removeDisabled: 'No layers to delete'
|
||||
}
|
||||
},
|
||||
handlers: {
|
||||
edit: {
|
||||
tooltip: {
|
||||
text: 'Drag handles to edit features.',
|
||||
subtext: 'Click cancel to undo changes.'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
tooltip: {
|
||||
text: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
(function(blocks, element, serverSideRender, blockEditor, components)
|
||||
{
|
||||
var el = element.createElement,
|
||||
registerBlockType = blocks.registerBlockType,
|
||||
ServerSideRender = serverSideRender,
|
||||
SelectControl = components.SelectControl,
|
||||
InspectorControls = blockEditor.InspectorControls,
|
||||
useBlockProps = blockEditor.useBlockProps;
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
registerBlockType( 'draw-attention/image', {
|
||||
apiVersion: 2,
|
||||
title: 'Draw Attention',
|
||||
icon: 'images-alt2',
|
||||
category: 'widgets',
|
||||
|
||||
edit: function( props ) {
|
||||
var blockProps = useBlockProps();
|
||||
|
||||
var options = [];
|
||||
Object.keys(drawAttentionImages).forEach(function(key) {
|
||||
options.push({
|
||||
value: key,
|
||||
label: drawAttentionImages[key]
|
||||
})
|
||||
})
|
||||
|
||||
var renderedImageBlock = el(
|
||||
'div',
|
||||
blockProps,
|
||||
el(ServerSideRender, {
|
||||
block: 'draw-attention/image',
|
||||
attributes: props.attributes,
|
||||
})
|
||||
)
|
||||
|
||||
var renderedBlockSettings = el( InspectorControls, {},
|
||||
el( wp.components.PanelBody, {},
|
||||
el( SelectControl, {
|
||||
label: __('Select an Image', 'draw-attention'),
|
||||
value: props.attributes.id,
|
||||
options: options,
|
||||
onChange: ( value ) => { props.setAttributes( {id: value } ); },
|
||||
} )
|
||||
)
|
||||
)
|
||||
|
||||
return [
|
||||
renderedImageBlock,
|
||||
renderedBlockSettings
|
||||
]
|
||||
},
|
||||
} );
|
||||
})(
|
||||
window.wp.blocks,
|
||||
window.wp.element,
|
||||
window.wp.serverSideRender,
|
||||
window.wp.blockEditor,
|
||||
window.wp.components,
|
||||
window.wp.i18n
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
<?php // Silence is golden
|
||||
3
wp-content/plugins/draw-attention-pro/admin/assets/js/leaflet.draw-min.js
vendored
Normal file
3
wp-content/plugins/draw-attention-pro/admin/assets/js/leaflet.draw-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
wp-content/plugins/draw-attention-pro/admin/assets/js/min/admin-min.js
vendored
Normal file
1
wp-content/plugins/draw-attention-pro/admin/assets/js/min/admin-min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
!function($){"use strict";$(function(){$(".hotspot-area-form-container input[type='submit'").on("click",function(t){t.preventDefault();var n=$(this).parent().find(":input").serializeArray();n.push({name:"action",value:"hotspot_update_custom_fields"});var a=$.ajax({type:"POST",url:hotspotAdminVars.ajaxURL,data:n}).done(function(){}).fail(function(){})})})}(jQuery);
|
||||
@@ -0,0 +1,19 @@
|
||||
.hotspots-drawing-wrapper {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
|
||||
& > img {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hotspots-drawing-container {
|
||||
background: #f7fafb;
|
||||
border: 1px solid #ecf1f6;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
|
||||
|
||||
.leaflet-draw-section {
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-draw-toolbar {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.leaflet-draw-toolbar-top {
|
||||
margin-top: 0;
|
||||
}
|
||||
.leaflet-draw-toolbar-notop a:first-child {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.leaflet-draw-toolbar-nobottom a:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.leaflet-draw-toolbar a {
|
||||
background-clip: padding-box;
|
||||
background-image: linear-gradient(transparent,transparent),url('images/spritesheet.svg');
|
||||
background-image: url('images/spritesheet.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 300px 30px;
|
||||
}
|
||||
.leaflet-retina .leaflet-draw-toolbar a {
|
||||
background-image: linear-gradient(transparent,transparent),url('images/spritesheet.svg');
|
||||
background-image: url('images/spritesheet-2x.png');
|
||||
}
|
||||
.leaflet-draw a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-draw a .sr-only {
|
||||
border: 0;
|
||||
clip: rect(0,0,0,0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
.leaflet-draw-actions {
|
||||
display: none;
|
||||
left: 26px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-actions {
|
||||
left: 32px;
|
||||
}
|
||||
.leaflet-right .leaflet-draw-actions {
|
||||
left: auto;
|
||||
right: 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-right .leaflet-draw-actions {
|
||||
left: auto;
|
||||
right: 32px;
|
||||
}
|
||||
.leaflet-draw-actions li {
|
||||
display: inline-block;
|
||||
}
|
||||
.leaflet-draw-actions li:first-child a {
|
||||
border-left: 0;
|
||||
}
|
||||
.leaflet-draw-actions li:last-child a {
|
||||
border-radius: 0 4px 4px 0;
|
||||
webkit-border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.leaflet-right .leaflet-draw-actions li:last-child a {
|
||||
border-radius: 0;
|
||||
webkit-border-radius: 0;
|
||||
}
|
||||
.leaflet-right .leaflet-draw-actions li:first-child a {
|
||||
border-radius: 4px 0 0 4px;
|
||||
webkit-border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.leaflet-draw-actions a {
|
||||
background-color: #919187;
|
||||
border-left: 1px solid #AAA;
|
||||
color: #FFF;
|
||||
font: 11px/19px "Helvetica Neue",Arial,Helvetica,sans-serif;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-actions a {
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-draw-actions-bottom {
|
||||
margin-top: 0;
|
||||
}
|
||||
.leaflet-draw-actions-top {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.leaflet-draw-actions-top a,.leaflet-draw-actions-bottom a {
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
}
|
||||
.leaflet-draw-actions a:hover {
|
||||
background-color: #a0a098;
|
||||
}
|
||||
.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
|
||||
background-position: -2px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline {
|
||||
background-position: 0 -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
|
||||
background-position: -31px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
|
||||
background-position: -29px -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
|
||||
background-position: -62px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
|
||||
background-position: -60px -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-circle {
|
||||
background-position: -92px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
|
||||
background-position: -90px -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-marker {
|
||||
background-position: -122px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker {
|
||||
background-position: -120px -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
|
||||
background-position: -273px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
|
||||
background-position: -271px -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-edit-edit {
|
||||
background-position: -152px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit {
|
||||
background-position: -150px -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-edit-remove {
|
||||
background-position: -182px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove {
|
||||
background-position: -180px -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
|
||||
background-position: -212px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
|
||||
background-position: -210px -1px;
|
||||
}
|
||||
.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
|
||||
background-position: -242px -2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
|
||||
background-position: -240px -2px;
|
||||
}
|
||||
.leaflet-mouse-marker {
|
||||
background-color: #fff;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-draw-tooltip {
|
||||
background: #363636;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font: 12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif;
|
||||
margin-left: 20px;
|
||||
margin-top: -21px;
|
||||
padding: 4px 8px;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
webkit-border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
z-index: 6;
|
||||
}
|
||||
.leaflet-draw-tooltip:before {
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 6px solid black;
|
||||
border-right-color: rgba(0,0,0,0.5);
|
||||
border-top: 6px solid transparent;
|
||||
content: "";
|
||||
left: -7px;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
}
|
||||
.leaflet-error-draw-tooltip {
|
||||
background-color: #f2dede;
|
||||
border: 1px solid #e6b6bd;
|
||||
color: #b94a48;
|
||||
}
|
||||
.leaflet-error-draw-tooltip:before {
|
||||
border-right-color: #e6b6bd;
|
||||
}
|
||||
.leaflet-draw-tooltip-single {
|
||||
margin-top: -12px;
|
||||
}
|
||||
.leaflet-draw-tooltip-subtext {
|
||||
color: #f8d5e4;
|
||||
}
|
||||
.leaflet-draw-guide-dash {
|
||||
font-size: 1%;
|
||||
height: 5px;
|
||||
opacity: .6;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
}
|
||||
.leaflet-edit-marker-selected {
|
||||
background-color: rgba(254,87,161,0.1);
|
||||
border: 4px dashed rgba(254,87,161,0.6);
|
||||
border-radius: 4px;
|
||||
box-sizing: content-box;
|
||||
webkit-border-radius: 4px;
|
||||
}
|
||||
.leaflet-edit-move {
|
||||
cursor: move;
|
||||
}
|
||||
.leaflet-edit-resize {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-oldie .leaflet-draw-toolbar {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
/* Customizations */
|
||||
|
||||
.leaflet-draw-actions {
|
||||
// Save and cancel buttons on the edit toggle
|
||||
&.leaflet-draw-actions-top {
|
||||
// Save button
|
||||
li:first-child {
|
||||
a {
|
||||
background-color: #3ca2a2;
|
||||
border: 1px solid #215a6d;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-draw-actions.leaflet-draw-actions-bottom {
|
||||
li:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.shape-circle {
|
||||
.leaflet-draw-tooltip {
|
||||
.leaflet-draw-tooltip-subtext {
|
||||
display: none;
|
||||
|
||||
& + br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-bar {
|
||||
.leaflet-draw-toolbar-button-enabled {
|
||||
background-color: #dfece6;
|
||||
outline: 2px solid #C5E0D0;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: #C5E0D0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,652 @@
|
||||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Prevents IE11 from highlighting tiles in blue */
|
||||
.leaflet-tile::selection {
|
||||
background: transparent;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer,
|
||||
.leaflet-container .leaflet-tile {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
/* Fallback for FF which doesn't support pinch-zoom */
|
||||
touch-action: none;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-container {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.leaflet-container a {
|
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
will-change: opacity;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive,
|
||||
svg.leaflet-image-layer.leaflet-interactive path {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path {
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
margin: -10px auto 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #ff1414;
|
||||
|
||||
&.leaflet-editing-icon {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&::after {
|
||||
background: white;
|
||||
border: 1px solid #5d5d5d;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 8px;
|
||||
left: 50%;
|
||||
outline: 1px solid #cf0000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.leaflet-middle-icon {
|
||||
&::after {
|
||||
background: #5d5d5d;
|
||||
background-clip: padding-box;
|
||||
border: 2px white dotted;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,400 @@
|
||||
/* This stylesheet is used to style the admin option form of the plugin. */
|
||||
|
||||
@use 'sass:math';
|
||||
|
||||
@mixin bp($point) {
|
||||
@if $point == m {
|
||||
@media screen and (min-width: 600px) { @content; }
|
||||
}
|
||||
@else if $point == wp {
|
||||
@media screen and (min-width: 851px) { @content; }
|
||||
}
|
||||
@else if $point == l {
|
||||
@media screen and (min-width: 1144px) { @content; }
|
||||
}
|
||||
@else if #point == xl {
|
||||
@media screen and (min-width: 1280px) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the post slug editor */
|
||||
.post-type-hotspot #edit-slug-box,
|
||||
.post-type-hotspot #slugdiv,
|
||||
.post-type-hotspot #screen-meta label[for=slugdiv-hide] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide the coordinates input */
|
||||
input[name$='[coordinates]'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide the shape input */
|
||||
.cmb-row.cmb-type-text {
|
||||
&[class*='shape'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#cmb2-metabox-moreinfo_metabox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1rem 0;
|
||||
@include bp(m) {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
.cmb-row.cmb-type-colorpicker {
|
||||
border-bottom: 0 none;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
width: 50%;
|
||||
}
|
||||
@include bp(l) {
|
||||
width: 25%;
|
||||
}
|
||||
.cmb-th {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-bottom: 0 none;
|
||||
float: none;
|
||||
line-height: normal;
|
||||
padding: 0.5rem;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
}
|
||||
.cmb-td {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-top: 0 none;
|
||||
flex: 1;
|
||||
float: none;
|
||||
padding: 0 0.5rem 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.cmb-row.cmb-type-textarea-small {
|
||||
border-bottom: 0 none;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.cmb-th {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-bottom: 0 none;
|
||||
float: none;
|
||||
line-height: normal;
|
||||
padding: 0.5rem;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
}
|
||||
.cmb-td {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-top: 0 none;
|
||||
float: none;
|
||||
padding: 0 0.5rem 0.5rem;
|
||||
width: auto;
|
||||
textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cmb2-metabox-highlight_styling_metabox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1rem 0;
|
||||
@include bp(m) {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
.cmb-row {
|
||||
&.cmb-type-colorpicker,
|
||||
&.cmb-type-opacity,
|
||||
&.cmb-type-text-number {
|
||||
border-bottom: 0 none;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.cmb-th {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-bottom: 0 none;
|
||||
float: none;
|
||||
line-height: normal;
|
||||
padding: 0.5rem;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
}
|
||||
.cmb-td {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-top: 0 none;
|
||||
flex: 1;
|
||||
float: none;
|
||||
padding: 0 0.5rem 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.cmb-type-checkbox {
|
||||
border-bottom: 0 none;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.cmb-th {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-bottom: 0 none;
|
||||
float: none;
|
||||
line-height: normal;
|
||||
padding: 0.5rem;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
}
|
||||
.cmb-td {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-top: 0 none;
|
||||
flex: 1;
|
||||
float: none;
|
||||
padding: 0 0.5rem 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.cmb2-id--da-map-highlight-color,
|
||||
&.cmb2-id--da-map-highlight-opacity,
|
||||
&.cmb2-id--da-map-hover-color,
|
||||
&.cmb2-id--da-map-hover-opacity {
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
&.cmb2-id--da-map-border-color,
|
||||
&.cmb2-id--da-map-border-opacity {
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
width: 36%;
|
||||
}
|
||||
}
|
||||
&.cmb2-id--da-map-border-width {
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
width: 28%;
|
||||
}
|
||||
input.cmb2-text-small {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cmb-row.cmb2-id--da-map-hover-color,
|
||||
.cmb-row.cmb2-id--da-map-hover-opacity {
|
||||
display: none;
|
||||
}
|
||||
&.always-visible {
|
||||
.cmb-row.cmb2-id--da-map-hover-color,
|
||||
.cmb-row.cmb2-id--da-map-hover-opacity {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cmb2-metabox-styles {
|
||||
.cmb-nested .cmb-nested {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1rem 0;
|
||||
@include bp(m) {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
.cmb-row {
|
||||
border-bottom: 0 none;
|
||||
margin: 0 0 0.5rem 0;
|
||||
padding: 0;
|
||||
&.cmb-type-text {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
width: (math.div(100%, 3) * 2);
|
||||
}
|
||||
input[type='text'] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.cmb-type-select {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
width: (math.div(100%, 3));
|
||||
}
|
||||
}
|
||||
&[class*='map-highlight-color'],
|
||||
&[class*='map-highlight-opacity'],
|
||||
&[class*='map-border-color'] {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
width: (math.div(100%, 3));
|
||||
}
|
||||
}
|
||||
&[class*='map-hover-color'],
|
||||
&[class*='map-hover-opacity'] {
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
width: (50%);
|
||||
}
|
||||
}
|
||||
&.cmb-remove-field-row {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
@include bp(m) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
.cmb-th {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-bottom: 0 none;
|
||||
float: none;
|
||||
line-height: normal;
|
||||
padding: 0.5rem;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
}
|
||||
.cmb-td {
|
||||
border: 1px solid #e9e9e9;
|
||||
border-top: 0 none;
|
||||
flex: 1;
|
||||
float: none;
|
||||
padding: 0 0.5rem 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cmb-row[class*='map-hover-color'],
|
||||
.cmb-row[class*='map-hover-opacity'] {
|
||||
display: none;
|
||||
}
|
||||
&.always-visible {
|
||||
.cmb-row[class*='map-hover-color'],
|
||||
.cmb-row[class*='map-hover-opacity'] {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.cmb-nested .closed .cmb-nested {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#cmb2-metabox-field_group {
|
||||
.cmb-repeat-group-wrap {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cmb2-wrap .wp-picker-container {
|
||||
.wp-color-result {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wp-picker-input-wrap {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.wp-picker-holder {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
input:not([type=hidden])+.button, .cmb2-wrap input:not([type=hidden])+input {
|
||||
font-size: 12px;
|
||||
margin: 1px 0 0 0;
|
||||
padding: 3px 12px;
|
||||
@include bp(wp) {
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
margin: 0 0 0 0.5rem;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#field_group {
|
||||
.cmb-row[class*='coordinates'] {
|
||||
.cmb-td {
|
||||
// overflow: auto;
|
||||
// padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background: #cfe2ff;
|
||||
border: 1px solid #b6d4fe;
|
||||
border-radius: 0.25rem;
|
||||
color: #084298;
|
||||
display: inline-block;
|
||||
margin: 1em 0 0 0;
|
||||
padding: 0.5em 1em;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
color: #06357a;
|
||||
}
|
||||
|
||||
&.status-yellow {
|
||||
background: #fff3cd;
|
||||
border-color: #ffecb5;
|
||||
color: #664d03;
|
||||
|
||||
a {
|
||||
color: #523e02;
|
||||
}
|
||||
}
|
||||
|
||||
&.status-green {
|
||||
background: #d1e7dd;
|
||||
border-color: #badbcc;
|
||||
color: #0f5132;
|
||||
|
||||
a {
|
||||
color: #0c4128;
|
||||
}
|
||||
}
|
||||
|
||||
&.status-red {
|
||||
background: #f8d7da;
|
||||
border-color: #f5c2c7;
|
||||
color: #842029;
|
||||
|
||||
a {
|
||||
color: #6a1a21;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@import 'leaflet';
|
||||
@import 'leaflet-draw';
|
||||
@import 'da-leaflet';
|
||||
Reference in New Issue
Block a user