From 13da56e791b7478ad3dbb8162a583a6b2c8c4b6b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 18 May 2012 17:27:31 -0700 Subject: Style Declaration - Handle removing styles Removed sorting and had to put a null check in the style component because the valueText was being set to undefined and causing an error. Check with montage on why that is happening. --- js/panels/css-panel/css-style.reel/css-style.js | 5 +++ .../style-declaration.reel/style-declaration.html | 5 +++ .../style-declaration.reel/style-declaration.js | 38 +++++++++++++++++----- js/panels/css-panel/styles-view-delegate.js | 12 ++++--- 4 files changed, 48 insertions(+), 12 deletions(-) (limited to 'js/panels/css-panel') diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js index 1787665f..dd84c7e9 100644 --- a/js/panels/css-panel/css-style.reel/css-style.js +++ b/js/panels/css-panel/css-style.reel/css-style.js @@ -14,6 +14,7 @@ exports.CssStyle = Montage.create(Component, { editNewEmptyClass : { value: 'edit-empty-style' }, invalidStyleClass : { value: "style-item-invalid" }, emptyStyleClass : { value: "empty-css-style" }, + source : { value: null }, propertyText : { value: "property", @@ -29,6 +30,10 @@ exports.CssStyle = Montage.create(Component, { return this._valueText; }, set: function(text) { + /// TODO: Figure out why montage is trying to set this to undefined + /// TODO: when the style object is removed from the repetition + if(text === null || text === undefined) { return; } + this._valueText = this.browserValue = text; this.units = this.getUnits(text); } 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 5724ffc3..b1381bc6 100644 --- a/js/panels/css-panel/style-declaration.reel/style-declaration.html +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html @@ -44,6 +44,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "declaration": {"@": "owner"} }, "bindings": { + "source" : { + "boundObject": {"@": "repetition"}, + "boundObjectPropertyPath": "objectAtCurrentIteration", + "oneway": true + }, "propertyText" : { "boundObject": {"@": "repetition"}, "boundObjectPropertyPath": "objectAtCurrentIteration.name" 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 75ea18cf..8e364d0d 100644 --- a/js/panels/css-panel/style-declaration.reel/style-declaration.js +++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js @@ -154,13 +154,13 @@ exports.StyleDeclaration = Montage.create(Component, { styleToIndexMap = this._getStyleToIndexMap(); Array.prototype.slice.call(this.declaration).forEach(function(prop, index) { - var i = styleToIndexMap[prop]; + var styleObjectIndex = styleToIndexMap[prop]; ///// Style component exists for property ///// Update its value - if(i !== undefined) { - this.styles[i].value = this.declaration.getPropertyValue(prop); - usedIndices.push(i); + if(styleObjectIndex !== undefined) { + this.styles[styleObjectIndex].value = this.declaration.getPropertyValue(prop); + usedIndices.push(styleObjectIndex); } else { //// styles doesn't exist, does shorthand? var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[prop], @@ -179,15 +179,26 @@ exports.StyleDeclaration = Montage.create(Component, { } if(!shorthandUpdated) { + //// push to usedIndices so we don't remove styles we just added + usedIndices.push(this.styles.length); this.addStyle(prop, this.declaration.getPropertyValue(prop)); } } }, this); + for(var i = this.styles.length-1; 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; } } diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 38b0fcc6..b5efc18c 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -145,14 +145,16 @@ exports.StylesViewMediator = Montage.create(Component, { return false; } + ///// Remove old property + this.stylesController.deleteStyle(rule, oldProperty); + if(property === '') { - style.remove(); + style.parentComponent.parentComponent.removeStyle(style.source); this._dispatchChange(oldProperty, browserValue); return false; } - ///// Remove old property and add new one - this.stylesController.deleteStyle(rule, oldProperty); + // now add new property browserValue = this.stylesController.setStyle(rule, property, value); ///// Mark style as invalid if the browser doesn't accept it @@ -166,7 +168,9 @@ exports.StylesViewMediator = Montage.create(Component, { var browserValue, units; if(value === '') { - style.remove(); + ///// Remove old property + this.stylesController.deleteStyle(rule, property); + style.parentComponent.parentComponent.removeStyle(style.source); this._dispatchChange(property, browserValue); return false; } -- cgit v1.2.3