diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 2 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.html | 2 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 93 | ||||
-rwxr-xr-x | js/panels/color/colorpopup-manager.js | 329 |
4 files changed, 278 insertions, 148 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 6071f3c6..6b50fae2 100755 --- a/js/components/gradientpicker.reel/gradientpicker.js +++ b/js/components/gradientpicker.reel/gradientpicker.js | |||
@@ -160,7 +160,7 @@ exports.GradientPicker = Montage.create(Component, { | |||
160 | //Initialing button with color data | 160 | //Initialing button with color data |
161 | button.color(data.color.mode, data.color.value); | 161 | button.color(data.color.mode, data.color.value); |
162 | //Button popup data | 162 | //Button popup data |
163 | button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true}; | 163 | button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true, history: false}; |
164 | //Listening for color events from button | 164 | //Listening for color events from button |
165 | button.addEventListener('change', this, false); | 165 | button.addEventListener('change', this, false); |
166 | //Dispatching event depending on type of mode | 166 | //Dispatching event depending on type of mode |
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..bccfcebc 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 | |||
9 | var Montage = require("montage/core/core").Montage, | 9 | var 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 |
15 | exports.ColorPopupManager = Montage.create(Component, { | 16 | exports.ColorPopupManager = Montage.create(Component, { |
@@ -26,69 +27,78 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
26 | //////////////////////////////////////////////////////////////////// | 27 | //////////////////////////////////////////////////////////////////// |
27 | // | 28 | // |
28 | init: { | 29 | init: { |
29 | enumerable: false, | ||
30 | value: function () { | 30 | value: function () { |
31 | //////////////////////////////////////////////////////////// | 31 | /////////// |