aboutsummaryrefslogtreecommitdiff
path: root/js/components/gradientpicker.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/gradientpicker.reel')
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.html33
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.js76
2 files changed, 48 insertions, 61 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.html b/js/components/gradientpicker.reel/gradientpicker.html
index b0e23653..4765a677 100755
--- a/js/components/gradientpicker.reel/gradientpicker.html
+++ b/js/components/gradientpicker.reel/gradientpicker.html
@@ -6,11 +6,10 @@
6 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 6 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
7</copyright> 7</copyright>
8--> 8-->
9<html lang="en"> 9<html>
10
10 <head> 11 <head>
11 12
12 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
13
14 <link rel="stylesheet" type="text/css" href="css/gradientpicker.css"> 13 <link rel="stylesheet" type="text/css" href="css/gradientpicker.css">
15 14
16 <script type="text/montage-serialization"> 15 <script type="text/montage-serialization">
@@ -18,7 +17,12 @@
18 "owner": { 17 "owner": {
19 "prototype": "js/components/gradientpicker.reel[GradientPicker]", 18 "prototype": "js/components/gradientpicker.reel[GradientPicker]",
20 "properties": { 19 "properties": {
21 "element": {"#": "gradientpicker"} 20 "element": {"#": "gradientpicker"},
21 "radioLinear": {"#": "radio_linear"},
22 "radioRadial": {"#": "radio_radial"},
23 "trackCover": {"#": "cover"},
24 "trackMain": {"#": "track"},
25 "trackChips": {"#": "chips"}
22 26
23 } 27 }
24 } 28 }
@@ -32,14 +36,25 @@
32 <div data-montage-id="gradientpicker" class="gradientpicker"> 36 <div data-montage-id="gradientpicker" class="gradientpicker">
33 37
34 <div class="type"> 38 <div class="type">
35 <input type="radio" class="cp_gp_linear radio" name="gradient" value="linear" id="cp_gp_linear" checked="like a boss"/><label for="cp_gp_linear">Linear Gradient</label> 39
36 <input type="radio" class="cp_gp_radial radio" name="gradient" value="radial" id="cp_gp_radial"/><label for="cp_gp_radial">Radial Gradient</label> 40 <input data-montage-id="radio_linear" type="radio" class="cp_gp_linear radio" name="gradient" value="linear" id="cp_gp_linear" checked="like a boss"/>
41 <label for="cp_gp_linear">Linear Gradient</label>
42
43 <input data-montage-id="radio_radial" type="radio" class="cp_gp_radial radio" name="gradient" value="radial" id="cp_gp_radial"/>
44 <label for="cp_gp_radial">Radial Gradient</label>
45
37 </div> 46 </div>
38 47
39 <div class="cp_gp_slider"> 48 <div class="cp_gp_slider">
40 <div class="track_container"><div class="track"></div></div> 49
41 <div class="cover"></div> 50 <div class="track_container">
42 <div class="chips"></div> 51 <div data-montage-id="track" class="track"></div>
52 </div>
53
54 <div data-montage-id="cover" class="cover"></div>
55
56 <div data-montage-id="chips" class="chips"></div>
57
43 </div> 58 </div>
44 59
45 </div> 60 </div>
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index b10f6624..7fd5d918 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -6,54 +6,43 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
6 6
7//////////////////////////////////////////////////////////////////////// 7////////////////////////////////////////////////////////////////////////
8// 8//
9var Montage = require("montage/core/core").Montage, 9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component; 10 Component = require("montage/ui/component").Component;
11//////////////////////////////////////////////////////////////////////// 11////////////////////////////////////////////////////////////////////////
12//Exporting as ColorWheel 12//Exporting as ColorWheel
13exports.GradientPicker = Montage.create(Component, { 13exports.GradientPicker = Montage.create(Component, {
14 //////////////////////////////////////////////////////////////////// 14 ////////////////////////////////////////////////////////////////////
15 // 15 //
16 hasTemplate: { 16 hasTemplate: {
17 enumerable: true,
18 value: true 17 value: true
19 }, 18 },
20 //////////////////////////////////////////////////////////////////// 19 ////////////////////////////////////////////////////////////////////
21 // 20 //
22 _updating: { 21 _updating: {
23 enumerable: false,
24 value: false 22 value: false
25 }, 23 },
26 //////////////////////////////////////////////////////////////////// 24 ////////////////////////////////////////////////////////////////////
27 // 25 //
28 _value: { 26 _value: {
29 enumerable: false,
30 value: null 27 value: null
31 }, 28 },
32 //////////////////////////////////////////////////////////////////// 29 ////////////////////////////////////////////////////////////////////
33 // 30 //
34 value: { 31 value: {
35 enumerable: true, 32 get: function() {return this._value;},
36 get: function() { 33 set: function(value) {this._value = value;}
37 return this._value;
38 },
39 set: function(value) {
40 this._value = value;
41 }
42 }, 34 },
43 //////////////////////////////////////////////////////////////////// 35 ////////////////////////////////////////////////////////////////////
44 // 36 //
45 _mode: { 37 _mode: {
46 enumerable: false,
47 value: 'linear' 38 value: 'linear'
48 }, 39 },
49 //////////////////////////////////////////////////////////////////// 40 ////////////////////////////////////////////////////////////////////
50 // 41 //
51 mode: { 42 mode: {
52 enumerable: true, 43 get: function() {return this._mode;},
53 get: function() {
54 return this._mode;
55 },
56 set: function(value) { 44 set: function(value) {
45 //
57 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); 46 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
58 // 47 //
59 this._mode = value; 48 this._mode = value;
@@ -64,7 +53,6 @@ exports.GradientPicker = Montage.create(Component, {
64 //////////////////////////////////////////////////////////////////// 53 ////////////////////////////////////////////////////////////////////
65 // 54 //
66 prepareForDraw: { 55 prepareForDraw: {
67 enumerable: false,
68 value: function() { 56 value: function() {
69 // 57 //
70 } 58 }
@@ -72,23 +60,21 @@ exports.GradientPicker = Montage.create(Component, {
72 //////////////////////////////////////////////////////////////////// 60 ////////////////////////////////////////////////////////////////////
73 // 61 //
74 willDraw: { 62 willDraw: {
75 enumerable: false,
76 value: function() { 63 value: function() {
77 //Getting component views from layout 64 //Getting component views from layout
78 this.element._components = {trackCover: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('cover')[0], gradientTrack: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('track')[0], stopsContainer: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('chips')[0]}; 65 this.element._trackWidth = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText);
79 this.element._trackWidth = parseInt(getComputedStyle(this.element._components.stopsContainer).getPropertyCSSValue('width').cssText);
80 //TODO: Fix events and remove this hack 66 //TODO: Fix events and remove this hack
81 this.element._components.trackCover.addEventListener('mouseover', function () { 67 this.trackCover.addEventListener('mouseover', function () {
82 if (!this._updating) { 68 if (!this._updating) {
83 this.element._components.trackCover.style.display = 'none'; 69 this.trackCover.style.display = 'none';
84 } 70 }
85 }.bind(this), true); 71 }.bind(this), true);
86 // 72 //
87 this.element.getElementsByClassName('cp_gp_linear')[0].addEventListener('change', function (e){ 73 this.radioLinear.addEventListener('change', function (e){
88 this.mode = 'linear'; 74 this.mode = 'linear';
89 }.bind(this), true); 75 }.bind(this), true);
90 // 76 //
91 this.element.getElementsByClassName('cp_gp_radial')[0].addEventListener('change', function (e){ 77 this.radioRadial.addEventListener('change', function (e){
92 this.mode = 'radial'; 78 this.mode = 'radial';
93 }.bind(this), true); 79 }.bind(this), true);
94 } 80 }
@@ -96,22 +82,19 @@ exports.GradientPicker = Montage.create(Component, {
96 //////////////////////////////////////////////////////////////////// 82 ////////////////////////////////////////////////////////////////////
97 // 83 //
98 draw: { 84 draw: {
99 enumerable: false,
100 value: function() { 85 value: function() {
101 // 86 //
102 if (this.mode === 'linear') { 87 if (this.mode === 'linear') {
103 this.element.getElementsByClassName('cp_gp_linear')[0].checked = 'true'; 88 this.radioLinear.checked = 'true';
104 } else if (this.mode === 'radial') { 89 } else if (this.mode === 'radial') {
105