From 6056a569caab94bdbdc2c60b58907109ff468dd3 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 10 May 2012 13:21:38 -0700 Subject: Style Declaration - Improved updating of styles using binding. --- .../style-declaration.reel/style-declaration.css | 6 +- .../style-declaration.reel/style-declaration.html | 15 +- .../style-declaration.reel/style-declaration.js | 245 ++++++++++----------- 3 files changed, 133 insertions(+), 133 deletions(-) (limited to 'js/panels/css-panel/style-declaration.reel') 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 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.treeRoot > .style-shorthand-branch > div { - display: none; -} -.treeRoot > .style-shorthand-branch > dl { + +.declaration-list { margin-top: 4px; } .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 }, "arrayController": { "prototype": "montage/ui/controller/array-controller", + "properties": { + "automaticallyOrganizeObjects": true + }, "bindings": { "content": { "boundObject": {"@": "owner"}, @@ -44,9 +47,17 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "declaration": {"@": "owner"} }, "bindings": { - "sourceObject" : { + "propertyText" : { + "boundObject": {"@": "repetition"}, + "boundObjectPropertyPath": "objectAtCurrentIteration.name" + }, + "valueText" : { + "boundObject": {"@": "repetition"}, + "boundObjectPropertyPath": "objectAtCurrentIteration.value" + }, + "empty" : { "boundObject": {"@": "repetition"}, - "boundObjectPropertyPath": "objectAtCurrentIteration" + "boundObjectPropertyPath": "objectAtCurrentIteration.isEmpty" }, "delegate": { "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, ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map"); exports.StyleDeclaration = Montage.create(Component, { - cssText : { - value: null - }, - focusDelegate : { - value: null - }, + cssText : { value: null }, + focusDelegate : { value: null }, + includeEmptyStyle : { - value: true + value: true, + distinct: true }, styles : { value: [], distinct: true }, - templateDidLoad : { - value: function() { - console.log("Style declaration - template did load"); + _styleSortFunction : { + value: function(styleA, styleB) { + ///// If the style is an empty style (with Add button) + ///// push to end of declaration + if(styleA.isEmpty) { + return 1; + } else if (styleB.isEmpty) { + return -1; + } - if(this.focusDelegate) { - //this.treeController.delegate = this.focusDelegate; - this.styleComponent.delegate = this.focusDelegate; + ///// Alphabetic sort based on property name + if (styleA.name < styleB.name) { + return -1; + } else if (styleA.name > styleB.name) { + return 1; + } else { + return 0; } } }, - prepareForDraw : { - value: function(e) { - console.log("Style Declaration :: prepare for draw"); - this._element.addEventListener('drop', this, false); - this.element.addEventListener('dragenter', this, false); - this.element.addEventListener('dragleave', this, false); + _styleFilterFunction: { + value: function(style, styleArray) { + var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[style.name]; + + ///// No shorthands, return true to include style + if(!shorthands) { return true; } + + var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]], + stylesArray = styleArray, + hasAll; + + debugger; + hasAll = subProps.every(function(subProp) { + debugger; + return this.declaration[subProp]; + }, this); + + if(hasAll) { + return false; + } } }, + _declaration: { value: null }, @@ -49,21 +72,17 @@ exports.StyleDeclaration = Montage.create(Component, { return this._declaration; }, set: function(dec) { + var stylesArray; + if(this._declaration) { - this.arrayController.removeObjects(this.styles); + this.styles = null; + this.styles = []; } -console.log("dec being set", this); - this._declaration = dec; + ///// Take snapshot of declaration this.cssText = dec.cssText; - Array.prototype.slice.call(dec).forEach(function(prop, index) { - this.styles.push({ - name: prop, - value: dec.getPropertyValue(prop) - }); - - }, this); + stylesArray = Array.prototype.slice.call(dec); if(this.includeEmptyStyle) { this.styles.push({ @@ -72,109 +91,85 @@ console.log("dec being set", this); "isEmpty": true }); } - ///// creates data structure to use with tree component - //this.buildStyleTree(); -// if(this.includeEmptyStyle) { -// this.styleTree.properties.push({ -// "name": "property", -// "value" : "value", -// "isEmpty": true -// }); -// } + stylesArray.forEach(function(prop, index) { + this.styles.push({ + name: prop, + value: dec.getPropertyValue(prop) + }); + }, this); + this._declaration = dec; this.needsDraw = true; } }, - update : { - value: function() { - if(this.declaration.cssText !== this.cssText) { - ///// Needs update -//debugger; - - this.styles = null; - this.styles = []; - - Array.prototype.slice.call(this.declaration).forEach(function(prop, index) { - this.styles.push({ - name: prop, - value: this.declaration.getPropertyValue(prop) - }); + styleShorthander : { + value: function(styles) { + var shorthandsToAdd = [], + subProps, hasAll; - }, this); + styles.forEach(function(property, index, styleArray) { + var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property]; - if(this.includeEmptyStyle) { - this.styles.push({ - "name": "property", - "value" : "value", - "isEmpty": true - }); - } -//debugger; - this.needsDraw = true; - } - } - }, + if(!shorthands) { return false; } -// buildStyleTree : { -// value: function() { -// var styles = Array.prototype.slice.call(this._declaration).sort(); -// this.styleTree = { -// properties : styles.map(this.styleTreeMapper, this) -// }; -// } -// }, - styleTreeMapper : { - value: function arrayToTreeMapper(property, i, styleArray) { - var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property], - subProps, hasAll; + var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]], + stylesArray = styleArray; - ///// Is this a sub property of a shorthand property? - if(shorthands) { - //debugger; - ///// Yes. - ///// Now, are all sub properties in the declaration? - subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]]; hasAll = subProps.every(function(subProp) { - return styleArray.indexOf(subProp) !== -1; + return stylesArray.indexOf(subProp) !== -1; }); if(hasAll) { - ///// It has all sub properties - ///// Let's return a tree branch and remove the - ///// sub properties from the flat array - - this._removeItemsFromArray(styleArray, subProps); - - return { - name: shorthands[0], - value: this._declaration.getPropertyValue(shorthands[0]), - properties: subProps.map(function(p, i, array) { - return { - name: p, - value: this._declaration.getPropertyValue(p) - }; - }, this) - }; + subProps.forEach(function(subProp) { + stylesArray.splice(stylesArray.indexOf(subProp), 1); + }, this); + shorthandsToAdd.push(shorthands[0]); } - } + }, this); + return styles.concat(shorthandsToAdd); + } + }, + + _getStyleToIndexMap : { + value: function() { + var map = {}; + + for(var i = 0; i