aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Color/colorpanelbase.reel/colorpanelbase.js')
-rw-r--r--js/panels/Color/colorpanelbase.reel/colorpanelbase.js1641
1 files changed, 1641 insertions, 0 deletions
diff --git a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
new file mode 100644
index 00000000..9a27689a
--- /dev/null
+++ b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
@@ -0,0 +1,1641 @@
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 Popup = require("js/components/popup.reel").Popup,
12 Slider = require("js/components/slider.reel").Slider,
13 HotText = require("js/components/hottext.reel").HotText,
14 ColorBar = require("js/components/colorbar.reel").ColorBar;
15////////////////////////////////////////////////////////////////////////
16//Exporting as ColorPanelBase
17exports.ColorPanelBase = Montage.create(Component, {
18 ////////////////////////////////////////////////////////////////////
19 //
20 hasTemplate: {
21 value: true
22 },
23 ////////////////////////////////////////////////////////////////////
24 //Storing ColorPanel sliders mode
25 _panelMode: {
26 enumerable: false,
27 value: 'rgb'
28 },
29 ////////////////////////////////////////////////////////////////////
30 //Storing ColorPanel sliders mode
31 panelMode: {
32 enumerable: true,
33 get: function() {
34 return this._panelMode;
35 },
36 set: function(value) {
37 if (value !== this._panelMode) {
38 this._panelMode = value;
39 }
40 }
41 },
42 ////////////////////////////////////////////////////////////////////
43 //
44 _colorBar: {
45 enumerable: false,
46 value: null
47 },
48 ////////////////////////////////////////////////////////////////////
49 //Storing color manager
50 _colorManager: {
51 enumerable: false,
52 value: null
53 },
54 ////////////////////////////////////////////////////////////////////
55 //
56 colorManager: {
57 enumerable: true,
58 get: function() {
59 return this._colorManager;
60 },
61 set: function(value) {
62 if (value !== this._colorManager) {
63 this._colorManager = value;
64 //Updating input buttons
65 this._colorManager.addEventListener('change', this._update.bind(this));
66 this._colorManager.addEventListener('changing', this._update.bind(this));
67 //Updating history buttons once color is set
68 this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
69 }
70 }
71 },
72 ////////////////////////////////////////////////////////////////////
73 //Color Panel Container
74 _container: {
75 enumerable: false,
76 value: null
77 },
78 ////////////////////////////////////////////////////////////////////
79 //
80 _combo: {
81 enumerable: false,
82 value: [{slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}]
83 },
84 ////////////////////////////////////////////////////////////////////
85 //
86 _buttons: {
87 enumerable: false,
88 value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []}
89 },
90 ////////////////////////////////////////////////////////////////////
91 //
92 historyCache: {
93 enumerable: false,
94 value: {current: null, previous: null}
95 },
96 ////////////////////////////////////////////////////////////////////
97 //
98 colorChipProps: {
99 enumerable: true,
100 value: {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}
101 },
102 ////////////////////////////////////////////////////////////////////
103 //
104 currentChip: {
105 enumerable: true,
106 value: null
107 },
108 ////////////////////////////////////////////////////////////////////
109 //
110 previousInput: {
111 enumerable: true,
112 value: null
113 },
114 ////////////////////////////////////////////////////////////////////
115 //Setting up elements/components
116 prepareForDraw: {
117 enumerable: false,
118 value: function() {
119 //TODO: Remove temporary hack, color history should be initilized
120 this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}];
121 this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}];
122 }
123 },
124 ////////////////////////////////////////////////////////////////////
125 //Assigning values and binding
126 willDraw: {
127 enumerable: false,
128 value: function() {
129 ////////////////////////////////////////////////////////////
130 //TODO: remove ID dependencies
131 createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element);
132 createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element);
133 createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element);
134 createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element);
135 ////////////////////////////////////////////////////////////
136 //Function to create slider/hottext combination
137 function createCombo (c, slid, htid, color, e) {
138 //Only creating, not drawing
139 c.slider = Slider.create();
140 c.hottext = HotText.create();
141 c.slider.element = e.getElementsByClassName(slid)[0];
142 c.hottext.element = e.getElementsByClassName(htid)[0];
143 c.slider.changesColor = c.hottext.changesColor = color;
144 c.slider.cInputType = 'slider';
145 c.slider.cInputType = 'hottext';
146 //Binding Hottext to Slider
147 Object.defineBinding(c.hottext, "value", {
148 boundObject: c.slider,
149 boundObjectPropertyPath: "_value", //TODO: Check if needed
150 oneway: false,
151 boundValueMutator: function(value) {
152 return Math.round(value);
153 }
154 });
155 //Binding Slider to Hottext
156 Object.defineBinding(c.slider, "value", {
157 boundObject: c.hottext,
158 boundObjectPropertyPath: "value",
159 oneway: false,
160 boundValueMutator: function(value) {
161 return Math.round(value);
162 }
163 });
164 }
165 ////////////////////////////////////////////////////////////
166 //Creating ColorBar and sending color manager
167 this._colorBar = ColorBar.create();
168 this._colorBar.element = this.element.getElementsByClassName("cp_spectrum")[0];
169 ////////////////////////////////////////////////////////////
170 //Adding/Initializing buttons
171 this.addButton('fill', this.element.getElementsByClassName('cpe_fill')[0]);
172 this.addButton('fillicon', this.element.getElementsByClassName('cpe_fill_icon')[0]);
173 this.addButton('stroke', this.element.getElementsByClassName('cpe_stroke')[0]);
174 this.addButton('strokeicon', this.element.getElementsByClassName('cpe_stroke_icon')[0]);
175
176 this.addButton('current', this.element.getElementsByClassName('cp_color_current')[0]);
177 this.addButton('previous', this.element.getElementsByClassName('cp_color_previous')[0]);
178
179 this.addButton('hexinput', this.element.getElementsByClassName('cp_hottext5')[0]);
180 this.addButton('reset', this.element.getElementsByClassName('cp_reset')[0]);
181 this.addButton('nocolor', this.element.getElementsByClassName('cp_nocolor')[0]);
182 this.addButton('swap', this.element.getElementsByClassName('cp_swap')[0]);
183
184 //TODO: Add HSL mode when Chrome can pass proper mode in color, also add in CSS button states
185 //this.addButton('hslmode', this.element.getElementsByClassName('cp_hsl_mode')[0]);
186 this.addButton('rgbmode', this.element.getElementsByClassName('cp_rgb_mode')[0]);
187
188 this.addButton('mlabel1', this.element.getElementsByClassName('sh_label1')[0]);
189 this.addButton('mlabel2', this.element.getElementsByClassName('sh_label2')[0]);
190 this.addButton('mlabel3', this.element.getElementsByClassName('sh_label3')[0]);
191
192
193
194 //Initialing values of sliders according to current mode
195 if (this._panelMode === 'rgb') {
196 this._combo[0].slider.maxValue = this._combo[0].hottext.maxValue = 255;
197 this._combo[1].slider.maxValue = this._combo[1].hottext.maxValue = 255;
198 this._combo[2].slider.maxValue = this._combo[2].hottext.maxValue = 255;
199 } else if (this._panelMode === 'hsl') {
200 this._combo[0].slider.maxValue = this._combo[0].hottext.maxValue = 360;
201 this._combo[1].slider.maxValue = this._combo[1].hottext.maxValue = 100;
202 this._combo[2].slider.maxValue = this._combo[2].hottext.maxValue = 100;
203 }
204 //Alpha slider/hottext is indepenent of color panel mode
205 this._combo[3].slider.maxValue = this._combo[3].hottext.maxValue = 100;
206 }
207 },
208 ////////////////////////////////////////////////////////////////////