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.css | 15 ++
.../style-declaration.reel/style-declaration.html | 68 ++++++
.../style-declaration.reel/style-declaration.js | 261 +++++++++++++++++++++
3 files changed, 344 insertions(+)
create mode 100644 js/panels/css-panel/style-declaration.reel/style-declaration.css
create mode 100644 js/panels/css-panel/style-declaration.reel/style-declaration.html
create mode 100644 js/panels/css-panel/style-declaration.reel/style-declaration.js
(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
new file mode 100644
index 00000000..e37d89d2
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -0,0 +1,15 @@
+/*
+ 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.
+ */
+
+.treeRoot > .style-shorthand-branch > div {
+ display: none;
+}
+.treeRoot > .style-shorthand-branch > dl {
+ margin-top: 4px;
+}
+.drag-over {
+ /*background-color: red;*/
+}
\ No newline at end of file
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.html b/js/panels/css-panel/style-declaration.reel/style-declaration.html
new file mode 100644
index 00000000..9123e2a0
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
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.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=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.html | 3 +++
.../style-declaration.reel/style-declaration.js | 29 +++++++++++++---------
2 files changed, 20 insertions(+), 12 deletions(-)
(limited to 'js/panels/css-panel/style-declaration.reel')
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 b1381bc6..9fc45640 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"},
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')
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
From 1c3da2901f454ad2c18e20216bb2517740a1c080 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 14:28:00 -0700
Subject: CSS Panel - Update components to use new serialization format
---
.../style-declaration.reel/style-declaration.html | 35 +++++-----------------
1 file changed, 7 insertions(+), 28 deletions(-)
(limited to 'js/panels/css-panel/style-declaration.reel')
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 9fc45640..fad54453 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.html
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -11,8 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot