diff options
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel/colorpanelpopup.js')
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 113 |
1 files changed, 55 insertions, 58 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index aebbbd41..4161cb50 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 (e) { |
59 | this.colorManager.applyNoColor(); | 54 | if (this.colorManager) this.colorManager.applyNoColor(); |
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,8 +85,8 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
89 | } | 85 | } |
90 | }); | 86 | }); |
91 | // | 87 | // |
92 | Object.defineBinding(this.element._components.combo.hottext, "value", { | 88 | Object.defineBinding(this._components.combo.hottext, "value", { |
93 | boundObject: this.element._components.combo.slider, | 89 | boundObject: this._components.combo.slider, |
94 | boundObjectPropertyPath: "value", | 90 | boundObjectPropertyPath: "value", |
95 | oneway: false, | 91 | oneway: false, |
96 | boundValueMutator: function(value) { | 92 | boundValueMutator: function(value) { |
@@ -98,7 +94,7 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
98 | } | 94 | } |
99 | }); | 95 | }); |
100 | if (this.application.ninja.colorController.colorView) { | 96 | if (this.application.ninja.colorController.colorView) { |
101 | Object.defineBinding(this.element._components.combo.slider, "value", { | 97 | Object.defineBinding(this._components.combo.slider, "value", { |
102 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, | 98 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, |
103 | boundObjectPropertyPath: "value", | 99 | boundObjectPropertyPath: "value", |
104 | oneway: false, | 100 | oneway: false, |
@@ -108,25 +104,26 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
108 | }); | 104 | }); |
109 | } | 105 | } |
110 | // | 106 | // |
111 | this.element._components.combo.slider.maxValue = this.element._components.combo.hottext.maxValue = 100; | 107 | this._components.combo.slider.maxValue = this._components.combo.hottext.maxValue = 100; |
108 | // | ||
112 | if (this.application.ninja.colorController.colorView) { | 109 | 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); | 110 | this._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); |
114 | } | 111 | } |
115 | // | 112 | // |
116 | this.element._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); | 113 | this._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); |
117 | this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); | 114 | this._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); |
118 | // | 115 | // |
119 | this.element._components.wheel = ColorWheel.create(); | 116 | this._components.wheel = ColorWheel.create(); |
120 | this.element._components.wheel.element = this.wheel; | 117 | this._components.wheel.element = this.wheel; |
121 | this.element._components.wheel.element.style.display = 'block'; | 118 | this._components.wheel.element.style.display = 'block'; |
122 | this.element._components.wheel.rimWidth = 14; | 119 | this._components.wheel.rimWidth = 14; |
123 | this.element._components.wheel.strokeWidth = 2; | 120 | this._components.wheel.strokeWidth = 2; |
124 | // | 121 | // |
125 | this.element._components.wheel.value = this.colorManager.hsv; | 122 | this._components.wheel.value = this.colorManager.hsv; |
126 | this.element._components.wheel.addEventListener('change', this, true); | 123 | this._components.wheel.addEventListener('change', this, true); |
127 | this.element._components.wheel.addEventListener('changing', this, true); | 124 | this._components.wheel.addEventListener('changing', this, true); |
128 | // | 125 | // |
129 | Object.defineBinding(this.element._components.wheel, "value", { | 126 | Object.defineBinding(this._components.wheel, "value", { |
130 | boundObject: this.colorManager, | 127 | boundObject: this.colorManager, |
131 | boundObjectPropertyPath: "_hsv", | 128 | boundObjectPropertyPath: "_hsv", |
132 | boundValueMutator: function(value) { | 129 | boundValueMutator: function(value) { |
@@ -148,8 +145,8 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
148 | // | 145 | // |
149 | this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); | 146 | this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); |
150 | // | 147 | // |
151 | this.element._components.combo.slider.needsDraw = true; | 148 | this._components.combo.slider.needsDraw = true; |
152 | this.element._components.combo.hottext.needsDraw = true; | 149 | this._components.combo.hottext.needsDraw = true; |
153 | // | 150 | // |
154 | this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { | 151 | this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { |
155 | this.setNoColor(); | 152 | this.setNoColor(); |
@@ -175,9 +172,9 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
175 | this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); | 172 | 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]); | 173 | this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]); |
177 | // | 174 | // |
178 | this.element._components.wheel.addEventListener('firstDraw', this, false); | 175 | this._components.wheel.addEventListener('firstDraw', this, false); |
179 | // | 176 | // |
180 | this.element._components.wheel.needsDraw = true; | 177 | this._components.wheel.needsDraw = true; |
181 | } | 178 | } |
182 | }, | 179 | }, |
183 | //////////////////////////////////////////////////////////////////// | 180 | //////////////////////////////////////////////////////////////////// |
@@ -193,9 +190,9 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
193 | handleFirstDraw: { | 190 | handleFirstDraw: { |
194 | value: function (e) { | 191 | value: function (e) { |
195 | // | 192 | // |
196 | if (this.element._components.wheel) { | 193 | if (this._components.wheel) { |
197 | //Only using it for one instance, no need to check target | 194 | //Only using it for one instance, no need to check target |
198 | this.element._components.wheel.removeEventListener('firstDraw', this, false); | 195 | this._components.wheel.removeEventListener('firstDraw', this, false); |
199 | } |