aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-05-08 14:49:37 -0700
committerEric Guzman2012-05-08 14:49:37 -0700
commit5330de3ddb40a4db8a2a0572725ab64b23770b3b (patch)
tree22c77665fa963a853ed64589ce60216aefad2bf0 /js/panels/css-panel
parenteb80f8a610100f908b5cb9ffc65bfa94f8a23c21 (diff)
downloadninja-5330de3ddb40a4db8a2a0572725ab64b23770b3b.tar.gz
CSS Panel - Added update of new rules to rule list
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js51
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js4
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js2
3 files changed, 42 insertions, 15 deletions
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, {
78 container = document.createElement('div'), 78 container = document.createElement('div'),
79 rules, ruleListLog; 79 rules, ruleListLog;
80 80
81 if(selection.length === 1) { 81 rules = this.getRulesForSelection(selection);
82 rules = stylesController.getMatchingRules(selection[0]);
83
84 ///// Add inline style to rule list
85 rules.splice(0, 0, {
86 type : 'inline',
87 selectorText : 'element.style',
88 parentStyleSheet : 'Inline Style',
89 style : selection[0].style
90 });
91
92 } //// TODO: support more selection types
93 82
94 this._instanceToAdd = listInstance; 83 this._instanceToAdd = listInstance;
95 listInstance.rules = rules; 84 listInstance.rules = rules;
@@ -108,6 +97,43 @@ exports.RuleListContainer = Montage.create(Component, {
108 } 97 }
109 }, 98 },
110 99
100 getRulesForSelection : {
101 value: function(selection) {
102 var rules;
103
104 if(selection.length === 1) {
105 rules = this.stylesController.getMatchingRules(selection[0]);
106
107 ///// Add inline style to rule list
108 rules.splice(0, 0, {
109 type : 'inline',
110 selectorText : 'element.style',
111 parentStyleSheet : 'Inline Style',
112 style : selection[0].style
113 });
114
115 } //// TODO: support more selection types
116
117 return rules;
118 }
119 },
120
121 update : {
122 value: function() {
123 var stylesController = this.application.ninja.stylesController,
124 rules = this.getRulesForSelection(this.displayedList.selection),
125 newRules;
126
127 newRules = rules.filter(function(rule) {
128 return rule.type !== 'inline' && this.displayedList.component.rules.indexOf(rule) === -1;
129 }, this);
130
131 newRules.forEach(function(rule) {
132 this.displayedList.component.addRule(rule);
133 },this);
134 }
135 },
136
111 //// Array of lists that have been added to the container 137 //// Array of lists that have been added to the container
112 //// Lists include selection type (element/stylesheet), and 138 //// Lists include selection type (element/stylesheet), and
113 //// the selection itself 139 //// the selection itself
@@ -121,6 +147,7 @@ exports.RuleListContainer = Montage.create(Component, {
121 if(this.focusDelegate) { 147 if(this.focusDelegate) {
122 this.ruleListComponent.focusDelegate = this.focusDelegate; 148 this.ruleListComponent.focusDelegate = this.focusDelegate;
123 } 149 }
150 this.stylesController = this.application.ninja.stylesController;
124 } 151 }
125 }, 152 },
126 153
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, {
85 }, 85 },
86 86
87 update : { 87 update : {
88 value: function() { 88 value: function(rules) {
89 this.childComponents.forEach(function(component) { 89 this.childComponents.forEach(function(component) {
90 component.update(); 90 component.update();
91 }, this); 91 }, this);
92 92
93 //// TODO: find new styles based on selection 93 //// TODO: find new styles based on selection
94 if() 94
95 } 95 }
96 }, 96 },
97 97
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, {
88 } else if(elements.length === 1) { 88 } else if(elements.length === 1) {
89 if(this.contentPanel === "rules") { 89 if(this.contentPanel === "rules") {
90 if(e._event.detail.type !== 'cssChange') { 90 if(e._event.detail.type !== 'cssChange') {
91 this.ruleListContainer.displayedList.component.update(); 91 this.ruleListContainer.update();
92 } 92 }
93 } else { 93 } else {
94 this.computedStyleView.declaration = elements[0]; 94 this.computedStyleView.declaration = elements[0];