aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Color/colortoolbar.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/panels/Color/colortoolbar.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/panels/Color/colortoolbar.reel')
-rw-r--r--js/panels/Color/colortoolbar.reel/colortoolbar.html54
-rw-r--r--js/panels/Color/colortoolbar.reel/colortoolbar.js176
-rwxr-xr-xjs/panels/Color/colortoolbar.reel/config.rb9
-rw-r--r--js/panels/Color/colortoolbar.reel/css/colortoolbar.css45
-rwxr-xr-xjs/panels/Color/colortoolbar.reel/css/colortoolbar.scss52
5 files changed, 336 insertions, 0 deletions
diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.html b/js/panels/Color/colortoolbar.reel/colortoolbar.html
new file mode 100644
index 00000000..9ab54836
--- /dev/null
+++ b/js/panels/Color/colortoolbar.reel/colortoolbar.html
@@ -0,0 +1,54 @@
1<!DOCTYPE HTML>
2
3<!DOCTYPE html>
4<!-- <copyright>
5 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
6 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
7 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
8 </copyright> -->
9
10<html lang="en">
11 <head>
12 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
13 <link rel="stylesheet" type="text/css" href="css/colortoolbar.css">
14
15 <script type="text/montage-serialization">
16 {
17
18 "owner": {
19 "module": "js/panels/Color/colortoolbar.reel",
20 "name": "ColorToolbar",
21 "properties": {
22 "element": {"#": "colortoolbar"}
23 }
24 }
25 }
26 </script>
27
28 </head>
29
30 <body>
31
32 <div id="colortoolbar" class="colortoolbar">
33
34 <div class="cpe_stroke_icon selected"></div>
35
36 <div class="cpe_colortoolbar_container">
37
38 <button></button>
39
40 </div>
41
42 <div class="cpe_fill_icon selected"></div>
43
44 <div class="cpe_colortoolbar_container">
45
46 <button></button>
47
48 </div>
49
50 </div>
51
52 </body>
53
54</html> \ No newline at end of file
diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js
new file mode 100644
index 00000000..19fe7b85
--- /dev/null
+++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js
@@ -0,0 +1,176 @@
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.ColorToolbar = Montage.create(Component, {
14 ////////////////////////////////////////////////////////////////////
15 //
16 hasTemplate: {
17 value: true
18 },
19 ////////////////////////////////////////////////////////////////////
20 //Storing stroke (stores color in mode use to select color)
21 _stroke: {
22 enumerable: false,
23 value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)'}, webGlColor: [0, 0, 0, 1]}
24 },
25 ////////////////////////////////////////////////////////////////////
26 //
27 stroke: {
28 enumerable: true,
29 get: function() {
30 return this._stroke;
31 },
32 set: function(value) {
33 if (value !== this._stroke) {
34 this._stroke = value;
35 }
36 }
37 },
38 ////////////////////////////////////////////////////////////////////
39 //Storing fill (stores color in mode use to select color)
40 _fill: {
41 enumerable: false,
42 value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)'}, webGlColor: [1, 1, 1, 1]}
43 },
44 ////////////////////////////////////////////////////////////////////
45 //
46 fill: {
47 enumerable: true,
48 get: function() {
49 return this._fill;
50 },
51 set: function(value) {
52 if (value !== this._fill) {
53 this._fill = value;
54 }
55 }
56 },
57 ////////////////////////////////////////////////////////////////////
58 //
59 prepareForDraw: {
60 enumerable: false,
61 value: function () {
62 //
63 }
64 },
65 ////////////////////////////////////////////////////////////////////
66 //
67 willDraw: {
68 enumerable: false,
69 value: function() {
70 //
71 var buttons = this.element.getElementsByTagName('button');
72 //
73 this.fill_btn = buttons [1];
74 this.stroke_btn = buttons[0];
75 //
76 this.fill_btn.props = {side: 'left', align: 'top', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: 20};
77 this.stroke_btn.props = {side: 'left', align: 'top', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: 20};
78 }
79 },
80 ////////////////////////////////////////////////////////////////////
81 //
82 draw: {
83 enumerable: false,
84 value: function() {
85 //
86 this.application.ninja.colorController.addButton('chip', this.fill_btn);
87 this.application.ninja.colorController.addButton('chip', this.stroke_btn);
88 //
89 this.fill_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'});
90 this.stroke_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'});
91 }
92 },
93 ////////////////////////////////////////////////////////////////////
94 //
95 didDraw: {
96 enumerable: false,
97 value: function() {
98 //
99 this.fill_btn.addEventListener('change', function (e) {
100 //
101 var temp;
102 //
103 this.fill = e._event;
104 //
105 if (e._event.color && e._event.color.l) {
106 temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100);
107 temp.a = e._event.color.a;
108 } else if (e._event.color && e._event.color.r){
109 temp = e._event.color;
110 temp.a = e._event.color.a;
111 } else {
112 temp = null;
113 }
114 //WebGL uses array
115 if (temp) {
116 this.fill.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a];
117 } else {
118 this.fill.webGlColor = null;
119 }
120 //
121 this.application.ninja.colorController.colorModel.input = 'fill';
122 //
123 var color = e._event.color;
124 if (e._event.colorMode !== 'nocolor' && color) {
125 color.wasSetByCode = false;
126 color.type = 'change';
127 this.application.ninja.colorController.colorModel[e._event.colorMode] = color;
128 } else {
129 this.application.ninja.colorController.colorModel.applyNoColor();
130 }
131 //
132 this.application.ninja.colorController.colorModel.input = 'chip';
133 }.bind(this));
134 //
135 this.stroke_btn.addEventListener('change', function (e) {
136 //
137 var temp;
138 //
139 this.stroke = e._event;
140 //
141 if (e._event.color && e._event.color.l) {
142 temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100);
143 temp.a = e._event.color.a;
144 } else if (e._event.color && e._event.color.r){
145 temp = e._event.color;
146 temp.a = e._event.color.a;
147 } else {
148 temp = null;
149 }
150 //WebGL uses array
151 if (temp) {