aboutsummaryrefslogtreecommitdiff
path: root/js/components/colorwheel.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/colorwheel.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/colorwheel.reel')
-rw-r--r--js/components/colorwheel.reel/colorwheel.html50
-rw-r--r--js/components/colorwheel.reel/colorwheel.js536
-rw-r--r--js/components/colorwheel.reel/compass_app_log.txt3
-rwxr-xr-xjs/components/colorwheel.reel/config.rb9
-rw-r--r--js/components/colorwheel.reel/css/colorwheel.css18
-rwxr-xr-xjs/components/colorwheel.reel/css/colorwheel.scss17
6 files changed, 633 insertions, 0 deletions
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html
new file mode 100644
index 00000000..0374e6a3
--- /dev/null
+++ b/js/components/colorwheel.reel/colorwheel.html
@@ -0,0 +1,50 @@
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/colorwheel.css">
15
16 <script type="text/m-objects">
17 {
18 "$rootObject": U("m-obj://colorwheel/uuid?mId=js/components/colorwheel", {
19 "element": E("#colorwheel")
20 })
21 }
22 </script>
23
24 <script type="text/montage-serialization">
25 {
26 "owner": {
27 "module": "js/components/colorwheel.reel",
28 "name": "ColorWheel",
29 "properties": {
30 "element": {"#": "colorwheel"}
31
32 }
33 }
34 }
35 </script>
36
37 </head>
38
39 <body>
40
41 <div id="colorwheel" class="colorwheel">
42 <canvas></canvas>
43 <canvas></canvas>
44 <canvas></canvas>
45 <canvas></canvas>
46 </div>
47
48 </body>
49
50</html> \ No newline at end of file
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js
new file mode 100644
index 00000000..343422e2
--- /dev/null
+++ b/js/components/colorwheel.reel/colorwheel.js
@@ -0,0 +1,536 @@
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//
13exports.ColorWheel = Montage.create(Component, {
14 ////////////////////////////////////////////////////////////////////
15 //
16 hasTemplate: {
17 enumerable: false,
18 value: true
19 },
20 ////////////////////////////////////////////////////////////////////
21 //Value of wheel in HSV (360, 100, 100)
22 _value: {
23 enumerable: false,
24 value: {h: 0, s: 0, v: 0}
25 },
26 ////////////////////////////////////////////////////////////////////
27 //Value of wheel in HSV (360, 100, 100)
28 value: {
29 enumerable: false,
30 get: function() {
31 return this._value;
32 },
33 set: function(value) {
34 this._value = value;
35 if (this._wheelData) {
36 if (value && !value.wasSetByCode) {
37 this.wheelSelectorAngle(value.h/this.element._component.math.TAU*360);
38 this.drawSwatchColor(value.h/this.element._component.math.TAU*360);
39 this.drawSwatchSelector(value.s*100, value.v*100);
40 }
41 if (!this._isMouseDown) {
42 this._dispatchEvent('change', true);
43 }
44 }
45 }
46 },
47 ////////////////////////////////////////////////////////////////////
48 //Stroke size of wheel
49 _strokeWidth: {
50 enumerable: false,
51 value: 2
52 },
53 ////////////////////////////////////////////////////////////////////
54 //Size must be set in digits and interpreted as pixel
55 strokeWidth: {
56 enumerable: false,
57 get: function() {
58 return this._strokeWidth;
59 },
60 set: function(value) {
61 this._strokeWidth = value;
62 }
63 },
64 ////////////////////////////////////////////////////////////////////
65 //Stroke color of wheel
66 _strokeColor: {
67 enumerable: false,
68 value: 'rgb(255, 255, 255)'
69 },
70 ////////////////////////////////////////////////////////////////////
71 //Stroke only apply to wheel rim
72 strokeColor: {
73 enumerable: false,
74 get: function() {
75 return this._strokeColor;
76 },
77 set: function(value) {
78 this._strokeColor = value;
79 }
80 },
81 ////////////////////////////////////////////////////////////////////
82 //Width of the rim
83 _rimWidth: {
84 enumerable: false,
85 value: 2
86 },
87 ////////////////////////////////////////////////////////////////////
88 //Width must be set using digits interpreted as pixel
89 rimWidth: {
90 enumerable: false,
91 get: function() {
92 return this._rimWidth;
93 },
94 set: function(value) {
95 this._rimWidth = value;
96 }
97 },
98 ////////////////////////////////////////////////////////////////////
99 //
100 prepareForDraw: {
101 enumerable: false,
102 value: function() {
103 //
104 this.element._component = {wheel: {}, swatch: {}, wheel_select: {}, swatch_select: {}, math: {}};
105 //
106 this.element._component.math.PI = Math.PI,
107 this.element._component.math.TAU = Math.PI*2,
108 this.element._component.math.RADIANS = Math.PI/180;
109 }
110 },
111 ////////////////////////////////////////////////////////////////////
112 //
113 willDraw: {
114 enumerable: false,
115 value: function() {
116 //
117 this.element.style.opacity = 0;
118 //
119 var cnvs = this.element.getElementsByTagName('canvas');
120 //
121 this.element._component.wheel.canvas = cnvs[0];
122 this.element._component.swatch.canvas = cnvs[1];
123 this.element._component.wheel_select.canvas = cnvs[3];
124 this.element._component.swatch_select.canvas = cnvs[2];
125 //
126 this.element._component.wheel.context = this.element._component.wheel.canvas.getContext("2d");
127 this.element._component.swatch.context = this.element._component.swatch.canvas.getContext("2d");
128 this.element._component.wheel_select.context = this.element._component.wheel_select.canvas.getContext("2d");
129 this.element._component.swatch_select.context = this.element._component.swatch_select.canvas.getContext("2d");
130 }
131 },
132 ////////////////////////////////////////////////////////////////////
133 //
134 draw: {
135 enumerable: false,
136 value: function() {
137 //
138 var slice, i, whlctx = this.element._component.wheel.context, math = this.element._component.math,
139 whlcvs = this.element._component.wheel.canvas, swhcvs = this.element._component.swatch.canvas,
140 wslcvs = this.element._component.wheel_select.canvas, swscvs = this.element._component.swatch_select.canvas;
141 //Determing radius by smallest factor of width or height
142 if (this.element.offsetWidth > this.element.offsetHeight) {
143 math.diameter = this.element.offsetWidth;
144 } else {
145 math.diameter = this.element.offsetHeight;
146 }
147 //Setting the radius from diameter
148 math.radius = math.diameter/2;
149 //Inner radius of wheel
150 math.innerRadius = math.radius - this.rimWidth;
151 //Setting the widths and heights to match the container's
152 whlcvs.width = whlcvs.height = wslcvs.width = wslcvs.height = swscvs.width = swscvs.height = math.diameter;
153 //
154 math.swatchLength = Math.floor((math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * math.RADIANS) * 2);
155 math.swatchPosition = Math.round(math.radius - (math.swatchLength/2))+this.strokeWidth* Math.sin(45 * math.RADIANS);
156 //
157 //swhcvs.width = swhcvs.height = math.swatc