aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/css-style.reel/css-style.js5
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.html5
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js38
-rw-r--r--js/panels/css-panel/styles-view-delegate.js12
4 files changed, 48 insertions, 12 deletions
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, {
14 editNewEmptyClass : { value: 'edit-empty-style' }, 14 editNewEmptyClass : { value: 'edit-empty-style' },
15 invalidStyleClass : { value: "style-item-invalid" }, 15 invalidStyleClass : { value: "style-item-invalid" },
16 emptyStyleClass : { value: "empty-css-style" }, 16 emptyStyleClass : { value: "empty-css-style" },
17 source : { value: null },
17 18
18 propertyText : { 19 propertyText : {
19 value: "property", 20 value: "property",
@@ -29,6 +30,10 @@ exports.CssStyle = Montage.create(Component, {
29 return this._valueText; 30 return this._valueText;
30 }, 31 },
31 set: function(text) { 32 set: function(text) {
33 /// TODO: Figure out why montage is trying to set this to undefined
34 /// TODO: when the style object is removed from the repetition
35 if(text === null || text === undefined) { return; }
36
32 this._valueText = this.browserValue = text; 37 this._valueText = this.browserValue = text;
33 this.units = this.getUnits(text); 38 this.units = this.getUnits(text);
34 } 39 }
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
44 "declaration": {"@": "owner"} 44 "declaration": {"@": "owner"}
45 }, 45 },
46 "bindings": { 46 "bindings": {
47 "source" : {
48 "boundObject": {"@": "repetition"},
49 "boundObjectPropertyPath": "objectAtCurrentIteration",
50 "oneway": true
51 },
47 "propertyText" : { 52 "propertyText" : {
48 "boundObject": {"@": "repetition"}, 53 "boundObject": {"@": "repetition"},
49 "boundObjectPropertyPath": "objectAtCurrentIteration.name" 54 "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, {
154 styleToIndexMap = this._getStyleToIndexMap(); 154 styleToIndexMap = this._getStyleToIndexMap();
155 155
156 Array.prototype.slice.call(this.declaration).forEach(function(prop, index) { 156 Array.prototype.slice.call(this.declaration).forEach(function(prop, index) {
157 var i = styleToIndexMap[prop]; 157 var styleObjectIndex = styleToIndexMap[prop];
158 158
159 ///// Style component exists for property 159 ///// Style component exists for property
160 ///// Update its value 160 ///// Update its value
161 if(i !== undefined) { 161 if(styleObjectIndex !== undefined) {
162 this.styles[i].value = this.declaration.getPropertyValue(prop); 162 this.styles[styleObjectIndex].value = this.declaration.getPropertyValue(prop);
163 usedIndices.push(i); 163 usedIndices.push(styleObjectIndex);
164 } else { 164 } else {
165 //// styles doesn't exist, does shorthand? 165 //// styles doesn't exist, does shorthand?
166 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[prop], 166 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[prop],
@@ -179,15 +179,26 @@ exports.StyleDeclaration = Montage.create(Component, {
179 } 179 }
180 180
181 if(!shorthandUpdated) { 181 if(!shorthandUpdated) {
182 //// push to usedIndices so we don't remove styles we just added
183 usedIndices.push(this.styles.length);
182 this.addStyle(prop, this.declaration.getPropertyValue(prop)); 184 this.addStyle(prop, this.declaration.getPropertyValue(prop));
183 } 185 }
184 } 186 }
185 }, this); 187 }, this);
186 188
189 for(var i = this.styles.length-1; i>=0; i--) {
190 if(usedIndices.indexOf(i) === -1) {
191 if(!this.styles[i].isEmpty) {
192 ///// index not used, remove style
193 this.removeStyle(this.styles[i]);
194 }
195 }
196 }
197
187 ///// Keep copy of cssText to know when we need to 198 ///// Keep copy of cssText to know when we need to
188 ///// update the view 199 ///// update the view
189 this.cssText = this.declaration.cssText; 200 this.cssText = this.declaration.cssText;
190 this.needsDraw = true; 201 this.needsDraw = this.needsSort = true;
191 } 202 }
192 } 203 }
193 }, 204 },
@@ -221,7 +232,18 @@ exports.StyleDeclaration = Montage.create(Component, {
221 } 232 }
222 233
223 this.styles.push(styleDescriptor); 234 this.styles.push(styleDescriptor);
224 this.arrayController.organizeObjects(); 235
236 this.needsSort = this.needsDraw = true;
237 }
238 },
239 removeStyle : {
240 value: function(styleDescriptor) {
241 var styleDescriptorIndex = this.styles.indexOf(styleDescriptor);
242
243 this.styles.splice(styleDescriptorIndex, 1);
244 //this.arrayController.removeObjects(styleDescriptor);
245
246 //this.needsDraw = true;
225 } 247 }
226 }, 248 },
227 249
@@ -259,7 +281,7 @@ exports.StyleDeclaration = Montage.create(Component, {
259 if(this.focusDelegate) { 281 if(this.focusDelegate) {
260 this.styleComponent.delegate = this.focusDelegate; 282 this.styleComponent.delegate = this.focusDelegate;
261 } 283 }
262 this.arrayController.sortFunction = this._styleSortFunction; 284 //this.arrayController.sortFunction = this._styleSortFunction;
263 } 285 }
264 }, 286 },
265 287
@@ -274,7 +296,7 @@ exports.StyleDeclaration = Montage.create(Component, {
274 willDraw : { 296 willDraw : {
275 value: function() { 297 value: function() {
276 if(this.needsSort) { 298 if(this.needsSort) {
277 this.arrayController.organizeObjects(); 299 //this.arrayController.organizeObjects();
278 this.needsSort = false; 300 this.needsSort = false;
279 } 301 }
280 } 302 }
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, {
145 return false; 145 return false;
146 } 146 }
147 147
148 ///// Remove old property
149 this.stylesController.deleteStyle(rule, oldProperty);
150
148 if(property === '') { 151 if(property === '') {
149 style.remove(); 152 style.parentComponent.parentComponent.removeStyle(style.source);
150 this._dispatchChange(oldProperty, browserValue); 153 this._dispatchChange(oldProperty, browserValue);
151 return false; 154 return false;
152 } 155 }
153 156
154 ///// Remove old property and add new one 157 // now add new property
155 this.stylesController.deleteStyle(rule, oldProperty);
156 browserValue = this.stylesController.setStyle(rule, property, value); 158 browserValue = this.stylesController.setStyle(rule, property, value);
157 159
158 ///// Mark style as invalid if the browser doesn't accept it 160 ///// Mark style as invalid if the browser doesn't accept it
@@ -166,7 +168,9 @@ exports.StylesViewMediator = Montage.create(Component, {
166 var browserValue, units; 168 var browserValue, units;
167 169
168 if(value === '') { 170 if(value === '') {
169 style.remove(); 171 ///// Remove old property
172 this.stylesController.deleteStyle(rule, property);
173 style.parentComponent.parentComponent.removeStyle(style.source);
170 this._dispatchChange(property, browserValue); 174 this._dispatchChange(property, browserValue);
171 return false; 175 return false;
172 } 176 }