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')
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.js1654
1 files changed, 1654 insertions, 0 deletions
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
new file mode 100755
index 00000000..af62dd07
--- /dev/null
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -0,0 +1,1654 @@
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.addEventListener('firstDraw', this, false);
121 this.application.ninja.colorController.colorView = this;
122 this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}];
123 this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}];
124 }
125 },
126
127 handleFirstDraw: {
128 enumerable: true,
129 value: function (e) {
130 //
131 this.application.ninja.colorController.createToolbar();
132 this.applyDefaultColors();
133 this.removeEventListener('firstDraw', this, false);
134 }
135 },
136
137 ////////////////////////////////////////////////////////////////////
138 //Assigning values and binding
139 willDraw: {
140 enumerable: false,
141 value: function() {
142 ////////////////////////////////////////////////////////////
143 //TODO: remove ID dependencies
144 createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element);
145 createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element);
146 createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element);
147 createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element);
148 ////////////////////////////////////////////////////////////
149 //Function to create slider/hottext combination
150 function createCombo (c, slid, htid, color, e) {
151 //Only creating, not drawing
152 c.slider = Slider.create();
153 c.hottext = HotText.create();
154 c.slider.element = e.getElementsByClassName(slid)[0];
155 c.hottext.element = e.getElementsByClassName(htid)[0];
156 c.slider.changesColor = c.hottext.changesColor = color;
157 c.slider.cInputType = 'slider';
158 c.slider.cInputType = 'hottext';
159 //Binding Hottext to Slider
160 Object.defineBinding(c.hottext, "value", {
161 boundObject: c.slider,
162 boundObjectPropertyPath: "_value", //TODO: Check if needed
163 oneway: false,
164 boundValueMutator: function(value) {
165 return Math.round(value);
166 }
167 });
168 //Binding Slider to Hottext
169 Object.defineBinding(c.slider, "value", {
170 boundObject: c.hottext,
171 boundObjectPropertyPath: "value",
172 oneway: false,
173 boundValueMutator: function(value) {
174 return Math.round(value);
175 }
176 });
177 }
178 ////////////////////////////////////////////////////////////
179 //Creating ColorBar and sending color manager
180 this._colorBar = ColorBar.create();
181 this._colorBar.element = this.element.getElementsByClassName("cp_spectrum")[0];
182 ////////////////////////////////////////////////////////////
183 //Adding/Initializing buttons
184 this.addButton('fill', this.element.getElementsByClassName('cpe_fill')[0]);
185 this.addButton('fillicon', this.element.getElementsByClassName('cpe_fill_icon')[0]);
186 this.addButton('stroke', this.element.getElementsByClassName('cpe_stroke')[0]);
187 this.addButton('strokeicon', this.element.getElementsByClassName('cpe_stroke_icon')[0]);
188
189 this.addButton('current', this.element.getElementsByClassName('cp_color_current')[0]);
190 this.addButton('previous', this.element.getElementsByClassName('cp_color_previous')[0]);
191
192 this.addButton('hexinput', this.element.getElementsByClassName('cp_hottext5')[0]);
193 this.addButton('reset', this.element.getElementsByClassName('cp_reset')[0]);
194 this.addButton('nocolor', this.element.getElementsByClassName('cp_nocolor')[0]);
195 this.addButton('swap', this.element.getElementsByClassName('cp_swap')[0]);
196
197 //TODO: Add HSL mode when Chrome can pass proper mode in color, also add in CSS button states
198 //this.addButton('hslmode', this.element.getElementsByClassName('cp_hsl_mode')[0]);
199 this.addButton('rgbmode', this.element.getElementsByClassName('cp_rgb_mode')[0]);
200
201 this.addButton('mlabel1', this.element.getElementsByClassName('sh_label1')[0]);
202 this.addButton('mlabel2', this.element.getElementsByClassName('sh_label2')[0]);
203 this.addButton('mlabel3', this.element.getElementsByClassName('sh_label3')[0]);
204
205
206
207