aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.html17
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js85
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