diff options
author | Jose Antonio Marquez | 2012-02-02 11:30:02 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-02-02 11:30:02 -0800 |
commit | 834e362e33113fd00e7568a67f108f836bf87ce9 (patch) | |
tree | cf2c8030e18ea00ac1afd050aa00250045fd9daf /js/panels/Color/colorpopup-manager.js | |
parent | 5a305ec44b2bd5198a248357439aae8ebbd75fee (diff) | |
download | ninja-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/colorpopup-manager.js')
-rw-r--r-- | js/panels/Color/colorpopup-manager.js | 64 |
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 | // |