diff options
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel/colorpanelpopup.js')
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 126 |
1 files changed, 80 insertions, 46 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 192c62fb..f2e5bb2e 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | |||
@@ -60,7 +60,7 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
60 | value: function () { | 60 | value: function () { |
61 | // | 61 | // |
62 | this._components = null; | 62 | this._components = null; |
63 | this._components = {wheel: null, combo: null}; | 63 | this._components = {wheel: null, combo: null, gradient: null, hex: null}; |
64 | } | 64 | } |
65 | }, | 65 | }, |
66 | //////////////////////////////////////////////////////////////////// | 66 | //////////////////////////////////////////////////////////////////// |
@@ -85,7 +85,7 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
85 | } | 85 | } |
86 | }); | 86 | }); |
87 | // | 87 | // |
88 | if (this.application.ninja.colorController.colorView) { | 88 | if (this.application.ninja.colorController.colorView && this.props.panel) { |
89 | Object.defineBinding(this._components.combo.slider, "value", { | 89 | Object.defineBinding(this._components.combo.slider, "value", { |
90 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, | 90 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, |
91 | boundObjectPropertyPath: "value", | 91 | boundObjectPropertyPath: "value", |
@@ -129,44 +129,73 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
129 | draw: { | 129 | draw: { |
130 | value: function() { | 130 | value: function() { |
131 | // | 131 | // |
132 | this.drawPalette(this.defaultPalette); | 132 | if (!this.props || (this.props && this.props.palette)) { |
133 | // | ||
134 | this.btnPalette.addEventListener('click', function () { | ||
135 | this.popupSwitchInputTo(this.palettes); | ||
136 | }.bind(this), true); | ||
137 | // | ||
138 | this.drawPalette(this.defaultPalette); | ||
139 | } else { | ||
140 | this.btnPalette.style.display = 'none'; | ||
141 | } | ||
133 | // | 142 | // |
134 | if (!this.colorManager.gradient) { | 143 | if (!this.props || (this.props && this.props.gradient)) { |
135 | this.drawGradient(this.defaultGradient); | 144 | // |
145 | this.btnGradient.addEventListener('click', function () { | ||
146 | this.popupSwitchInputTo(this.gradients); | ||
147 | }.bind(this), true); | ||
148 | // | ||
149 | if (!this.colorManager.gradient) { | ||
150 | this.drawGradient(this.defaultGradient); | ||
151 | } | ||
152 | } else { | ||
153 | this.btnGradient.style.display = 'none'; | ||
136 | } | 154 | } |
137 | // | 155 | // |
138 | this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); | 156 | this._components.hex = this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager); |
139 | // | 157 | // |
140 | this._components.combo.slider.needsDraw = true; | 158 | this._components.combo.slider.needsDraw = true; |
141 | this._components.combo.hottext.needsDraw = true; | 159 | this._components.combo.hottext.needsDraw = true; |
142 | // | 160 | // |
143 | this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { | 161 | if (!this.props || (this.props && this.props.nocolor)) { |
144 | this.setNoColor(); | 162 | // |
145 | }.bind(this), true); | 163 | this.btnNocolor.addEventListener('click', function () { |
146 | // | 164 | this.setNoColor(); |
147 | this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { | 165 | }.bind(this), true); |
148 | this.popupSwitchInputTo(this.palettes); | 166 | } else { |
149 | }.bind(this), true); | 167 | this.btnNocolor.style.display = 'none'; |
150 | // | 168 | } |
151 | this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () { | ||
152 | this.popupSwitchInputTo(this.wheel); | ||
153 | }.bind(this), true); | ||
154 | // | ||
155 | this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () { | ||
156 | this.popupSwitchInputTo(this.gradients); | ||
157 | }.bind(this), true); | ||
158 | // | ||
159 | this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button | ||
160 | this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () { | ||
161 | //this.popupSwitchInputTo(this.images); | ||
162 | }.bind(this), true); | ||
163 | // | 169 | // |
164 | this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); | 170 | if (!this.props || (this.props && this.props.wheel)) { |
165 | this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]); | 171 | // |
172 | this.btnWheel.addEventListener('click', function () { | ||
173 | this.popupSwitchInputTo(this.wheel); | ||
174 | }.bind(this), true); | ||
175 | // | ||
176 | this._components.wheel.addEventListener('firstDraw', this, false); | ||
177 | this._components.wheel.needsDraw = true; | ||
178 | } else { | ||
179 | this.btnWheel.style.display = 'none'; | ||
180 | } | ||
166 | // | 181 | // |
167 | this._components.wheel.addEventListener('firstDraw', this, false); | 182 | if (!this.props || (this.props && this.props.image)) { |
183 | // | ||
184 | this.btnImage.style.opacity = .2;//TODO: Remove, visual feedback for disable button | ||
185 | this.btnImage.addEventListener('click', function () { | ||
186 | //this.popupSwitchInputTo(this.images); | ||
187 | }.bind(this), true); | ||
188 | } else { | ||
189 | this.btnImage.style.display = 'none'; | ||
190 | } | ||
168 | // | 191 | // |
169 | this._components.wheel.needsDraw = true; | 192 | if (!this.props || (this.props && this.props.history)) { |
193 | this.application.ninja.colorController.colorView.addButton('current', this.btnCurrent); | ||
194 | this.application.ninja.colorController.colorView.addButton('previous', this.btnPrevious); | ||
195 | } else { | ||
196 | this.btnCurrent.style.display = 'none'; | ||
197 | this.btnPrevious.style.display = 'none'; | ||
198 | } | ||
170 | } | 199 | } |
171 | }, | 200 | }, |
172 | //////////////////////////////////////////////////////////////////// | 201 | //////////////////////////////////////////////////////////////////// |
@@ -202,7 +231,7 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
202 | break | 231 | break |
203 | } | 232 | } |
204 | //Checking for a gradient to be current color | 233 | //Checking for a gradient to be current color |
205 | if (this.colorManager.gradient) { | 234 | if (this.colorManager.gradient && (!this.props || (this.props && this.props.gradient))) { |
206 | if (this.colorManager.colorHistory[this.colorManager.input] && this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-1].m !== 'gradient') { | 235 | if (this.colorManager.colorHistory[this.colorManager.input] && this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-1].m !== 'gradient') { |
207 | //If no gradient set, using default | 236 | //If no gradient set, using default |
208 | this.drawGradient(this.defaultGradient); | 237 | this.drawGradient(this.defaultGradient); |
@@ -265,7 +294,9 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
265 | this.application.ninja.colorController.popupTab = 'gradient'; | 294 | this.application.ninja.colorController.popupTab = 'gradient'; |
266 | } | 295 | } |
267 | // | 296 | // |
268 | this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); | 297 | if (!this.isPopupChip) this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); |
298 | // | ||
299 | this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); | ||
269 | } | 300 | } |
270 | }, | 301 | }, |
271 | //////////////////////////////////////////////////////////////////// | 302 | //////////////////////////////////////////////////////////////////// |
@@ -340,27 +371,30 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
340 | drawGradient: { | 371 | drawGradient: { |
341 | value: function (g) { | 372 | value: function (g) { |
342 | //TODO: Remove container, insert in reel | 373 | //TODO: Remove container, insert in reel |
343 | var container = document.createElement('div'), gradient = GradientPicker.create(); | 374 | var container = document.createElement('div'); |
375 | // | ||
376 | this._components.gradient = GradientPicker.create(); | ||
377 | // | ||
344 | this.gradients.appendChild(container); | 378 | this.gradients.appendChild(container); |
345 | //Creating gradient picker from components | 379 | //Creating gradient picker from components |
346 | gradient.element = container; | 380 | this._components.gradient.element = container; |
347 | gradient.hack = this.hack; // TODO: Remove | 381 | this._components.gradient.hack = this.hack; // TODO: Remove |
348 | // | 382 | // |
349 | if (g && g.value && g.value.stops) { | 383 | if (g && g.value && g.value.stops) { |
350 | if (g.value.gradientMode) { | 384 | if (g.value.gradientMode) { |
351 | gradient._mode = g.value.gradientMode; | 385 | this._components.gradient._mode = g.value.gradientMode; |
352 | gradient.value = g.value.stops; | 386 | this._components.gradient.value = g.value.stops; |
353 | } else { | 387 | } else { |
354 | gradient._mode = 'linear'; | 388 | this._components.gradient._mode = 'linear'; |
355 | gradient.value = g.value.stops; | 389 | this._components.gradient.value = g.value.stops; |
356 | } | 390 | } |
357 | } else { | 391 | } else { |
358 | gradient._mode = this.defaultGradient.gradientMode; | 392 | this._components.gradient._mode = this.defaultGradient.gradientMode; |
359 | gradient.value = this.defaultGradient.stops; | 393 | this._components.gradient.value = this.defaultGradient.stops; |
360 | } | 394 | } |
361 | // | 395 | // |
362 | gradient.needsDraw = true; | 396 | this._components.gradient.needsDraw = true; |
363 | gradient.addEventListener('change', function (e){ |