diff options
Diffstat (limited to 'js/components')
-rw-r--r-- | js/components/controllers/tree-controller.js | 10 | ||||
-rw-r--r-- | js/components/editable.reel/editable.js | 43 | ||||
-rw-r--r-- | js/components/hintable.reel/hintable.js | 46 | ||||
-rw-r--r-- | js/components/toolbar.reel/toolbar.css | 62 | ||||
-rw-r--r-- | js/components/toolbar.reel/toolbar.html | 53 | ||||
-rw-r--r-- | js/components/toolbar.reel/toolbar.js | 123 | ||||
-rw-r--r-- | js/components/treeview/tree-node.js | 4 | ||||
-rw-r--r-- | js/components/treeview/treeview.reel/treeview.js | 5 |
8 files changed, 288 insertions, 58 deletions
diff --git a/js/components/controllers/tree-controller.js b/js/components/controllers/tree-controller.js index 1e9222fd..cb95ca1d 100644 --- a/js/components/controllers/tree-controller.js +++ b/js/components/controllers/tree-controller.js | |||
@@ -23,6 +23,16 @@ var Montage = require("montage").Montage, | |||
23 | */ | 23 | */ |
24 | var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ { | 24 | var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ { |
25 | 25 | ||
26 | _delegate : { value: null }, | ||
27 | delegate : { | ||
28 | get: function() { | ||
29 | return this._delegate; | ||
30 | }, | ||
31 | set: function(value) { | ||
32 | this._delegate = value; | ||
33 | } | ||
34 | }, | ||
35 | |||
26 | rootKey : { | 36 | rootKey : { |
27 | value: null | 37 | value: null |
28 | }, | 38 | }, |
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 |
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index 6e3b2aaf..803770db 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js | |||
@@ -327,48 +327,8 @@ exports.Hintable = Montage.create(Editable, { | |||
327 | revert : [27], | 327 | revert : [27], |
328 | backsp : [8] | 328 | backsp : [8] |
329 | } | 329 | } |
330 | } | 330 | }, |
331 | distinct: true | ||
331 | } | 332 | } |
332 | 333 | ||
333 | }); | 334 | }); \ No newline at end of file |
334 | |||
335 | // suggest : { | ||
336 | // value : function(hint) { | ||
337 | // ///// if no hint argument passed, clear suggestions | ||
338 | // if(!hint) { | ||
339 | // this.clearHint(); | ||
340 | // return false; | ||
341 | // } | ||
342 | // | ||
343 | // this._hint = hint; | ||
344 | // | ||
345 | // ///// append span with suggested hint | ||
346 | // if(this.hintElement) { | ||
347 | // this.clearHint(); | ||
348 | // | ||
349 | // ///// Set the hint element's text | ||
350 | // this._getFirstTextNode(this.hintElement).textContent = hint; | ||
351 | // | ||
352 | // ///// if hintElement was removed from the DOM, the object still | ||
353 | // ///// exists, so it needs to be re-appended | ||
354 | // if(this.hintElement.parentNode === null) { | ||
355 | // this._element.appendChild(this.hintElement); | ||
356 | // } | ||
357 | // } else { | ||
358 | // /// Remove the phantom "<BR>" element that is generated when | ||
359 | // /// content editable element is empty | ||
360 | // this._children(this._element, function(item) { | ||
361 | // return item.nodeName === 'BR'; | ||
362 | // }).forEach(function(item) { | ||
363 | // this._element.removeChild(item); | ||
364 | // }, this); | ||
365 | // | ||
366 | // this.hintElement = document.createElement('span'); | ||
367 | // this.hintElement.classList.add(this.suggestClass); | ||
368 | // this.hintElement.appendChild(document.createTextNode(hint)); | ||
369 | // this._element.appendChild(this.hintElement); | ||
370 | // } | ||
371 | // | ||
372 | // this._hint = hint; | ||
373 | // } | ||
374 | // }, \ No newline at end of file | ||
diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css new file mode 100644 index 00000000..b765f636 --- /dev/null +++ b/js/components/toolbar.reel/toolbar.css | |||
@@ -0,0 +1,62 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||