1168 lines
52 KiB
JavaScript
1168 lines
52 KiB
JavaScript
/*
|
|
* jQuery Plugin: JQuery GoogleMaps
|
|
* https://github.com/dejanstojanovic/JQuery-GoogleMaps
|
|
* Version 2.2.4
|
|
*
|
|
* Copyright (c) 2014 Dejan Stojanovic (http://dejanstojanovic.net)
|
|
*
|
|
* Released under the MIT license
|
|
*/
|
|
|
|
$.fn.GoogleMapEditor = function (options) {
|
|
var defaults = {
|
|
editMode: true, /* Allow editiong on the map */
|
|
editTemplatesPath: "../src/html/", /* Editor layouts html files location */
|
|
markerPinsPath: "../src/img/pin/", /* Custom marker icons path */
|
|
markerPinFiles: ["flag-azure.png", /* List of files to be available from custom marker icons path */
|
|
"flag-green.png",
|
|
"needle-pink.png",
|
|
"niddle-green.png",
|
|
"pin-azure.png",
|
|
"pin-green.png",
|
|
"pin-pink.png"],
|
|
drawingBorderColor: "#ff0000", /* Default border drawing color when drawing is initiated */
|
|
drawingBorderWidth: 2, /* Default border drawing width when drawing is initiated */
|
|
drawingFillColor: "#ffff00", /* Default fill drawing color when drawing is initiated */
|
|
zoom: 13, /* Default map zoom if not defined when initiating */
|
|
center: { /* Default map center */
|
|
latitude: 25.0417,
|
|
longitude: 55.2194
|
|
},
|
|
width: 800, /* Map width. If not set then container width will be used*/
|
|
height: 400, /* Map height. If not set then container height will be used*/
|
|
language: "en", /* List of supported languages https://spreadsheets.google.com/spreadsheet/pub?key=0Ah0xU81penP1cDlwZHdzYWkyaERNc0xrWHNvTTA1S1E&gid=1 */
|
|
singleLocation: false, /* Allow only one location present on the map */
|
|
searchBox: true, /* Add search box to the map */
|
|
richtextEditor: true, /* Use TinyMce editor for location messages */
|
|
drawingTools: ["marker", /* Tools to be availale for editing */
|
|
"polyline",
|
|
"polygon",
|
|
"circle",
|
|
"rectangle"],
|
|
zoomControl: true, /* Show zoom control */
|
|
panControl: true, /* Show pan control */
|
|
scaleControl: true, /* Show scale on the map */
|
|
streetViewControl: true, /* Show street view control */
|
|
scrollWheel: false, /* Use mouse wheel to zoom in and zoom out*/
|
|
style: null, /* Build custom syles at http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html */
|
|
stylesPath: "../src/styles.json", /* Url of JSON file with map styles definitions. Enpowered by snazzymaps.com */
|
|
locations: [], /* Locations to be loaded with the map */
|
|
dataChange: null, /* Event raised when anything on the map changed */
|
|
locationClick: null, /* Event raised when a location on the map is clicked */
|
|
locationNew: null, /* Event raised when new location is added on the map */
|
|
locationDelete: null, /* Event raised when location is deleted from the map */
|
|
locationMove: null /* Event reaised when location is moved on the map to a different position */
|
|
}
|
|
var settings = $.extend({}, defaults, options);
|
|
var tinyMceUrl = "//tinymce.cachefly.net/4.0/tinymce.min.js";
|
|
var mapApiUrl = "//maps.googleapis.com/maps/api/js?sensor=false&callback=mapApiLoaded&libraries=drawing,places";
|
|
|
|
if (settings.language != "") {
|
|
mapApiUrl += "&language=" + settings.language;
|
|
}
|
|
|
|
var popupTemplateCircle = null;
|
|
var popupTemplateRectangle = null;
|
|
var popupTemplateMarker = null;
|
|
var popupTemplatePolyline = null;
|
|
var popupTemplatePolygon = null;
|
|
var selector = $(this);
|
|
|
|
if ((typeof google !== "undefined" && google !== null ? google.maps : void 0) == null) {
|
|
$.getScript(mapApiUrl);
|
|
window.mapApiLoaded = function () {
|
|
selector.each(function (index) {
|
|
var container = selector.get(index);
|
|
|
|
if (settings.width == defaults.width) {
|
|
if ($(container).width() <= 0) {
|
|
$(container).width(defaults.width);
|
|
}
|
|
}
|
|
else {
|
|
$(container).width(settings.width);
|
|
}
|
|
|
|
if (settings.height == defaults.height) {
|
|
if ($(container).height() <= 0) {
|
|
$(container).height(defaults.height);
|
|
}
|
|
}
|
|
else {
|
|
$(container).height(settings.height);
|
|
}
|
|
|
|
initializeGoogleMapEditor(container);
|
|
});
|
|
};
|
|
}
|
|
else {
|
|
selector.each(function (index) {
|
|
var container = selector.get(index);
|
|
initializeGoogleMapEditor(container);
|
|
});
|
|
}
|
|
|
|
function addSearchBox(map) {
|
|
var inputId = "q" + map.id;
|
|
$(map.container).parent().prepend("<input id=\"" + inputId + "\" style=\"margin-top:4px\" type=\"text\" placeholder=\"Search Box\" />");
|
|
var input = document.getElementById(inputId);
|
|
if (input != null) {
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(input);
|
|
var searchBox = new google.maps.places.SearchBox(input);
|
|
google.maps.event.addListener(searchBox, 'places_changed', function () {
|
|
var places = searchBox.getPlaces();
|
|
var bounds = new google.maps.LatLngBounds();
|
|
for (var i = 0, place; place = places[i]; i++) {
|
|
bounds.extend(place.geometry.location);
|
|
}
|
|
map.fitBounds(bounds);
|
|
map.setZoom(15);
|
|
});
|
|
google.maps.event.addListener(map, 'bounds_changed', function () {
|
|
var bounds = map.getBounds();
|
|
searchBox.setBounds(bounds);
|
|
});
|
|
}
|
|
}
|
|
|
|
function addStylesList(map) {
|
|
if (settings.editMode) {
|
|
var selectId = "s" + map.id;
|
|
$(map.container).parent().prepend("<select id=\"" + selectId + "\" class=\"map-style\" />");
|
|
var select = document.getElementById(selectId);
|
|
$(select).append($('<option>', {
|
|
value: JSON.stringify([]),
|
|
text: "GoogleMaps Default"
|
|
}));
|
|
$.getJSON(settings.stylesPath, function (data) {
|
|
$(data).each(function (index, item) {
|
|
$(select).append($('<option>', {
|
|
value: item.json,
|
|
text: item.name
|
|
}));
|
|
});
|
|
});
|
|
if (select != null) {
|
|
map.controls[google.maps.ControlPosition.TOP_LEFT].push(select);
|
|
$(select).change(function () {
|
|
map.setOptions({ mapTypeId: "Styled" });
|
|
var styledMapType = new google.maps.StyledMapType(
|
|
eval($(this).val())
|
|
, { name: 'Styled' });
|
|
map.mapTypes.set('Styled', styledMapType);
|
|
settings.style = eval($(this).val());
|
|
saveToJson(map);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function addFitBoundsButton(map) {
|
|
var inputId = "c" + map.id;
|
|
$(map.container).parent().prepend("<input id=\"" + inputId + "\" class=\"fit-bound\" type=\"button\" title=\"Fit bounds\" />");
|
|
var input = document.getElementById(inputId);
|
|
if (input != null) {
|
|
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
|
|
$(input).click(function () {
|
|
var bounds = getMapLocationsBounds(map);
|
|
if (bounds != null) {
|
|
map.fitBounds(bounds);
|
|
saveToJson(map);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function addCurrentLocationButton(map) {
|
|
var inputId = "l" + map.id;
|
|
$(map.container).parent().prepend("<input id=\"" + inputId + "\" class=\"current-location\" type=\"button\" title=\"My Location\" />");
|
|
var input = document.getElementById(inputId);
|
|
if (input != null) {
|
|
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
|
|
$(input).click(function () {
|
|
if (navigator.geolocation) {
|
|
var mapOverlay = $(map.container).next();
|
|
mapOverlay.width($(map.container).width());
|
|
mapOverlay.height($(map.container).height());
|
|
mapOverlay.offset({ top: $(map.container).offset().top, left: $(map.container).offset().left })
|
|
mapOverlay.fadeIn("slow");
|
|
navigator.geolocation.getCurrentPosition(function (position) {
|
|
mapOverlay.fadeOut("fast");
|
|
|
|
if (settings.editMode) {
|
|
var myLocation = new Location([new Coordinate(position.coords.latitude, position.coords.longitude)], google.maps.drawing.OverlayType.MARKER, "", "", "", "", "", "");
|
|
initMapObject(map, myLocation);
|
|
map.locations.push(myLocation);
|
|
var locationBounds = new google.maps.LatLngBounds(
|
|
new google.maps.LatLng(myLocation.Coordinates[0].Latitude, myLocation.Coordinates[0].Longitude));
|
|
map.fitBounds(locationBounds);
|
|
map.setZoom(15);
|
|
new google.maps.event.trigger(myLocation.Overlay, 'click');
|
|
saveToJson(map);
|
|
}
|
|
else {
|
|
var locationBounds = new google.maps.LatLngBounds(
|
|
new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
|
|
map.fitBounds(locationBounds);
|
|
map.setZoom(15);
|
|
}
|
|
|
|
}, function (errmsg) {
|
|
alert("Unable to fetch your current location!\n" + errmsg);
|
|
mapOverlay.fadeOut("fast");
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function arePopupTemplatesLoaded() {
|
|
if (
|
|
popupTemplateCircle != null &&
|
|
popupTemplateRectangle != null &&
|
|
popupTemplateMarker != null &&
|
|
popupTemplatePolyline != null &&
|
|
popupTemplatePolygon != null) {
|
|
return true;
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function loadPopupTemplates() {
|
|
|
|
$.ajax({
|
|
url: settings.editTemplatesPath + "popup-template-circle.html",
|
|
method: "GET",
|
|
dataType: "text html",
|
|
success: function (data) {
|
|
popupTemplateCircle = data;
|
|
}
|
|
});
|
|
|
|
|
|
$.ajax({
|
|
url: settings.editTemplatesPath + "popup-template-rectangle.html",
|
|
method: "GET",
|
|
dataType: "text html",
|
|
success: function (data) {
|
|
popupTemplateRectangle = data;
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: settings.editTemplatesPath + "popup-template-marker.html",
|
|
method: "GET",
|
|
dataType: "text html",
|
|
success: function (data) {
|
|
popupTemplateMarker = data;
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: settings.editTemplatesPath + "popup-template-polyline.html",
|
|
method: "GET",
|
|
dataType: "text html",
|
|
success: function (data) {
|
|
popupTemplatePolyline = data;
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: settings.editTemplatesPath + "popup-template-polygon.html",
|
|
method: "GET",
|
|
dataType: "text html",
|
|
success: function (data) {
|
|
popupTemplatePolygon = data;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function initializeGoogleMapEditor(container) {
|
|
var map = null;
|
|
if (settings.editMode) {
|
|
loadPopupTemplates();
|
|
}
|
|
map = new google.maps.Map(container, {
|
|
center: new google.maps.LatLng(settings.center.latitude, settings.center.longitude),
|
|
zoom: settings.zoom,
|
|
zoomControl: settings.zoomControl,
|
|
panControl: settings.panControl,
|
|
scaleControl: settings.scaleControl,
|
|
streetViewControl: settings.streetViewControl,
|
|
infoWindow: null,
|
|
styles: settings.style
|
|
});
|
|
|
|
map.setOptions({ scrollwheel: settings.scrollWheel });
|
|
map.container = container;
|
|
map.locations = settings.locations.slice(0);
|
|
map.id = createUUID();
|
|
|
|
$("<div/>", { class: "map-overlay" }).append($("<input/>", { type: "button", value: "Close", class: "btn-close" })).insertAfter($(map.container));
|
|
$(".map-overlay input.btn-close").click(function () {
|
|
$(this).parent().fadeOut("slow");
|
|
});
|
|
|
|
google.maps.event.addListenerOnce(map, 'idle', function () {
|
|
addStylesList(map);
|
|
addFitBoundsButton(map);
|
|
addCurrentLocationButton(map);
|
|
if (settings.searchBox) {
|
|
addSearchBox(map);
|
|
}
|
|
|
|
if (map.locations != null && map.locations.length > 0) {
|
|
for (i = 0; i < map.locations.length; i++) {
|
|
initMapObject(map, map.locations[i]);
|
|
}
|
|
}
|
|
|
|
saveToJson(map);
|
|
});
|
|
|
|
google.maps.event.addListenerOnce(map, 'center_changed', function () {
|
|
saveToJson(map);
|
|
});
|
|
|
|
google.maps.event.addListenerOnce(map, 'zoom_changed', function () {
|
|
saveToJson(map);
|
|
});
|
|
|
|
google.maps.event.addListenerOnce(map, 'maptypeid_changed', function () {
|
|
saveToJson(map);
|
|
});
|
|
|
|
google.maps.event.addListenerOnce(map, 'dragend', function () {
|
|
saveToJson(map);
|
|
});
|
|
|
|
google.maps.event.addListener(map, 'click', function () {
|
|
if (map.infoWindow != null) {
|
|
map.infoWindow.close();
|
|
map.activeLocation = null;
|
|
}
|
|
for (i = 0; i < map.locations.length; i++) {
|
|
map.locations[i].Overlay.set("editable", false);
|
|
}
|
|
});
|
|
|
|
if (settings.editMode) {
|
|
|
|
var drawingManager = new google.maps.drawing.DrawingManager({
|
|
drawingMode: google.maps.drawing.OverlayType.MARKER,
|
|
drawingControl: true,
|
|
polygonOptions: {
|
|
draggable: settings.editMode,
|
|
strokeWeight: settings.drawingBorderWidth,
|
|
strokeColor: settings.drawingBorderColor,
|
|
fillColor: settings.drawingFillColor
|
|
},
|
|
markerOptions: {
|
|
draggable: settings.editMode
|
|
},
|
|
polylineOptions: {
|
|
draggable: settings.editMode,
|
|
strokeWeight: settings.drawingBorderWidth,
|
|
strokeColor: settings.drawingBorderColor,
|
|
fillColor: settings.drawingFillColor
|
|
},
|
|
circleOptions: {
|
|
draggable: settings.editMode,
|
|
strokeWeight: settings.drawingBorderWidth,
|
|
strokeColor: settings.drawingBorderColor,
|
|
fillColor: settings.drawingFillColor
|
|
},
|
|
rectangleOptions: {
|
|
draggable: settings.editMode,
|
|
strokeWeight: settings.drawingBorderWidth,
|
|
strokeColor: settings.drawingBorderColor,
|
|
fillColor: settings.drawingFillColor
|
|
},
|
|
drawingControlOptions: {
|
|
position: google.maps.ControlPosition.TOP_CENTER,
|
|
drawingModes: settings.drawingTools
|
|
}
|
|
});
|
|
|
|
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
|
|
var location = null;
|
|
if (settings.singleLocation) {
|
|
clearLocations(map);
|
|
}
|
|
e.overlay.set("draggable", settings.editMode);
|
|
location = initLocationObject(map, e.overlay, e.type);
|
|
attachLocationHandlers(map, location, e.type);
|
|
e.overlay.setOptions({ suppressUndo: true });
|
|
attachTransformHandlers(map, e.overlay, e.type);
|
|
|
|
if (settings.locationNew != null && typeof (settings.locationNew) == "function") {
|
|
settings.locationNew(map, location);
|
|
}
|
|
});
|
|
drawingManager.setMap(map);
|
|
}
|
|
}
|
|
|
|
function attachTransformHandlers(map, overlay, type) {
|
|
|
|
switch (type) {
|
|
case google.maps.drawing.OverlayType.POLYLINE:
|
|
case google.maps.drawing.OverlayType.POLYGON:
|
|
google.maps.event.addListener(overlay.getPath(), 'set_at', function (index, obj) {
|
|
updateLocationObject(map, overlay.Location, type, true);
|
|
});
|
|
google.maps.event.addListener(overlay.getPath(), 'insert_at', function (index, obj) {
|
|
updateLocationObject(map, overlay.Location, type, true);
|
|
});
|
|
google.maps.event.addListener(overlay.getPath(), 'remove_at', function (index, obj) {
|
|
updateLocationObject(map, overlay.Location, type, true);
|
|
});
|
|
break;
|
|
case google.maps.drawing.OverlayType.CIRCLE:
|
|
google.maps.event.addListener(overlay, 'radius_changed', function (index, obj) {
|
|
updateLocationObject(map, overlay.Location, type, true);
|
|
});
|
|
google.maps.event.addListener(overlay, 'center_changed', function (index, obj) {
|
|
updateLocationObject(map, overlay.Location, type, true);
|
|
});
|
|
break;
|
|
case google.maps.drawing.OverlayType.RECTANGLE:
|
|
google.maps.event.addListener(overlay, 'bounds_changed', function (index, obj) {
|
|
updateLocationObject(map, overlay.Location, type, true);
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
|
|
function clearLocations(map) {
|
|
if (map.locations != null && map.locations.length > 0) {
|
|
for (i = 0; i < map.locations.length; i++) {
|
|
map.locations[i].Overlay.setMap(null);
|
|
}
|
|
map.locations.length = 0;
|
|
map.locations = [];
|
|
}
|
|
}
|
|
|
|
function initLocationObject(map, overlay, type) {
|
|
var maplocation;
|
|
var coordinates = [];
|
|
|
|
switch (type) {
|
|
case google.maps.drawing.OverlayType.MARKER:
|
|
maplocation = new Location([new Coordinate(overlay.getPosition().lat(), overlay.getPosition().lng())], google.maps.drawing.OverlayType.MARKER, "", "", "", "", "", "");
|
|
break;
|
|
case google.maps.drawing.OverlayType.CIRCLE:
|
|
maplocation = new Location([new Coordinate(overlay.getCenter().lat(), overlay.getCenter().lng())], google.maps.drawing.OverlayType.CIRCLE, "");
|
|
maplocation.Radius = overlay.getRadius();
|
|
break;
|
|
case google.maps.drawing.OverlayType.POLYLINE:
|
|
for (i = 0; i < overlay.getPath().length; i++) {
|
|
coordinates.push(new Coordinate(overlay.getPath().getAt(i).lat(), overlay.getPath().getAt(i).lng()))
|
|
}
|
|
maplocation = new Location(coordinates, google.maps.drawing.OverlayType.POLYLINE, "");
|
|
break;
|
|
case google.maps.drawing.OverlayType.POLYGON:
|
|
for (i = 0; i < overlay.getPath().length; i++) {
|
|
coordinates.push(new Coordinate(overlay.getPath().getAt(i).lat(), overlay.getPath().getAt(i).lng()))
|
|
}
|
|
maplocation = new Location(coordinates, google.maps.drawing.OverlayType.POLYGON, "");
|
|
break;
|
|
case google.maps.drawing.OverlayType.RECTANGLE:
|
|
coordinates.push(new Coordinate(overlay.getBounds().getNorthEast().lat(), overlay.getBounds().getNorthEast().lng()));
|
|
coordinates.push(new Coordinate(overlay.getBounds().getSouthWest().lat(), overlay.getBounds().getSouthWest().lng()));
|
|
maplocation = new Location(coordinates, google.maps.drawing.OverlayType.RECTANGLE, "");
|
|
break;
|
|
}
|
|
|
|
maplocation.Overlay = overlay;
|
|
overlay.Location = maplocation;
|
|
if (map.locations == null) {
|
|
map.locations = [];
|
|
}
|
|
map.locations.push(maplocation);
|
|
saveToJson(map);
|
|
return maplocation;
|
|
}
|
|
|
|
function initMapObject(map, location) {
|
|
|
|
switch (location.LocationType) {
|
|
case google.maps.drawing.OverlayType.MARKER:
|
|
|
|
var marker = new google.maps.Marker({
|
|
draggable: settings.editMode,
|
|
map: map,
|
|
position: new google.maps.LatLng(location.Coordinates[0].Latitude, location.Coordinates[0].Longitude),
|
|
Location: location
|
|
});
|
|
if (location.Icon != null && location.Icon != "") {
|
|
marker.setIcon(new google.maps.MarkerImage(settings.markerPinsPath + location.Icon));
|
|
}
|
|
|
|
location.Overlay = marker;
|
|
attachLocationHandlers(map, location, google.maps.drawing.OverlayType.MARKER);
|
|
break;
|
|
case google.maps.drawing.OverlayType.CIRCLE:
|
|
var circle = new google.maps.Circle({
|
|
draggable: settings.editMode,
|
|
map: map,
|
|
strokeWeight: location.BorderWeight,
|
|
strokeColor: location.BorderColor,
|
|
fillColor: location.FillColor,
|
|
map: map,
|
|
radius: location.Radius,
|
|
center: new google.maps.LatLng(location.Coordinates[0].Latitude, location.Coordinates[0].Longitude),
|
|
Location: location
|
|
});
|
|
location.Overlay = circle;
|
|
attachLocationHandlers(map, location, google.maps.drawing.OverlayType.CIRCLE);
|
|
break;
|
|
case google.maps.drawing.OverlayType.POLYLINE:
|
|
var polylineCorners = [];
|
|
for (c = 0; c < location.Coordinates.length; c++) {
|
|
var polylineCorner = new google.maps.LatLng(location.Coordinates[c].Latitude, location.Coordinates[c].Longitude)
|
|
polylineCorners.push(polylineCorner);
|
|
}
|
|
|
|
polyline = new google.maps.Polyline({
|
|
path: polylineCorners,
|
|
strokeWeight: location.BorderWeight,
|
|
strokeColor: location.BorderColor,
|
|
draggable: settings.editMode,
|
|
Location: location
|
|
});
|
|
polyline.setMap(map);
|
|
location.Overlay = polyline;
|
|
attachLocationHandlers(map, location, google.maps.drawing.OverlayType.POLYLINE);
|
|
break;
|
|
case google.maps.drawing.OverlayType.POLYGON:
|
|
var poligonCorners = [];
|
|
for (c = 0; c < location.Coordinates.length; c++) {
|
|
var polygonCorner = new google.maps.LatLng(location.Coordinates[c].Latitude, location.Coordinates[c].Longitude)
|
|
poligonCorners.push(polygonCorner);
|
|
}
|
|
polygon = new google.maps.Polygon({
|
|
path: poligonCorners,
|
|
strokeWeight: location.BorderWeight,
|
|
strokeColor: location.BorderColor,
|
|
fillColor: location.FillColor,
|
|
draggable: settings.editMode,
|
|
Location: location
|
|
});
|
|
polygon.setMap(map);
|
|
location.Overlay = polygon;
|
|
attachLocationHandlers(map, location, google.maps.drawing.OverlayType.POLYGON);
|
|
break;
|
|
case google.maps.drawing.OverlayType.RECTANGLE:
|
|
var rectangle = new google.maps.Rectangle({
|
|
draggable: settings.editMode,
|
|
map: map,
|
|
strokeWeight: location.BorderWeight,
|
|
strokeColor: location.BorderColor,
|
|
fillColor: location.FillColor,
|
|
map: map,
|
|
bounds: new google.maps.LatLngBounds(
|
|
new google.maps.LatLng(location.Coordinates[1].Latitude, location.Coordinates[1].Longitude),
|
|
new google.maps.LatLng(location.Coordinates[0].Latitude, location.Coordinates[0].Longitude)),
|
|
Location: location
|
|
});
|
|
location.Overlay = rectangle;
|
|
attachLocationHandlers(map, location, google.maps.drawing.OverlayType.RECTANGLE);
|
|
break;
|
|
}
|
|
attachTransformHandlers(map, location.Overlay, location.LocationType);
|
|
}
|
|
|
|
function saveToJson(map) {
|
|
var result = null;
|
|
if (settings.editMode) {
|
|
var mapBounds = getMapLocationsBounds(map);
|
|
if (mapBounds != null) {
|
|
var mapCenter = getMapLocationsBounds(map).getCenter();
|
|
settings.center = new Coordinate(mapCenter.lat(), mapCenter.lng());
|
|
}
|
|
var properties = ["editMode", "editTemplatesPath", "markerPinsPath", "markerPinFiles", "drawingBorderColor", "drawingBorderWidth", "drawingFillColor", "zoom", "width", "height", "singleLocation", "center", "language", "searchBox", "richtextEditor", "drawingTools", "zoomControl", "panControl", "scaleControl", "streetViewControl", "scrollWheel", "stylesPath", "style", "locations"];
|
|
properties = properties.concat(["latitude", "longitude", "Coordinates", "Latitude", "Longitude", "Radius", "LocationType", "Icon", "HoverIcon", "Message", "BorderColor", "BorderWeight", "FillColor", "Tag"]);
|
|
properties = properties.concat(["featureType", "elementType", "stylers", "color", "hue", "weight", "visibility", "lightness", "saturation"]);
|
|
|
|
result = JSON.stringify($.extend({}, settings, { locations: map.locations }), properties);
|
|
if (settings.dataChange != null && typeof (settings.dataChange) == "function") {
|
|
settings.dataChange(map, result);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
|
|
function handleMapCloseClick(map, type) {
|
|
if (typeof map.activeLocation != 'undefined' && map.activeLocation != null) {
|
|
$(".color-picker").remove();
|
|
}
|
|
updateLocationObject(map, map.activeLocation, type, false);
|
|
}
|
|
|
|
function attachLocationHandlers(map, location, type) {
|
|
google.maps.event.addListener(location.Overlay, 'dragend', function (event) {
|
|
updateLocationObject(map, this.Location, type, true);
|
|
if (settings.locationMove != null && typeof (settings.locationMove) == "function") {
|
|
settings.locationMove(map, location);
|
|
}
|
|
});
|
|
|
|
google.maps.event.addListener(location.Overlay, 'mouseover', function () {
|
|
if (type == google.maps.drawing.OverlayType.MARKER) {
|
|
if (location.HoverIcon && location.HoverIcon != 'none' && location.HoverIcon != null && location.HoverIcon != "") {
|
|
location.Overlay.setIcon(settings.markerPinsPath + location.HoverIcon);
|
|
}
|
|
}
|
|
});
|
|
|
|
google.maps.event.addListener(location.Overlay, 'mouseout', function () {
|
|
if (type == google.maps.drawing.OverlayType.MARKER) {
|
|
if (location.Icon != "default" && location.Icon != null && location.Icon != "") {
|
|
location.Overlay.setIcon(settings.markerPinsPath + location.Icon);
|
|
}
|
|
else {
|
|
location.Overlay.setIcon(null);
|
|
}
|
|
}
|
|
});
|
|
|
|
google.maps.event.addListener(location.Overlay, 'click', function () {
|
|
if (!arePopupTemplatesLoaded() && settings.editMode) {
|
|
return;
|
|
}
|
|
if (map.infoWindow != null) {
|
|
map.infoWindow.close();
|
|
map.activeLocation = null;
|
|
}
|
|
for (i = 0; i < map.locations.length; i++) {
|
|
map.locations[i].Overlay.set("editable", false);
|
|
}
|
|
location.Overlay.set("editable", settings.editMode);
|
|
map.infoWindow = new google.maps.InfoWindow();
|
|
map.activeLocation = location;
|
|
google.maps.event.addListener(map.infoWindow, 'closeclick', function () {
|
|
handleMapCloseClick(map, type);
|
|
});
|
|
|
|
var position = null;
|
|
var contentObj = null;
|
|
switch (type) {
|
|
case google.maps.drawing.OverlayType.MARKER:
|
|
position = location.Overlay.position;
|
|
contentObj = $('<div>').append(popupTemplateMarker);
|
|
if (!settings.richtextEditor) {
|
|
contentObj.find("textarea").removeClass("richtext-fix");
|
|
}
|
|
break;
|
|
case google.maps.drawing.OverlayType.CIRCLE:
|
|
position = location.Overlay.getCenter();
|
|
contentObj = $('<div>').append(popupTemplateCircle);
|
|
if (!settings.richtextEditor) {
|
|
contentObj.find("textarea").removeClass("richtext-fix");
|
|
}
|
|
break;
|
|
case google.maps.drawing.OverlayType.POLYLINE:
|
|
position = getPolyLineCenter(location.Overlay);
|
|
contentObj = $('<div>').append(popupTemplatePolyline);
|
|
if (!settings.richtextEditor) {
|
|
contentObj.find("textarea").removeClass("richtext-fix");
|
|
}
|
|
|
|
break;
|
|
case google.maps.drawing.OverlayType.POLYGON:
|
|
position = getPolygonCenter(location.Overlay);
|
|
contentObj = $('<div>').append(popupTemplatePolygon);
|
|
if (!settings.richtextEditor) {
|
|
contentObj.find("textarea").removeClass("richtext-fix");
|
|
}
|
|
|
|
break;
|
|
case google.maps.drawing.OverlayType.RECTANGLE:
|
|
position = location.Overlay.getBounds().getCenter();
|
|
contentObj = $('<div>').append(popupTemplateRectangle);
|
|
if (!settings.richtextEditor) {
|
|
contentObj.find("textarea").removeClass("richtext-fix");
|
|
}
|
|
break;
|
|
}
|
|
if (contentObj != null && settings.editMode) {
|
|
map.infoWindow.setContent(contentObj.html());
|
|
}
|
|
else {
|
|
map.infoWindow.setContent($("<div/>").append($("<div/>", { class: "popup-message" }).html(location.Message)).html());
|
|
}
|
|
|
|
google.maps.event.addListener(map.infoWindow, 'domready', function () {
|
|
$(map.container).find('.popup-content textarea').val(map.activeLocation.Message);
|
|
$(map.container).find('.popup-content input[name="locationLat"]').val(position.lat());
|
|
$(map.container).find('.popup-content input[name="locationLng"]').val(position.lng());
|
|
$(map.container).find('.popup-content input[name="centerLat"]').val(position.lat());
|
|
$(map.container).find('.popup-content input[name="centerLng"]').val(position.lng());
|
|
$(map.container).find('.popup-content input[name="borderWidth"]').val(location.BorderWeight);
|
|
$(map.container).find('.popup-content input[name="radius"]').val(location.Radius);
|
|
var markerIconsList = $(map.container).find('.popup-content select[name="icon"]');
|
|
if (markerIconsList.length > 0 && settings.markerPinFiles.length > 0) {
|
|
for (i = 0; i < settings.markerPinFiles.length; i++) {
|
|
markerIconsList.append($('<option>', {
|
|
value: settings.markerPinsPath + settings.markerPinFiles[i],
|
|
text: settings.markerPinFiles[i]
|
|
}));
|
|
}
|
|
markerIconsList.find('option').each(function () {
|
|
if ($(this).text() == location.Icon) {
|
|
$(this).prop('selected', true);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
markerIconsList.parent().parent().remove();
|
|
}
|
|
|
|
var markerHoverIconsList = $(map.container).find('.popup-content select[name="hover-icon"]');
|
|
if (markerHoverIconsList.length > 0 && settings.markerPinFiles.length > 0) {
|
|
for (i = 0; i < settings.markerPinFiles.length; i++) {
|
|
markerHoverIconsList.append($('<option>', {
|
|
value: settings.markerPinsPath + settings.markerPinFiles[i],
|
|
text: settings.markerPinFiles[i]
|
|
}));
|
|
}
|
|
markerHoverIconsList.find('option').each(function () {
|
|
if ($(this).text() == location.HoverIcon) {
|
|
$(this).prop('selected', true);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
markerHoverIconsList.parent().parent().remove();
|
|
}
|
|
|
|
var borderColorInput = $(map.container).find('.popup-content input[name="strokeColor"]');
|
|
var fillColorInput = $(map.container).find('.popup-content input[name="fillColor"]');
|
|
var borderColorInputPicker = $(map.container).find('.popup-content input[name="strokeColorPicker"]');
|
|
var fillColorInputPicker = $(map.container).find('.popup-content input[name="fillColorPicker"]');
|
|
|
|
borderColorInput.val(map.activeLocation.BorderColor);
|
|
borderColorInputPicker.val(map.activeLocation.BorderColor);
|
|
borderColorInputPicker.height(borderColorInput.outerHeight());
|
|
borderColorInputPicker.width(borderColorInput.outerHeight());
|
|
|
|
fillColorInput.val(map.activeLocation.FillColor);
|
|
fillColorInputPicker.val(map.activeLocation.FillColor);
|
|
fillColorInputPicker.height(fillColorInput.outerHeight());
|
|
fillColorInputPicker.width(fillColorInput.outerHeight());
|
|
|
|
if (isIE()) {
|
|
borderColorInput.simpleColorPicker();
|
|
fillColorInput.simpleColorPicker();
|
|
}
|
|
else {
|
|
fillColorInputPicker.change(function () {
|
|
fillColorInput.val($(this).val());
|
|
});
|
|
fillColorInput.change(function () {
|
|
fillColorInputPicker.val($(this).val());
|
|
});
|
|
|
|
borderColorInputPicker.change(function () {
|
|
borderColorInput.val($(this).val());
|
|
});
|
|
borderColorInput.change(function () {
|
|
borderColorInputPicker.val($(this).val());
|
|
});
|
|
}
|
|
if (settings.richtextEditor) {
|
|
intTinyMce();
|
|
}
|
|
initPopupButtons(map);
|
|
});
|
|
if (position != null && type != google.maps.drawing.OverlayType.MARKER) {
|
|
map.infoWindow.setPosition(position);
|
|
map.infoWindow.open(map);
|
|
}
|
|
else {
|
|
map.infoWindow.open(map, location.Overlay);
|
|
}
|
|
|
|
if (settings.locationClick != null && typeof (settings.locationClick) == "function") {
|
|
settings.locationClick(map, location);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function updateLocationObject(map, location, type, showBallonInfo) {
|
|
var coordinates = [];
|
|
if ($('.popup-content').length > 0) {
|
|
if (typeof tinymce != 'undefined') {
|
|
tinyMCE.triggerSave();
|
|
}
|
|
location.Message = $(map.container).find('.popup-content textarea').val();
|
|
location.BorderColor = $('.popup-content input[name="strokeColor"]').val();
|
|
location.FillColor = $('.popup-content input[name="fillColor"]').val();
|
|
location.BorderWeight = $('.popup-content input[name="borderWidth"]').val();
|
|
if (type != google.maps.drawing.OverlayType.MARKER) {
|
|
location.Overlay.setOptions({
|
|
strokeColor: location.BorderColor,
|
|
strokeWeight: location.BorderWeight
|
|
});
|
|
if (type != google.maps.drawing.OverlayType.POLYLINE) {
|
|
location.Overlay.setOptions({
|
|
fillColor: location.FillColor
|
|
});
|
|
}
|
|
}
|
|
}
|
|
switch (type) {
|
|
case google.maps.drawing.OverlayType.MARKER:
|
|
location.Coordinates.length = 0;
|
|
location.Coordinates.push(new Coordinate(location.Overlay.getPosition().lat(), location.Overlay.getPosition().lng()));
|
|
if ($('select[name="icon"]').length > 0) {
|
|
var iconFile = $('select[name="icon"] :selected').text();
|
|
if (iconFile == "default") {
|
|
location.Icon = null;
|
|
location.Overlay.setIcon(null);
|
|
}
|
|
else {
|
|
location.Icon = iconFile;
|
|
location.Overlay.setIcon(settings.markerPinsPath + location.Icon);
|
|
}
|
|
|
|
var hoverIconFile = $('select[name="hover-icon"] :selected').text();
|
|
if (iconFile == "none") {
|
|
location.HoverIcon = null;
|
|
}
|
|
else {
|
|
location.HoverIcon = hoverIconFile;
|
|
}
|
|
|
|
location.Coordinates[0].Latitude = parseFloat($('.popup-content input[name="locationLat"]').val());
|
|
location.Coordinates[0].Longitude = parseFloat($('.popup-content input[name="locationLng"]').val());
|
|
|
|
location.Overlay.setPosition(new google.maps.LatLng(location.Coordinates[0].Latitude, location.Coordinates[0].Longitude));
|
|
|
|
}
|
|
|
|
break;
|
|
case google.maps.drawing.OverlayType.CIRCLE:
|
|
|
|
if ($('.popup-content input[name="radius"]').length > 0) {
|
|
|
|
|
|
location.Radius = parseFloat($('.popup-content input[name="radius"]').val());
|
|
|
|
google.maps.event.clearListeners(location.Overlay, 'radius_changed');
|
|
location.Overlay.setRadius(location.Radius);
|
|
|
|
google.maps.event.addListener(location.Overlay, 'radius_changed', function (index, obj) {
|
|
updateLocationObject(map, location, type, true);
|
|
});
|
|
|
|
}
|
|
else {
|
|
location.Radius = location.Overlay.getRadius();
|
|
}
|
|
|
|
if ($('.popup-content input[name="centerLat"]').length > 0 && $('.popup-content input[name="centerLng"]').length > 0) {
|
|
|
|
google.maps.event.clearListeners(location.Overlay, 'center_changed');
|
|
location.Overlay.setCenter(new google.maps.LatLng(parseFloat($('.popup-content input[name="centerLat"]').val()), parseFloat($('.popup-content input[name="centerLng"]').val())));
|
|
google.maps.event.addListener(location.Overlay, 'center_changed', function (index, obj) {
|
|
updateLocationObject(map, location, type, true);
|
|
});
|
|
location.Coordinates.length = 0;
|
|
location.Coordinates.push(new Coordinate(location.Overlay.getCenter().lat(), location.Overlay.getCenter().lng()));
|
|
|
|
}
|
|
else {
|
|
location.Coordinates.length = 0;
|
|
location.Coordinates.push(new Coordinate(location.Overlay.getCenter().lat(), location.Overlay.getCenter().lng()));
|
|
}
|
|
break;
|
|
case google.maps.drawing.OverlayType.POLYLINE:
|
|
for (i = 0; i < location.Overlay.getPath().length; i++) {
|
|
coordinates.push(new Coordinate(location.Overlay.getPath().getAt(i).lat(), location.Overlay.getPath().getAt(i).lng()))
|
|
}
|
|
location.Coordinates = coordinates;
|
|
break;
|
|
case google.maps.drawing.OverlayType.POLYGON:
|
|
for (i = 0; i < location.Overlay.getPath().length; i++) {
|
|
coordinates.push(new Coordinate(location.Overlay.getPath().getAt(i).lat(), location.Overlay.getPath().getAt(i).lng()))
|
|
}
|
|
location.Coordinates = coordinates;
|
|
break;
|
|
case google.maps.drawing.OverlayType.RECTANGLE:
|
|
coordinates.push(new Coordinate(location.Overlay.getBounds().getNorthEast().lat(), location.Overlay.getBounds().getNorthEast().lng()));
|
|
coordinates.push(new Coordinate(location.Overlay.getBounds().getSouthWest().lat(), location.Overlay.getBounds().getSouthWest().lng()));
|
|
location.Coordinates = coordinates;
|
|
break;
|
|
}
|
|
if (map.activeLocation != null && showBallonInfo) {
|
|
|
|
if (map.infoWindow != null) {
|
|
map.infoWindow.close();
|
|
}
|
|
}
|
|
saveToJson(map);
|
|
}
|
|
|
|
function initPopupButtons(map) {
|
|
var deleteButton = $(map.container).find(".btn-popup-delete");
|
|
deleteButton.off("click");
|
|
deleteButton.click(function () {
|
|
if (confirm("Delete this location?")) {
|
|
map.activeLocation.Overlay.setMap(null);
|
|
map.locations.splice(map.locations.indexOf(map.activeLocation), 1);
|
|
map.activeLocation = null;
|
|
saveToJson(map);
|
|
map.infoWindow.close();
|
|
if (settings.locationDelete != null && typeof (settings.locationDelete) == "function") {
|
|
settings.locationDelete(map, location);
|
|
}
|
|
}
|
|
});
|
|
|
|
var cancelButton = $(map.container).find(".btn-popup-cancel");
|
|
cancelButton.off("click");
|
|
cancelButton.click(function () {
|
|
if ($('.popup-content [name="changed"]').val() === 'true') {
|
|
if (confirm("Cancel changes?")) {
|
|
map.infoWindow.close();
|
|
}
|
|
}
|
|
else {
|
|
map.infoWindow.close();
|
|
}
|
|
});
|
|
|
|
var saveButton = $(map.container).find(".btn-popup-save");
|
|
saveButton.off("click");
|
|
saveButton.click(function () {
|
|
handleMapCloseClick(map, map.activeLocation.LocationType);
|
|
map.infoWindow.close();
|
|
});
|
|
|
|
$('.popup-content input[type="text"],.popup-content input[type="number"],.popup-content input[type="color"],.popup-content select,.popup-content textarea').change(function () {
|
|
$('.popup-content input[name="changed"]').val(true);
|
|
});
|
|
|
|
}
|
|
|
|
function isIE() {
|
|
var ua = window.navigator.userAgent;
|
|
var msie = ua.indexOf("MSIE ");
|
|
|
|
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
|
|
return true;
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function intTinyMce() {
|
|
if (typeof tinymce == 'undefined') {
|
|
$.getScript(tinyMceUrl, function () {
|
|
tinymce.init({
|
|
selector: ".popup-content textarea",
|
|
plugins: ["code image link media table textcolor"],
|
|
resize: false,
|
|
toolbar: "bold italic | forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | code",
|
|
menubar: false,
|
|
statusbar: false
|
|
});
|
|
});
|
|
}
|
|
else {
|
|
tinymce.init({
|
|
selector: ".popup-content textarea",
|
|
plugins: ["code image link media table textcolor"],
|
|
resize: false,
|
|
toolbar: "bold italic | forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | code",
|
|
menubar: false,
|
|
statusbar: false
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function getMapLocationsBounds(map) {
|
|
if (map.locations != null && map.locations.length > 0) {
|
|
var mapLocationBounds = new google.maps.LatLngBounds();
|
|
for (i = 0; i < map.locations.length; i++) {
|
|
for (j = 0; j < map.locations[i].Coordinates.length; j++) {
|
|
mapLocationBounds.extend(new google.maps.LatLng(map.locations[i].Coordinates[j].Latitude, map.locations[i].Coordinates[j].Longitude));
|
|
}
|
|
}
|
|
return mapLocationBounds;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function getPolyLineCenter(polyline) {
|
|
var i = parseInt(polyline.getPath().getLength() / 2);
|
|
return new google.maps.LatLng(polyline.getPath().getAt(i).lat(), polyline.getPath().getAt(i).lng());
|
|
}
|
|
|
|
function getPolygonCenter(polygon) {
|
|
var bounds = new google.maps.LatLngBounds();
|
|
|
|
for (i = 0; i < polygon.getPath().getLength() ; i++) {
|
|
bounds.extend(new google.maps.LatLng(polygon.getPath().getAt(i).lat(),
|
|
polygon.getPath().getAt(i).lng()));
|
|
}
|
|
return bounds.getCenter();
|
|
}
|
|
|
|
function createUUID() {
|
|
/* http://www.ietf.org/rfc/rfc4122.txt */
|
|
var s = [];
|
|
var hexDigits = "0123456789abcdef";
|
|
for (var i = 0; i < 36; i++) {
|
|
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
|
}
|
|
s[14] = "4"; /* bits 12-15 of the time_hi_and_version field to 0010 */
|
|
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); /* bits 6-7 of the clock_seq_hi_and_reserved to 01 */
|
|
s[8] = s[13] = s[18] = s[23] = "";
|
|
|
|
var uuid = s.join("");
|
|
return uuid;
|
|
}
|
|
|
|
function htmlEncode(value) {
|
|
return $('<div/>').text(value).html();
|
|
}
|
|
|
|
function htmlDecode(value) {
|
|
return $('<div/>').html(value).text();
|
|
}
|
|
|
|
/* OBJECT DEFINITIONS START*/
|
|
|
|
function Location(coordinates, locationtype, message) {
|
|
this.Coordinates = coordinates;
|
|
this.LocationType = locationtype;
|
|
this.Icon = null;
|
|
this.Message = message;
|
|
this.Overlay = null;
|
|
this.Radius = 0;
|
|
this.BorderColor = settings.drawingBorderColor;
|
|
this.BorderWeight = settings.drawingBorderWidth;
|
|
this.FillColor = settings.drawingFillColor;
|
|
this.Tag = null;
|
|
}
|
|
|
|
function Coordinate(latitude, longitude) {
|
|
this.Latitude = latitude;
|
|
this.Longitude = longitude;
|
|
}
|
|
}
|
|
|
|
/* Simple color picker https://github.com/rachel-carvalho/simple-color-picker */
|
|
$.fn.simpleColorPicker = function (options) {
|
|
var defaults = {
|
|
colorsPerLine: 8,
|
|
colors: ['#000000', '#444444', '#666666', '#999999', '#cccccc', '#eeeeee', '#f3f3f3', '#ffffff'
|
|
, '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#9900ff', '#ff00ff'
|
|
, '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#cfe2f3', '#d9d2e9', '#ead1dc'
|
|
, '#ea9999', '#f9cb9c', '#ffe599', '#b6d7a8', '#a2c4c9', '#9fc5e8', '#b4a7d6', '#d5a6bd'
|
|
, '#e06666', '#f6b26b', '#ffd966', '#93c47d', '#76a5af', '#6fa8dc', '#8e7cc3', '#c27ba0'
|
|
, '#cc0000', '#e69138', '#f1c232', '#6aa84f', '#45818e', '#3d85c6', '#674ea7', '#a64d79'
|
|
, '#990000', '#b45f06', '#bf9000', '#38761d', '#134f5c', '#0b5394', '#351c75', '#741b47'
|
|
, '#660000', '#783f04', '#7f6000', '#274e13', '#0c343d', '#073763', '#20124d', '#4C1130'],
|
|
showEffect: '',
|
|
hideEffect: '',
|
|
onChangeColor: false
|
|
};
|
|
var opts = $.extend(defaults, options);
|
|
return this.each(function () {
|
|
var txt = $(this);
|
|
var colorsMarkup = '';
|
|
var prefix = txt.attr('id').replace(/-/g, '') + '_';
|
|
for (var i = 0; i < opts.colors.length; i++) {
|
|
var item = opts.colors[i];
|
|
var breakLine = '';
|
|
if (i % opts.colorsPerLine == 0)
|
|
breakLine = 'clear: both; ';
|
|
if (i > 0 && breakLine && $.browser && $.browser.msie && $.browser.version <= 7) {
|
|
breakLine = '';
|
|
colorsMarkup += '<li style="float: none; clear: both; overflow: hidden; background-color: #fff; display: block; height: 1px; line-height: 1px; font-size: 1px; margin-bottom: -2px;"></li>';
|
|
}
|
|
colorsMarkup += '<li id="' + prefix + 'color-' + i + '" class="color-box" style="' + breakLine + 'background-color: ' + item + '" title="' + item + '"></li>';
|
|
}
|
|
var box = $('<div id="' + prefix + 'color-picker" class="color-picker" style="position: absolute; left: 0px; top: 0px;"><ul>' + colorsMarkup + '</ul><div style="clear: both;"></div></div>');
|
|
$('body').append(box);
|
|
box.hide();
|
|
box.find('li.color-box').click(function () {
|
|
if (txt.is('input')) {
|
|
txt.val(opts.colors[this.id.substr(this.id.indexOf('-') + 1)]);
|
|
txt.blur();
|
|
}
|
|
if ($.isFunction(defaults.onChangeColor)) {
|
|
defaults.onChangeColor.call(txt, opts.colors[this.id.substr(this.id.indexOf('-') + 1)]);
|
|
}
|
|
hideBox(box);
|
|
});
|
|
$(document).on('click', 'body', function () {
|
|
hideBox(box);
|
|
});
|
|
|
|
box.click(function (event) {
|
|
event.stopPropagation();
|
|
});
|
|
|
|
var positionAndShowBox = function (box) {
|
|
var pos = txt.offset();
|
|
var left = pos.left + txt.outerWidth() - box.outerWidth();
|
|
if (left < pos.left) left = pos.left;
|
|
box.css({
|
|
left: left,
|
|
top: (pos.top + txt.outerHeight())
|
|
});
|
|
showBox(box);
|
|
}
|
|
|
|
txt.click(function (event) {
|
|
event.stopPropagation();
|
|
if (!txt.is('input')) {
|
|
/* element is not an input so probably a link or div which requires the color box to be shown */
|
|
positionAndShowBox(box);
|
|
}
|
|
});
|
|
|
|
txt.focus(function () {
|
|
/* Hide all pickers before showing */
|
|
$(".color-picker").each(function (index) {
|
|
hideBox($(this));
|
|
});
|
|
positionAndShowBox(box);
|
|
});
|
|
|
|
function hideBox(box) {
|
|
if (opts.hideEffect == 'fade')
|
|
box.fadeOut();
|
|
else if (opts.hideEffect == 'slide')
|
|
box.slideUp();
|
|
else
|
|
box.hide();
|
|
}
|
|
|
|
function showBox(box) {
|
|
if (opts.showEffect == 'fade')
|
|
box.fadeIn();
|
|
else if (opts.showEffect == 'slide')
|
|
box.slideDown();
|
|
else
|
|
box.show();
|
|
}
|
|
});
|
|
};
|