diff options
Diffstat (limited to 'js/components/editable.reel')
-rw-r--r-- | js/components/editable.reel/editable.js | 43 |
1 files changed, 28 insertions, 15 deletions
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index dad93b31..103e418f 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,16 +137,17 @@ 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'); | ||
143 | |||
144 | ///// if value is different than pre-edit val, call onchange method | 144 | ///// if value is different than pre-edit val, call onchange method |
145 | if(this._preEditValue !== this.value) { | 145 | if(this._preEditValue !== this.value) { |
146 | this._sendEvent('change'); | 146 | this._sendEvent('change'); |
147 | } | 147 | } |
148 | |||
149 | this._sendEvent('stop', eventData); | ||
150 | document.removeEventListener('mousedown', this, false); | ||
148 | } | 151 | } |
149 | }, | 152 | }, |
150 | selectAll : { | 153 | selectAll : { |
@@ -178,12 +181,11 @@ exports.Editable = Montage.create(Component, { | |||
178 | } | 181 | } |
179 | }, | 182 | }, |
180 | blur : { | 183 | blur : { |
181 | value : function() { | 184 | value : function(eventData) { |
182 | if(this._hint) { | 185 | if(this._hint) { |
183 | this.accept(); | 186 | this.accept(); |
184 | } | 187 | } |
185 | this.stop(); | 188 | this.stop(eventData); |
186 | document.removeEventListener('mouseup', this, false); | ||
187 | this._sendEvent('blur'); | 189 | this._sendEvent('blur'); |
188 | } | 190 | } |
189 | }, | 191 | }, |
@@ -212,15 +214,25 @@ exports.Editable = Montage.create(Component, { | |||
212 | this._sendEvent('input'); | 214 | this._sendEvent('input'); |
213 | } | 215 | } |
214 | }, | 216 | }, |
215 | handleMouseup : { | 217 | handleMousedown : { |
216 | value : function(e) { | 218 | value : function(e) { |
217 | //console.log('handle mouse down'); | 219 | //console.log('handle mouse down'); |
218 | ///// Listen for simulated blur event | 220 | ///// Listen for simulated blur event |
219 | if(this.stopOnBlur && e._event.target !== this._element) { | 221 | if(this.stopOnBlur && e._event.target !== this._element) { |
220 | this.blur(); | 222 | this.blur({ |
223 | "originalEventType": "mousedown", | ||
224 | "originalEvent": e | ||
225 | }); | ||
221 | } | 226 | } |
222 | } | 227 | } |
223 | }, | 228 | }, |
229 | handlePaste : { | ||
230 | value: function(e) { | ||
231 | e.preventDefault(); | ||
232 | document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")); | ||
233 | this._sendEvent('paste', e); | ||
234 | } | ||
235 | }, | ||
224 | handleEvent : { | 236 | handleEvent : { |
225 | value : function(e) { | 237 | value : function(e) { |
226 | //console.log("event type : " + e._event.type); | 238 | //console.log("event type : " + e._event.type); |
@@ -231,9 +243,9 @@ exports.Editable = Montage.create(Component, { | |||
231 | } | 243 | } |
232 | }, | 244 | }, |
233 | _sendEvent : { | 245 | _sendEvent : { |
234 | value : function(type) { | 246 | value : function(type, data) { |
235 | var evt = document.createEvent("CustomEvent"); | 247 | var evt = document.createEvent("CustomEvent"); |
236 | evt.initCustomEvent(type, true, true); | 248 | evt.initCustomEvent(type, true, true, data); |
237 | this.dispatchEvent(evt); | 249 | this.dispatchEvent(evt); |
238 | } | 250 | } |
239 | }, | 251 | }, |
@@ -257,10 +269,11 @@ exports.Editable = Montage.create(Component, { | |||
257 | }, | 269 | }, |
258 | keyActions : { | 270 | keyActions : { |
259 | value : { | 271 | value : { |
260 | stop : [27,9,13,186], | 272 | stop : [27,9,13], |
261 | revert : [27], | 273 | revert : [27], |
262 | backsp : [8] | 274 | backsp : [8] |
263 | } | 275 | }, |
276 | distinct: true | ||
264 | } | 277 | } |
265 | 278 | ||
266 | }); \ No newline at end of file | 279 | }); \ No newline at end of file |