diff options
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel/colorpanelpopup.js')
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 123 |
1 files changed, 56 insertions, 67 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index aebbbd41..192c62fb 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | |||
@@ -23,19 +23,13 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
23 | //////////////////////////////////////////////////////////////////// | 23 | //////////////////////////////////////////////////////////////////// |
24 | //Storing color manager | 24 | //Storing color manager |
25 | _colorManager: { | 25 | _colorManager: { |
26 | value: false | 26 | value: null |
27 | }, | 27 | }, |
28 | //////////////////////////////////////////////////////////////////// | 28 | //////////////////////////////////////////////////////////////////// |
29 | //Color manager | 29 | //Color manager |
30 | colorManager: { | 30 | colorManager: { |
31 | get: function() { | 31 | get: function() {return this._colorManager;}, |
32 | return this._colorManager; | 32 | set: function(value) {if (value !== this._colorManager) this._colorManager = value;} |
33 | }, | ||
34 | set: function(value) { | ||
35 | if (value !== this._colorManager) { | ||
36 | this._colorManager = value; | ||
37 | } | ||
38 | } | ||
39 | }, | 33 | }, |
40 | //////////////////////////////////////////////////////////////////// | 34 | //////////////////////////////////////////////////////////////////// |
41 | //Storing color panel | 35 | //Storing color panel |
@@ -45,18 +39,19 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
45 | //////////////////////////////////////////////////////////////////// | 39 | //////////////////////////////////////////////////////////////////// |
46 | //Color panel | 40 | //Color panel |
47 | colorPanel: { | 41 | colorPanel: { |
48 | get: function() { | 42 | get: function() {return this._colorPanel;}, |
49 | return this._colorPanel; | 43 | set: function(value) {this._colorPanel = value;} |
50 | }, | 44 | }, |
51 | set: function(value) { | 45 | //////////////////////////////////////////////////////////////////// |
52 | this._colorPanel = value; | 46 | // |
53 | } | 47 | _components: { |
48 | value: null | ||
54 | }, | 49 | }, |
55 | //////////////////////////////////////////////////////////////////// | 50 | //////////////////////////////////////////////////////////////////// |
56 | // | 51 | // |
57 | setNoColor: { | 52 | setNoColor: { |
58 | value: function (e) { | 53 | value: function (code) { |
59 | this.colorManager.applyNoColor(); | 54 | if (this.colorManager) this.colorManager.applyNoColor(code); |
60 | } | 55 | } |
61 | }, | 56 | }, |
62 | //////////////////////////////////////////////////////////////////// | 57 | //////////////////////////////////////////////////////////////////// |
@@ -64,7 +59,8 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
64 | prepareForDraw: { | 59 | prepareForDraw: { |
65 | value: function () { | 60 | value: function () { |
66 | // | 61 | // |
67 | this.element._components = {wheel: null, combo: null}; | 62 | this._components = null; |
63 | this._components = {wheel: null, combo: null}; | ||
68 | } | 64 | } |
69 | }, | 65 | }, |
70 | //////////////////////////////////////////////////////////////////// | 66 | //////////////////////////////////////////////////////////////////// |
@@ -74,14 +70,14 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
74 | // | 70 | // |
75 | this.element.style.opacity = 0; | 71 | this.element.style.opacity = 0; |
76 | // | 72 | // |
77 | this.element._components.combo = {}; | 73 | this._components.combo = {}; |
78 | this.element._components.combo.slider = Slider.create(); | 74 | this._components.combo.slider = Slider.create(); |
79 | this.element._components.combo.hottext = HotText.create(); | 75 | this._components.combo.hottext = HotText.create(); |
80 | this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0]; | 76 | this._components.combo.slider.element = this.alphaSlider; |
81 | this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0]; | 77 | this._components.combo.hottext.element = this.alphaHottext; |
82 | // | 78 | // |
83 | Object.defineBinding(this.element._components.combo.hottext, "_value", { | 79 | Object.defineBinding(this._components.combo.hottext, "value", { |
84 | boundObject: this.element._components.combo.slider, | 80 | boundObject: this._components.combo.slider, |
85 | boundObjectPropertyPath: "value", | 81 | boundObjectPropertyPath: "value", |
86 | oneway: false, | 82 | oneway: false, |
87 | boundValueMutator: function(value) { | 83 | boundValueMutator: function(value) { |
@@ -89,16 +85,8 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
89 | } | 85 | } |
90 | }); | 86 | }); |
91 | // | 87 | // |
92 | Object.defineBinding(this.element._components.combo.hottext, "value", { | ||
93 | boundObject: this.element._components.combo.slider, | ||
94 | boundObjectPropertyPath: "value", | ||
95 | oneway: false, | ||
96 | boundValueMutator: function(value) { | ||
97 | return Math.round(value); | ||
98 | } | ||
99 | }); | ||
100 | if (this.application.ninja.colorController.colorView) { | 88 | if (this.application.ninja.colorController.colorView) { |
101 | Object.defineBinding(this.element._components.combo.slider, "value", { | 89 | Object.defineBinding(this._components.combo.slider, "value", { |
102 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, | 90 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, |
103 | boundObjectPropertyPath: "value", | 91 | boundObjectPropertyPath: "value", |
104 | oneway: false, | 92 | oneway: false, |
@@ -108,25 +96,26 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
108 | }); | 96 | }); |
109 | } | 97 | } |
110 | // | 98 | // |
111 | this.element._components.combo.slider.maxValue = this.element._components.combo.hottext.maxValue = 100; | 99 | this._components.combo.slider.maxValue = this._components.combo.hottext.maxValue = 100; |
100 | // | ||
112 | if (this.application.ninja.colorController.colorView) { | 101 | if (this.application.ninja.colorController.colorView) { |
113 | this.element._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); | 102 | this._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); |
114 | } | 103 | } |
115 | // | 104 | // |
116 | this.element._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); | 105 | this._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); |
117 | this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); | 106 | this._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); |
118 | // | 107 | // |
119 | this.element._components.wheel = ColorWheel.create(); | 108 | this._components.wheel = ColorWheel.create(); |
120 | this.element._components.wheel.element = this.wheel; | 109 | this._components.wheel.element = this.wheel; |
121 | this.element._components.wheel.element.style.display = 'block'; | 110 | this._components.wheel.element.style.display = 'block'; |
122 | this.element._components.wheel.rimWidth = 14; | 111 | this._components.wheel.rimWidth = 14; |
123 | this.element._components.wheel.strokeWidth = 2; | 112 | this._components.wheel.strokeWidth = 2; |
124 | // | 113 | // |
125 | this.element._components.wheel.value = this.colorManager.hsv; | 114 | this._components.wheel.value = this.colorManager.hsv; |
126 | this.element._components.wheel.addEventListener('change', this, true); | 115 | this._components.wheel.addEventListener('change', this, true); |
127 | this.element._components.wheel.addEventListener('changing', this, true); | 116 | this._components.wheel.addEventListener('changing', this, true); |
128 | // | 117 | // |
129 | Object.defineBinding(this.element._components.wheel, "value", { | 118 | Object.defineBinding(this._components.wheel, "value", { |
130 | boundObject: this.colorManager, | 119 | boundObject: this.colorManager, |
131 | boundObjectPropertyPath: "_hsv", | 120 | boundObjectPropertyPath: "_hsv", |
132 | boundValueMutator: function(value) { | 121 | boundValueMutator: function(value) { |
@@ -148,8 +137,8 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
148 | // | 137 | // |
149 | this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); | 138 | this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); |
150 | // | 139 | // |
151 | this.element._components.combo.slider.needsDraw = true; | 140 | this._components.combo.slider.needsDraw = true; |
152 | this.element._components.combo.hottext.needsDraw = true; | 141 | this._components.combo.hottext.needsDraw = true; |
153 | // | 142 | // |
154 | this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { | 143 | this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { |
155 | this.setNoColor(); | 144 | this.setNoColor(); |
@@ -175,9 +164,9 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
175 | this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); | 164 | this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); |
176 | this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]); | 165 | this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]); |
177 | // | 166 | // |
178 | this.element._components.wheel.addEventListener('firstDraw', this, false); | 167 | this._components.wheel.addEventListener('firstDraw', this, false); |
179 | // | 168 | // |
180 | this.element._components.wheel.needsDraw = true; | 169 | this._components.wheel.needsDraw = true; |
181 | } | 170 | } |
182 | }, | 171 | }, |
183 | //////////////////////////////////////////////////////////////////// | 172 | //////////////////////////////////////////////////////////////////// |
@@ -193,9 +182,9 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
193 | handleFirstDraw: { | 182 | handleFirstDraw: { |
194 | value: function (e) { | 183 | value: function (e) { |
195 | // | 184 | // |
196 | if (this.element._components.wheel) { | 185 | if (this._components.wheel) { |
197 | //Only using it for one instance, no need to check target | 186 | //Only using it for one instance, no need to check target |
198 | this.element._components.wheel.removeEventListener('firstDraw', this, false); | 187 | this._components.wheel.removeEventListener('firstDraw', this, false); |
199 | } | 188 | } |
200 | //Switching to tab from previous selection | 189 | //Switching to tab from previous selection |
201 | switch (this.application.ninja.colorController.popupTab) { | 190 | switch (this.application.ninja.colorController.popupTab) { |
@@ -241,10 +230,10 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||