diff options
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.html | 17 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 85 |
2 files changed, 40 insertions, 62 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index f65d5bc0..5ad5c615 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html | |||
@@ -16,7 +16,12 @@ | |||
16 | "owner": { | 16 | "owner": { |
17 | "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]", | 17 | "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]", |
18 | "properties": { | 18 | "properties": { |
19 | "element": {"#": "cpp_popup"} | 19 | "element": {"#": "cpp_popup"}, |
20 | "wheel": {"#": "cntnr_wheel"}, | ||
21 | "images": {"#": "cntnr_images"}, | ||
22 | "gradients": {"#": "cntnr_gradients"}, | ||
23 | "palettes": {"#": "cntnr_palettes"}, | ||
24 | "alpha": {"#": "cntnr_alpha"} | ||
20 | } | 25 | } |
21 | } | 26 | } |
22 | } | 27 | } |
@@ -47,13 +52,13 @@ | |||
47 | </div> | 52 | </div> |
48 | 53 | ||
49 | <div class="cp_pu_content"> | 54 | <div class="cp_pu_content"> |
50 | <div class="cp_pu_wheel_container cp_pu_content_container"></div> | 55 | <div data-montage-id="cntnr_wheel" class="cp_pu_wheel_container cp_pu_content_container"></div> |
51 | <div class="cp_pu_gradient_container cp_pu_content_container"></div> | 56 | <div data-montage-id="cntnr_gradients" class="cp_pu_gradient_container cp_pu_content_container"></div> |
52 | <div class="cp_pu_palette_container cp_pu_content_container"></div> | 57 | <div data-montage-id="cntnr_palettes" class="cp_pu_palette_container cp_pu_content_container"></div> |
53 | <div class="cp_pu_image_container cp_pu_content_container"></div> | 58 | <div data-montage-id="cntnr_images" class="cp_pu_image_container cp_pu_content_container"></div> |
54 | </div> | 59 | </div> |
55 | 60 | ||
56 | <div class="cp_pu_alpha"> | 61 | <div data-montage-id="cntnr_alpha" class="cp_pu_alpha"> |
57 | <div class="cp_pu_a_label">Alpha</div> | 62 | <div class="cp_pu_a_label">Alpha</div> |
58 | <div class="cp_pu_a_slider"></div> | 63 | <div class="cp_pu_a_slider"></div> |
59 | <input class="cp_pu_a_hottext"/> | 64 | <input class="cp_pu_a_hottext"/> |
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index dd7e6192..aebbbd41 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | |||
@@ -23,13 +23,11 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
23 | //////////////////////////////////////////////////////////////////// | 23 | //////////////////////////////////////////////////////////////////// |
24 | //Storing color manager | 24 | //Storing color manager |
25 | _colorManager: { | 25 | _colorManager: { |
26 | enumerable: false, | ||
27 | value: false | 26 | value: false |
28 | }, | 27 | }, |
29 | //////////////////////////////////////////////////////////////////// | 28 | //////////////////////////////////////////////////////////////////// |
30 | //Color manager | 29 | //Color manager |
31 | colorManager: { | 30 | colorManager: { |
32 | enumerable: true, | ||
33 | get: function() { | 31 | get: function() { |
34 | return this._colorManager; | 32 | return this._colorManager; |
35 | }, | 33 | }, |
@@ -42,13 +40,11 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
42 | //////////////////////////////////////////////////////////////////// | 40 | //////////////////////////////////////////////////////////////////// |
43 | //Storing color panel | 41 | //Storing color panel |
44 | _colorPanel: { | 42 | _colorPanel: { |
45 | enumerable: false, | ||
46 | value: false | 43 | value: false |
47 | }, | 44 | }, |
48 | //////////////////////////////////////////////////////////////////// | 45 | //////////////////////////////////////////////////////////////////// |
49 | //Color panel | 46 | //Color panel |
50 | colorPanel: { | 47 | colorPanel: { |
51 | enumerable: true, | ||
52 | get: function() { | 48 | get: function() { |
53 | return this._colorPanel; | 49 | return this._colorPanel; |
54 | }, | 50 | }, |
@@ -59,7 +55,6 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
59 | //////////////////////////////////////////////////////////////////// | 55 | //////////////////////////////////////////////////////////////////// |
60 | // | 56 | // |
61 | setNoColor: { | 57 | setNoColor: { |
62 | enumerable: true, | ||
63 | value: function (e) { | 58 | value: function (e) { |
64 | this.colorManager.applyNoColor(); | 59 | this.colorManager.applyNoColor(); |
65 | } | 60 | } |
@@ -67,23 +62,14 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
67 | //////////////////////////////////////////////////////////////////// | 62 | //////////////////////////////////////////////////////////////////// |
68 | // | 63 | // |
69 | prepareForDraw: { | 64 | prepareForDraw: { |
70 | enumerable: false, | ||
71 | value: function () { | 65 | value: function () { |
72 | // | 66 | // |
73 | this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}}; | ||
74 | this.element._components = {wheel: null, combo: null}; | 67 | this.element._components = {wheel: null, combo: null}; |
75 | //Storing containers for reference | ||
76 | this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0]; | ||
77 | this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0]; | ||
78 | this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0]; | ||
79 | this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0]; | ||
80 | this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0]; | ||
81 | } | 68 | } |
82 | }, | 69 | }, |
83 | //////////////////////////////////////////////////////////////////// | 70 | //////////////////////////////////////////////////////////////////// |
84 | // | 71 | // |
85 | willDraw: { | 72 | willDraw: { |
86 | enumerable: false, | ||
87 | value: function() { | 73 | value: function() { |
88 | // | 74 | // |
89 | this.element.style.opacity = 0; | 75 | this.element.style.opacity = 0; |
@@ -131,7 +117,7 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
131 | this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); | 117 | this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); |
132 | // | 118 | // |
133 | this.element._components.wheel = ColorWheel.create(); | 119 | this.element._components.wheel = ColorWheel.create(); |
134 | this.element._components.wheel.element = this.element._popups.containers.wheel; | 120 | this.element._components.wheel.element = this.wheel; |
135 | this.element._components.wheel.element.style.display = 'block'; | 121 | this.element._components.wheel.element.style.display = 'block'; |
136 | this.element._components.wheel.rimWidth = 14; | 122 | this.element._components.wheel.rimWidth = 14; |
137 | this.element._components.wheel.strokeWidth = 2; | 123 | this.element._components.wheel.strokeWidth = 2; |
@@ -152,7 +138,6 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
152 | //////////////////////////////////////////////////////////////////// | 138 | //////////////////////////////////////////////////////////////////// |
153 | // | 139 | // |
154 | draw: { | 140 | draw: { |
155 | enumerable: false, | ||
156 | value: function() { | 141 | value: function() { |
157 | // | 142 | // |
158 | this.drawPalette(this.defaultPalette); | 143 | this.drawPalette(this.defaultPalette); |
@@ -171,20 +156,20 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
171 | }.bind(this), true); | 156 | }.bind(this), true); |
172 | // | 157 | // |
173 | this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { | 158 | this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { |
174 | this.popupSwitchInputTo(this.element._popups.containers.palette); | 159 | this.popupSwitchInputTo(this.palettes); |
175 | }.bind(this), true); | 160 | }.bind(this), true); |
176 | // | 161 | // |
177 | this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () { | 162 | this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () { |
178 | this.popupSwitchInputTo(this.element._popups.containers.wheel); | 163 | this.popupSwitchInputTo(this.wheel); |
179 | }.bind(this), true); | 164 | }.bind(this), true); |
180 | // | 165 | // |
181 | this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () { | 166 | this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () { |
182 | this.popupSwitchInputTo(this.element._popups.containers.gradient); | 167 | this.popupSwitchInputTo(this.gradients); |
183 | }.bind(this), true); | 168 | }.bind(this), true); |
184 | // | 169 | // |
185 | this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button | 170 | this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button |
186 | this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () { | 171 | this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () { |
187 | //this.popupSwitchInputTo(this.element._popups.containers.image); | 172 | //this.popupSwitchInputTo(this.images); |
188 | }.bind(this), true); | 173 | }.bind(this), true); |
189 | // | 174 | // |
190 | this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); | 175 | this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); |
@@ -198,7 +183,6 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
198 | //////////////////////////////////////////////////////////////////// | 183 | //////////////////////////////////////////////////////////////////// |
199 | // | 184 | // |
200 | didDraw: { | 185 | didDraw: { |
201 | enumerable: false, | ||
202 | value: function() { | 186 | value: function() { |
203 | // | 187 | // |
204 | 188 | ||
@@ -207,7 +191,6 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
207 | //////////////////////////////////////////////////////////////////// | 191 | //////////////////////////////////////////////////////////////////// |
208 | //Reworking logic, firstDraw bubbles up, so target must be checked | 192 | //Reworking logic, firstDraw bubbles up, so target must be checked |
209 | handleFirstDraw: { | 193 | handleFirstDraw: { |
210 | enumerable: false, | ||
211 | value: function (e) { | 194 | value: function (e) { |
212 | // | 195 | // |
213 | if (this.element._components.wheel) { | 196 | if (this.element._components.wheel) { |
@@ -217,16 +200,16 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
217 | //Switching to tab from previous selection | 200 | //Switching to tab from previous selection |
218 | switch (this.application.ninja.colorController.popupTab) { | 201 | switch (this.application.ninja.colorController.popupTab) { |
219 | case 'wheel': | 202 |