aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colorpanelpopup.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/colorpanelpopup.reel
parente19376c54eedd1f1c457ba405b2f110be376a559 (diff)
parent4b900ea5cd6bb77eb30cec8c03b9ec9fa662c1e9 (diff)
downloadninja-c253192a08b499ea7be46fa5438d273e51f7ec5a.tar.gz
Merge branch 'refs/heads/ninja-internal' into WebGLFixes
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel')
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.html68
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js465
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/config.rb9
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css239
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss240
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/img/icon_bitmap.pngbin0 -> 3072 bytes
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/img/icon_colorwheel.pngbin0 -> 3420 bytes
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/img/icon_gradient.pngbin0 -> 2815 bytes
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/img/icon_nofill.pngbin0 -> 2951 bytes
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/img/knob.pngbin0 -> 1036 bytes
10 files changed, 1021 insertions, 0 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
new file mode 100755
index 00000000..feebb45c
--- /dev/null
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -0,0 +1,68 @@
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/colorpanelpopup.css">
13
14 <script type="text/montage-serialization">
15 {
16 "owner": {
17 "module": "js/panels/Color/colorpanelpopup.reel",
18 "name": "ColorPanelPopup",
19 "properties": {
20 "element": {"#": "cpp_popup"}
21 }
22 }
23 }
24 </script>
25
26 </head>
27
28 <body>
29
30 <div id="cpp_popup" class="cpp_popup">
31 <div class="cp_pu_options">
32
33 <div class="cp_pu_history">
34
35 <button class="cp_pu_color_previous">Previous Color</button>
36 <button class="cp_pu_color_current">Current Color</button>
37
38 </div>
39
40 <div class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
41
42 <button class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
43 <button class="cp_pu_images" title="Background Image">Images</button>
44 <button class="cp_pu_gradients" title="Gradient">Gradients</button>
45 <button class="cp_pu_palettes" title="Color Palette">Palettes</button>
46 <button class="cp_pu_nocolor" title="No Color">No Color</button>
47
48 </div>
49
50 <div class="cp_pu_content">
51 <div class="cp_pu_wheel_container cp_pu_content_container"></div>
52 <div class="cp_pu_gradient_container cp_pu_content_container"></div>
53 <div class="cp_pu_palette_container cp_pu_content_container"></div>
54 <div class="cp_pu_image_container cp_pu_content_container"></div>
55 </div>
56
57 <div class="cp_pu_alpha">
58 <div class="cp_pu_a_label">Alpha</div>
59 <div class="cp_pu_a_slider"></div>
60 <input class="cp_pu_a_hottext"/>
61 <div class="cp_pu_a_label2">%</div>
62 </div>
63
64 </div>
65
66 </body>
67
68</html> \ No newline at end of file
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
new file mode 100755
index 00000000..dd7e6192
--- /dev/null
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -0,0 +1,465 @@
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.ColorPanelPopup = 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 //Storing color panel
44 _colorPanel: {
45 enumerable: false,
46 value: false
47 },
48 ////////////////////////////////////////////////////////////////////
49 //Color panel
50 colorPanel: {
51 enumerable: true,
52 get: function() {
53 return this._colorPanel;
54 },
55 set: function(value) {
56 this._colorPanel = value;
57 }
58 },
59 ////////////////////////////////////////////////////////////////////
60 //
61 setNoColor: {
62 enumerable: true,
63 value: function (e) {
64 this.colorManager.applyNoColor();
65 }
66 },
67 ////////////////////////////////////////////////////////////////////
68 //
69 prepareForDraw: {
70 enumerable: false,
71 value: function () {
72 //
73 this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}};
74 this.element._components = {wheel: null, combo: null};
75 //Storing containers for reference
76 this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0];
77 this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0];
78 this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0];
79 this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0];
80 this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0];
81 }
82 },
83 ////////////////////////////////////////////////////////////////////
84 //
85 willDraw: {
86 enumerable: false,
87 value: function() {
88 //
89 this.element.style.opacity = 0;
90 //
91 this.element._components.combo = {};
92 this.element._components.combo.slider = Slider.create();
93 this.element._components.combo.hottext = HotText.create();
94 this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0];
95 this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0];
96 //
97 Object.defineBinding(this.element._components.combo.hottext, "_value", {
98 boundObject: this.element._components.combo.slider,
99 boundObjectPropertyPath: "value",
100 oneway: false,
101 boundValueMutator: function(value) {
102 return Math.round(value);
103 }
104 });
105 //
106 Object.defineBinding(this.element._components.combo.hottext, "value", {
107 boundObject: this.element._components.combo.slider,
108 boundObjectPropertyPath: "value",
109 oneway: false,
110 boundValueMutator: function(value) {
111 return Math.round(value);
112 }
113 });
114 if (this.application.ninja.colorController.colorView) {
115 Object.defineBinding(this.element._components.combo.slider, "value", {
116 boundObject: this.application.ninja.colorController.colorView._combo[3].slider,
117 boundObjectPropertyPath: "value",
118 oneway: false,
119 boundValueMutator: function(value) {
120 return Math.round(value);
121 }