aboutsummaryrefslogtreecommitdiff
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
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.
-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 //