aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel/colorpanelpopup.js')
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js466
1 files changed, 466 insertions, 0 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
new file mode 100755
index 00000000..b957d495
--- /dev/null
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -0,0 +1,466 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7////////////////////////////////////////////////////////////////////////
8//
9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component,
11 Slider = require("js/components/slider.reel").Slider,
12 Button = require("js/components/button.reel").Button,
13 HotText = require("js/components/hottext.reel").HotText,
14 ColorWheel = require("js/components/colorwheel.reel").ColorWheel,
15 GradientPicker = require("js/components/gradientpicker.reel").GradientPicker;
16////////////////////////////////////////////////////////////////////////
17//Exporting as ColorPanelPopup
18exports.ColorPanelPopup = Montage.create(Component, {
19 ////////////////////////////////////////////////////////////////////
20 //
21 hasTemplate: {
22 value: true
23 },
24 ////////////////////////////////////////////////////////////////////
25 //Storing color manager
26 _colorManager: {
27 enumerable: false,
28 value: false
29 },
30 ////////////////////////////////////////////////////////////////////
31 //Color manager
32 colorManager: {
33 enumerable: true,
34 get: function() {
35 return this._colorManager;
36 },
37 set: function(value) {
38 if (value !== this._colorManager) {
39 this._colorManager = value;
40 }
41 }
42 },
43 ////////////////////////////////////////////////////////////////////
44 //Storing color panel
45 _colorPanel: {
46 enumerable: false,
47 value: false
48 },
49 ////////////////////////////////////////////////////////////////////
50 //Color panel
51 colorPanel: {
52 enumerable: true,
53 get: function() {
54 return this._colorPanel;
55 },
56 set: function(value) {
57 this._colorPanel = value;
58 }
59 },
60 ////////////////////////////////////////////////////////////////////
61 //
62 setNoColor: {
63 enumerable: true,
64 value: function (e) {
65 this.colorManager.applyNoColor();
66 }
67 },
68 ////////////////////////////////////////////////////////////////////
69 //
70 prepareForDraw: {
71 enumerable: false,
72 value: function () {
73 //
74 this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}};
75 this.element._components = {wheel: null, combo: null};
76 //Storing containers for reference
77 this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0];
78 this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0];
79 this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0];
80 this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0];
81 this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0];
82 }
83 },
84 ////////////////////////////////////////////////////////////////////
85 //
86 willDraw: {
87 enumerable: false,
88 value: function() {
89 //
90 this.element.style.opacity = 0;
91 //
92 this.element._components.combo = {};
93 this.element._components.combo.slider = Slider.create();
94 this.element._components.combo.hottext = HotText.create();
95 this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0];
96 this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0];
97 //
98 Object.defineBinding(this.element._components.combo.hottext, "_value", {
99 boundObject: this.element._components.combo.slider,
100 boundObjectPropertyPath: "value",
101 oneway: false,
102 boundValueMutator: function(value) {
103 return Math.round(value);
104 }
105 });
106 //
107 Object.defineBinding(this.element._components.combo.hottext, "value", {
108 boundObject: this.element._components.combo.slider,
109 boundObjectPropertyPath: "value",
110 oneway: false,
111 boundValueMutator: function(value) {
112 return Math.round(value);
113 }
114 });
115 if (this.application.ninja.colorController.colorView) {
116 Object.defineBinding(this.element._components.combo.slider, "value", {
117 boundObject: this.application.ninja.colorController.colorView._combo[3].slider,
118 boundObjectPropertyPath: "value",
119 oneway: false,
120 boundValueMutator: function(value) {
121 return Math.round(value);
122 }
123 });
124 }
125 //
126 this.element._components.combo.slider.maxValue = this.element._components.combo.hottext.maxValue = 100;
127 if (this.application.ninja.colorController.colorView) {
128 this.element._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView);
129 }
130 //
131 this.element._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true);
132 this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true);
133 //
134 this.element._components.wheel = ColorWheel.create();
135 this.element._components.wheel.element = this.element._popups.containers.wheel;
136 this.element._components.wheel.element.style.display = 'block';
137 this.element._components.wheel.rimWidth = 14;
138 this.element._components.wheel.strokeWidth = 2;
139 //
140 this.element._components.wheel.value = this.colorManager.hsv;
141 this.element._components.wheel.addEventListener('change', this, true);
142 this.element._components.wheel.addEventListener('changing', this, true);
143 //
144 Object.defineBinding(this.element._components.wheel, "value", {
145 boundObject: this.colorManager,
146 boundObjectPropertyPath: "_hsv",
147 boundValueMutator: function(value) {
148 return value;
149 }
150 });
151 }
152 },
153 ////////////////////////////////////////////////////////////////////
154 //
155 draw: {
156 enumerable: false,
157 value: function() {
158 //
159 this.drawPalette(this.defaultPalette);
160 //
161 if (!this.colorManager.gradient) {
162 this.drawGradient(this.defaultGradient);
163 }
164 //
165 this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]);
166 //
167 this.element._components.combo.slider.needsDraw = true;
168 this.element._components.combo.hottext.needsDraw = true;
169 //
170 this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () {
171 this.setNoColor();
172 }.bind(this), true);
173 //
174 this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () {
175 this.popupSwitchInputTo(this.element._popups.containers.palette);
176 }.bind(this), true);
177 //
178 this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () {
179 this.popupSwitchInputTo(this.element._popups.containers.wheel);
180 }.bind(this), true);
181 //
182 this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () {
183 this.popupSwitchInputTo(this.element._popups.containers.gradient);
184 }.bind(this), true);
185 //
186 this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button
187 this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () {
188 //this.popupSwitchInputTo(this.element._popups.containers.image);
189 }.bind(this), true);
190 //
191 this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]);
192 this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]);
193 //
194 this.element._components.wheel.addEventListener('firstDraw', this, false);
195 //
196 this.element._components.wheel.needsDraw = true;
197 }
198 },
199 ////////////////////////////////////////////////////////////////////
200 //
201 didDraw: {
202 enumerable: false,
203 value: function() {
204 //
205
206 }