aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colorpanelpopup.reel
diff options
context:
space:
mode:
authorEric Guzman2012-03-17 00:05:14 -0700
committerEric Guzman2012-03-17 00:05:14 -0700
commita3192d8bc0f8c0698265817c14dcd2284fd89d7d (patch)
tree497ac55f550ed52f9d73b464aafb2aa6cb5f5038 /js/panels/color/colorpanelpopup.reel
parenta6a6f9bcc5ff92f5bb5e9275336dfaec2d8e8f4c (diff)
parent954f5a13e371febcb1c0fb8015c577ee51c23130 (diff)
downloadninja-a3192d8bc0f8c0698265817c14dcd2284fd89d7d.tar.gz
Merge branch 'refs/heads/master' into AddAnimationsLibrary
Conflicts: js/panels/presets/default-transition-presets.js
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.js466
-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, 1022 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..b957d495
--- /dev/null
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -0,0 +1,466 @@
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.ColorPanelPopup = 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 //Storing color panel
45 _colorPanel: {
46 enumerable: false,
47 value: false
48 },
49 ////////////////////////////////////////////////////////////////////
50 //Color panel
51 colorPanel: {
52 enumerable: true,
53 get: function() {
54 return this._colorPanel;
55 },
56 set: function(value) {
57 this._colorPanel = value;
58 }
59 },
60 ////////////////////////////////////////////////////////////////////
61 //
62 setNoColor: {
63 enumerable: true,
64 value: function (e) {
65 this.colorManager.applyNoColor();
66 }
67 },
68 ////////////////////////////////////////////////////////////////////
69 //
70 prepareForDraw: {
71 enumerable: false,
72 value: function () {
73 //
74 this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}};
75 this.element._components = {wheel: null, combo: null};
76 //Storing containers for reference
77 this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0];
78 this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0];
79 this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0];
80 this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0];
81 this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0];
82 }
83 },
84 ////////////////////////////////////////////////////////////////////
85 //
86 willDraw: {
87 enumerable: false,
88 value: function() {
89 //
90 this.element.style.opacity = 0;
91 //
92 this.element._components.combo = {};
93 this.element._components.combo.slider = Slider.create();
94 this.element._components.combo.hottext = HotText.create();
95 this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0];
96 this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0];
97 //
98 Object.defineBinding(this.element._components.combo.hottext, "_value", {
99 boundObject: this.element._components.combo.slider,
100 boundObjectPropertyPath: "value",
101 oneway: false,
102 boundValueMutator: function(value) {
103 return Math.round(value);
104 }
105 });
106 //
107 Object.defineBinding(this.element._components.combo.hottext, "value", {
108 boundObject: this.element._components.combo.slider,
109 boundObjectPropertyPath: "value",
110 oneway: false,
111 boundValueMutator: function(value) {
112 return Math.round(value);
113 }
114 });
115 if (this.application.ninja.colorController.colorView) {
116 Object.defineBinding(this.element._components.combo.slider, "value", {
117 boundObject: this.application.ninja.colorController.colorView._combo[3].slider,
118 boundObjectPropertyPath: "value",
119 oneway: false,
120 boundValueMutator: function(value) {