aboutsummaryrefslogtreecommitdiff
path: root/js/components/colorbar.reel
diff options
context:
space:
mode:
authorPierre Frisch2011-12-22 07:25:50 -0800
committerValerio Virgillito2012-01-27 11:18:17 -0800
commitb89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch)
tree0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/components/colorbar.reel
parent2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff)
downloadninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'js/components/colorbar.reel')
-rw-r--r--js/components/colorbar.reel/colorbar.html37
-rw-r--r--js/components/colorbar.reel/colorbar.js227
-rwxr-xr-xjs/components/colorbar.reel/config.rb9
-rw-r--r--js/components/colorbar.reel/css/colorbar.css12
-rwxr-xr-xjs/components/colorbar.reel/css/colorbar.scss11
5 files changed, 296 insertions, 0 deletions
</
diff --git a/js/components/colorbar.reel/colorbar.html b/js/components/colorbar.reel/colorbar.html
new file mode 100644
index 00000000..f74f1437
--- /dev/null
+++ b/js/components/colorbar.reel/colorbar.html
@@ -0,0 +1,37 @@
1<!DOCTYPE html>
2<!--
3<copyright>
4 This file contains proprietary software owned by Motorola Mobility, Inc.
5 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
6 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
7</copyright>
8-->
9<html lang="en">
10 <head>
11
12 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
13
14 <link rel="stylesheet" type="text/css" href="css/colorbar.css">
15
16 <script type="text/montage-serialization">
17 {
18 "owner": {
19 "module": "js/components/colorbar.reel",
20 "name": "ColorBar",
21 "properties": {
22 "element": {"#": "colorbar"}
23
24 }
25 }
26 }
27 </script>
28
29 </head>
30
31 <body>
32
33 <canvas id="colorbar" class="colorbar"></canvas>
34
35 </body>
36
37</html> \ No newline at end of file
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>
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 ColorBar
13exports.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 },