diff options
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel')
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.html | 2 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 169 |
2 files changed, 102 insertions, 69 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..b8261f26 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | |||
@@ -32,17 +32,6 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
32 | set: function(value) {if (value !== this._colorManager) this._colorManager = value;} | 32 | set: function(value) {if (value !== this._colorManager) this._colorManager = value;} |
33 | }, | 33 | }, |
34 | //////////////////////////////////////////////////////////////////// | 34 | //////////////////////////////////////////////////////////////////// |
35 | //Storing color panel | ||
36 | _colorPanel: { | ||
37 | value: false | ||
38 | }, | ||
39 | //////////////////////////////////////////////////////////////////// | ||
40 | //Color panel | ||
41 | colorPanel: { | ||
42 | get: function() {return this._colorPanel;}, | ||
43 | set: function(value) {this._colorPanel = value;} | ||
44 | }, | ||
45 | //////////////////////////////////////////////////////////////////// | ||
46 | // | 35 | // |
47 | _components: { | 36 | _components: { |
48 | value: null | 37 | value: null |
@@ -52,6 +41,10 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
52 | setNoColor: { | 41 | setNoColor: { |
53 | value: function (code) { | 42 | value: function (code) { |
54 | if (this.colorManager) this.colorManager.applyNoColor(code); | 43 | if (this.colorManager) this.colorManager.applyNoColor(code); |
44 | // | ||
45 | if (!code && !this.props.panel) { | ||
46 | this.dispatchEvent({type: 'change', wasSetByCode: code, mode: 'nocolor', value: null}); | ||
47 | } | ||
55 | } | 48 | } |
56 | }, | 49 | }, |
57 | //////////////////////////////////////////////////////////////////// | 50 | //////////////////////////////////////////////////////////////////// |
@@ -60,7 +53,7 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
60 | value: function () { | 53 | value: function () { |
61 | // | 54 | // |
62 | this._components = null; | 55 | this._components = null; |
63 | this._components = {wheel: null, combo: null}; | 56 | this._components = {wheel: null, combo: null, gradient: null, hex: null}; |
64 | } | 57 | } |
65 | }, | 58 | }, |
66 | //////////////////////////////////////////////////////////////////// | 59 | //////////////////////////////////////////////////////////////////// |
@@ -85,7 +78,7 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
85 | } | 78 | } |
86 | }); | 79 | }); |
87 | // | 80 | // |
88 | if (this.application.ninja.colorController.colorView) { | 81 | if (this.application.ninja.colorController.colorView && this.props.panel) { |
89 | Object.defineBinding(this._components.combo.slider, "value", { | 82 | Object.defineBinding(this._components.combo.slider, "value", { |
90 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, | 83 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, |
91 | boundObjectPropertyPath: "value", | 84 | boundObjectPropertyPath: "value", |
@@ -129,44 +122,73 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
129 | draw: { | 122 | draw: { |
130 | value: function() { | 123 | value: function() { |
131 | // | 124 | // |
132 | this.drawPalette(this.defaultPalette); | 125 | if (!this.props || (this.props && this.props.palette)) { |
126 | // | ||
127 | this.btnPalette.addEventListener('click', function () { | ||
128 | this.popupSwitchInputTo(this.palettes); | ||
129 | }.bind(this), true); | ||
130 | // | ||
131 | this.drawPalette(this.defaultPalette, this.colorManager); | ||
132 | } else { | ||
133 | this.btnPalette.style.display = 'none'; | ||
134 | } | ||
133 | // | 135 | // |
134 | if (!this.colorManager.gradient) { | 136 | if (!this.props || (this.props && this.props.gradient)) { |
135 | this.drawGradient(this.defaultGradient); | 137 | // |
138 | this.btnGradient.addEventListener('click', function () { | ||
139 | this.popupSwitchInputTo(this.gradients); | ||
140 | }.bind(this), true); | ||
141 | // | ||
142 | if (!this.colorManager.gradient) { | ||
143 | this.drawGradient(this.defaultGradient); | ||
144 | } | ||
145 | } else { | ||
146 | this.btnGradient.style.display = 'none'; | ||
136 | } | 147 | } |
137 | // | 148 | // |
138 | this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); | 149 | this._components.hex = this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager); |
139 | // | 150 | // |
140 | this._components.combo.slider.needsDraw = true; | 151 | this._components.combo.slider.needsDraw = true; |
141 | this._components.combo.hottext.needsDraw = true; | 152 | this._components.combo.hottext.needsDraw = true; |
142 | // | 153 | // |
143 | this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { | 154 | if (!this.props || (this.props && this.props.nocolor)) { |
144 | this.setNoColor(); | 155 | // |
145 | }.bind(this), true); | 156 | this.btnNocolor.addEventListener('click', function () { |
146 | // | 157 | this.setNoColor(false); |
147 | this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { | 158 | }.bind(this), true); |
148 | this.popupSwitchInputTo(this.palettes); | 159 | } else { |
149 | }.bind(this), true); | 160 | this.btnNocolor.style.display = 'none'; |
150 | // | 161 | } |
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 | // | 162 | // |
164 | this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); | 163 | if (!this.props || (this.props && this.props.wheel)) { |
165 | this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]); | 164 | // |
165 | this.btnWheel.addEventListener('click', function () { | ||
166 | this.popupSwitchInputTo(this.wheel); | ||
167 | }.bind(this), true); | ||
168 | // | ||
169 | this._components.wheel.addEventListener('firstDraw', this, false); | ||
170 | this._components.wheel.needsDraw = true; | ||
171 | } else { | ||
172 | this.btnWheel.style.display = 'none'; | ||
173 | } | ||
166 | // | 174 | // |
167 | this._components.wheel.addEventListener('firstDraw', this, false); | 175 | if (!this.props || (this.props && this.props.image)) { |
176 | // | ||
177 | this.btnImage.style.opacity = .2;//TODO: Remove, visual feedback for disable button | ||
178 | this.btnImage.addEventListener('click', function () { | ||
179 | //this.popupSwitchInputTo(this.images); | ||
180 | }.bind(this), true); | ||
181 | } else { | ||
182 | this.btnImage.style.display = 'none'; | ||
183 | } | ||
168 | // | 184 | // |
169 | this._components.wheel.needsDraw = true; | 185 | if (!this.props || (this.props && this.props.history)) { |
186 | this.application.ninja.colorController.colorView.addButton('current', this.btnCurrent); | ||
187 | this.application.ninja.colorController.colorView.addButton('previous', this.btnPrevious); | ||
188 | } else { | ||
189 | this.btnCurrent.style.display = 'none'; | ||
190 | this.btnPrevious.style.display = 'none'; | ||
191 | } | ||
170 | } | 192 | } |
171 | }, | 193 | }, |
172 | //////////////////////////////////////////////////////////////////// | 194 | //////////////////////////////////////////////////////////////////// |
@@ -202,7 +224,7 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
202 | break | 224 | break |
203 | } | 225 | } |
204 | //Checking for a gradient to be current color | 226 | //Checking for a gradient to be current color |
205 | if (this.colorManager.gradient) { | 227 | 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') { | 228 | 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 | 229 | //If no gradient set, using default |
208 | this.drawGradient(this.defaultGradient); | 230 | this.drawGradient(this.defaultGradient); |
@@ -253,11 +275,13 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
253 | if (tab !== this.gradients) { | 275 | if (tab !== this.gradients) { |
254 | this.gradients.style.display = 'none'; | 276 | this.gradients.style.display = 'none'; |
255 | // | 277 | // |
256 | if (this._components.wheel._value) { | 278 | /* |
279 | 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}; |