aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colorchippopup.reel/colorchippopup.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/color/colorchippopup.reel/colorchippopup.js')
-rwxr-xr-xjs/panels/color/colorchippopup.reel/colorchippopup.js590
1 files changed, 590 insertions, 0 deletions
diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.js b/js/panels/color/colorchippopup.reel/colorchippopup.js
new file mode 100755
index 00000000..05bcb447
--- /dev/null
+++ b/js/panels/color/colorchippopup.reel/colorchippopup.js
@@ -0,0 +1,590 @@
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.ColorChipPopup = 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 //
45 setNoColor: {
46 enumerable: true,
47 value: function (e) {
48 this.colorManager.applyNoColor();
49 }
50 },
51 ////////////////////////////////////////////////////////////////////
52 //
53 _colorChipWheel: {
54 enumerable: false,
55 value: null
56 },
57 ////////////////////////////////////////////////////////////////////
58 //
59 popupContainers: {
60 enumerable: true,
61 value: {wheel: null, palette: null, gradient: null, image: null}
62 },
63 ////////////////////////////////////////////////////////////////////
64 //
65 popupModes: {
66 enumerable: true,
67 value: {wheel: true, palette: true, gradient: true, image: true, nocolor: true}
68 },
69 ////////////////////////////////////////////////////////////////////
70 //
71 hexInput: {
72 enumerable: true,
73 value: null
74 },
75 ////////////////////////////////////////////////////////////////////
76 //
77 prepareForDraw: {
78 enumerable: false,
79 value: function () {
80 //Storing containers for reference
81 this.popupContainers.wheel = document.getElementById('cc_pu_wheel_container');
82 this.popupContainers.palette = document.getElementById("cc_pu_palette_container");
83 this.popupContainers.gradient = document.getElementById("cc_pu_gradient_container");
84 this.popupContainers.image = document.getElementById("cc_pu_image_container");
85 this.popupContainers.alpha = document.getElementById("cc_pu_alpha");
86 //
87
88 this.colorManager.addEventListener('change', function (e) {
89 //
90 }.bind(this));
91 }
92 },
93 ////////////////////////////////////////////////////////////////////
94 //
95 willDraw: {
96 enumerable: false,
97 value: function() {
98 //
99 this.element.style.opacity = 0;
100 //
101 this.combo = {};
102 this.combo.slider = Slider.create();
103 this.combo.hottext = HotText.create();
104 this.combo.slider.element = document.getElementById('cc_pu_a_slider');
105 this.combo.hottext.element = document.getElementById('cc_pu_a_hottext');
106 //
107 this.cc_hexinput = HotText.create();
108 this.cc_hexinput.element = document.getElementById('cc_pu_hottext_hex');
109 this.cc_hexinput.labelFunction = this._hexLabel.bind(this);
110 this.cc_hexinput.inputFunction = this._hexInput.bind(this);
111 //
112 if (this.application.ninja.colorController.colorView.currentChip && this.application.ninja.colorController.colorView.currentChip.colorValue && this.application.ninja.colorController.colorView.currentChip.colorValue.a) {
113 this.combo.slider.value = Math.round(this.application.ninja.colorController.colorView.currentChip.colorValue.a*100);
114 } else {
115 this.combo.slider.value = 100;
116 }
117 this.application.ninja.colorController.colorModel._alpha = {value: this.combo.slider.value/100, wasSetByCode: true, type: 'change'};
118 //
119 Object.defineBinding(this.combo.hottext, "value", {
120 boundObject: this.combo.slider,
121 boundObjectPropertyPath: "value",
122 oneway: false,
123 boundValueMutator: function(value) {
124 return Math.round(value);
125 }
126 });
127 //
128 this.combo.slider.maxValue = this.combo.hottext.maxValue = 100;
129 this.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView);
130 //
131 this.combo.slider.addEventListener('change', this.alphaChange.bind(this));
132 this.combo.hottext.addEventListener('change', this.alphaChange.bind(this));
133 //
134 this._colorChipWheel = ColorWheel.create();
135 this._colorChipWheel.element = this.popupContainers.wheel;
136 this._colorChipWheel.element.style.display = 'block';
137 this._colorChipWheel.rimWidth = 14;
138 this._colorChipWheel.strokeWidth = 2;
139 //
140 this._colorChipWheel.addEventListener('firstDraw', this, false);
141 this._colorChipWheel.addEventListener('change', this, false);
142 this._colorChipWheel.addEventListener('changing', this, false);
143 }
144 },
145 ////////////////////////////////////////////////////////////////////
146 //
147 draw: {
148 enumerable: false,
149 value: function() {
150 //
151 this.drawPalette(this.defaultPalette);
152 //
153 //this.cc_hexinput = this.application.ninja.colorController.colorView.addButton('hexinput', document.getElementById('cc_pu_hottext_hex'));
154 //
155 this.combo.slider.needsDraw = true;
156 this.combo.hottext.needsDraw = true;
157 this.cc_hexinput.needsDraw = true;
158 //
159 var ncButton = document.getElementById('cc_pu_nocolor'),
160 plButton = document.getElementById('cc_pu_palettes'),
161 wlButton = document.getElementById('cc_pu_wheel'),
162 gdButton = document.getElementById('cc_pu_gradients'),
163 imButton = document.getElementById('cc_pu_images');
164 //
165 if (this.popupModes.nocolor) {
166 ncButton.addEventListener('click', function () {
167 this.setNoColor();
168 }.bind(this));
169 } else {
170 ncButton.style.display = 'none';
171 }
172 //
173 if (this.popupModes.palette) {
174 plButton.addEventListener('click', function () {
175 this.popupSwitchInputTo(this.popupContainers.palette);
176 }.bind(this));
177 } else {
178 plButton.style.display = 'none';
179 }
180 //
181 if (this.popupModes.wheel) {
182 wlButton.addEventListener('click', function () {
183 this.popupSwitchInputTo(this.popupContainers.wheel);
184 }.bind(this));
185 } else {
186 wlButton.style.display = 'none';
187 }
188 //
189 if (this.popupModes.gradient) {
190 gdButton.addEventListener('click', function () {
191 this.popupSwitchInputTo(this.popupContainers.gradient);
192 }.bind(this));
193 } else {
194 gdButton.style.display = 'none';
195 }
196 //
197 if (this.popupModes.image) {
198 imButton.style.opacity = .2;//TODO: Remove, visual feedback for disable button
199 imButton.addEventListener('click', function () {
200 //this.popupSwitchInputTo(this.popupContainers.image);
201 }.bind(this));
202 } else {
203 imButton.style.display = 'none';
204 }
205 //
206 this.element.style.opacity = 1;
207 //
208 this._colorChipWheel.needsDraw = true;
209 }
210 },