diff options
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel/colorpanelpopup.js')
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 130 |
1 files changed, 83 insertions, 47 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 192c62fb..3eb6eec6 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); |
@@ -253,11 +282,13 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
253 | if (tab !== this.gradients) { | 282 | if (tab !== this.gradients) { |
254 | this.gradients.style.display = 'none'; | 283 | this.gradients.style.display = 'none'; |
255 | // | 284 | // |
256 | if (this._components.wheel._value) { | 285 | /* |
286 | if (this._components.wheel._value) { | ||
257 | this._components.wheel.value = {h: this._components.wheel._value.h, s: this._components.wheel._value.s, v: this._components.wheel._value.v, wasSetByCode: false}; | 287 | this._components.wheel.value = {h: this._components.wheel._value.h, s: this._components.wheel._value.s, v: this._components.wheel._value.v, wasSetByCode: false}; |
258 | } else { | 288 | } else { |
259 | this._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; | 289 | this._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; |
260 | } | 290 | } |
291 | */ | ||
261 | } else { | 292 | } else { |
262 | this.gradients.style.display = 'block'; | 293 | this.gradients.style.display = 'block'; |
263 | this.alpha.style.display = 'none'; | 294 | this.alpha.style.display = 'none'; |
@@ -265,7 +296,9 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
265 | this.application.ninja.colorController.popupTab = 'gradient'; | 296 | this.application.ninja.colorController.popupTab = 'gradient'; |
266 | } | 297 | } |
267 | // | 298 | // |
268 | this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); | 299 | if (!this.isPopupChip) this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); |
300 | // | ||
301 | this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); | ||
269 | } | 302 | } |
270 | }, | 303 | }, |
271 | //////////////////////////////////////////////////////////////////// | 304 | //////////////////////////////////////////////////////////////////// |
@@ -340,27 +373,30 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
340 | drawGradient: { | 373 | drawGradient: { |
341 | value: function (g) { | 374 | value: function (g) { |
342 | //TODO: Remove container, insert in reel | 375 | //TODO: Remove container, insert in reel |
343 | var container = document.createElement('div'), gradient = GradientPicker.create(); | 376 | var container = document.createElement('div'); |
377 | // | ||
378 | this._components.gradient = GradientPicker.create(); | ||
379 | // | ||
344 | this.gradients.appendChild(container); | 380 | this.gradients.appendChild(container); |
345 | //Creating gradient picker from components | 381 | //Creating gradient picker from components |
346 | gradient.element = container; | 382 | this._components.gradient.element = container; |
347 | gradient.hack = this.hack; // TODO: Remove | 383 | this._components.gradient.hack = this.hack; // TODO: Remove |
348 | // | 384 | // |
349 | if (g && g.value && g.value.stops) { | 385 | if (g && g.value && g.value.stops) { |
350 | if (g.value.gradientMode) { | 386 | if (g.value.gradientMode) { |