aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Color
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-02-02 11:30:02 -0800
committerJose Antonio Marquez2012-02-02 11:30:02 -0800
commit834e362e33113fd00e7568a67f108f836bf87ce9 (patch)
treecf2c8030e18ea00ac1afd050aa00250045fd9daf /js/panels/Color
parent5a305ec44b2bd5198a248357439aae8ebbd75fee (diff)
downloadninja-834e362e33113fd00e7568a67f108f836bf87ce9.tar.gz
Fixed the color popups to work with m-js v6
Removed the wrapper DIV, now it's more direct to create and insert the content in the popups. Changes created DOM exceptions, so it had to be modified.
Diffstat (limited to 'js/panels/Color')
-rw-r--r--js/panels/Color/colorpopup-manager.js64
1 files changed, 25 insertions, 39 deletions
diff --git a/js/panels/Color/colorpopup-manager.js b/js/panels/Color/colorpopup-manager.js
index 943ec7e7..a4c9a8c2 100644
--- a/js/panels/Color/colorpopup-manager.js
+++ b/js/panels/Color/colorpopup-manager.js
@@ -161,11 +161,13 @@ exports.ColorPopupManager = Montage.create(Component, {
161 //////////////////////////////////////////////////// 161 ////////////////////////////////////////////////////
162 //Creating popup from m-js component 162 //Creating popup from m-js component
163 var popup = document.createElement('div'); 163 var popup = document.createElement('div');
164 document.body.appendChild(popup);
164 // 165 //
165 this._popupBase = ColorPanelPopup.create(); 166 this._popupBase = ColorPanelPopup.create();
166 this._popupBase.content = document.createElement('div'); 167 this._popupBase.element = popup;
167 this._popupBase.props = {x: x, y: y, side: side, align: align}; 168 this._popupBase.props = {x: x, y: y, side: side, align: align};
168 169 this._popupBase.colorManager = this.colorManager;
170 //TODO: Remove
169 if (this._hackOffset) { 171 if (this._hackOffset) {
170 this._popupBase.hack = {x: 53, y: 235}; 172 this._popupBase.hack = {x: 53, y: 235};
171 } else { 173 } else {
@@ -173,20 +175,10 @@ exports.ColorPopupManager = Montage.create(Component, {
173 this._popupBase.hack = {x: 0, y: 0}; 175 this._popupBase.hack = {x: 0, y: 0};
174 } 176 }
175 // 177 //
176 document.body.appendChild(popup);
177 document.body.appendChild(this._popupBase.content);
178 //Setting color panel for reference when drawing
179 //this._popupBase.colorPanel = this;
180 this._popupBase.colorManager = this.colorManager;
181 //Setting up events
182 this._popupBase.addEventListener('change', this, false); 178 this._popupBase.addEventListener('change', this, false);
183 this._popupBase.addEventListener('changing', this, false); 179 this._popupBase.addEventListener('changing', this, false);
184 //TODO: Use m-js popup or check m-js fix of nested drawing components 180 //
185 this._popupBase.element = popup; 181 this._popupBase.needsDraw = true;
186 this._popupBase.needsDraw = true;
187 //Adding drawn element to container
188 this._popupBase.content.appendChild(this._popupBase.element);
189 //Waiting for content to drawn before loading popup
190 this._popupBase.addEventListener('firstDraw', this, false); 182 this._popupBase.addEventListener('firstDraw', this, false);
191 } 183 }
192 } 184 }
@@ -286,41 +278,33 @@ exports.ColorPopupManager = Montage.create(Component, {
286 //////////////////////////////////////////////////// 278 ////////////////////////////////////////////////////
287 //Creating popup from m-js component 279 //Creating popup from m-js component
288 var popup = document.createElement('div'); 280 var popup = document.createElement('div');
281 document.body.appendChild(popup);
289 // 282 //
290 this._popupChipBase = ColorChipPopup.create();
291 this._popupChipBase.content = document.createElement('div');
292 this._popupChip.event = e._event; 283 this._popupChip.event = e._event;
293 // 284 this._popupChipBase = ColorChipPopup.create();
285 this._popupChipBase.element = popup;
286 this._popupChipBase.colorManager = this.colorManager;
294 if (e._event.srcElement.props) { 287 if (e._event.srcElement.props) {
295 this.colorChipProps = e._event.srcElement.props; 288 this.colorChipProps = e._event.srcElement.props;
296 } else { 289 } else {
297 this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}; 290 this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false};
298 } 291 }
299 // 292 //
300 if (!this.colorChipProps.panel) { 293 if (!this.colorChipProps.panel) {
301 this.hideColorPopup(); 294 this.hideColorPopup();
302 } 295 }
303 // 296 //
304 document.body.appendChild(popup); 297 this._popupChipBase.popupModes = {};
305 document.body.appendChild(this._popupChipBase.content);
306 //Setting color panel for reference when drawing
307 //popupBase.colorPanel = this;
308 this._popupChipBase.colorManager = this.colorManager;
309 //
310 this._popupChipBase.popupModes.gradient = this.colorChipProps.gradient; 298 this._popupChipBase.popupModes.gradient = this.colorChipProps.gradient;
311 this._popupChipBase.popupModes.image = this.colorChipProps.image; 299 this._popupChipBase.popupModes.image = this.colorChipProps.image;
312 this._popupChipBase.popupModes.wheel = this.colorChipProps.wheel; 300 this._popupChipBase.popupModes.wheel = this.colorChipProps.wheel;
313 this._popupChipBase.popupModes.palette = this.colorChipProps.palette; 301 this._popupChipBase.popupModes.palette = this.colorChipProps.palette;
314 this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor; 302 this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor;
315 //Setting up events 303 //
316 this._popupChipBase.addEventListener('change', this, false); 304 this._popupChipBase.addEventListener('change', this, false);
317 this._popupChipBase.addEventListener('changing', this, false); 305 this._popupChipBase.addEventListener('changing', this, false);
318 //TODO: Use m-js popup or check m-js fix of nested drawing components 306 //
319 this._popupChipBase.element = popup; 307 this._popupChipBase.needsDraw = true;
320 this._popupChipBase.needsDraw = true;
321 //Adding drawn element to container
322 this._popupChipBase.content.appendChild(this._popupChipBase.element);
323 //Waiting for content to drawn before loading popup
324 this._popupChipBase.addEventListener('firstDraw', this, false); 308 this._popupChipBase.addEventListener('firstDraw', this, false);
325 } 309 }
326 } 310 }
@@ -354,14 +338,14 @@ exports.ColorPopupManager = Montage.create(Component, {
354 if (e._target._element.className === 'cpp_popup') { 338 if (e._target._element.className === 'cpp_popup') {
355 this._popupBase.removeEventListener('firstDraw', this, false); 339 this._popupBase.removeEventListener('firstDraw', this, false);
356 //Creating an instance of the popup and sending in created color popup content 340 //Creating an instance of the popup and sending in created color popup content
357 this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.content, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align}); 341 this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.element, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align});
358 //Displaying popup once it's drawn 342 //Displaying popup once it's drawn
359 this._popupPanel.popup.addEventListener('firstDraw', this, false); 343 this._popupPanel.popup.addEventListener('firstDraw', this, false);
360 //Hiding popup while it draws 344 //Hiding popup while it draws
361 this._popupPanel.popup.element.style.opacity = 0; 345 this._popupPanel.popup.element.style.opacity = 0;
362 //Storing popup for use when closing 346 //Storing popup for use when closing
363 this._popupPanel.popup.base = this._popupBase; 347 this._popupPanel.popup.base = this._popupBase;
364 } else if (e._target._element.className === 'default_popup' && e._target._content.firstChild.className === 'cpp_popup') { 348 } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') {
365 // 349 //
366 this._colorPopupDrawing = false; 350 this._colorPopupDrawing = false;
367 // 351 //
@@ -371,11 +355,12 @@ exports.ColorPopupManager = Montage.create(Component, {
371 //Popup was added, so it's opened 355 //Popup was added, so it's opened
372 this._popupPanel.opened = true; 356 this._popupPanel.opened = true;
373 } else if (e._target._element.className === 'cc_popup') { 357 } else if (e._target._element.className === 'cc_popup') {
358 this._popupChipBase.removeEventListener('firstDraw', this, false);
374 //Creating an instance of the popup and sending in created color popup content 359 //Creating an instance of the popup and sending in created color popup content
375 if (this.colorChipProps.offset) { 360 if (this.colorChipProps.offset) {
376 this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.content, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); 361 this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align});
377 } else { 362 } else {
378 this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.content, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); 363 this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align});
379 } 364 }
380 // 365 //
381 if (!this.colorChipProps.panel) { 366 if (!this.colorChipProps.panel) {
@@ -387,7 +372,8 @@ exports.ColorPopupManager = Montage.create(Component, {
387 this._popupChip.popup.base = this._popupChipBase; 372 this._popupChip.popup.base = this._popupChipBase;
388 //Displaying popup once it's drawn 373 //Displaying popup once it's drawn
389 this._popupChip.popup.addEventListener('firstDraw', this, false); 374 this._popupChip.popup.addEventListener('firstDraw', this, false);
390 } else if (e._target._element.className === 'default_popup' && e._target._content.firstChild.className === 'cc_popup') { 375 } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cc_popup') {
376 this._popupChip.popup.removeEventListener('firstDraw', this, false);
391 // 377 //
392 this._colorChipPopupDrawing = false; 378 this._colorChipPopupDrawing = false;
393 // 379 //