diff options
Diffstat (limited to 'js/components/colorbar.reel/colorbar.js')
-rw-r--r-- | js/components/colorbar.reel/colorbar.js | 227 |
1 files changed, 227 insertions, 0 deletions
diff --git a/js/components/colorbar.reel/colorbar.js b/js/components/colorbar.reel/colorbar.js new file mode 100644 index 00000000..e547b9bc --- /dev/null +++ b/js/components/colorbar.reel/colorbar.js | |||
@@ -0,0 +1,227 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No 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 | // | ||
9 | var Montage = require("montage/core/core").Montage, | ||
10 | Component = require("montage/ui/component").Component; | ||
11 | //////////////////////////////////////////////////////////////////////// | ||
12 | //Exporting as ColorBar | ||
13 | exports.ColorBar = Montage.create(Component, { | ||
14 | //////////////////////////////////////////////////////////////////// | ||
15 | //No reel needed since it's just a bar component | ||
16 | hasTemplate: { | ||
17 | value: true | ||
18 | }, | ||
19 | //////////////////////////////////////////////////////////////////// | ||
20 | //Width of spectrum (not including b/w buttons) | ||
21 | _colorBarSpectrumWidth: { | ||
22 | enumerable: false, | ||
23 | value: null | ||
24 | }, | ||
25 | //////////////////////////////////////////////////////////////////// | ||
26 | //Width of spectrum steps (used to calculate size of B/W buttons) | ||
27 | _colorBarSpectrumWidthSteps: { | ||
28 | enumerable: false, | ||
29 | value: 10 | ||
30 | }, | ||
31 | //////////////////////////////////////////////////////////////////// | ||
32 | //Default value | ||
33 | _value: { | ||
34 | enumerable: false, | ||
35 | value: {h: 0, s: 0, v: 0} | ||
36 | }, | ||
37 | //////////////////////////////////////////////////////////////////// | ||
38 | //HSV Value selected from bar | ||
39 | value: { | ||
40 | enumerable: true, | ||
41 | get: function() { | ||
42 | return this._value; | ||
43 | }, | ||
44 | set: function(value) { | ||
45 | if (value) { | ||
46 | //Checking for limits (Max and Min HSV values) | ||
47 | if (value.h > Math.PI*2) { | ||
48 | value.h = Math.PI*2; | ||
49 | } else if (value.h < 0) { | ||
50 | value.h = 0; | ||
51 | } | ||
52 | // | ||
53 | if (value.s > 1) { | ||
54 | value.s = 1; | ||
55 | } else if (value.s < 0) { | ||
56 | value.s = 0; | ||
57 | } | ||
58 | // | ||
59 | if (value.v > 1) { | ||
60 | value.v = 1; | ||
61 | } else if (value.v < 0) { | ||
62 | value.v = 0; | ||
63 | } | ||
64 | //Setting value | ||
65 | this._value = value; | ||
66 | // | ||
67 | if (!this._isMouseDown) { | ||
68 | this._dispatchActionEvent('change', true); | ||
69 | } | ||
70 | } | ||
71 | } | ||
72 | }, | ||
73 | //////////////////////////////////////////////////////////////////// | ||
74 | // | ||
75 | prepareForDraw: { | ||
76 | enumerable: false, | ||
77 | value: function() { | ||
78 | //Nothing | ||
79 | } | ||
80 | }, | ||
81 | //////////////////////////////////////////////////////////////////// | ||
82 | //Setting up and drawing canvas to object | ||
83 | willDraw: { | ||
84 | enumerable: false, | ||
85 | value: function() { | ||
86 | //Setting the width and height of the canvas to match container | ||
87 | this.element.width = parseInt(window.getComputedStyle(this.element, null).width); | ||
88 | this.element.height = parseInt(window.getComputedStyle(this.element, null).height); | ||
89 | } | ||
90 | }, | ||
91 | //////////////////////////////////////////////////////////////////// | ||
92 | // | ||
93 | draw: { | ||
94 | value: function () { | ||
95 | //Local variables | ||
96 | var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i; | ||
97 | //calculating width of spectrum (remainder is used for B/W buttons) | ||
98 | cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps); | ||
99 | //Context and Gradient | ||
100 | cb_ctx = cb_canvas.getContext('2d'); | ||
101 | cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height); | ||
102 | //////////////////////////////////////////////////////// | ||
103 | //Looping through set intervals (Creating spectrum) | ||
104 | for (i=0; i<60; i++) { | ||
105 | //Calculating slice number | ||
106 | cb_slc = Math.round(255*i/60); | ||
107 | //Creating gradient slices (6 colors in color theory) | ||
108 | cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)'); | ||
109 | cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)'); | ||
110 | cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')'); | ||
111 | cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)'); | ||
112 | cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)'); | ||
113 | cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')'); | ||
114 | } | ||
115 | //Adding Color Bar to the canvas (Gradients) | ||
116 | cb_ctx.fillStyle = cb_grdnt; | ||
117 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); | ||
118 | //////////////////////////////////////////////////////// | ||
119 | //White Gradient overlay to simulate L | ||
120 | cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height); | ||
121 | cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)'); | ||
122 | cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)'); | ||
123 | cb_ctx.fillStyle = cb_grdnt; | ||
124 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); | ||
125 | //Black Gradient overlay to simulate S | ||
126 | cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height); | ||
127 | cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)'); | ||
128 | cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)'); | ||
129 | cb_ctx.fillStyle = cb_grdnt; | ||
130 | cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height); | ||
131 | //Black "button" | ||
132 | cb_ctx.fillStyle = "#000"; | ||
133 | cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2); | ||
134 | //Black line divider | ||
135 | cb_ctx.fillStyle = "#000"; | ||
136 | cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height); | ||
137 | //White "button" | ||
138 | cb_ctx.fillStyle = "#FFF"; | ||
139 | cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2); | ||
140 | //Saving | ||
141 | cb_ctx.restore(); | ||
142 | cb_ctx.save(); | ||
143 | //Cleaning up | ||
144 | cb_canvas = cb_ctx = cb_grdnt = cb_slc = cb_gwidth = PI = i = null; | ||
145 | } | ||
146 | }, | ||
147 | //////////////////////////////////////////////////////////////////// | ||
148 | //Adding ColorBar to the element | ||
149 | didDraw: { | ||
150 | value: function() { | ||
151 | //Adding functionality via events | ||
152 | this.element.addEventListener("mousedown", this, false); | ||
153 | this.element.addEventListener("mouseover", this, false); | ||
154 | this.element.addEventListener("mousemove", this, false); | ||
155 | } | ||
156 | }, | ||
157 | //////////////////////////////////////////////////////////////////// | ||
158 | //Mouse Down (adds other events and updates HSV) | ||
159 | handleMousedown: { | ||
160 | value: function (e) { | ||
161 | if (!this._colorBarSpectrumWidth) | ||
162 | this._colorBarSpectrumWidth = (this.element.width - this.element.width/this._colorBarSpectrumWidthSteps)-1; | ||
163 | this._isMouseDown = true; | ||
164 | document.addEventListener("mouseup", this, false); | ||
165 | this._updateHsv(e); | ||
166 | } | ||
167 | }, | ||
168 | //////////////////////////////////////////////////////////////////// | ||
169 | //Used to check mouse mode and display cursor | ||
170 | _isMouseDown: { | ||
171 | enumerable: false, | ||
172 | value: false | ||
173 | }, | ||
174 | //////////////////////////////////////////////////////////////////// | ||
175 | //Mouse Move (updates HSV) | ||
176 | handleMousemove: { | ||
177 | value: function (e) { | ||
178 | //Changing cursors style for appropiate user feedback | ||
179 | if (e.offsetX > this._colorBarSpectrumWidth) {this.element.style.cursor = 'pointer';} | ||
180 | else {this.element.style.cursor = 'crosshair';} | ||
181 | //Checking for mouse down to scan for color | ||
182 | if (this._isMouseDown) {this._updateHsv(e);} | ||
183 | } | ||
184 | }, | ||
185 | //////////////////////////////////////////////////////////////////// | ||
186 | //Mouse Up (Removes events) | ||
187 | handleMouseup: { | ||
188 | value: function (e) { | ||
189 | this._isMouseDown = false; | ||
190 | document.removeEventListener("mouseup", this, false); | ||
191 | this._dispatchActionEvent('change', false); | ||
192 | } | ||
193 | }, | ||
194 | //////////////////////////////////////////////////////////////////// | ||
195 | //Updating HSV values | ||
196 | _updateHsv: { | ||
197 | value: function (e) { | ||
198 | if (e.offsetX > this._colorBarSpectrumWidth) { | ||
199 | //Faking button functionality - Simple B/W selection | ||
200 | if (e.offsetY >= this.element.offsetHeight/2) { this.value = {h: this.value.h, s: 1, v: 0};} // White | ||
201 | else { this.value = {h: this.value.h, s: 0, v: 1};} // Black | ||
202 | } else { | ||
203 | //Checking for S or V to be applied (no mixing on bar) | ||
204 | if (e.offsetY >= this.element.offsetHeight/2) { //Saturation | ||
205 | this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1-(e.offsetY-this.element.offsetHeight/2)/((this.element.offsetHeight/2-1)), s: 1}; | ||
206 | } else { //Vibrance | ||
207 | this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1, s: (e.offsetY)/((this.element.offsetHeight/2))}; | ||
208 | } | ||
209 | } | ||
210 | // | ||
211 | this._dispatchActionEvent('changing', false); | ||
212 | } | ||
213 | }, | ||
214 | //////////////////////////////////////////////////////////////////// | ||
215 | //Dispatching "Change" event | ||
216 | _dispatchActionEvent: { | ||
217 | value: function(type, userInitiated) { | ||