diff options
Diffstat (limited to 'js/components/editable.reel')
-rw-r--r-- | js/components/editable.reel/editable.js | 61 |
1 files changed, 31 insertions, 30 deletions
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js index 026446ab..c008a18e 100644 --- a/js/components/editable.reel/editable.js +++ b/js/components/editable.reel/editable.js | |||
@@ -1,24 +1,25 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, are permitted provided that the following conditions are met: |
8 | 7 | ||
9 | - Redistributions of source code must retain the above copyright notice, | 8 | * Redistributions of source code must retain the above copyright notice, |
10 | this list of conditions and the following disclaimer. | 9 | this list of conditions and the following disclaimer. |
11 | - Redistributions in binary form must reproduce the above copyright | 10 | |
12 | notice, this list of conditions and the following disclaimer in the | 11 | * Redistributions in binary form must reproduce the above copyright notice, |
13 | documentation and/or other materials provided with the distribution. | 12 | this list of conditions and the following disclaimer in the documentation |
14 | - Neither the name of Motorola Mobility nor the names of its contributors | 13 | and/or other materials provided with the distribution. |
15 | may be used to endorse or promote products derived from this software | 14 | |
16 | without specific prior written permission. | 15 | * Neither the name of Motorola Mobility LLC nor the names of its |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
17 | 18 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -39,7 +40,7 @@ EDITABLE - Methods | |||
39 | - startEdit | 40 | - startEdit |
40 | - stopEdit | 41 | - stopEdit |
41 | - value | 42 | - value |
42 | - | 43 | - |
43 | - _suggest | 44 | - _suggest |
44 | - _suggestNext | 45 | - _suggestNext |
45 | - _suggestPrev | 46 | - _suggestPrev |
@@ -70,7 +71,7 @@ exports.Editable = Montage.create(Component, { | |||
70 | if(this.startOnEvent) { | 71 | if(this.startOnEvent) { |
71 | this._element.addEventListener(this.startOnEvent, this, false); | 72 | this._element.addEventListener(this.startOnEvent, this, false); |
72 | } | 73 | } |
73 | 74 | ||
74 | } | 75 | } |
75 | }, | 76 | }, |
76 | _readOnly : { | 77 | _readOnly : { |
@@ -80,9 +81,9 @@ exports.Editable = Montage.create(Component, { | |||
80 | get : function() { return this._readOnly; }, | 81 | get : function() { return this._readOnly; }, |
81 | set : function(makeReadOnly) { | 82 | set : function(makeReadOnly) { |
82 | var action = makeReadOnly ? 'add' : 'remove'; | 83 | var action = makeReadOnly ? 'add' : 'remove'; |
83 | 84 | ||
84 | this._element.classList[action](this.readOnlyClass); | 85 | this._element.classList[action](this.readOnlyClass); |
85 | 86 | ||
86 | if(this.isEditable) { | 87 | if(this.isEditable) { |
87 | this.stop(); | 88 | this.stop(); |
88 | } | 89 | } |
@@ -160,7 +161,7 @@ exports.Editable = Montage.create(Component, { | |||
160 | ///// Pre Edit Value | 161 | ///// Pre Edit Value |
161 | ///// Value stored when editing starts | 162 | ///// Value stored when editing starts |
162 | ///// Useful for reverting to previous value | 163 | ///// Useful for reverting to previous value |
163 | 164 | ||
164 | _preEditValue : { | 165 | _preEditValue : { |
165 | value : null | 166 | value : null |
166 | }, | 167 | }, |
@@ -169,26 +170,26 @@ exports.Editable = Montage.create(Component, { | |||
169 | if(!this._readOnly) { | 170 | if(!this._readOnly) { |
170 | this._isEditable = this._element.contentEditable = true; | 171 | this._isEditable = this._element.contentEditable = true; |
171 | this._element.classList.add(this.editingClass); | 172 | this._element.classList.add(this.editingClass); |
172 | 173 | ||
173 | ///// Save the preEditValue | 174 | ///// Save the preEditValue |
174 | this._preEditValue = this.value; | 175 | this._preEditValue = this.value; |
175 | 176 | ||
176 | // Initialize enteredValue with current value | 177 | // Initialize enteredValue with current value |
177 | this.enteredValue = this.value; | 178 | this.enteredValue = this.value; |
178 | 179 | ||
179 | if(this.selectOnStart) { | 180 | if(this.selectOnStart) { |
180 | this.selectAll(); | 181 | this.selectAll(); |
181 | } | 182 | } |
182 | 183 | ||
183 | if(this.stopOnBlur) { | 184 | if(this.stopOnBlur) { |
184 | //console.log('adding mousedown event listener'); | 185 | //console.log('adding mousedown event listener'); |
185 | ///// Simulate blur on editable node by listening to the doc | 186 | ///// Simulate blur on editable node by listening to the doc |
186 | document.addEventListener('mousedown', this, false); | 187 | document.addEventListener('mousedown', this, false); |
187 | } | 188 | } |
188 | 189 | ||
189 | this._sendEvent('start'); | 190 | this._sendEvent('start'); |
190 | } | 191 | } |
191 | 192 | ||
192 | } | 193 | } |
193 | }, | 194 | }, |
194 | stop : { | 195 | stop : { |
@@ -209,7 +210,7 @@ exports.Editable = Montage.create(Component, { | |||
209 | value : function() { | 210 | value : function() { |
210 | var range = document.createRange(), | 211 | var range = document.createRange(), |
211 | sel = window.getSelection(); | 212 | sel = window.getSelection(); |
212 | 213 | ||
213 | sel.removeAllRanges(); | 214 | sel.removeAllRanges(); |
214 | range.selectNodeContents(this._element); | 215 | range.selectNodeContents(this._element); |
215 | sel.addRange(range); | 216 | sel.addRange(range); |
@@ -244,15 +245,15 @@ exports.Editable = Montage.create(Component, { | |||
244 | this._sendEvent('blur'); | 245 | this._sendEvent('blur'); |
245 | } | 246 | } |
246 | }, | 247 | }, |
247 | 248 | ||
248 | /* -------------------- User Event Handling -------------------- */ | 249 | /* -------------------- User Event Handling -------------------- */ |
249 | 250 | ||
250 | handleKeydown : { | 251 | handleKeydown : { |
251 | value : function(e) { | 252 | value : function(e) { |
252 | var k = e.keyCode; | 253 | var k = e.keyCode; |
253 | } | 254 | } |
254 | }, | 255 | }, |
255 | 256 | ||
256 | handleKeyup : { | 257 | handleKeyup : { |
257 | value : function(e) { | 258 | value : function(e) { |
258 | // Record change in value | 259 | // Record change in value |
@@ -267,7 +268,7 @@ exports.Editable = Montage.create(Component, { | |||
267 | if(!this.isDirty) { | 268 | if(!this.isDirty) { |
268 | this.isDirty = true; | 269 | this.isDirty = true; |
269 | } | 270 | } |
270 | 271 | ||
271 | this._sendEvent('input'); | 272 | this._sendEvent('input'); |
272 | } | 273 | } |
273 | }, | 274 | }, |
@@ -310,7 +311,7 @@ exports.Editable = Montage.create(Component, { | |||
310 | }, | 311 | }, |
311 | 312 | ||
312 | /* -------------------- CONFIG -------------------- */ | 313 | /* -------------------- CONFIG -------------------- */ |
313 | 314 | ||
314 | editingClass : { | 315 | editingClass : { |
315 | value : 'editable' | 316 | value : 'editable' |
316 | }, | 317 | }, |
@@ -326,7 +327,7 @@ exports.Editable = Montage.create(Component, { | |||
326 | stopOnBlur : { | 327 | stopOnBlur : { |
327 | value : true | 328 | value : true |
328 | }, | 329 | }, |
329 | keyActions : { | 330 | keyActions : { |
330 | value : { | 331 | value : { |
331 | stop : [27,9,13], | 332 | stop : [27,9,13], |
332 | revert : [27], | 333 | revert : [27], |
@@ -334,5 +335,5 @@ exports.Editable = Montage.create(Component, { | |||
334 | }, | 335 | }, |
335 | distinct: true | 336 | distinct: true |
336 | } | 337 | } |
337 | 338 | ||
338 | }); | 339 | }); |