Skip to content

Commit

Permalink
Add listeners to textbox so that 'draw:edited' event fires when the u…
Browse files Browse the repository at this point in the history 
…ser leaves the textbox if any text inside has been changed. Add L.Illustrate.Textbox#getTextarea method and test.
  • Loading branch information
@justinmanley
justinmanley committed Sep 8, 2014
1 parent d34ffc7 commit ffe857b
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 20 deletions.
52 changes: 42 additions & 10 deletions dist/Leaflet.Illustrate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,8 @@ L.Illustrate.Textbox = L.Class.extend({

/* this._minSize is used by edit handles (L.Illustrate.EditHandle) when updating size. */
minWidth: 10,
minHeight: 10
minHeight: 10,
textEditable: true

},

Expand Down Expand Up @@ -357,14 +358,19 @@ L.Illustrate.Textbox = L.Class.extend({
onAdd: function(map) {
this._map = map;

this._map.addLayer(this._textbox);
map.addLayer(this._textbox);
this._updateCenter();
this._updateSize();

/* Enable typing, text selection, etc. */
this._enableTyping();
// this.addHandler('textselect', L.Illustrate.Textbox.Select);

L.DomUtil.addClass(this._textbox._icon.children[0], 'leaflet-illustrate-textbox-outlined');
/* Disable the textarea if the textbox content should not be editable. */
if (!this.options.textEditable) {
this.getTextarea().setAttribute('readonly', 'readonly');
}

L.DomUtil.addClass(this.getTextarea(), 'leaflet-illustrate-textbox-outlined');

this.fire('add');
},
Expand Down Expand Up @@ -443,6 +449,10 @@ L.Illustrate.Textbox = L.Class.extend({
return this;
},

getTextarea: function() {
return this._textbox._icon.children[0];
},

_updateSize: function() {
if (this._textbox._icon) {
this._textbox._icon.style.marginTop = - Math.round(this._height/2) + "px";
Expand All @@ -452,8 +462,20 @@ L.Illustrate.Textbox = L.Class.extend({
}
},

_onTextEdit: function() {
if (this._text_edited) {
this._map.fire('draw:edited', {
layers: new L.LayerGroup().addLayer(this)
});
this._text_edited = false;
}
},

_enableTyping: function() {
var textarea = this._textbox._icon.children[0];
var textarea = this.getTextarea(),
onTextChange = function() {
this._text_edited = true;
};

this._selecting = new L.Illustrate.Selectable(textarea);

Expand All @@ -467,7 +489,15 @@ L.Illustrate.Textbox = L.Class.extend({
this._map.dragging.enable();
this._selecting.disable();
}, this);

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);
}

});

/* Add GeoJSON Conversion */
Expand Down Expand Up @@ -562,9 +592,7 @@ L.Illustrate.Create.Textbox = L.Draw.Rectangle.extend({

textOptions: {
borderColor: '#4387fd',
borderWidth: 2,
minWidth: 10,
minHeight: 10
borderWidth: 2
}
},

Expand Down Expand Up @@ -600,8 +628,12 @@ L.Illustrate.Create.Textbox = L.Draw.Rectangle.extend({

_setShapeOptions: function() {
/* shapeOptions are set dynamically so that the Rectangle looks the same as the Textbox. */
var borderWidth = this.options.textOptions.borderWidth ? this.options.textOptions.borderWidth : 2,
borderColor = this.options.textOptions.borderColor ? this.options.textOptions.borderColor : '#4387fd';
var borderWidth = this.options.textOptions.borderWidth ?
this.options.textOptions.borderWidth :
2,
borderColor = this.options.textOptions.borderColor ?
this.options.textOptions.borderColor :
'#4387fd';

this.options.shapeOptions = L.extend({}, this.options.shapeOptions, {
weight: borderWidth,
Expand Down
40 changes: 35 additions & 5 deletions src/core/L.Illustrate.Textbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ L.Illustrate.Textbox = L.Class.extend({

/* this._minSize is used by edit handles (L.Illustrate.EditHandle) when updating size. */
minWidth: 10,
minHeight: 10
minHeight: 10,
textEditable: true

},

Expand Down Expand Up @@ -39,14 +40,19 @@ L.Illustrate.Textbox = L.Class.extend({
onAdd: function(map) {
this._map = map;

this._map.addLayer(this._textbox);
map.addLayer(this._textbox);
this._updateCenter();
this._updateSize();

/* Enable typing, text selection, etc. */
this._enableTyping();
// this.addHandler('textselect', L.Illustrate.Textbox.Select);

L.DomUtil.addClass(this._textbox._icon.children[0], 'leaflet-illustrate-textbox-outlined');
/* Disable the textarea if the textbox content should not be editable. */
if (!this.options.textEditable) {
this.getTextarea().setAttribute('readonly', 'readonly');
}

L.DomUtil.addClass(this.getTextarea(), 'leaflet-illustrate-textbox-outlined');

this.fire('add');
},
Expand Down Expand Up @@ -125,6 +131,10 @@ L.Illustrate.Textbox = L.Class.extend({
return this;
},

getTextarea: function() {
return this._textbox._icon.children[0];
},

_updateSize: function() {
if (this._textbox._icon) {
this._textbox._icon.style.marginTop = - Math.round(this._height/2) + "px";
Expand All @@ -134,8 +144,20 @@ L.Illustrate.Textbox = L.Class.extend({
}
},

_onTextEdit: function() {
if (this._text_edited) {
this._map.fire('draw:edited', {
layers: new L.LayerGroup().addLayer(this)
});
this._text_edited = false;
}
},

_enableTyping: function() {
var textarea = this._textbox._icon.children[0];
var textarea = this.getTextarea(),
onTextChange = function() {
this._text_edited = true;
};

this._selecting = new L.Illustrate.Selectable(textarea);

Expand All @@ -149,7 +171,15 @@ L.Illustrate.Textbox = L.Class.extend({
this._map.dragging.enable();
this._selecting.disable();
}, this);

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);
}

});

/* Add GeoJSON Conversion */
Expand Down
12 changes: 7 additions & 5 deletions src/create/L.Illustrate.Create.Textbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ L.Illustrate.Create.Textbox = L.Draw.Rectangle.extend({

textOptions: {
borderColor: '#4387fd',
borderWidth: 2,
minWidth: 10,
minHeight: 10
borderWidth: 2
}
},

Expand Down Expand Up @@ -47,8 +45,12 @@ L.Illustrate.Create.Textbox = L.Draw.Rectangle.extend({

_setShapeOptions: function() {
/* shapeOptions are set dynamically so that the Rectangle looks the same as the Textbox. */
var borderWidth = this.options.textOptions.borderWidth ? this.options.textOptions.borderWidth : 2,
borderColor = this.options.textOptions.borderColor ? this.options.textOptions.borderColor : '#4387fd';
var borderWidth = this.options.textOptions.borderWidth ?
this.options.textOptions.borderWidth :
2,
borderColor = this.options.textOptions.borderColor ?
this.options.textOptions.borderColor :
'#4387fd';

this.options.shapeOptions = L.extend({}, this.options.shapeOptions, {
weight: borderWidth,
Expand Down
8 changes: 8 additions & 0 deletions test/core/TextboxSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,4 +99,12 @@ describe("L.Illustrate.Textbox", function() {
});
});
});

describe("#getTextarea", function() {
it("Should return a <textarea> element.", function() {
var textarea = textbox.getTextarea();

expect(textarea.nodeName).to.equal('TEXTAREA');
});
});
});
17 changes: 17 additions & 0 deletions test/edit/EditTextboxSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,21 @@ describe("L.Illustrate.Edit.Pointer", function() {
});
});

describe("draw:edited", function() {
it.skip("Should fire when content inside the textarea is changed.", function(done) {
var textarea = textbox.getTextarea(),
text = 'Some new text';

map.on('draw:edited', function(event) {
event.layers.eachLayer(function(layer) {
expect(layer.getTextarea().value).to.equal(text);
});
done();
});

/* Setting the textarea value programmatically doesn't fire the change event. */
textarea.innerHTML = text;
});
});

});

0 comments on commit ffe857b

Please sign in to comment.