aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-05-22 09:27:25 -0700
committerEric Guzman2012-05-22 09:27:25 -0700
commit1f4d7643b484cab4258cda2bb8eefcc6a60452df (patch)
tree04e1616df883bf1ad999d07fa49f355fc71413a2
parent6686f2f0bc3ea1b4f589409c78a99bd07a41e7c3 (diff)
downloadninja-1f4d7643b484cab4258cda2bb8eefcc6a60452df.tar.gz
CSS Style Declaration - Improve shorthand filtering
-rwxr-xr-xjs/panels/CSSPanel/css-shorthand-map.js33
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js38
2 files changed, 37 insertions, 34 deletions
diff --git a/js/panels/CSSPanel/css-shorthand-map.js b/js/panels/CSSPanel/css-shorthand-map.js
index 191dbae5..d469e2a1 100755
--- a/js/panels/CSSPanel/css-shorthand-map.js
+++ b/js/panels/CSSPanel/css-shorthand-map.js
@@ -16,24 +16,24 @@ exports.CSS_SHORTHAND_MAP = {
16 'background-repeat-y' : ['background', 'background-repeat'], 16 'background-repeat-y' : ['background', 'background-repeat'],
17 17
18 'border-bottom' : ['border'], 18 'border-bottom' : ['border'],
19 'border-bottom-color' : ['border', 'border-bottom'], 19 'border-bottom-color' : ['border-bottom'],
20 'border-bottom-style' : ['border', 'border-bottom'], 20 'border-bottom-style' : ['border-bottom'],
21 'border-bottom-width' : ['border', 'border-bottom'], 21 'border-bottom-width' : ['border-bottom'],
22 22
23 'border-left' : ['border'], 23 'border-left' : ['border'],
24 'border-left-color' : ['border', 'border-left'], 24 'border-left-color' : ['border-left'],
25 'border-left-style' : ['border', 'border-left'], 25 'border-left-style' : ['border-left'],
26 'border-left-width' : ['border', 'border-left'], 26 'border-left-width' : ['border-left'],
27 27
28 'border-right' : ['border'], 28 'border-right' : ['border'],
29 'border-right-color' : ['border', 'border-right'], 29 'border-right-color' : ['border-right'],
30 'border-right-style' : ['border', 'border-right'], 30 'border-right-style' : ['border-right'],
31 'border-right-width' : ['border', 'border-right'], 31 'border-right-width' : ['border-right'],
32 32
33 'border-top' : ['border'], 33 'border-top' : ['border'],
34 'border-top-color' : ['border', 'border-top'], 34 'border-top-color' : ['border-top'],
35 'border-top-style' : ['border', 'border-top'], 35 'border-top-style' : ['border-top'],
36 'border-top-width' : ['border', 'border-top'], 36 'border-top-width' : ['border-top'],
37 37
38 'border-color' : ['border'], 38 'border-color' : ['border'],
39 'border-style' : ['border'], 39 'border-style' : ['border'],
@@ -79,9 +79,12 @@ exports.CSS_SHORTHAND_TO_SUBPROP_MAP = {
79 'background' : ["background-image", "background-repeat-x", "background-repeat-y", "background-attachment", 79 'background' : ["background-image", "background-repeat-x", "background-repeat-y", "background-attachment",
80 "background-position-x", "background-position-y", "background-origin", "background-clip", 80 "background-position-x", "background-position-y", "background-origin", "background-clip",
81 "background-color"], 81 "background-color"],
82 'border' : ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width", 82 'border' : ['border-width', 'border-style', 'border-color'],
83 "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", 83 'border-top' : ['border-top-width', 'border-top-style', 'border-top-color'],
84 "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-image"], 84 'border-right' : ['border-right-width', 'border-right-style', 'border-right-color'],
85 'border-bottom' : ['border-bottom-width', 'border-bottom-style', 'border-bottom-color'],
86 'border-left' : ['border-left-width', 'border-left-style', 'border-left-color'],
87 'border-image' : ['border-image-outset', 'border-image-repeat','border-image-slice', 'border-image-source', 'border-image-width'],
85 'border-radius' : ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", 88 'border-radius' : ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius",
86 "border-bottom-left-radius"], 89 "border-bottom-left-radius"],
87 'font' : ["font-family", "font-size", "font-style", "font-variant", "font-weight", "line-height"], 90 'font' : ["font-family", "font-size", "font-style", "font-variant", "font-weight", "line-height"],
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, {
84 ///// Take snapshot of declaration 84 ///// Take snapshot of declaration
85 this.cssText = dec.cssText; 85 this.cssText = dec.cssText;
86 86
87 stylesArray = Array.prototype.slice.call(dec); 87 stylesArray = this.filterShorthands(Array.prototype.slice.call(dec));
88
89 stylesArray.forEach(function(prop, index) { 88 stylesArray.forEach(function(prop, index) {
90 this.styles.push({ 89 this.styles.push({
91 name: prop, 90 name: prop,
@@ -107,28 +106,32 @@ exports.StyleDeclaration = Montage.create(Component, {
107 } 106 }
108 }, 107 },
109 108
110 styleShorthander : { 109 filterShorthands : {
111 value: function(styles) { 110 value: function(styles) {
112 var shorthandsToAdd = [], 111 var shorthandsToAdd = [],
113 subProps, hasAll; 112 subProps, hasAll;
114 113
115 styles.forEach(function(property, index, styleArray) { 114 var stylesCopy = styles.map(function(style) {
116 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property]; 115 return style;
116 });
117 117
118 if(!shorthands) { return false; } 118 stylesCopy.forEach(function(property, index) {
119 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];
120 if(shorthands) {
121 subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
119 122
120 var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]], 123 hasAll = subProps.every(function(subProp) {
121 stylesArray = styleArray; 124 return styles.indexOf(subProp) !== -1;
125 });
122 126
123 hasAll = subProps.every(function(subProp) { 127 if(hasAll) {
124 return stylesArray.indexOf(subProp) !== -1; 128 for(var i = subProps.length-1; i>=0; i--) {
125 }); 129 styles.splice(styles.indexOf(subProps[i]), 1);
130 }
131 shorthandsToAdd.push(shorthands[0]);
132 }
126 133
127 if(hasAll) { 134 return true;
128 subProps.forEach(function(subProp) {
129 stylesArray.splice(stylesArray.indexOf(subProp), 1);
130 }, this);
131 shorthandsToAdd.push(shorthands[0]);
132 } 135 }
133 }, this); 136 }, this);
134 137
@@ -227,8 +230,6 @@ exports.StyleDeclaration = Montage.create(Component, {
227 isEmpty: false 230 isEmpty: false
228 }, prop; 231 }, prop;
229 232
230 console.log('adding "'+ property+'" with value "' + value + '"');
231
232 for(prop in data) { 233 for(prop in data) {
233 if(data.hasOwnProperty(prop)) { 234 if(data.hasOwnProperty(prop)) {
234 styleDescriptor[prop] = data[prop]; 235 styleDescriptor[prop] = data[prop];
@@ -244,7 +245,6 @@ exports.StyleDeclaration = Montage.create(Component, {
244 removeStyle : { 245 removeStyle : {
245 value: function(styleDescriptor) { 246 value: function(styleDescriptor) {
246 var styleDescriptorIndex = this.styles.indexOf(styleDescriptor); 247 var styleDescriptorIndex = this.styles.indexOf(styleDescriptor);
247console.log("removing style", styleDescriptor);
248 //this.styles.splice(styleDescriptorIndex, 1); 248 //this.styles.splice(styleDescriptorIndex, 1);
249 this.arrayController.removeObjects(styleDescriptor); 249 this.arrayController.removeObjects(styleDescriptor);
250 250