From 5330de3ddb40a4db8a2a0572725ab64b23770b3b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 8 May 2012 14:49:37 -0700 Subject: CSS Panel - Added update of new rules to rule list --- .../rule-list-container.js | 51 +++++++++++++++++----- js/panels/css-panel/rule-list.reel/rule-list.js | 4 +- .../styles-view-container.js | 2 +- 3 files changed, 42 insertions(+), 15 deletions(-) (limited to 'js/panels') diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js index a059af12..5371ec9a 100644 --- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js +++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js @@ -78,18 +78,7 @@ exports.RuleListContainer = Montage.create(Component, { container = document.createElement('div'), rules, ruleListLog; - if(selection.length === 1) { - rules = stylesController.getMatchingRules(selection[0]); - - ///// Add inline style to rule list - rules.splice(0, 0, { - type : 'inline', - selectorText : 'element.style', - parentStyleSheet : 'Inline Style', - style : selection[0].style - }); - - } //// TODO: support more selection types + rules = this.getRulesForSelection(selection); this._instanceToAdd = listInstance; listInstance.rules = rules; @@ -108,6 +97,43 @@ exports.RuleListContainer = Montage.create(Component, { } }, + getRulesForSelection : { + value: function(selection) { + var rules; + + if(selection.length === 1) { + rules = this.stylesController.getMatchingRules(selection[0]); + + ///// Add inline style to rule list + rules.splice(0, 0, { + type : 'inline', + selectorText : 'element.style', + parentStyleSheet : 'Inline Style', + style : selection[0].style + }); + + } //// TODO: support more selection types + + return rules; + } + }, + + update : { + value: function() { + var stylesController = this.application.ninja.stylesController, + rules = this.getRulesForSelection(this.displayedList.selection), + newRules; + + newRules = rules.filter(function(rule) { + return rule.type !== 'inline' && this.displayedList.component.rules.indexOf(rule) === -1; + }, this); + + newRules.forEach(function(rule) { + this.displayedList.component.addRule(rule); + },this); + } + }, + //// Array of lists that have been added to the container //// Lists include selection type (element/stylesheet), and //// the selection itself @@ -121,6 +147,7 @@ exports.RuleListContainer = Montage.create(Component, { if(this.focusDelegate) { this.ruleListComponent.focusDelegate = this.focusDelegate; } + this.stylesController = this.application.ninja.stylesController; } }, diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js index be9f61d7..c9eeb64b 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -85,13 +85,13 @@ exports.RuleList = Montage.create(Component, { }, update : { - value: function() { + value: function(rules) { this.childComponents.forEach(function(component) { component.update(); }, this); //// TODO: find new styles based on selection - if() + } }, diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js index c927fe9a..6ce64b8f 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js @@ -88,7 +88,7 @@ exports.StylesViewContainer = Montage.create(Component, { } else if(elements.length === 1) { if(this.contentPanel === "rules") { if(e._event.detail.type !== 'cssChange') { - this.ruleListContainer.displayedList.component.update(); + this.ruleListContainer.update(); } } else { this.computedStyleView.declaration = elements[0]; -- cgit v1.2.3