From eb80f8a610100f908b5cb9ffc65bfa94f8a23c21 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 8 May 2012 13:26:36 -0700 Subject: CSS Panel - Create non-tree declaration (optimized). And add updating functionality. --- .../style-declaration.reel/style-declaration.js | 261 +++++++++++++++++++++ 1 file changed, 261 insertions(+) create mode 100644 js/panels/css-panel/style-declaration.reel/style-declaration.js (limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js') diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js new file mode 100644 index 00000000..80d8ff7b --- /dev/null +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js @@ -0,0 +1,261 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
*/ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map"); + +exports.StyleDeclaration = Montage.create(Component, { + cssText : { + value: null + }, + focusDelegate : { + value: null + }, + includeEmptyStyle : { + value: true + }, + styles : { + value: [], + distinct: true + }, + + templateDidLoad : { + value: function() { + console.log("Style declaration - template did load"); + + if(this.focusDelegate) { + //this.treeController.delegate = this.focusDelegate; + this.styleComponent.delegate = this.focusDelegate; + } + } + }, + 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); + } + }, + _declaration: { + value: null + }, + declaration: { + get: function() { + return this._declaration; + }, + set: function(dec) { + if(this._declaration) { + this.arrayController.removeObjects(this.styles); + } +console.log("dec being set", this); + this._declaration = dec; + + this.cssText = dec.cssText; + + Array.prototype.slice.call(dec).forEach(function(prop, index) { + this.styles.push({ + name: prop, + value: dec.getPropertyValue(prop) + }); + + }, this); + + if(this.includeEmptyStyle) { + this.styles.push({ + "name": "property", + "value" : "value", + "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 +// }); +// } + + 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) + }); + + }, this); + + if(this.includeEmptyStyle) { + this.styles.push({ + "name": "property", + "value" : "value", + "isEmpty": true + }); + } +//debugger; + this.needsDraw = true; + } + } + }, + +// 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; + + ///// 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; + }); + + 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) + }; + } + } + + + return { + name: property, + value: this._declaration.getPropertyValue(property) + }; + } + }, + _removeItemsFromArray : { + value: function(array, items) { + items.forEach(function(item) { + var index = array.indexOf(item); + array.splice(index, 1); + }, this); + } + }, + styleTree : { + value: { + "properties" : [] + }, + distinct: true + }, + +// addNewStyleAfter : { +// value: function(style) { +// style.parentComponent.parentComponent.contentController.addObjects({ +// name: 'property', +// value: 'value', +// isEmpty: true, +// treeNodeType: 'leaf' +// }); +// style.parentComponent.parentComponent.needsDraw = true; +// } +// }, + + addNewStyle : { + value: function() { + this.styles.push({ + "name": "property", + "value" : "value", + "isEmpty": true + }); + } + }, + + + /* drag/drop events */ + handleDrop : { + value: function(e) { + console.log('dropped'); + } + }, + handleDragenter : { + value: function(e) { + console.log("dec - drag enter"); + this.element.classList.add("drag-over"); + } + }, + handleDragleave : { + value: function(e) { + if(this.element === e._event.toElement || this._containsElement(e._event.toElement)) { + //// Dragged-over element is inside of component element + //// I.e. it's not really a "drag leave" + e.stopPropagation(); + e.preventDefault(); + return false; + } + + console.log("DECLARATION - ELEMENT NOT IN DEC", e._event.toElement); + + //console.log("dec - drag leave"); + this.element.classList.remove("drag-over"); + } + }, + + draw: { + value: function() { + if(this._declaration) { + + } + } + }, + + _containsElement : { + value: function(innerElement) { + var isInComponent = false, + parent = innerElement.parentNode; + + while (parent !== document) { + if(parent === this.element) { + isInComponent = true; + break; + } + parent = parent.parentNode; + } + + return isInComponent; + } + } +}); \ No newline at end of file -- cgit v1.2.3 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.js | 245 ++++++++++----------- 1 file changed, 118 insertions(+), 127 deletions(-) (limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js') 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=0; i--) { + if(usedIndices.indexOf(i) === -1) { + if(!this.styles[i].isEmpty) { + ///// index not used, remove style + this.removeStyle(this.styles[i]); + } + } + } + ///// Keep copy of cssText to know when we need to ///// update the view this.cssText = this.declaration.cssText; - this.needsDraw = true; + this.needsDraw = this.needsSort = true; } } }, @@ -221,7 +232,18 @@ exports.StyleDeclaration = Montage.create(Component, { } this.styles.push(styleDescriptor); - this.arrayController.organizeObjects(); + + this.needsSort = this.needsDraw = true; + } + }, + removeStyle : { + value: function(styleDescriptor) { + var styleDescriptorIndex = this.styles.indexOf(styleDescriptor); + + this.styles.splice(styleDescriptorIndex, 1); + //this.arrayController.removeObjects(styleDescriptor); + + //this.needsDraw = true; } }, @@ -259,7 +281,7 @@ exports.StyleDeclaration = Montage.create(Component, { if(this.focusDelegate) { this.styleComponent.delegate = this.focusDelegate; } - this.arrayController.sortFunction = this._styleSortFunction; + //this.arrayController.sortFunction = this._styleSortFunction; } }, @@ -274,7 +296,7 @@ exports.StyleDeclaration = Montage.create(Component, { willDraw : { value: function() { if(this.needsSort) { - this.arrayController.organizeObjects(); + //this.arrayController.organizeObjects(); this.needsSort = false; } } -- cgit v1.2.3 From 423ec19206efe0bfd72131ba8a3012f6cdff09ce Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 10:07:10 -0700 Subject: CSS Style Declaration - Improved style item interaction --- .../style-declaration.reel/style-declaration.js | 29 +++++++++++++--------- 1 file changed, 17 insertions(+), 12 deletions(-) (limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js') 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 8e364d0d..711879ce 100644 --- a/js/panels/css-panel/style-declaration.reel/style-declaration.js +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js @@ -32,14 +32,15 @@ exports.StyleDeclaration = Montage.create(Component, { return -1; } + return 0; ///// Alphabetic sort based on property name - if (styleA.name < styleB.name) { - return -1; - } else if (styleA.name > styleB.name) { - return 1; - } else { - return 0; - } +// if (styleA.name < styleB.name) { +// return -1; +// } else if (styleA.name > styleB.name) { +// return 1; +// } else { +// return 0; +// } } }, _styleFilterFunction: { @@ -173,6 +174,7 @@ exports.StyleDeclaration = Montage.create(Component, { //// if shorthand exists in list of rendered styles //// update it this.styles[shorthandIndex].value = this.declaration.getPropertyValue(shorthand); + usedIndices.push(shorthandIndex); shorthandUpdated = true; } }, this); @@ -225,13 +227,16 @@ exports.StyleDeclaration = Montage.create(Component, { isEmpty: false }, prop; + console.log('adding "'+ property+'" with value "' + value + '"'); + for(prop in data) { if(data.hasOwnProperty(prop)) { styleDescriptor[prop] = data[prop]; } } - this.styles.push(styleDescriptor); + //this.styles.push(styleDescriptor); + this.arrayController.addObjects(styleDescriptor); this.needsSort = this.needsDraw = true; } @@ -239,9 +244,9 @@ exports.StyleDeclaration = Montage.create(Component, { removeStyle : { value: function(styleDescriptor) { var styleDescriptorIndex = this.styles.indexOf(styleDescriptor); - - this.styles.splice(styleDescriptorIndex, 1); - //this.arrayController.removeObjects(styleDescriptor); +console.log("removing style", styleDescriptor); + //this.styles.splice(styleDescriptorIndex, 1); + this.arrayController.removeObjects(styleDescriptor); //this.needsDraw = true; } @@ -281,7 +286,7 @@ exports.StyleDeclaration = Montage.create(Component, { if(this.focusDelegate) { this.styleComponent.delegate = this.focusDelegate; } - //this.arrayController.sortFunction = this._styleSortFunction; + this.arrayController.sortFunction = this._styleSortFunction; } }, -- cgit v1.2.3 From 1f4d7643b484cab4258cda2bb8eefcc6a60452df Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 09:27:25 -0700 Subject: CSS Style Declaration - Improve shorthand filtering --- .../style-declaration.reel/style-declaration.js | 38 +++++++++++----------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js') 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 711879ce..57cbdb63 100644 --- a/js/panels/css-panel/style-declaration.reel/style-declaration.js +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js @@ -84,8 +84,7 @@ exports.StyleDeclaration = Montage.create(Component, { ///// Take snapshot of declaration this.cssText = dec.cssText; - stylesArray = Array.prototype.slice.call(dec); - + stylesArray = this.filterShorthands(Array.prototype.slice.call(dec)); stylesArray.forEach(function(prop, index) { this.styles.push({ name: prop, @@ -107,28 +106,32 @@ exports.StyleDeclaration = Montage.create(Component, { } }, - styleShorthander : { + filterShorthands : { value: function(styles) { var shorthandsToAdd = [], subProps, hasAll; - styles.forEach(function(property, index, styleArray) { - var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property]; + var stylesCopy = styles.map(function(style) { + return style; + }); - if(!shorthands) { return false; } + stylesCopy.forEach(function(property, index) { + var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property]; + if(shorthands) { + subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]]; - var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]], - stylesArray = styleArray; + hasAll = subProps.every(function(subProp) { + return styles.indexOf(subProp) !== -1; + }); - hasAll = subProps.every(function(subProp) { - return stylesArray.indexOf(subProp) !== -1; - }); + if(hasAll) { + for(var i = subProps.length-1; i>=0; i--) { + styles.splice(styles.indexOf(subProps[i]), 1); + } + shorthandsToAdd.push(shorthands[0]); + } - if(hasAll) { - subProps.forEach(function(subProp) { - stylesArray.splice(stylesArray.indexOf(subProp), 1); - }, this); - shorthandsToAdd.push(shorthands[0]); + return true; } }, this); @@ -227,8 +230,6 @@ exports.StyleDeclaration = Montage.create(Component, { isEmpty: false }, prop; - console.log('adding "'+ property+'" with value "' + value + '"'); - for(prop in data) { if(data.hasOwnProperty(prop)) { styleDescriptor[prop] = data[prop]; @@ -244,7 +245,6 @@ exports.StyleDeclaration = Montage.create(Component, { removeStyle : { value: function(styleDescriptor) { var styleDescriptorIndex = this.styles.indexOf(styleDescriptor); -console.log("removing style", styleDescriptor); //this.styles.splice(styleDescriptorIndex, 1); this.arrayController.removeObjects(styleDescriptor); -- cgit v1.2.3