diff options
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel/colorpanelpopup.js')
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 204 |
1 files changed, 83 insertions, 121 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index dd7e6192..192c62fb 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | |||
@@ -23,79 +23,61 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
23 | //////////////////////////////////////////////////////////////////// | 23 | //////////////////////////////////////////////////////////////////// |
24 | //Storing color manager | 24 | //Storing color manager |
25 | _colorManager: { | 25 | _colorManager: { |
26 | enumerable: false, | 26 | value: null |
27 | value: false | ||
28 | }, | 27 | }, |
29 | //////////////////////////////////////////////////////////////////// | 28 | //////////////////////////////////////////////////////////////////// |
30 | //Color manager | 29 | //Color manager |
31 | colorManager: { | 30 | colorManager: { |
32 | enumerable: true, | 31 | get: function() {return this._colorManager;}, |
33 | get: function() { | 32 | set: function(value) {if (value !== this._colorManager) this._colorManager = value;} |
34 | return this._colorManager; | ||
35 | }, | ||
36 | set: function(value) { | ||
37 | if (value !== this._colorManager) { | ||
38 | this._colorManager = value; | ||
39 | } | ||
40 | } | ||
41 | }, | 33 | }, |
42 | //////////////////////////////////////////////////////////////////// | 34 | //////////////////////////////////////////////////////////////////// |
43 | //Storing color panel | 35 | //Storing color panel |
44 | _colorPanel: { | 36 | _colorPanel: { |
45 | enumerable: false, | ||
46 | value: false | 37 | value: false |
47 | }, | 38 | }, |
48 | //////////////////////////////////////////////////////////////////// | 39 | //////////////////////////////////////////////////////////////////// |
49 | //Color panel | 40 | //Color panel |
50 | colorPanel: { | 41 | colorPanel: { |
51 | enumerable: true, | 42 | get: function() {return this._colorPanel;}, |
52 | get: function() { | 43 | set: function(value) {this._colorPanel = value;} |
53 | return this._colorPanel; | 44 | }, |
54 | }, | 45 | //////////////////////////////////////////////////////////////////// |
55 | set: function(value) { | 46 | // |
56 | this._colorPanel = value; | 47 | _components: { |
57 | } | 48 | value: null |
58 | }, | 49 | }, |
59 | //////////////////////////////////////////////////////////////////// | 50 | //////////////////////////////////////////////////////////////////// |
60 | // | 51 | // |
61 | setNoColor: { | 52 | setNoColor: { |
62 | enumerable: true, | 53 | value: function (code) { |
63 | value: function (e) { | 54 | if (this.colorManager) this.colorManager.applyNoColor(code); |
64 | this.colorManager.applyNoColor(); | ||
65 | } | 55 | } |
66 | }, | 56 | }, |
67 | //////////////////////////////////////////////////////////////////// | 57 | //////////////////////////////////////////////////////////////////// |
68 | // | 58 | // |
69 | prepareForDraw: { | 59 | prepareForDraw: { |
70 | enumerable: false, | ||
71 | value: function () { | 60 | value: function () { |
72 | // | 61 | // |
73 | this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}}; | 62 | this._components = null; |
74 | this.element._components = {wheel: null, combo: null}; | 63 | this._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 | } | 64 | } |
82 | }, | 65 | }, |
83 | //////////////////////////////////////////////////////////////////// | 66 | //////////////////////////////////////////////////////////////////// |
84 | // | 67 | // |
85 | willDraw: { | 68 | willDraw: { |
86 | enumerable: false, | ||
87 | value: function() { | 69 | value: function() { |
88 | // | 70 | // |
89 | this.element.style.opacity = 0; | 71 | this.element.style.opacity = 0; |
90 | // | 72 | // |
91 | this.element._components.combo = {}; | 73 | this._components.combo = {}; |
92 | this.element._components.combo.slider = Slider.create(); | 74 | this._components.combo.slider = Slider.create(); |
93 | this.element._components.combo.hottext = HotText.create(); | 75 | this._components.combo.hottext = HotText.create(); |
94 | this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0]; | 76 | this._components.combo.slider.element = this.alphaSlider; |
95 | this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0]; | 77 | this._components.combo.hottext.element = this.alphaHottext; |
96 | // | 78 | // |
97 | Object.defineBinding(this.element._components.combo.hottext, "_value", { | 79 | Object.defineBinding(this._components.combo.hottext, "value", { |
98 | boundObject: this.element._components.combo.slider, | 80 | boundObject: this._components.combo.slider, |
99 | boundObjectPropertyPath: "value", | 81 | boundObjectPropertyPath: "value", |
100 | oneway: false, | 82 | oneway: false, |
101 | boundValueMutator: function(value) { | 83 | boundValueMutator: function(value) { |
@@ -103,16 +85,8 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
103 | } | 85 | } |
104 | }); | 86 | }); |
105 | // | 87 | // |
106 | Object.defineBinding(this.element._components.combo.hottext, "value", { | ||
107 | boundObject: this.element._components.combo.slider, | ||
108 | boundObjectPropertyPath: "value", | ||
109 | oneway: false, | ||
110 | boundValueMutator: function(value) { | ||
111 | return Math.round(value); | ||
112 | } | ||
113 | }); | ||
114 | if (this.application.ninja.colorController.colorView) { | 88 | if (this.application.ninja.colorController.colorView) { |
115 | Object.defineBinding(this.element._components.combo.slider, "value", { | 89 | Object.defineBinding(this._components.combo.slider, "value", { |
116 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, | 90 | boundObject: this.application.ninja.colorController.colorView._combo[3].slider, |
117 | boundObjectPropertyPath: "value", | 91 | boundObjectPropertyPath: "value", |
118 | oneway: false, | 92 | oneway: false, |
@@ -122,25 +96,26 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
122 | }); | 96 | }); |
123 | } | 97 | } |
124 | // | 98 | // |
125 | 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 | // | ||
126 | if (this.application.ninja.colorController.colorView) { | 101 | if (this.application.ninja.colorController.colorView) { |
127 | 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); |
128 | } | 103 | } |
129 | // | 104 | // |
130 | this.element._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); | 105 | this._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); |
131 | this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); | 106 | this._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); |
132 | // | 107 | // |
133 | this.element._components.wheel = ColorWheel.create(); | 108 | this._components.wheel = ColorWheel.create(); |
134 | this.element._components.wheel.element = this.element._popups.containers.wheel; | 109 | this._components.wheel.element = this.wheel; |
135 | this.element._components.wheel.element.style.display = 'block'; | 110 | this._components.wheel.element.style.display = 'block'; |
136 | this.element._components.wheel.rimWidth = 14; | 111 | this._components.wheel.rimWidth = 14; |
137 | this.element._components.wheel.strokeWidth = 2; | 112 | this._components.wheel.strokeWidth = 2; |
138 | // | 113 | // |
139 | this.element._components.wheel.value = this.colorManager.hsv; | 114 | this._components.wheel.value = this.colorManager.hsv; |
140 | this.element._components.wheel.addEventListener('change', this, true); | 115 | this._components.wheel.addEventListener('change', this, true); |
141 | this.element._components.wheel.addEventListener('changing', this, true); | 116 | this._components.wheel.addEventListener('changing', this, true); |
142 | // | 117 | // |
143 | Object.defineBinding(this.element._components.wheel, "value", { | 118 | Object.defineBinding(this._components.wheel, "value", { |
144 | boundObject: this.colorManager, | 119 | boundObject: this.colorManager, |
145 | boundObjectPropertyPath: "_hsv", | 120 | boundObjectPropertyPath: "_hsv", |
146 | boundValueMutator: function(value) { | 121 | boundValueMutator: function(value) { |
@@ -152,7 +127,6 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
152 | //////////////////////////////////////////////////////////////////// | 127 | //////////////////////////////////////////////////////////////////// |
153 | // | 128 | // |
154 | draw: { | 129 | draw: { |
155 | enumerable: false, | ||
156 | value: function() { | 130 | value: function() { |
157 | // | 131 | // |
158 | this.drawPalette(this.defaultPalette); | 132 | this.drawPalette(this.defaultPalette); |
@@ -163,42 +137,41 @@ exports.ColorPanelPopup = Montage.create(Component, { | |||
163 | // | 137 | // |
164 | 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]); |
165 | // | 139 | // |
166 | this.element._components.combo.slider.needsDraw = true; | 140 | this._components.combo.slider.needsDraw = true; |
167 | this.element._components.combo.hottext.needsDraw = true; |