aboutsummaryrefslogtreecommitdiff
path: root/js/components/editable.reel/editable.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/editable.reel/editable.js')
-rw-r--r--js/components/editable.reel/editable.js37
1 files changed, 25 insertions, 12 deletions
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index dad93b31..b385d916 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -40,7 +40,9 @@ exports.Editable = Montage.create(Component, {
40 this._element.addEventListener('keydown', this, false); 40 this._element.addEventListener('keydown', this, false);
41 this._element.addEventListener('keyup', this, false); 41 this._element.addEventListener('keyup', this, false);
42 this._element.addEventListener('input', this, false); 42 this._element.addEventListener('input', this, false);
43 43 this._element.addEventListener('paste', this, false);
44
45
44 if(this.startOnEvent) { 46 if(this.startOnEvent) {
45 this._element.addEventListener(this.startOnEvent, this, false); 47 this._element.addEventListener(this.startOnEvent, this, false);
46 } 48 }
@@ -126,7 +128,7 @@ exports.Editable = Montage.create(Component, {
126 if(this.stopOnBlur) { 128 if(this.stopOnBlur) {
127 //console.log('adding mousedown event listener'); 129 //console.log('adding mousedown event listener');
128 ///// Simulate blur on editable node by listening to the doc 130 ///// Simulate blur on editable node by listening to the doc
129 document.addEventListener('mouseup', this, false); 131 document.addEventListener('mousedown', this, false);
130 } 132 }
131 133
132 this._sendEvent('start'); 134 this._sendEvent('start');
@@ -135,12 +137,14 @@ exports.Editable = Montage.create(Component, {
135 } 137 }
136 }, 138 },
137 stop : { 139 stop : {
138 value: function() { 140 value: function(eventData) {
139 this._isEditable = this._element.contentEditable = false; 141 this._isEditable = this._element.contentEditable = false;
140 this._element.classList.remove(this.editingClass); 142 this._element.classList.remove(this.editingClass);
141 143
142 this._sendEvent('stop'); 144 this._sendEvent('stop', eventData);
143 145
146 document.removeEventListener('mousedown', this, false);
147
144 ///// if value is different than pre-edit val, call onchange method 148 ///// if value is different than pre-edit val, call onchange method
145 if(this._preEditValue !== this.value) { 149 if(this._preEditValue !== this.value) {
146 this._sendEvent('change'); 150 this._sendEvent('change');
@@ -178,12 +182,11 @@ exports.Editable = Montage.create(Component, {
178 } 182 }
179 }, 183 },
180 blur : { 184 blur : {
181 value : function() { 185 value : function(eventData) {
182 if(this._hint) { 186 if(this._hint) {
183 this.accept(); 187 this.accept();
184 } 188 }
185 this.stop(); 189 this.stop(eventData);
186 document.removeEventListener('mouseup', this, false);
187 this._sendEvent('blur'); 190 this._sendEvent('blur');
188 } 191 }
189 }, 192 },
@@ -212,15 +215,25 @@ exports.Editable = Montage.create(Component, {
212 this._sendEvent('input'); 215 this._sendEvent('input');
213 } 216 }
214 }, 217 },
215 handleMouseup : { 218 handleMousedown : {
216 value : function(e) { 219 value : function(e) {
217 //console.log('handle mouse down'); 220 //console.log('handle mouse down');
218 ///// Listen for simulated blur event 221 ///// Listen for simulated blur event
219 if(this.stopOnBlur && e._event.target !== this._element) { 222 if(this.stopOnBlur && e._event.target !== this._element) {
220 this.blur(); 223 this.blur({
224 "originalEventType": "mousedown",
225 "originalEvent": e
226 });
221 } 227 }
222 } 228 }
223 }, 229 },
230 handlePaste : {
231 value: function(e) {
232 e.preventDefault();
233 document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text"));
234 this._sendEvent('paste', e);
235 }
236 },
224 handleEvent : { 237 handleEvent : {
225 value : function(e) { 238 value : function(e) {
226 //console.log("event type : " + e._event.type); 239 //console.log("event type : " + e._event.type);
@@ -231,9 +244,9 @@ exports.Editable = Montage.create(Component, {
231 } 244 }
232 }, 245 },
233 _sendEvent : { 246 _sendEvent : {
234 value : function(type) { 247 value : function(type, data) {
235 var evt = document.createEvent("CustomEvent"); 248 var evt = document.createEvent("CustomEvent");
236 evt.initCustomEvent(type, true, true); 249 evt.initCustomEvent(type, true, true, data);
237 this.dispatchEvent(evt); 250 this.dispatchEvent(evt);
238 } 251 }
239 }, 252 },