aboutsummaryrefslogtreecommitdiff
path: root/js/components
diff options
context:
space:
mode:
Diffstat (limited to 'js/components')
-rw-r--r--js/components/controllers/tree-controller.js10
-rw-r--r--js/components/editable.reel/editable.js35
-rw-r--r--js/components/toolbar.reel/toolbar.css53
-rw-r--r--js/components/toolbar.reel/toolbar.html73
-rw-r--r--js/components/toolbar.reel/toolbar.js57
-rw-r--r--js/components/treeview/tree-node.js4
-rw-r--r--js/components/treeview/treeview.reel/treeview.js5
7 files changed, 225 insertions, 12 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*/
24var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ { 24var 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..b7fdd707 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,23 @@ 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 this._sendEvent('paste', e);
233 }
234 },
224 handleEvent : { 235 handleEvent : {
225 value : function(e) { 236 value : function(e) {
226 //console.log("event type : " + e._event.type); 237 //console.log("event type : " + e._event.type);
@@ -231,9 +242,9 @@ exports.Editable = Montage.create(Component, {
231 } 242 }
232 }, 243 },
233 _sendEvent : { 244 _sendEvent : {
234 value : function(type) { 245 value : function(type, data) {
235 var evt = document.createEvent("CustomEvent"); 246 var evt = document.createEvent("CustomEvent");
236 evt.initCustomEvent(type, true, true); 247 evt.initCustomEvent(type, true, true, data);
237 this.dispatchEvent(evt); 248 this.dispatchEvent(evt);
238 } 249 }
239 }, 250 },
diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css
new file mode 100644
index 00000000..e63b043e
--- /dev/null
+++ b/js/components/toolbar.reel/toolbar.css
@@ -0,0 +1,53 @@
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> */
6
7/*---------------------
8 Toolbar Container
9-----------------------*/
10
11.toolbar-container {
12 background-color: #474747;
13 border-bottom: 1px solid #333;
14 border-top: 1px solid #505050;
15 box-shadow: 0 4px 8px 0px rgba(0,0,0,0.75);
16 height: 22px;
17 overflow: hidden;
18 width: 100%;
19 -webkit-box-flex: 0;
20}
21.toolbar-container ul, .toolbar-container li {
22 margin: 0;
23 padding: 0;
24}
25
26/*---------------------
27 Button Types
28-----------------------*/
29
30.toolbar-add-button {
31 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADPSURBVHjadNC7TQNREIXh75oNCIlWG0JC7BJoAmrAIVAAIkRCog9ThFtwCYTrtS2vBBKbDcG%2BbLD%2F5GpGc885M8nAItZga5YcYx4tD6Fw3ncn40Aa36mLIwM94YRC%2FFHqqkVshCRwCz6QhGRjloZo%2F1nFYygmTlC1ptNsbOTgy7czsJYosq2nLuK1e%2Fx4o0u1Qza7cuMS5s%2BVXC68v4xWmUbZFzkqiUatAWWmtmzPkrpoqC27b82BQoU1NEqfvcXeJV%2FB7mDdvYG7Ie4%2BvwMA%2BFNeHV16KUYAAAAASUVORK5CYII%3D);
32}
33
34/*---------------------
35 Generic button styles
36-----------------------*/
37
38.toolbar-container .toolbar-button {
39 background-color: transparent;
40 background-repeat: no-repeat;
41 border-style: none;
42 border-radius: 4px;
43 height: 16px;
44 margin: 3px 5px 0 0;
45 padding: 0 2px;
46 opacity: .85;
47 text-indent: -9999999px;
48 width: 16px;
49 float: right;
50}
51.left-button {
52 float: left;
53} \ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html
new file mode 100644
index 00000000..53c6627a
--- /dev/null
+++ b/js/components/toolbar.reel/toolbar.html
@@ -0,0 +1,73 @@
1<!DOCTYPE html>
2<!-- <copyright>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6</copyright> -->
7<html lang="en">
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link href="toolbar.css" rel="stylesheet" type="text/css">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/css-panel/style-sheet.reel",
15 "name" : "StyleSheet",
16 "properties" : {
17 "element" : {"#" : "toolbar-container"},
18 "repetition": {"@": "buttonList" }
19 }
20 },
21
22 "buttonList": {
23 "module": "montage/ui/repetition.reel",