aboutsummaryrefslogtreecommitdiff
path: root/js/components/gradientpicker.reel/gradientpicker.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/gradientpicker.reel/gradientpicker.js')
-rw-r--r--js/components/gradientpicker.reel/gradientpicker.js405
1 files changed, 405 insertions, 0 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
new file mode 100644
index 00000000..0940be3c
--- /dev/null
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -0,0 +1,405 @@
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////////////////////////////////////////////////////////////////////////
12//Exporting as ColorWheel
13exports.GradientPicker = Montage.create(Component, {
14 ////////////////////////////////////////////////////////////////////
15 //
16 hasTemplate: {
17 enumerable: true,
18 value: true
19 },
20 ////////////////////////////////////////////////////////////////////
21 //
22 _updating: {
23 enumerable: false,
24 value: false
25 },
26 ////////////////////////////////////////////////////////////////////
27 //
28 _value: {
29 enumerable: false,
30 value: null
31 },
32 ////////////////////////////////////////////////////////////////////
33 //
34 value: {
35 enumerable: true,
36 get: function() {
37 return this._value;
38 },
39 set: function(value) {
40 this._value = value;
41 }
42 },
43 ////////////////////////////////////////////////////////////////////
44 //
45 _mode: {
46 enumerable: false,
47 value: 'linear'
48 },
49 ////////////////////////////////////////////////////////////////////
50 //
51 mode: {
52 enumerable: true,
53 get: function() {
54 return this._mode;
55 },
56 set: function(value) {
57 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
58 //
59 this._mode = value;
60 //
61 this._dispatchEvent('change', false);
62 }
63 },
64 ////////////////////////////////////////////////////////////////////
65 //
66 prepareForDraw: {
67 enumerable: false,
68 value: function() {
69 //
70 }
71 },
72 ////////////////////////////////////////////////////////////////////
73 //
74 willDraw: {
75 enumerable: false,
76 value: function() {
77 //Getting component views from layout
78 this.element._components = {trackCover: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('cover')[0], gradientTrack: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('track')[0], stopsContainer: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('chips')[0]};
79 this.element._trackWidth = parseInt(getComputedStyle(this.element._components.stopsContainer).getPropertyCSSValue('width').cssText);
80 //TODO: Fix events and remove this hack
81 this.element._components.trackCover.addEventListener('mouseover', function () {
82 if (!this._updating) {
83 this.element._components.trackCover.style.display = 'none';
84 }
85 }.bind(this), true);
86 //
87 this.element.getElementsByClassName('cp_gp_linear')[0].addEventListener('change', function (e){
88 this.mode = 'linear';
89 }.bind(this), true);
90 //
91 this.element.getElementsByClassName('cp_gp_radial')[0].addEventListener('change', function (e){
92 this.mode = 'radial';
93 }.bind(this), true);
94 }
95 },
96 ////////////////////////////////////////////////////////////////////
97 //
98 draw: {
99 enumerable: false,
100 value: function() {
101 //
102 if (this.mode === 'linear') {
103 this.element.getElementsByClassName('cp_gp_linear')[0].checked = 'true';
104 } else if (this.mode === 'radial') {
105 this.element.getElementsByClassName('cp_gp_radial')[0].checked = 'true';
106 }
107 //
108 if (!this.value) {
109 this.addDefaultStops();
110 } else {
111 //Temp holder
112 var stops = this.value;
113 //Adding stops from preset value
114 for (var i=0; stops[i]; i++) {
115 this.addStop({color: {mode: stops[i].mode, value: stops[i].value}, percent:stops[i].position}, true);
116 }
117 }
118 }
119 },
120 ////////////////////////////////////////////////////////////////////
121 //
122 didDraw: {
123 enumerable: false,
124 value: function() {
125 //
126 this.element._components.gradientTrack.addEventListener('click', this, false);
127
128
129
130
131
132 ////////////////////////////////////////////////////////////
133 ////////////////////////////////////////////////////////////
134 //TODO: Determing a better way to get screen position
135 var element = this.element._components.gradientTrack;
136 this.element._trackX = 0, this.element._trackY = 0;
137 //
138 while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
139 this.element._trackX += element.offsetLeft - element.scrollLeft;
140 this.element._trackY += element.offsetTop - element.scrollTop;
141 element = element.parentNode;
142 }
143 ////////////////////////////////////////////////////////////
144 ////////////////////////////////////////////////////////////
145
146 //This is forever changing, not sure why
147 //console.log(this.element._trackX, this.element._trackY);
148
149
150 }
151 },
152 ////////////////////////////////////////////////////////////////////
153 //
154 addDefaultStops: {
155 enumerable: false,
156 value: function() {
157 this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true);
158 this.addStop({color: {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}}, percent: 100}, true);
159 }
160 },
161 ////////////////////////////////////////////////////////////////////
162 //
163 addStop: {
164 enumerable: false,
165 value: function(data, silent) {
166 if (this.application.ninja.colorController.colorPopupManager) {
167 //Hiding any open popups (of gradient buttons)
168 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
169 //Creating stop elements
170 var stop = document.createElement('div'),
171 holder = document.createElement('div'),
172 tooltip = document.createElement('span'),
173 button = document.createElement('button');
174 //Setting up elements
175 stop.appendChild(tooltip);
176 stop.appendChild(holder);
177 holder.appendChild(button);
178 //Adding events to the stops
179 stop.addEventListener('mousedown', this, false);
180 stop.addEventListener('mouseup', this, false);
181 //Storing refereces to buttons and actual stop container
182 button.stop = stop;
183 stop.button = button;
184 //Adding stop to container
185 this.element._components.stopsContainer.appendChild(stop);
186 //Checking for bounds to add stop
187 if (data.percent >= 0 && data.percent <= 100) {
188 this.positionStop(stop, data.percent);
189 button.stopPosition = data.percent;
190 }
191 //Creating an instance of input chip
192 this.application.ninja.colorController.addButton('chip', button);
193 //Initialing button with color data
194 button.color(data.color.mode, data.color.value);
195 //Button popup data
196 button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true};
197 //Listening for color events from button
198 button.addEventListener('change', this, false);
199 //Dispatching event depending on type of mode
200 if (!silent) {
201 this._dispatchEvent('change', false);
202 } else {
203 this._dispatchEvent('change', true);
204 }
205 //
206 } else {
207 //Handle Error
208 }