aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colorpanelbase.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/color/colorpanelbase.reel')
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.html76
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.js1654
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/config.rb9
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/css/colorpanelbase.css332
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/css/colorpanelbase.scss339
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/img/icon_default.pngbin0 -> 3011 bytes
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/img/icon_nocolor.pngbin0 -> 3036 bytes
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/img/icon_swap.pngbin0 -> 2961 bytes
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/img/knob.pngbin0 -> 1036 bytes
9 files changed, 2410 insertions, 0 deletions
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html
new file mode 100755
index 00000000..d4330596
--- /dev/null
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html
@@ -0,0 +1,76 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html lang="en">
8 <head>
9
10 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
11
12 <link rel="stylesheet" type="text/css" href="css/colorpanelbase.css">
13 <script type="text/montage-serialization">
14 {
15 "owner": {
16 "module": "js/panels/Color/ColorPanelBase.reel",
17 "name": "ColorPanelBase",
18 "properties": {
19 "element": {"#": "cp_expanded"}
20 }
21 }
22
23 }
24 </script>
25
26 </head>
27
28 <body>
29
30 <div id="cp_expanded" class="cp_expanded">
31 <div class="cp_history">
32 <button class="cp_color_current">Current Color</button>
33 <button class="cp_color_previous">Previous Color</button>
34 </div>
35 <div class="cp_modes">
36 <button class="cp_rgb_mode">RGB</button>
37 <hr />
38 <button class="cp_hsl_mode">HSL</button>
39 </div>
40 <hr />
41 <div class="cp_inputs">
42 <div class="cp_input_button"><button class="cpe_stroke">Stroke</button></div>
43 <button class="cpe_stroke_icon"></button>
44 <div class="cp_input_button"><button class="cpe_fill">Fill</button></div>
45 <button class="cpe_fill_icon"></button>
46 </div>
47 <div class="cp_options">
48 <button class="cp_reset">Default Colors</button>
49 <button class="cp_nocolor">No Color</button>
50 <button class="cp_swap">Swap Colors</button>
51 </div>
52 <div class="cp_labels">
53 <div class="sh_label1">R</div>
54 <div class="sh_label2">G</div>
55 <div class="sh_label3">B</div>
56 <div class="sh_label4">A</div>
57 </div>
58 <div class="cp_sliders">
59 <div class="cp_slider1"></div>
60 <div class="cp_slider2"></div>
61 <div class="cp_slider3"></div>
62 <div class="cp_slider4"></div>
63 </div>
64 <div class="cp_hottext">
65 <input class="cp_hottext1"/>
66 <input class="cp_hottext2"/>
67 <input class="cp_hottext3"/>
68 <input class="cp_hottext4"/>
69 </div>
70 <div class="cp_hex">#<input class="cp_hottext5" maxlength="6" /></div>
71 <div class="cp_spectrum"></div>
72 </div>
73
74 </body>
75
76</html> \ No newline at end of file
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
new file mode 100755
index 00000000..af62dd07
--- /dev/null
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -0,0 +1,1654 @@
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 Popup = require("js/components/popup.reel").Popup,
12 Slider = require("js/components/slider.reel").Slider,
13 HotText = require("js/components/hottext.reel").HotText,
14 ColorBar = require("js/components/colorbar.reel").ColorBar;
15////////////////////////////////////////////////////////////////////////
16//Exporting as ColorPanelBase
17exports.ColorPanelBase = Montage.create(Component, {
18 ////////////////////////////////////////////////////////////////////
19 //
20 hasTemplate: {
21 value: true
22 },
23 ////////////////////////////////////////////////////////////////////
24 //Storing ColorPanel sliders mode
25 _panelMode: {
26 enumerable: false,
27 value: 'rgb'
28 },
29 ////////////////////////////////////////////////////////////////////
30 //Storing ColorPanel sliders mode
31 panelMode: {
32 enumerable: true,
33 get: function() {
34 return this._panelMode;
35 },
36 set: function(value) {
37 if (value !== this._panelMode) {
38 this._panelMode = value;
39 }
40 }
41 },
42 ////////////////////////////////////////////////////////////////////
43 //
44 _colorBar: {
45 enumerable: false,
46 value: null
47 },
48 ////////////////////////////////////////////////////////////////////
49 //Storing color manager
50 _colorManager: {
51 enumerable: false,
52 value: null
53 },
54 ////////////////////////////////////////////////////////////////////
55 //
56 colorManager: {
57 enumerable: true,
58 get: function() {
59 return this._colorManager;
60 },
61 set: function(value) {
62 if (value !== this._colorManager) {
63 this._colorManager = value;
64 //Updating input buttons
65 this._colorManager.addEventListener('change', this._update.bind(this));
66 this._colorManager.addEventListener('changing', this._update.bind(this));
67 //Updating history buttons once color is set
68 this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
69 }
70 }
71 },
72 ////////////////////////////////////////////////////////////////////
73 //Color Panel Container
74 _container: {
75 enumerable: false,
76 value: null
77 },
78 ////////////////////////////////////////////////////////////////////
79 //
80 _combo: {
81 enumerable: false,
82 value: [{slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}]
83 },
84 ////////////////////////////////////////////////////////////////////
85 //
86 _buttons: {
87 enumerable: false,
88 value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []}
89 },
90 ////////////////////////////////////////////////////////////////////
91 //
92 historyCache: {
93 enumerable: false,
94 value: {current: null, previous: null}
95 },
96 ////////////////////////////////////////////////////////////////////
97 //
98 colorChipProps: {
99 enumerable: true,
100 value: {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}
101 },
102 ////////////////////////////////////////////////////////////////////
103 //
104 currentChip: {
105 enumerable: true,
106 value: null
107 },
108 ////////////////////////////////////////////////////////////////////
109 //
110 previousInput: {
111 enumerable: true,
112 value: null
113 },
114 ////////////////////////////////////////////////////////////////////
115 //Setting up elements/components
116 prepareForDraw: {
117 enumerable: false,
118 value: function() {
119 //TODO: Remove temporary hack, color history should be initilized
120 this.addEventListener('firstDraw', this, false);
121 this.application.ninja.colorController.colorView = this;
122 this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}];
123 this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}];