aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colortoolbar.reel
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-04-16 16:06:24 -0700
committerNivesh Rajbhandari2012-04-16 16:06:24 -0700
commitc253192a08b499ea7be46fa5438d273e51f7ec5a (patch)
tree18a1f0e3679c0eb993a9dedb537035d3861f49ac /js/panels/color/colortoolbar.reel
parente19376c54eedd1f1c457ba405b2f110be376a559 (diff)
parent4b900ea5cd6bb77eb30cec8c03b9ec9fa662c1e9 (diff)
downloadninja-c253192a08b499ea7be46fa5438d273e51f7ec5a.tar.gz
Merge branch 'refs/heads/ninja-internal' into WebGLFixes
Diffstat (limited to 'js/panels/color/colortoolbar.reel')
-rwxr-xr-xjs/panels/color/colortoolbar.reel/colortoolbar.html54
-rwxr-xr-xjs/panels/color/colortoolbar.reel/colortoolbar.js138
-rwxr-xr-xjs/panels/color/colortoolbar.reel/config.rb9
-rwxr-xr-xjs/panels/color/colortoolbar.reel/css/colortoolbar.css45
-rwxr-xr-xjs/panels/color/colortoolbar.reel/css/colortoolbar.scss52
5 files changed, 298 insertions, 0 deletions
diff --git a/js/panels/color/colortoolbar.reel/colortoolbar.html b/js/panels/color/colortoolbar.reel/colortoolbar.html
new file mode 100755
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 100755
index 00000000..6b8e476b
--- /dev/null
+++ b/js/panels/color/colortoolbar.reel/colortoolbar.js
@@ -0,0 +1,138 @@
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)', mode:'rgb', wasSetByCode: true, type: 'change'}, 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)', mode:'rgb', wasSetByCode: true, type: 'change'}, 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: true, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'});
90 this.stroke_btn.color('rgb', {wasSetByCode: true, 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 this.fill = e._event;
101 this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
102 this.application.ninja.colorController.colorModel.input = 'fill';
103
104 var color = e._event.color;
105 if (e._event.colorMode !== 'nocolor' && color) {
106 color.wasSetByCode = false;
107 color.type = 'change';
108 color.mode = e._event.colorMode;
109 this.application.ninja.colorController.colorModel[e._event.colorMode] = color;
110 } else {
111 this.application.ninja.colorController.colorModel.applyNoColor();
112 }
113 this.application.ninja.colorController.colorModel.input = 'chip';
114 }.bind(this));
115
116 this.stroke_btn.addEventListener('change', function (e) {
117 this.stroke = e._event;
118 this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
119 this.application.ninja.colorController.colorModel.input = 'stroke';
120
121 var color = e._event.color;
122 if (e._event.colorMode !== 'nocolor' && color) {
123 color.wasSetByCode = false;
124 color.type = 'change';
125 color.mode = e._event.colorMode;
126 this.application.ninja.colorController.colorModel[e._event.colorMode] = color;
127 } else {
128 this.application.ninja.colorController.colorModel.applyNoColor();
129 }
130 this.application.ninja.colorController.colorModel.input = 'chip';
131 }.bind(this));
132 }
133 }
134 ////////////////////////////////////////////////////////////////////
135 ////////////////////////////////////////////////////////////////////
136});
137////////////////////////////////////////////////////////////////////////
138//////////////////////////////////////////////////////////////////////// \ No newline at end of file
diff --git a/js/panels/color/colortoolbar.reel/config.rb b/js/panels/color/colortoolbar.reel/config.rb
new file mode 100755
index 00000000..9b55af19
--- /dev/null
+++ b/js/panels/color/colortoolbar.reel/config.rb
@@ -0,0 +1,9 @@
1# Require any additional compass plugins here.
2# Set this to the root of your project when deployed:
3http_path = "/"
4css_dir = "css"
5sass_dir = "css"
6images_dir = "img"
7javascripts_dir = "../"
8# To enable relative paths to assets via compass helper functions. Uncomment:
9# relative_assets = true
diff --git a/js/panels/color/colortoolbar.reel/css/colortoolbar.css b/js/panels/color/colortoolbar.reel/css/co