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 --- js/panels/CSSPanel/css-shorthand-map.js | 33 ++++++++++--------- .../style-declaration.reel/style-declaration.js | 38 +++++++++++----------- 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 = { 'background-repeat-y' : ['background', 'background-repeat'], 'border-bottom' : ['border'], - 'border-bottom-color' : ['border', 'border-bottom'], - 'border-bottom-style' : ['border', 'border-bottom'], - 'border-bottom-width' : ['border', 'border-bottom'], + 'border-bottom-color' : ['border-bottom'], + 'border-bottom-style' : ['border-bottom'], + 'border-bottom-width' : ['border-bottom'], 'border-left' : ['border'], - 'border-left-color' : ['border', 'border-left'], - 'border-left-style' : ['border', 'border-left'], - 'border-left-width' : ['border', 'border-left'], + 'border-left-color' : ['border-left'], + 'border-left-style' : ['border-left'], + 'border-left-width' : ['border-left'], 'border-right' : ['border'], - 'border-right-color' : ['border', 'border-right'], - 'border-right-style' : ['border', 'border-right'], - 'border-right-width' : ['border', 'border-right'], + 'border-right-color' : ['border-right'], + 'border-right-style' : ['border-right'], + 'border-right-width' : ['border-right'], 'border-top' : ['border'], - 'border-top-color' : ['border', 'border-top'], - 'border-top-style' : ['border', 'border-top'], - 'border-top-width' : ['border', 'border-top'], + 'border-top-color' : ['border-top'], + 'border-top-style' : ['border-top'], + 'border-top-width' : ['border-top'], 'border-color' : ['border'], 'border-style' : ['border'], @@ -79,9 +79,12 @@ exports.CSS_SHORTHAND_TO_SUBPROP_MAP = { 'background' : ["background-image", "background-repeat-x", "background-repeat-y", "background-attachment", "background-position-x", "background-position-y", "background-origin", "background-clip", "background-color"], - 'border' : ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width", - "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", - "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-image"], + 'border' : ['border-width', 'border-style', 'border-color'], + 'border-top' : ['border-top-width', 'border-top-style', 'border-top-color'], + 'border-right' : ['border-right-width', 'border-right-style', 'border-right-color'], + 'border-bottom' : ['border-bottom-width', 'border-bottom-style', 'border-bottom-color'], + 'border-left' : ['border-left-width', 'border-left-style', 'border-left-color'], + 'border-image' : ['border-image-outset', 'border-image-repeat','border-image-slice', 'border-image-source', 'border-image-width'], 'border-radius' : ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"], '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, { ///// 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