Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
344 righe
11 KiB
344 righe
11 KiB
(function (window, document, undefined) { |
|
var editMarkerToolbarAction = L.Toolbar2.Action.extend({ |
|
initialize: function (map, marker, options) { |
|
this._map = map; |
|
this._marker = marker; |
|
|
|
options = options || { |
|
toolbarIcon: { |
|
tooltip: 'Edit' |
|
} |
|
}; |
|
|
|
if (this._marker.options.toolbarEditIconClass) { |
|
options.toolbarIcon.className = this._marker.options.toolbarEditIconClass |
|
} else { |
|
options.toolbarIcon.html = 'Edit'; |
|
} |
|
|
|
L.Util.setOptions(this, options); |
|
|
|
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
|
}, |
|
|
|
addHooks: function () { |
|
var that = this; |
|
|
|
that._marker._popupToolbar._onMarkerDrag = function (e) { |
|
that._marker._popupToolbar.setLatLng(that._marker.getLatLng()); |
|
if (that._marker.label) { |
|
that._marker.updateLabelContent(that._marker.options.getLabelContent()); |
|
} |
|
that._marker._dragged = true; |
|
}; |
|
that._marker._popupToolbar._onMarkerDragEnd = function (e) { |
|
if (that._marker._popupToolbar._bringToFront) { |
|
that._marker._popupToolbar._bringToFront(); |
|
} |
|
}; |
|
|
|
if (!that._marker._enableEditMode) { |
|
that._marker._enableEditMode = function () { |
|
that._marker._editModeEnabled = true; |
|
|
|
that._marker.options.clusterGroup.removeLayer(that._marker); |
|
that._map.addLayer(that._marker); |
|
|
|
if (that._marker.options.editModeIcon) { |
|
that._marker.setIcon(that._marker.options.editModeIcon); |
|
} |
|
|
|
if (that._marker._popupToolbar._bringToFront) { |
|
that._marker._popupToolbar._bringToFront(); |
|
} |
|
|
|
that._marker.options.draggable = true; |
|
that._marker.dragging.enable(); |
|
|
|
if (that._marker.options.showLabelOnEdit && !that._marker.label) { |
|
that._marker.bindLabel(that._marker.options.getLabelContent(), { |
|
noHide: true, |
|
direction: 'auto', |
|
pane: that._map.getPanes.popupPane |
|
}); |
|
} |
|
if (that._marker.label) { |
|
that._marker.showLabel(); |
|
} |
|
|
|
that._marker.on('drag', that._marker._popupToolbar._onMarkerDrag); |
|
|
|
that._marker.on('dragend', that._marker._popupToolbar._onMarkerDragEnd); |
|
}; |
|
} |
|
|
|
if (!that._marker._disableEditMode) { |
|
that._marker._disableEditMode = function () { |
|
that._marker._editModeEnabled = false; |
|
|
|
if (that._marker.options.normalModeIcon) { |
|
that._marker.setIcon(that._marker.options.normalModeIcon); |
|
} else { |
|
that._marker.setIcon(new L.Icon.Default); |
|
} |
|
|
|
that._marker.options.draggable = false; |
|
that._marker.dragging.disable(); |
|
|
|
that._marker.off('drag', that._marker._popupToolbar._onMarkerDrag); |
|
that._marker.off('dragend', that._marker._popupToolbar._onMarkerDragEnd); |
|
|
|
that._map.removeLayer(that._marker); |
|
that._marker.options.clusterGroup.addLayer(that._marker); |
|
|
|
if (that._marker.label) { |
|
that._marker.hideLabel(); |
|
that._marker.unbindLabel(); |
|
} |
|
|
|
if (that._marker._popupToolbar._bringToFront) { |
|
that._marker._popupToolbar._bringToFront(); |
|
} |
|
|
|
var visibleOne = that._marker.options.clusterGroup.getVisibleParent(that._marker); |
|
if (visibleOne && that._marker && !visibleOne.getLatLng().equals(that._marker.getLatLng()) && that._marker._popupToolbar) { |
|
that._marker._popupToolbar._removeToolbar(); |
|
} |
|
|
|
if (that._marker.options.hideToolbarAfterEdit && that._marker._popupToolbar && that._marker._popupToolbar._removeToolbar) { |
|
that._marker._popupToolbar._removeToolbar(); |
|
} |
|
}; |
|
} |
|
|
|
if (that._marker._editModeEnabled) { |
|
that._marker._disableEditMode(); |
|
|
|
if (that._marker._dragged) { |
|
that._marker._dragged = undefined; |
|
that._marker.fire('marker:edited'); |
|
} |
|
} else { |
|
that._marker._enableEditMode(); |
|
} |
|
} |
|
}); |
|
|
|
var deleteMarkerToolbarAction = L.Toolbar2.Action.extend({ |
|
initialize: function (map, marker, options) { |
|
this._map = map; |
|
this._marker = marker; |
|
|
|
options = options || { |
|
toolbarIcon: { |
|
tooltip: 'Delete' |
|
} |
|
}; |
|
|
|
if (this._marker.options.toolbarDeleteIconClass) { |
|
options.toolbarIcon.className = this._marker.options.toolbarDeleteIconClass |
|
} else { |
|
options.toolbarIcon.html = 'Delete'; |
|
} |
|
|
|
L.Util.setOptions(this, options); |
|
|
|
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
|
}, |
|
|
|
addHooks: function () { |
|
if (this._marker._popupToolbar && this._marker._popupToolbar._removeToolbar) { |
|
this._marker._popupToolbar._removeToolbar(); |
|
} |
|
|
|
var deleted = false; |
|
if (this._marker.options.clusterGroup.hasLayer(this._marker)) { |
|
this._marker.options.clusterGroup.removeLayer(this._marker); |
|
deleted = deleted || true; |
|
} |
|
|
|
if (this._map.hasLayer(this._marker)) { |
|
this._map.removeLayer(this._marker); |
|
deleted = deleted || true; |
|
} |
|
|
|
if (deleted) { |
|
this._marker.fire('marker:deleted'); |
|
|
|
this._marker.off('marker:edited'); |
|
this._marker.off('marker:deleted'); |
|
this._marker.off('popuptoolbar:shown'); |
|
this._marker.off('popuptoolbar:closed'); |
|
} |
|
} |
|
}); |
|
|
|
var closeMarkerToolbarAction = L.Toolbar2.Action.extend({ |
|
initialize: function (map, marker, options) { |
|
this._map = map; |
|
this._marker = marker; |
|
|
|
options = options || { |
|
toolbarIcon: { |
|
tooltip: 'Close' |
|
} |
|
}; |
|
|
|
if (this._marker.options.toolbarCloseIconClass) { |
|
options.toolbarIcon.className = this._marker.options.toolbarCloseIconClass |
|
} else { |
|
options.toolbarIcon.html = 'Close'; |
|
} |
|
|
|
L.Util.setOptions(this, options); |
|
|
|
L.Toolbar2.Action.prototype.initialize.call(this, map, options); |
|
}, |
|
|
|
addHooks: function () { |
|
if (this._marker._popupToolbar && this._marker._popupToolbar._removeToolbar) { |
|
this._marker._popupToolbar._removeToolbar(); |
|
} |
|
if (this._marker._dragged) { |
|
this._marker._dragged = undefined; |
|
this._marker.fire('marker:edited'); |
|
} |
|
} |
|
}); |
|
|
|
var editableMarkerPopupToolbar = L.Toolbar2.Popup.extend({ |
|
options: { |
|
actions: [ |
|
editMarkerToolbarAction, |
|
deleteMarkerToolbarAction, |
|
closeMarkerToolbarAction |
|
] |
|
}, |
|
|
|
onAdd: function (map) { |
|
var that = this; |
|
var marker = this._arguments[1]; |
|
|
|
if (marker instanceof L.Marker) { |
|
// Adjust the toolbar position so that it doesn't cover the marker. |
|
var popupAnchor = marker.options.icon.options.popupAnchor; |
|
this.options.anchor = L.point([popupAnchor[0], popupAnchor[1] - 6]); |
|
} |
|
|
|
L.Toolbar2.Popup.prototype.onAdd.call(this, map); |
|
|
|
if (marker.options.clusterGroup) { |
|
that._onClusterGroupAnimationEnd = function (e) { |
|
// Remove popup only if owner-marker clustered, otherwise don't remove. |
|
var visibleOne = marker.options.clusterGroup.getVisibleParent(marker); |
|
if (visibleOne && marker && !visibleOne.getLatLng().equals(marker.getLatLng()) && that._removeToolbar) { |
|
that._removeToolbar(); |
|
} |
|
}; |
|
|
|
marker.options.clusterGroup.on('animationend', that._onClusterGroupAnimationEnd); |
|
} |
|
|
|
that._removeToolbar = function () { |
|
if (that._onClusterGroupAnimationEnd) { |
|
marker.options.clusterGroup.off('animationend', that._onClusterGroupAnimationEnd); |
|
that._onClusterGroupAnimationEnd = undefined; |
|
} |
|
|
|
if (that._removeToolbar) { |
|
map.off('click', that._removeToolbar); |
|
} |
|
|
|
if (that._bringToFront) { |
|
that._bringToFront = undefined; |
|
} |
|
|
|
if (marker._editModeEnabled && marker._disableEditMode) { |
|
marker._disableEditMode(); |
|
|
|
marker._editModeEnabled = undefined; |
|
marker._enableEditMode = undefined; |
|
marker._disableEditMode = undefined; |
|
} |
|
|
|
map.removeLayer(that); |
|
|
|
that._removeToolbar = undefined; |
|
marker._popupToolbar = undefined; |
|
|
|
marker.fire('popuptoolbar:closed'); |
|
}; |
|
|
|
// Bring to front imitation. |
|
that._bringToFront = function () { |
|
map.removeLayer(that); |
|
map.addLayer(that); |
|
}; |
|
|
|
map.once('click', that._removeToolbar); |
|
} |
|
}); |
|
|
|
// L.MarkerClusterGroup doesn't support draggable markers. |
|
// This extension fixes this problem. |
|
L.MarkerClusterGroup.EditableMarker = L.Marker.extend({ |
|
options: { |
|
normalModeIcon: undefined, |
|
editModeIcon: undefined, |
|
// toolbarEditIconClass: undefined, |
|
// toolbarDeleteIconClass: undefined, |
|
// toolbarCloseIconClass: undefined, |
|
|
|
toolbarEditIconClass: 'fas fa-lg fa-pencil-square-o', |
|
toolbarDeleteIconClass: 'fas fa-lg fa-trash-o', |
|
toolbarCloseIconClass: 'fas fa-lg fa-close', |
|
|
|
clusterGroup: undefined, |
|
getLabelContent: function () { |
|
return 'This is editable marker for cluster group.' |
|
}, |
|
showLabelOnEdit: true, |
|
hideToolbarAfterEdit: false, |
|
dontShowToolbarOnFirstClick: false |
|
}, |
|
|
|
initialize: function (latlng, options) { |
|
L.Util.setOptions(this, options); |
|
|
|
if (!(this.options.clusterGroup instanceof L.MarkerClusterGroup)) { |
|
throw new TypeError('Wrong type for \'clustrGroup\' option.'); |
|
} |
|
|
|
if (!(this.options.normalModeIcon instanceof L.Icon)) { |
|
this.options.normalModeIcon = new L.Icon.Default; |
|
} |
|
|
|
this.options.icon = this.options.normalModeIcon; |
|
|
|
if (!(this.options.editModeIcon instanceof L.Icon)) { |
|
this.options.editModeIcon = new L.Icon.Default; |
|
} |
|
|
|
L.Marker.prototype.initialize.call(this, latlng, options); |
|
|
|
var markerWasClicked = false; |
|
|
|
this.on('click', function (e) { |
|
if (!this._popupToolbar && (!this.options.dontShowToolbarOnFirstClick || this.options.dontShowToolbarOnFirstClick && markerWasClicked)) { |
|
var prevMarker = this.options.clusterGroup._prevEditedMarker = this.options.clusterGroup._currentEditedMarker || {}; |
|
this.options.clusterGroup._currentEditedMarker = this; |
|
|
|
if (prevMarker._popupToolbar && prevMarker._popupToolbar._removeToolbar) { |
|
prevMarker._popupToolbar._removeToolbar(); |
|
} |
|
|
|
this._popupToolbar = (new editableMarkerPopupToolbar(e.latlng)).addTo(map, this); |
|
|
|
this.fire('popuptoolbar:shown'); |
|
} |
|
|
|
markerWasClicked = true; |
|
}); |
|
} |
|
}); |
|
})(window, document);
|
|
|