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.js590
-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, 1141 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..05bcb447
--- /dev/null
+++ b/js/panels/color/colorchippopup.reel/colorchippopup.js
@@ -0,0 +1,590 @@
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 Button = require("js/components/button.reel").Button,
13 HotText = require("js/components/hottext.reel").HotText,
14 ColorWheel = require("js/components/colorwheel.reel").ColorWheel,
15 GradientPicker = require("js/components/gradientpicker.reel").GradientPicker;
16////////////////////////////////////////////////////////////////////////
17//Exporting as ColorPanelPopup
18exports.ColorChipPopup = Montage.create(Component, {
19 ////////////////////////////////////////////////////////////////////
20 //
21 hasTemplate: {
22 value: true
23 },
24 ////////////////////////////////////////////////////////////////////
25 //Storing color manager
26 _colorManager: {
27 enumerable: false,
28 value: false
29 },
30 ////////////////////////////////////////////////////////////////////
31 //Color manager
32 colorManager: {
33 enumerable: true,
34 get: function() {
35 return this._colorManager;
36 },
37 set: function(value) {
38 if (value !== this._colorManager) {
39 this._colorManager = value;
40 }
41 }
42 },
43 ////////////////////////////////////////////////////////////////////
44 //
45 setNoColor: {
46 enumerable: true,
47 value: function (e) {
48 this.colorManager.applyNoColor();
49 }
50 },
51 ////////////////////////////////////////////////////////////////////
52 //
53 _colorChipWheel: {
54 enumerable: false,
55 value: null
56 },
57 ////////////////////////////////////////////////////////////////////
58 //
59 popupContainers: {
60 enumerable: true,
61 value: {wheel: null, palette: null, gradient: null, image: null}
62 },
63 ////////////////////////////////////////////////////////////////////
64 //
65 popupModes: {
66 enumerable: true,
67 value: {wheel: true, palette: true, gradient: true, image: true, nocolor: true}
68 },
69 ////////////////////////////////////////////////////////////////////
70 //
71 hexInput: {
72 enumerable: true,
73 value: null
74 },
75 ////////////////////////////////////////////////////////////////////
76 //
77 prepareForDraw: {
78 enumerable: false,
79 value: function () {
80 //Storing containers for reference
81 this.popupContainers.wheel = document.getElementById('cc_pu_wheel_container');
82 this.popupContainers.palette = document.getElementById("cc_pu_palette_container");
83 this.popupContainers.gradient = document.getElementById("cc_pu_gradient_container");
84 this.popupContainers.image = document.getElementById("cc_pu_image_container");
85 this.popupContainers.alpha = document.getElementById("cc_pu_alpha");
86 //
87
88 this.colorManager.addEventListener('change', function (e) {
89 //
90 }.bind(this));
91 }
92 },
93 ////////////////////////////////////////////////////////////////////
94 //
95 willDraw: {
96 enumerable: false,
97 value: function() {
98 //
99 this.element.style.opacity = 0;
100 //
101 this.combo = {};
102 this.combo.slider = Slider.create();
103 this.combo.hottext = HotText.create();
104 this.combo.slider.element = document.getElementById('cc_pu_a_slider');
105 this.combo.hottext.element = document.getElementById('cc_pu_a_hottext');
106 //
107 this.cc_hexinput = HotText.create();
108 this.cc_hexinput.element = document.getElementById('cc_pu_hottext_hex');
109 this.cc_hexinput.labelFunction = this._hexLabel.bind(this);
110 this.cc_hexinput.inputFunction = this._hexInput.bind(this);
111 //
112 if (this.application.ninja.colorController.colorView.currentChip && this.application.ninja.colorController.colorView.currentChip.colorValue && this.application.ninja.colorController.colorView.currentChip.colorValue.a) {
113 this.combo.slider.value = Math.round(this.application.ninja.colorController.colorView.currentChip.colorValue.a*100);
114 } else {
115 this.combo.slider.value = 100;
116 }
117 this.application.ninja.colorController.colorModel._alpha = {value: this.combo.slider.value/100, wasSetByCode: true, type: 'change'};
118 //
119 Object.defineBinding(this.combo.hottext, "value", {
120 boundObject: this.combo.slider,
121 boundObjectPropertyPath: "value",
122 oneway: false,
123 boundValueMutator: function(value) {
124 return Math.round(value);
125 }
126 });
127 //
128 this.combo.slider.maxValue = this.combo.hottext.maxValue = 100;
129 this.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView);
130 //
131 this.combo.slider.addEventListener('change', this.alphaChange.bind(this));
132 this.combo.hottext.addEventListener('change', this.alphaChange.bind(this));
133 //
134 this._colorChipWheel = ColorWheel.create();