diff options
Diffstat (limited to 'js/components/gradientpicker.reel')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.html | 33 | ||||
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 76 |
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 | // |
9 | var Montage = require("montage/core/core").Montage, | 9 | var 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 |
13 | exports.GradientPicker = Montage.create(Component, { | 13 | exports.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')[ |