diff options
author | Valerio Virgillito | 2012-02-02 13:15:00 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-02-02 13:15:00 -0800 |
commit | 4f2858045b851f15cddbac20d078308152018f3e (patch) | |
tree | cf2c8030e18ea00ac1afd050aa00250045fd9daf /js/panels/Color/colorpopup-manager.js | |
parent | 5a305ec44b2bd5198a248357439aae8ebbd75fee (diff) | |
parent | 834e362e33113fd00e7568a67f108f836bf87ce9 (diff) | |
download | ninja-4f2858045b851f15cddbac20d078308152018f3e.tar.gz |
Merge pull request #11 from joseeight/MontageV6Color
Fixed the color popups to work with m-js v6
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 | // |