lib/leaflet.draw/src/edit/EditToolbar.js in leaflet-js-0.6.beta4 vs lib/leaflet.draw/src/edit/EditToolbar.js in leaflet-js-0.7.0

- old
+ new

@@ -3,83 +3,113 @@ });*/ L.EditToolbar = L.Toolbar.extend({ options: { edit: { - title: 'Edit layers', - selectedPathOptions: null // See Edit handler options, this is used to customize the style of selected paths + selectedPathOptions: { + color: '#fe57a1', /* Hot pink all the things! */ + opacity: 0.6, + dashArray: '10, 10', + + fill: true, + fillColor: '#fe57a1', + fillOpacity: 0.1 + } }, - remove: { - title: 'Delete layers' - }, + remove: {}, featureGroup: null /* REQUIRED! TODO: perhaps if not set then all layers on the map are selectable? */ }, initialize: function (options) { + // Need to set this manually since null is an acceptable value here + if (options.edit) { + if (typeof options.edit.selectedPathOptions === 'undefined') { + options.edit.selectedPathOptions = this.options.edit.selectedPathOptions; + } + options.edit = L.extend({}, this.options.edit, options.edit); + } + + if (options.remove) { + options.remove = L.extend({}, this.options.remove, options.remove); + } + L.Toolbar.prototype.initialize.call(this, options); this._selectedFeatureCount = 0; }, addToolbar: function (map) { var container = L.DomUtil.create('div', 'leaflet-draw-section'), buttonIndex = 0, - buttonClassPrefix = 'leaflet-draw-edit'; + buttonClassPrefix = 'leaflet-draw-edit', + featureGroup = this.options.featureGroup; - this._toolbarContainer = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar'), + this._toolbarContainer = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar'); this._map = map; if (this.options.edit) { this._initModeHandler( new L.EditToolbar.Edit(map, { - featureGroup: this.options.featureGroup, + featureGroup: featureGroup, selectedPathOptions: this.options.edit.selectedPathOptions }), this._toolbarContainer, buttonIndex++, - buttonClassPrefix + buttonClassPrefix, + L.drawLocal.edit.toolbar.buttons.edit ); } if (this.options.remove) { this._initModeHandler( new L.EditToolbar.Delete(map, { - featureGroup: this.options.featureGroup + featureGroup: featureGroup }), this._toolbarContainer, buttonIndex++, - buttonClassPrefix + buttonClassPrefix, + L.drawLocal.edit.toolbar.buttons.remove ); } // Save button index of the last button, -1 as we would have ++ after the last button this._lastButtonIndex = --buttonIndex; // Create the actions part of the toolbar this._actionsContainer = this._createActions([ { - title: 'Save changes.', - text: 'Save', + title: L.drawLocal.edit.toolbar.actions.save.title, + text: L.drawLocal.edit.toolbar.actions.save.text, callback: this._save, context: this }, { - title: 'Cancel editing, discards all changes.', - text: 'Cancel', + title: L.drawLocal.edit.toolbar.actions.cancel.title, + text: L.drawLocal.edit.toolbar.actions.cancel.text, callback: this.disable, context: this } ]); // Add draw and cancel containers to the control container container.appendChild(this._toolbarContainer); container.appendChild(this._actionsContainer); + this._checkDisabled(); + + featureGroup.on('layeradd layerremove', this._checkDisabled, this); + return container; }, + removeToolbar: function () { + L.Toolbar.prototype.removeToolbar.call(this); + + this.options.featureGroup.off('layeradd layerremove', this._checkDisabled, this); + }, + disable: function () { if (!this.enabled()) { return; } this._activeMode.handler.revertLayers(); @@ -87,7 +117,47 @@ }, _save: function () { this._activeMode.handler.save(); this._activeMode.handler.disable(); + }, + + _checkDisabled: function () { + var featureGroup = this.options.featureGroup, + hasLayers = featureGroup.getLayers().length !== 0, + button; + + if (this.options.edit) { + button = this._modes[L.EditToolbar.Edit.TYPE].button; + + if (hasLayers) { + L.DomUtil.removeClass(button, 'leaflet-disabled'); + } else { + L.DomUtil.addClass(button, 'leaflet-disabled'); + } + + button.setAttribute( + 'title', + hasLayers ? + L.drawLocal.edit.toolbar.buttons.edit + : L.drawLocal.edit.toolbar.buttons.editDisabled + ); + } + + if (this.options.remove) { + button = this._modes[L.EditToolbar.Delete.TYPE].button; + + if (hasLayers) { + L.DomUtil.removeClass(button, 'leaflet-disabled'); + } else { + L.DomUtil.addClass(button, 'leaflet-disabled'); + } + + button.setAttribute( + 'title', + hasLayers ? + L.drawLocal.edit.toolbar.buttons.remove + : L.drawLocal.edit.toolbar.buttons.removeDisabled + ); + } } -}); \ No newline at end of file +});