aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-05-21 17:04:23 -0700
committerEric Guzman2012-05-21 17:04:23 -0700
commitb5bbf69e59dbadf6504955875cc13d893efe3259 (patch)
treec1818089c8fdc790dc17fa55acb61595f8efea0a /js/panels/css-panel
parent022164517cafa5f75f6d3e5eed250ae1500f898a (diff)
downloadninja-b5bbf69e59dbadf6504955875cc13d893efe3259.tar.gz
Rule List Container - Handle drawing multiple rules at the same time
Fixes problems when dropping multiple images on to stage and the selection changes too quickly
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js44
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.css4
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js29
3 files changed, 57 insertions, 20 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 e7174c3d..e2e269ba 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,8 +78,6 @@ exports.RuleListContainer = Montage.create(Component, {
78 rules, ruleListLog; 78 rules, ruleListLog;
79 79
80 rules = this.getRulesForSelection(selection); 80 rules = this.getRulesForSelection(selection);
81
82 this._instanceToAdd = instance;
83 instance.rules = rules; 81 instance.rules = rules;
84 82
85 ruleListLog = { 83 ruleListLog = {
@@ -88,13 +86,22 @@ exports.RuleListContainer = Montage.create(Component, {
88 }; 86 };
89 87
90 this.ruleLists.push(ruleListLog); 88 this.ruleLists.push(ruleListLog);
91 this._appendElement = container; 89
90 this.ruleListsToDraw.push({
91 element : container,
92 component : instance
93 });
94
92 this.needsDraw = true; 95 this.needsDraw = true;
93 96
94 return ruleListLog; 97 return ruleListLog;
95 } 98 }
96 }, 99 },
97 100
101 ruleListsToDraw : {
102 value: []
103 },
104
98 getRulesForSelection : { 105 getRulesForSelection : {
99 value: function(selection) { 106 value: function(selection) {
100 var rules; 107 var rules;
@@ -141,23 +148,28 @@ exports.RuleListContainer = Montage.create(Component, {
141 } 148 }
142 }, 149 },
143 150
144 draw : { 151 willDraw : {
145 value: function() { 152 value: function() {
146 if(this._appendElement) { 153 //// hide all rule lists
147 this.element.appendChild(this._appendElement); 154 this.ruleLists.forEach(function(ruleListDescriptor) {
148 this._instanceToAdd.element = this._appendElement; 155 ruleListDescriptor.component.hide = true;
149 this._appendElement = null; 156 });
150 this.needsDraw = true;
151 return;
152 }
153 157
154 if(this._lastDisplayedList) { 158 if(this.displayedList) {
155 this._lastDisplayedList.component.element.style.display = 'none'; 159 this.displayedList.component.hide = false;
156 if(this._displayedList.component.element) {
157 this._displayedList.component.element.style.display = null;
158 }
159 } 160 }
160 } 161 }
162 },
163
164 draw : {
165 value: function() {
166 this.ruleListsToDraw.forEach(function(ruleListDescriptor) {
167 this.element.appendChild(ruleListDescriptor.element);
168 ruleListDescriptor.component.element = ruleListDescriptor.element;
169 ruleListDescriptor.component.needsDraw = true;
170 }, this);
171 this.ruleListsToDraw.length = 0;
172 }
161 173
162 }, 174 },
163 175
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css
index 1d998f3d..2aba01da 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.css
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -23,4 +23,8 @@
23.rule-list li { 23.rule-list li {
24 list-style-type: none; 24 list-style-type: none;
25 margin: 0; 25 margin: 0;
26}
27
28.hidden-rule-list {
29 display: none;
26} \ No newline at end of file 30} \ No newline at end of file
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 2cd5ac5c..3e18c3bf 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -12,6 +12,21 @@ exports.RuleList = Montage.create(Component, {
12 ruleNodeName : { value: 'li' }, 12 ruleNodeName : { value: 'li' },
13 _needsScrollToBottom: { value: null }, 13 _needsScrollToBottom: { value: null },
14 14
15 _hide : {
16 value: null
17 },
18 hide : {
19 get: function() {
20 return this._hide;
21 },
22 set: function(value) {
23 if(value === this._hide) { return; }
24
25 this._hide = value;
26 this.needsDraw = true;
27 }
28 },
29
15 childComponents : { 30 childComponents : {
16 value: [], 31 value: [],
17 distinct: true 32 distinct: true
@@ -138,12 +153,10 @@ exports.RuleList = Montage.create(Component, {
138 if(this._needsScrollToBottom) { 153 if(this._needsScrollToBottom) {
139 ///// Make sure the appended rule item is visible (scrolled-to) 154 ///// Make sure the appended rule item is visible (scrolled-to)
140 this.element.scrollTop = this.element.offsetHeight; 155 this.element.scrollTop = this.element.offsetHeight;
141 console.log("Scroll top:", this.element.scrollTop);
142 this._needsScrollToBottom = false; 156 this._needsScrollToBottom = false;
143 } 157 }
144 158
145 //// Iterate through all rules needing removal 159 //// Iterate through all rules needing removal
146 console.log("Rule List :: Rules to draw:,", this.rulesToDraw.length);
147 this.rulesToRemove.forEach(function(ruleComponent) { 160 this.rulesToRemove.forEach(function(ruleComponent) {
148 var componentIndex = this.childComponents.indexOf(ruleComponent); 161 var componentIndex = this.childComponents.indexOf(ruleComponent);
149 this.childComponents.splice(componentIndex, 1); 162 this.childComponents.splice(componentIndex, 1);
@@ -166,6 +179,12 @@ exports.RuleList = Montage.create(Component, {
166 ruleObj.instance.needsDraw = true; 179 ruleObj.instance.needsDraw = true;
167 }, this); 180 }, this);
168 181
182 if(this.hide) {
183 this.element.classList.add('hidden-rule-list');
184 } else {
185 this.element.classList.remove('hidden-rule-list');
186 }
187
169 } 188 }
170 }, 189 },
171 190
@@ -185,8 +204,10 @@ exports.RuleList = Montage.create(Component, {
185 this.rulesToDraw.length = 0; 204 this.rulesToDraw.length = 0;
186 this.rulesToRemove.length = 0; 205 this.rulesToRemove.length = 0;
187 206
188 this.parentComponent.ruleListDrawn = true; 207 if(!this.parentComponent.ruleListDrawn) {
189 this.parentComponent.needsDraw = true; 208 this.parentComponent.ruleListDrawn = true;
209 this.parentComponent.needsDraw = true;
210 }
190 } 211 }
191 } 212 }
192}); 213});