aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colorchippopup.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/color/colorchippopup.reel')
-rwxr-xr-xjs/panels/color/colorchippopup.reel/colorchippopup.html63
-rwxr-xr-xjs/panels/color/colorchippopup.reel/colorchippopup.js589
-rwxr-xr-xjs/panels/color/colorchippopup.reel/config.rb9
-rwxr-xr-xjs/panels/color/colorchippopup.reel/css/colorchippopup.css239
-rwxr-xr-xjs/panels/color/colorchippopup.reel/css/colorchippopup.scss240
-rwxr-xr-xjs/panels/color/colorchippopup.reel/img/icon_bitmap.pngbin0 -> 3072 bytes
-rwxr-xr-xjs/panels/color/colorchippopup.reel/img/icon_colorwheel.pngbin0 -> 3420 bytes
-rwxr-xr-xjs/panels/color/colorchippopup.reel/img/icon_gradient.pngbin0 -> 2815 bytes
-rwxr-xr-xjs/panels/color/colorchippopup.reel/img/icon_nofill.pngbin0 -> 2951 bytes
-rwxr-xr-xjs/panels/color/colorchippopup.reel/img/knob.pngbin0 -> 1036 bytes
10 files changed, 1140 insertions, 0 deletions
diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.html b/js/panels/color/colorchippopup.reel/colorchippopup.html
new file mode 100755
index 00000000..1ae40cc1
--- /dev/null
+++ b/js/panels/color/colorchippopup.reel/colorchippopup.html
@@ -0,0 +1,63 @@
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/colorchippopup.css">
15
16 <script type="text/montage-serialization">
17 {
18 "owner": {
19 "module": "js/panels/Color/colorchippopup.reel",
20 "name": "colorchippopup",
21 "properties": {
22 "element": {"#": "cc_popup"}
23 }
24 }
25 }
26 </script>
27
28 </head>
29
30 <body>
31
32 <div id="cc_popup" class="cc_popup">
33 <div id="cc_pu_options">
34
35 <div id="cc_pu_hex">#<input id="cc_pu_hottext_hex" class="cc_pu_hottext_hex" maxlength="6" /></div>
36
37 <button id="cc_pu_wheel" title="Color Wheel">Color Wheel</button>
38 <button id="cc_pu_images" title="Background Image">Images</button>
39 <button id="cc_pu_gradients" title="Gradient">Gradients</button>
40 <button id="cc_pu_palettes" title="Color Palette">Palettes</button>
41 <button id="cc_pu_nocolor" title="No Color">No Color</button>
42
43 </div>
44
45 <div id="cc_pu_content">
46 <div id="cc_pu_wheel_container" class="cc_pu_wheel_container"></div>
47 <div id="cc_pu_gradient_container" class="cc_pu_gradient_container"></div>
48 <div id="cc_pu_palette_container" class="cc_pu_palette_container"></div>
49 <div id="cc_pu_image_container" class="cc_pu_image_container"></div>
50 </div>
51
52 <div id="cc_pu_alpha">
53 <div id="cc_pu_a_label">Alpha</div>
54 <div id="cc_pu_a_slider" class="cc_pu_a_slider"></div>
55 <input id="cc_pu_a_hottext" class="cc_pu_a_hottext"/>
56 <div id="cc_pu_a_label2">%</div>
57 </div>
58
59 </div>
60
61 </body>
62
63</html> \ No newline at end of file
diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.js b/js/panels/color/colorchippopup.reel/colorchippopup.js
new file mode 100755
index 00000000..414be8b7
--- /dev/null
+++ b/js/panels/color/colorchippopup.reel/colorchippopup.js
@@ -0,0 +1,589 @@
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 Slider = require("js/components/slider.reel").Slider,
12 HotText = require("js/components/hottext.reel").HotText,
13 ColorWheel = require("js/components/colorwheel.reel").ColorWheel,
14 GradientPicker = require("js/components/gradientpicker.reel").GradientPicker;
15////////////////////////////////////////////////////////////////////////
16//Exporting as ColorPanelPopup
17exports.ColorChipPopup = Montage.create(Component, {
18 ////////////////////////////////////////////////////////////////////
19 //
20 hasTemplate: {
21 value: true
22 },
23 ////////////////////////////////////////////////////////////////////
24 //Storing color manager
25 _colorManager: {
26 enumerable: false,
27 value: false
28 },
29 ////////////////////////////////////////////////////////////////////
30 //Color manager
31 colorManager: {
32 enumerable: true,
33 get: function() {
34 return this._colorManager;
35 },
36 set: function(value) {
37 if (value !== this._colorManager) {
38 this._colorManager = value;
39 }
40 }
41 },
42 ////////////////////////////////////////////////////////////////////
43 //
44 setNoColor: {
45 enumerable: true,
46 value: function (e) {
47 this.colorManager.applyNoColor();
48 }
49 },
50 ////////////////////////////////////////////////////////////////////
51 //
52 _colorChipWheel: {
53 enumerable: false,
54 value: null
55 },
56 ////////////////////////////////////////////////////////////////////
57 //
58 popupContainers: {
59 enumerable: true,
60 value: {wheel: null, palette: null, gradient: null, image: null}
61 },
62 ////////////////////////////////////////////////////////////////////
63 //
64 popupModes: {
65 enumerable: true,
66 value: {wheel: true, palette: true, gradient: true, image: true, nocolor: true}
67 },
68 ////////////////////////////////////////////////////////////////////
69 //
70 hexInput: {
71 enumerable: true,
72 value: null
73 },
74 ////////////////////////////////////////////////////////////////////
75 //
76 prepareForDraw: {
77 enumerable: false,
78 value: function () {
79 //Storing containers for reference
80 this.popupContainers.wheel = document.getElementById('cc_pu_wheel_container');
81 this.popupContainers.palette = document.getElementById("cc_pu_palette_container");
82 this.popupContainers.gradient = document.getElementById("cc_pu_gradient_container");
83 this.popupContainers.image = document.getElementById("cc_pu_image_container");
84 this.popupContainers.alpha = document.getElementById("cc_pu_alpha");
85 //
86
87 this.colorManager.addEventListener('change', function (e) {
88 //
89 }.bind(this));
90 }
91 },
92 ////////////////////////////////////////////////////////////////////
93 //
94 willDraw: {
95 enumerable: false,
96 value: function() {
97 //
98 this.element.style.opacity = 0;
99 //
100 this.combo = {};
101 this.combo.slider = Slider.create();
102 this.combo.hottext = HotText.create();
103 this.combo.slider.element = document.getElementById('cc_pu_a_slider');
104 this.combo.hottext.element = document.getElementById('cc_pu_a_hottext');
105 //
106 this.cc_hexinput = HotText.create();
107 this.cc_hexinput.element = document.getElementById('cc_pu_hottext_hex');
108 this.cc_hexinput.labelFunction = this._hexLabel.bind(this);
109 this.cc_hexinput.inputFunction = this._hexInput.bind(this);
110 //
111 if (this.application.ninja.colorController.colorView.currentChip && this.application.ninja.colorController.colorView.currentChip.colorValue && this.application.ninja.colorController.colorView.currentChip.colorValue.a) {
112 this.combo.slider.value = Math.round(this.application.ninja.colorController.colorView.currentChip.colorValue.a*100);
113 } else {
114 this.combo.slider.value = 100;
115 }
116 this.application.ninja.colorController.colorModel._alpha = {value: this.combo.slider.value/100, wasSetByCode: true, type: 'change'};
117 //
118 Object.defineBinding(this.combo.hottext, "value", {
119 boundObject: this.combo.slider,
120 boundObjectPropertyPath: "value",
121 oneway: false,
122 boundValueMutator: function(value) {
123 return Math.round(value);
124 }
125 });
126 //
127 this.combo.slider.maxValue = this.combo.hottext.maxValue = 100;
128 this.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView);
129 //
130 this.combo.slider.addEventListener('change', this.alphaChange.bind(this));
131 this.combo.hottext.addEventListener('change', this.alphaChange.bind(this));
132 //
133 this._colorChipWheel = ColorWheel.create();
134 this._colorChipWheel.element = this.popupContainers.wheel;