aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.html2
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js120
-rwxr-xr-xjs/panels/color/colorpopup-manager.js495
3 files changed, 426 insertions, 191 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index 596580b4..d3b6fed7 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -52,7 +52,7 @@
52 52
53 </div> 53 </div>
54 54
55 <div data-montage-id="input_hex" class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div> 55 <div class="cp_pu_hex">#<input data-montage-id="input_hex" class="cp_pu_hottext_hex" maxlength="6" /></div>
56 56
57 <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button> 57 <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
58 <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button> 58 <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button>
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 192c62fb..179dc02c 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};
64 } 64 }
65 }, 65 },
66 //////////////////////////////////////////////////////////////////// 66 ////////////////////////////////////////////////////////////////////
@@ -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.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex);
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,7 @@ 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();
269 } 298 }
270 }, 299 },
271 //////////////////////////////////////////////////////////////////// 300 ////////////////////////////////////////////////////////////////////
@@ -340,27 +369,30 @@ exports.ColorPanelPopup = Montage.create(Component, {
340 drawGradient: { 369 drawGradient: {
341 value: function (g) { 370 value: function (g) {
342 //TODO: Remove container, insert in reel 371 //TODO: Remove container, insert in reel
343 var container = document.createElement('div'), gradient = GradientPicker.create(); 372 var container = document.createElement('div');
373 //
374 this._components.gradient = GradientPicker.create();
375 //
344 this.gradients.appendChild(container); 376 this.gradients.appendChild(container);
345 //Creating gradient picker from components 377 //Creating gradient picker from components
346 gradient.element = container; 378 this._components.gradient.element = container;
347 gradient.hack = this.hack; // TODO: Remove 379 this._components.gradient.hack = this.hack; // TODO: Remove
348 // 380 //
349 if (g && g.value && g.value.stops) { 381 if (g && g.value && g.value.stops) {
350 if (g.value.gradientMode) { 382 if (g.value.gradientMode) {
351 gradient._mode = g.value.gradientMode; 383 this._components.gradient._mode = g.value.gradientMode;
352 gradient.value = g.value.stops; 384 this._components.gradient.value = g.value.stops;
353 } else { 385 } else {
354 gradient._mode = 'linear'; 386 this._components.gradient._mode = 'linear';
355 gradient.value = g.value.stops; 387 this._components.gradient.value = g.value.stops;
356 } 388 }
357 } else { 389 } else {
358 gradient._mode = this.defaultGradient.gradientMode; 390 this._components.gradient._mode = this.defaultGradient.gradientMode;
359 gradient.value = this.defaultGradient.stops; 391 this._components.gradient.value = this.defaultGradient.stops;
360 } 392 }
361 // 393 //
362 gradient.needsDraw = true;