Fire 'draw:edited' event on L.Illustrate.Textbox instances when the c…

…ontent of the <textarea> is changed. Add support for L.Illustrate.Textbox deletion.
justinmanley · Sep 9, 2014 · 921f99b · 921f99b
1 parent 32d87b6
commit 921f99b
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 33 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -102,7 +102,7 @@ module.exports = function(grunt) {
 
         watch: {
             options : {
-                livereload: 7777
+                livereload: true
             },
             source: {
                 files: [

diff --git a/dist/Leaflet.Illustrate.js b/dist/Leaflet.Illustrate.js
@@ -365,6 +365,11 @@ L.Illustrate.Textbox = L.Class.extend({
 		/* Enable typing, text selection, etc. */
 		this._enableTyping();
 
+		/* Propagate click events from the L.RotatbleMarker to the L.Illustrate.Textbox */
+		this._textbox.on('click', function(event) {
+			this.fire('click', event);
+		}, this);
+
 		/* Disable the textarea if the textbox content should not be editable. */
 		if (!this.options.textEditable) {
 			this.getTextarea().setAttribute('readonly', 'readonly');
@@ -381,6 +386,10 @@ L.Illustrate.Textbox = L.Class.extend({
 	},
 
 	onRemove: function() {
+		/* In case the textbox was removed from the map while dragging was disabled. */
+		/* (see _enableTyping) */
+		this._map.dragging.enable();
+
 		this._map.removeLayer(this._textbox);
 
 		this.fire('remove');
@@ -462,6 +471,7 @@ L.Illustrate.Textbox = L.Class.extend({
 		}
 	},
 
+	/* When user leaves the textarea, fire a 'draw:edited' event if they changed anything. */
 	_onTextEdit: function() {
 		if (this._text_edited) {
 			this._map.fire('draw:edited', {
@@ -472,31 +482,33 @@ L.Illustrate.Textbox = L.Class.extend({
 	},
 
 	_enableTyping: function() {
-		var textarea = this.getTextarea(),
+		var map = this._map,
+			textarea = this.getTextarea(),
 			onTextChange = function() {
 				this._text_edited = true;
 			};
 
+		/* Enable text selection and editing. */
 		this._selecting = new L.Illustrate.Selectable(textarea);
 
 		L.DomEvent.on(textarea, 'click', function(event) {
 			event.target.focus();
-			this._map.dragging.disable();
+			map.dragging.disable();
 			this._selecting.enable();
 		}, this);
 
 		L.DomEvent.on(textarea, 'mouseout', function() {
-			this._map.dragging.enable();
+			map.dragging.enable();
 			this._selecting.disable();
 		}, this);
 
+		/* Fire 'draw:edited' event when text content changes. */
 		L.DomEvent.on(textarea, 'change', onTextChange, this);
 		L.DomEvent.on(textarea, 'keyup', onTextChange, this);
 		L.DomEvent.on(textarea, 'paste', onTextChange, this);
 
-		/* When user leaves the textarea, fire a 'draw:created' event if they changed anything. */
 		L.DomEvent.on(textarea, 'blur', this._onTextEdit, this);
-	}
+	},
 
 });
 
@@ -524,7 +536,7 @@ L.Illustrate.Textbox.prototype.toGeoJSON = function() {
 
 L.Illustrate.Selectable = L.Handler.extend({
 
-	includes: L.Mixin.Events,
+	includes: [L.Mixin.Events],
 
 	statics: {
 		START: L.Draggable.START,
@@ -705,27 +717,31 @@ L.Illustrate.Control = L.Control.Draw.extend({
 
 		L.Control.prototype.initialize.call(this, options);
 
-		var toolbar;
+		var id,
+			toolbar;
 
 		this._toolbars = {};
 
-		// Initialize toolbars
+		/* Initialize toolbars for creating L.Illustrate objects. */
 		if (L.Illustrate.Toolbar && this.options.draw) {
 			toolbar = new L.Illustrate.Toolbar(this.options.draw);
-
-			this._toolbars[L.Illustrate.Toolbar.TYPE] = toolbar;
+			id = L.stamp(toolbar);
+			this._toolbars[id] = toolbar;
 
 			// Listen for when toolbar is enabled
-			this._toolbars[L.Illustrate.Toolbar.TYPE].on('enable', this._toolbarEnabled, this);
+			this._toolbars[id].on('enable', this._toolbarEnabled, this);
 		}
 
+		/* Initialize generic edit/delete toolbars. */
 		if (L.EditToolbar && this.options.edit) {
 			toolbar = new L.EditToolbar(this.options.edit);
+			id = L.stamp(toolbar);
+			this._toolbars[id] = toolbar;
 
-			this._toolbars[L.EditToolbar.TYPE] = toolbar;
+			this._toolbars[id] = toolbar;
 
 			// Listen for when toolbar is enabled
-			this._toolbars[L.EditToolbar.TYPE].on('enable', this._toolbarEnabled, this);
+			this._toolbars[id].on('enable', this._toolbarEnabled, this);
 		}
 	}
 });

diff --git a/examples/simple.html b/examples/simple.html
@@ -26,12 +26,9 @@
 		var drawnItems = new L.FeatureGroup();
 		map.addLayer(drawnItems);
 
-		var illustrateControl = new L.Illustrate.Control({
-			edit: {
-				featureGroup: drawnItems
-			}
-		});
-		map.addControl(illustrateControl);
+		new L.Illustrate.Control({
+			edit: { featureGroup: drawnItems }
+		}).addTo(map);
 
 		map.on('draw:created', function(evt) {
 			var type = evt.layerType,

diff --git a/src/L.Illustrate.Toolbar.js b/src/L.Illustrate.Toolbar.js
@@ -60,27 +60,31 @@ L.Illustrate.Control = L.Control.Draw.extend({
 
 		L.Control.prototype.initialize.call(this, options);
 
-		var toolbar;
+		var id,
+			toolbar;
 
 		this._toolbars = {};
 
-		// Initialize toolbars
+		/* Initialize toolbars for creating L.Illustrate objects. */
 		if (L.Illustrate.Toolbar && this.options.draw) {
 			toolbar = new L.Illustrate.Toolbar(this.options.draw);
-
-			this._toolbars[L.Illustrate.Toolbar.TYPE] = toolbar;
+			id = L.stamp(toolbar);
+			this._toolbars[id] = toolbar;
 
 			// Listen for when toolbar is enabled
-			this._toolbars[L.Illustrate.Toolbar.TYPE].on('enable', this._toolbarEnabled, this);
+			this._toolbars[id].on('enable', this._toolbarEnabled, this);
 		}
 
+		/* Initialize generic edit/delete toolbars. */
 		if (L.EditToolbar && this.options.edit) {
 			toolbar = new L.EditToolbar(this.options.edit);
+			id = L.stamp(toolbar);
+			this._toolbars[id] = toolbar;
 
-			this._toolbars[L.EditToolbar.TYPE] = toolbar;
+			this._toolbars[id] = toolbar;
 
 			// Listen for when toolbar is enabled
-			this._toolbars[L.EditToolbar.TYPE].on('enable', this._toolbarEnabled, this);
+			this._toolbars[id].on('enable', this._toolbarEnabled, this);
 		}
 	}
 });

diff --git a/src/core/L.Illustrate.Textbox.js b/src/core/L.Illustrate.Textbox.js
@@ -47,6 +47,11 @@ L.Illustrate.Textbox = L.Class.extend({
 		/* Enable typing, text selection, etc. */
 		this._enableTyping();
 
+		/* Propagate click events from the L.RotatbleMarker to the L.Illustrate.Textbox */
+		this._textbox.on('click', function(event) {
+			this.fire('click', event);
+		}, this);
+
 		/* Disable the textarea if the textbox content should not be editable. */
 		if (!this.options.textEditable) {
 			this.getTextarea().setAttribute('readonly', 'readonly');
@@ -63,6 +68,10 @@ L.Illustrate.Textbox = L.Class.extend({
 	},
 
 	onRemove: function() {
+		/* In case the textbox was removed from the map while dragging was disabled. */
+		/* (see _enableTyping) */
+		this._map.dragging.enable();
+
 		this._map.removeLayer(this._textbox);
 
 		this.fire('remove');
@@ -144,6 +153,7 @@ L.Illustrate.Textbox = L.Class.extend({
 		}
 	},
 
+	/* When user leaves the textarea, fire a 'draw:edited' event if they changed anything. */
 	_onTextEdit: function() {
 		if (this._text_edited) {
 			this._map.fire('draw:edited', {
@@ -154,31 +164,33 @@ L.Illustrate.Textbox = L.Class.extend({
 	},
 
 	_enableTyping: function() {
-		var textarea = this.getTextarea(),
+		var map = this._map,
+			textarea = this.getTextarea(),
 			onTextChange = function() {
 				this._text_edited = true;
 			};
 
+		/* Enable text selection and editing. */
 		this._selecting = new L.Illustrate.Selectable(textarea);
 
 		L.DomEvent.on(textarea, 'click', function(event) {
 			event.target.focus();
-			this._map.dragging.disable();
+			map.dragging.disable();
 			this._selecting.enable();
 		}, this);
 
 		L.DomEvent.on(textarea, 'mouseout', function() {
-			this._map.dragging.enable();
+			map.dragging.enable();
 			this._selecting.disable();
 		}, this);
 
+		/* Fire 'draw:edited' event when text content changes. */
 		L.DomEvent.on(textarea, 'change', onTextChange, this);
 		L.DomEvent.on(textarea, 'keyup', onTextChange, this);
 		L.DomEvent.on(textarea, 'paste', onTextChange, this);
 
-		/* When user leaves the textarea, fire a 'draw:created' event if they changed anything. */
 		L.DomEvent.on(textarea, 'blur', this._onTextEdit, this);
-	}
+	},
 
 });
 
@@ -206,7 +218,7 @@ L.Illustrate.Textbox.prototype.toGeoJSON = function() {
 
 L.Illustrate.Selectable = L.Handler.extend({
 
-	includes: L.Mixin.Events,
+	includes: [L.Mixin.Events],
 
 	statics: {
 		START: L.Draggable.START,