aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-06-21 16:53:04 -0700
committerJose Antonio Marquez2012-06-21 16:53:04 -0700
commit1e9af08f42e4ba18fc8c5a8501d8cbecec0f4fe8 (patch)
tree450532452e39d599c026bab1d329df5797aa53a8 /js/panels
parent4b186e0c3f97f704d1ac671a63cd02084e19fe0e (diff)
downloadninja-1e9af08f42e4ba18fc8c5a8501d8cbecec0f4fe8.tar.gz
Replacing temp color chip pop
This replaces the temporary color chip popup with a main popup used universally throughout the app. There are still outstanding issues to be addressed, this is just the initial set up before debugging issues.
Diffstat (limited to 'js/panels')
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.html2
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js93
-rwxr-xr-xjs/panels/color/colorpopup-manager.js264
3 files changed, 212 insertions, 147 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..153817c1 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -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 ////////////////////////////////////////////////////////////////////
@@ -413,7 +442,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
413 destroy: { 442 destroy: {
414 value: function() { 443 value: function() {
415 // 444 //
416 this.application.ninja.colorController.colorView.removeButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); 445 this.application.ninja.colorController.colorView.removeButton('hexinput', this.inputHex);
417 Object.deleteBinding(this._components.combo.hottext, "value"); 446 Object.deleteBinding(this._components.combo.hottext, "value");
418 Object.deleteBinding(this._components.combo.slider, "value"); 447 Object.deleteBinding(this._components.combo.slider, "value");
419 Object.deleteBinding(this._components.wheel, "value"); 448 Object.deleteBinding(this._components.wheel, "value");
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index 4667f2b4..fba196e4 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -9,7 +9,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
9var Montage = require("montage/core/core").Montage, 9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component, 10 Component = require("montage/ui/component").Component,
11 ColorChipPopup = require("js/panels/Color/colorchippopup.reel").ColorChipPopup, 11 ColorChipPopup = require("js/panels/Color/colorchippopup.reel").ColorChipPopup,
12 ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup; 12 ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup,
13 ColorModel = require("js/models/color-model").ColorModel;
13//////////////////////////////////////////////////////////////////////// 14////////////////////////////////////////////////////////////////////////
14//Exporting as ColorPopupManager 15//Exporting as ColorPopupManager
15exports.ColorPopupManager = Montage.create(Component, { 16exports.ColorPopupManager = Montage.create(Component, {
@@ -26,69 +27,77 @@ exports.ColorPopupManager = Montage.create(Component, {
26 //////////////////////////////////////////////////////////////////// 27 ////////////////////////////////////////////////////////////////////
27 // 28 //
28 init: { 29 init: {
29 enumerable: false,
30 value: function () { 30 value: function () {
31 //////////////////////////////////////////////////////////// 31 ////////////////////////////////////////////////////////////
32 //Closing popups on resize 32 //Closing popups on resize
33 window.addEventListener('resize', function (e) { 33 window.addEventListener('resize', function (e) {
34 this.application.ninja.colorController.colorPopupManager.hideColorPopup(); 34 this.application.ninja.colorController.colorPopupManager.hideColorPopup();
35 }.bind(this)); 35 }.bind(this));
36 //Storing limits of popup 36
37 var top, bottom, left, right;
38 //Closing popups if outside limits 37 //Closing popups if outside limits
39 document.addEventListener('mousedown', function (e) { 38 document.addEventListener('mousedown', function (e) {
40 //Checking for popup to be opened otherwise nothing happens 39 //