aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorEric Guzman2012-05-10 13:21:38 -0700
committerEric Guzman2012-05-10 13:21:38 -0700
commit6056a569caab94bdbdc2c60b58907109ff468dd3 (patch)
treef48716a7a82ab8d1d70ccefe12e71076d97cf610 /js
parent830b6577ee25a6955bd4e275f216e1cadeff168c (diff)
downloadninja-6056a569caab94bdbdc2c60b58907109ff468dd3.tar.gz
Style Declaration - Improved updating of styles using binding.
Diffstat (limited to 'js')
-rw-r--r--js/panels/css-panel/css-style.reel/css-style.js43
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.css6
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.html15
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js245
4 files changed, 139 insertions, 170 deletions
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index b021dc0f..face668e 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -13,6 +13,7 @@ exports.CssStyle = Montage.create(Component, {
13 editingStyleClass : { value: 'edit-style-item' }, 13 editingStyleClass : { value: 'edit-style-item' },
14 editNewEmptyClass : { value: 'edit-empty-style' }, 14 editNewEmptyClass : { value: 'edit-empty-style' },
15 invalidStyleClass : { value: "style-item-invalid" }, 15 invalidStyleClass : { value: "style-item-invalid" },
16 emptyStyleClass : { value: "empty-css-style" },
16 17
17 propertyText : { value: "property" }, 18 propertyText : { value: "property" },
18 _valueText : { value: "value" }, 19 _valueText : { value: "value" },
@@ -240,7 +241,7 @@ exports.CssStyle = Montage.create(Component, {
240 241
241 this.editing = false; 242 this.editing = false;
242 243
243 if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) { 244 if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) {
244 ///// Show add button 245 ///// Show add button
245 this.editingNewStyle = false; 246 this.editingNewStyle = false;
246 } 247 }
@@ -265,7 +266,7 @@ exports.CssStyle = Montage.create(Component, {
265 266
266 this.editing = false; 267 this.editing = false;
267 268
268 if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) { 269 if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) {
269 ///// Show add button 270 ///// Show add button
270 this.editingNewStyle = false; 271 this.editingNewStyle = false;
271 } 272 }
@@ -306,39 +307,9 @@ exports.CssStyle = Montage.create(Component, {
306 } 307 }
307 }, 308 },
308 309
309// handleSourceObjectSet: {
310// value: function() {
311// this.propertyText = this.sourceObject.name;
312// this.valueText = this.sourceObject.value;
313//
314// if(this.sourceObject.isEmpty) {
315// this.empty = true;
316// }
317// }
318// },
319
320 _sourceObject : { value: null },
321 sourceObject: {
322 get: function() {
323 return this._sourceObject;
324 },
325 set: function(sourceObject) {
326 this._sourceObject = sourceObject;
327
328 this.propertyText = sourceObject.name;
329 this.valueText = sourceObject.value;
330
331 if(sourceObject.isEmpty) {
332 this.empty = true;
333 }
334 }
335 },
336
337 templateDidLoad : { 310 templateDidLoad : {
338 value: function() { 311 value: function() {
339 //this.delegate = this.treeView.contentController.delegate; 312 this.propertyField.hints = this.propertyNames;
340//debugger;
341 //this.propertyField.hints = this.propertyNames;
342 } 313 }
343 }, 314 },
344 315
@@ -402,17 +373,15 @@ exports.CssStyle = Montage.create(Component, {
402 value : function() { 373 value : function() {
403 if(this.empty) { 374 if(this.empty) {
404 this.element.draggable = false; 375 this.element.draggable = false;
405 this.element.classList.add('empty-css-style'); 376 this.element.classList.add(this.emptyStyleClass);
406 if(!this.addStyleButton.parentNode) { 377 if(!this.addStyleButton.parentNode) {
407 console.log("Adding style for ", this.propertyText);
408 this.element.appendChild(this.addStyleButton); 378 this.element.appendChild(this.addStyleButton);
409 this.addStyleButton.addEventListener('click', this, false); 379 this.addStyleButton.addEventListener('click', this, false);
410 } 380 }
411 } else { 381 } else {
412 this.element.draggable = true; 382 this.element.draggable = true;
413 this.element.classList.remove('empty-css-style'); 383 this.element.classList.remove(this.emptyStyleClass);
414 if(this.addStyleButton.parentNode) { 384 if(this.addStyleButton.parentNode) {
415 console.log("Removing style for ", this.propertyText);
416 this.element.removeChild(this.addStyleButton); 385 this.element.removeChild(this.addStyleButton);
417 } 386 }
418 } 387 }
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.css b/js/panels/css-panel/style-declaration.reel/style-declaration.css
index e37d89d2..6be8d33c 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.css
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -4,10 +4,8 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7.treeRoot > .style-shorthand-branch > div { 7
8 display: none; 8.declaration-list {
9}
10.treeRoot > .style-shorthand-branch > dl {
11 margin-top: 4px; 9 margin-top: 4px;
12} 10}
13.drag-over { 11.drag-over {
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.html b/js/panels/css-panel/style-declaration.reel/style-declaration.html
index 9123e2a0..2fdb11d5 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.html
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -22,6 +22,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
22 }, 22 },
23 "arrayController": { 23 "arrayController": {
24 "prototype": "montage/ui/controller/array-controller", 24 "prototype": "montage/ui/controller/array-controller",
25 "properties": {
26 "automaticallyOrganizeObjects": true
27 },
25 "bindings": { 28 "bindings": {
26 "content": { 29 "content": {
27 "boundObject": {"@": "owner"}, 30 "boundObject": {"@": "owner"},
@@ -44,9 +47,17 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
44 "declaration": {"@": "owner"} 47 "declaration": {"@": "owner"}
45 }, 48 },
46 "bindings": { 49 "bindings": {
47 "sourceObject" : { 50 "propertyText" : {
51 "boundObject": {"@": "repetition"},
52 "boundObjectPropertyPath": "objectAtCurrentIteration.name"
53 },
54 "valueText" : {
55 "boundObject": {"@": "repetition"},
56 "boundObjectPropertyPath": "objectAtCurrentIteration.value"
57 },
58 "empty" : {
48 "boundObject": {"@": "repetition"}, 59 "boundObject": {"@": "repetition"},
49 "boundObjectPropertyPath": "objectAtCurrentIteration" 60 "boundObjectPropertyPath": "objectAtCurrentIteration.isEmpty"
50 }, 61 },
51 "delegate": { 62 "delegate": {
52 "boundObject": {"@": "owner"}, 63 "boundObject": {"@": "owner"},
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
index 80d8ff7b..33e77297 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -9,38 +9,61 @@ var Montage = require("montage/core/core").Montage,
9 ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map"); 9 ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
10 10
11exports.StyleDeclaration = Montage.create(Component, { 11exports.StyleDeclaration = Montage.create(Component, {
12 cssText : { 12 cssText : { value: null },
13 value: null 13 focusDelegate : { value: null },
14 }, 14
15 focusDelegate : {
16 value: null
17 },
18 includeEmptyStyle : { 15 includeEmptyStyle : {
19 value: true 16 value: true,
17 distinct: true
20 }, 18 },
21 styles : { 19 styles : {
22 value: [], 20 value: [],
23 distinct: true 21 distinct: true
24 }, 22 },
25 23
26 templateDidLoad : { 24 _styleSortFunction : {
27 value: function() { 25 value: function(styleA, styleB) {
28 console.log("Style declaration - template did load"); 26 ///// If the style is an empty style (with Add button)
27 ///// push to end of declaration
28 if(styleA.isEmpty) {
29 return 1;
30 } else if (styleB.isEmpty) {
31 return -1;
32 }
29 33
30 if(this.focusDelegate) { 34 ///// Alphabetic sort based on property name
31 //this.treeController.delegate = this.focusDelegate; 35 if (styleA.name < styleB.name) {
32 this.styleComponent.delegate = this.focusDelegate;