Skip to content
Browse files

Show disabled style for the edit/disabled buttons. refs #136

  • Loading branch information...
1 parent 97213f8 commit de0dae3256eebde655406dfa5171c622103eaac8 @jacobtoye jacobtoye committed Sep 30, 2013
View
BIN dist/images/spritesheet-2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN dist/images/spritesheet.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
8 dist/leaflet.draw.css
@@ -152,6 +152,14 @@
background-position: -182px -2px;
}
+.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
+ background-position: -212px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
+ background-position: -242px -2px;
+}
+
/* ================================================================== */
/* Drawing styles
/* ================================================================== */
View
6 src/Leaflet.draw.js
@@ -70,8 +70,10 @@ L.drawLocal = {
}
},
buttons: {
- edit: 'Edit layers',
- remove: 'Delete layers'
+ edit: 'Edit layers.',
+ editDisabled: 'No layers to edit.',
+ remove: 'Delete layers.',
+ removeDisabled: 'No layers to delete.'
}
},
handlers: {
View
63 src/edit/EditToolbar.js
@@ -40,7 +40,8 @@ L.EditToolbar = L.Toolbar.extend({
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');
@@ -49,7 +50,7 @@ L.EditToolbar = L.Toolbar.extend({
if (this.options.edit) {
this._initModeHandler(
new L.EditToolbar.Edit(map, {
- featureGroup: this.options.featureGroup,
+ featureGroup: featureGroup,
selectedPathOptions: this.options.edit.selectedPathOptions
}),
this._toolbarContainer,
@@ -62,7 +63,7 @@ L.EditToolbar = L.Toolbar.extend({
if (this.options.remove) {
this._initModeHandler(
new L.EditToolbar.Delete(map, {
- featureGroup: this.options.featureGroup
+ featureGroup: featureGroup
}),
this._toolbarContainer,
buttonIndex++,
@@ -94,9 +95,19 @@ L.EditToolbar = L.Toolbar.extend({
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; }
@@ -108,5 +119,49 @@ L.EditToolbar = L.Toolbar.extend({
_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;
+
+ L.DomUtil.toggleClass(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;
+
+ L.DomUtil.toggleClass(button, 'leaflet-disabled');
+
+ button.setAttribute(
+ 'title',
+ hasLayers ?
+ L.drawLocal.edit.toolbar.buttons.remove
+ : L.drawLocal.edit.toolbar.buttons.removeDisabled
+ );
+ }
}
-});
+});
+
+if (!L.DomUtil.toggleClass) {
+ L.Util.extend(L.DomUtil, {
+ toggleClass: function (el, name) {
+ if (this.hasClass(el, name)) {
+ this.removeClass(el, name);
+ } else {
+ this.addClass(el, name);
+ }
+ }
+ });
+}
View
33 src/images/spritesheet.svg
@@ -2,27 +2,40 @@
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="420px" height="60px" viewBox="0 0 420 60" enable-background="new 0 0 420 60" xml:space="preserve">
+ width="540px" height="60px" viewBox="0 0 540 60" enable-background="new 0 0 540 60" xml:space="preserve">
+<g>
+ <path fill="#464646" d="M18,36v6h6v-6H18z M22,40h-2v-2h2V40z"/>
+ <path fill="#464646" d="M36,18v6h6v-6H36z M40,22h-2v-2h2V22z"/>
+ <polygon fill="#464646" points="23.142,39.145 20.857,36.854 36.857,20.857 39.142,23.142 "/>
+</g>
+<polygon fill="#464646" points="83.07,42 76,28.773 86.463,18 100,24.565 97.904,39.396 "/>
<rect x="140" y="20" fill="#464646" width="20" height="20"/>
<path fill="#464646" d="M221,30c0,6.078-4.926,11-11,11s-11-4.922-11-11c0-6.074,4.926-11,11-11S221,23.926,221,30z"/>
+<path fill="#464646" d="M270,19c-4.971,0-9,4.029-9,9c0,4.971,5.001,12,9,14c4.001-2,9-9.029,9-14C279,23.029,274.971,19,270,19z
+ M270,31.5c-2.484,0-4.5-2.014-4.5-4.5c0-2.484,2.016-4.5,4.5-4.5c2.485,0,4.5,2.016,4.5,4.5C274.5,29.486,272.485,31.5,270,31.5z"
+ />
<g>
- <path fill="#464646" d="M337,30.156v0.406v5.605c0,1.658-1.344,3-3,3h-10c-1.656,0-3-1.342-3-3v-10c0-1.657,1.344-3,3-3h6.344
- l3.191-3.17H324c-3.314,0-6,2.687-6,6v10c0,3.314,2.686,6,6,6h10c3.314,0,6-2.686,6-6v-8.809L337,30.156"/>
+ <path fill="#464646" d="M337,30.156v0.407v5.604c0,1.658-1.344,3-3,3h-10c-1.655,0-3-1.342-3-3v-10c0-1.657,1.345-3,3-3h6.345
+ l3.19-3.17H324c-3.313,0-6,2.687-6,6v10c0,3.313,2.687,6,6,6h10c3.314,0,6-2.687,6-6v-8.809L337,30.156"/>
<polygon fill="#464646" points="329.828,33.529 327,33.529 327,30.699 335.891,21.809 338.719,24.637 "/>
- <rect x="338.699" y="17.828" transform="matrix(0.7071 0.7071 -0.7071 0.7071 113.8091 -235.1032)" fill="#464646" width="4" height="4"/>
+ <rect x="338.697" y="17.826" transform="matrix(-0.707 -0.7072 0.7072 -0.707 567.5655 274.7729)" fill="#464646" width="4" height="4"/>
</g>
<g>
<path fill="#464646" d="M381,42h18V24h-18V42z M395,26h2v14h-2V26z M391,26h2v14h-2V26z M387,26h2v14h-2V26z M383,26h2v14h-2V26z"
/>
<path fill="#464646" d="M395,20v-2v-2h-10v2v2h-6v2h22v-2H395z M393,20h-6v-2h6V20z"/>
</g>
<g>
- <path fill="#464646" d="M18,36v6h6v-6H18z M22,40h-2v-2h2V40z"/>
- <path fill="#464646" d="M36,18v6h6v-6H36z M40,22h-2v-2h2V22z"/>
- <polygon fill="#464646" points="23.142,39.145 20.857,36.854 36.857,20.857 39.142,23.142 "/>
+ <path fill="#BBBBBB" d="M458,30.156v0.407v5.604c0,1.658-1.344,3-3,3h-10c-1.655,0-3-1.342-3-3v-10c0-1.657,1.345-3,3-3h6.345
+ l3.19-3.17H445c-3.313,0-6,2.687-6,6v10c0,3.313,2.687,6,6,6h10c3.314,0,6-2.687,6-6v-8.809L458,30.156"/>
+ <polygon fill="#BBBBBB" points="450.828,33.529 448,33.529 448,30.699 456.891,21.809 459.719,24.637 "/>
+
+ <rect x="459.697" y="17.826" transform="matrix(-0.707 -0.7072 0.7072 -0.707 774.118 360.3402)" fill="#BBBBBB" width="4" height="4"/>
+</g>
+<g>
+ <path fill="#BBBBBB" d="M501,42h18V24h-18V42z M515,26h2v14h-2V26z M511,26h2v14h-2V26z M507,26h2v14h-2V26z M503,26h2v14h-2V26z"
+ />
+ <path fill="#BBBBBB" d="M515,20v-2v-2h-10v2v2h-6v2h22v-2H515z M513,20h-6v-2h6V20z"/>
</g>
-<polygon fill="#464646" points="83.07,42 76,28.773 86.463,18 100,24.565 97.904,39.396 "/>
-<path fill="#464646" d="M270,19c-4.971,0-9,4.029-9,9c0,4.971,5.001,12,9,14c4.001-2,9-9.029,9-14C279,23.029,274.971,19,270,19z
- M270,31.5c-2.485,0-4.5-2.014-4.5-4.5c0-2.484,2.015-4.5,4.5-4.5s4.5,2.016,4.5,4.5C274.5,29.486,272.485,31.5,270,31.5z"/>
</svg>

0 comments on commit de0dae3

Please sign in to comment.
Something went wrong with that request. Please try again.