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.html17
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.js76
2 files changed, 35 insertions, 58 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.html b/js/components/gradientpicker.reel/gradientpicker.html
index b0e23653..4a1eaaf3 100755
--- a/js/components/gradientpicker.reel/gradientpicker.html
+++ b/js/components/gradientpicker.reel/gradientpicker.html
@@ -18,7 +18,12 @@
18 "owner": { 18 "owner": {
19 "prototype": "js/components/gradientpicker.reel[GradientPicker]", 19 "prototype": "js/components/gradientpicker.reel[GradientPicker]",
20 "properties": { 20 "properties": {
21 "element": {"#": "gradientpicker"} 21 "element": {"#": "gradientpicker"},
22 "radioLinear": {"#": "radio_linear"},
23 "radioRadial": {"#": "radio_radial"},
24 "trackCover": {"#": "cover"},
25 "trackMain": {"#": "track"},
26 "trackChips": {"#": "chips"}
22 27
23 } 28 }
24 } 29 }
@@ -32,14 +37,14 @@
32 <div data-montage-id="gradientpicker" class="gradientpicker"> 37 <div data-montage-id="gradientpicker" class="gradientpicker">
33 38
34 <div class="type"> 39 <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> 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"/><label for="cp_gp_linear">Linear Gradient</label>
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> 41 <input data-montage-id="radio_radial" type="radio" class="cp_gp_radial radio" name="gradient" value="radial" id="cp_gp_radial"/><label for="cp_gp_radial">Radial Gradient</label>
37 </div> 42 </div>
38 43
39 <div class="cp_gp_slider"> 44 <div class="cp_gp_slider">
40 <div class="track_container"><div class="track"></div></div> 45 <div class="track_container"><div data-montage-id="track" class="track"></div></div>
41 <div class="cover"></div> 46 <div data-montage-id="cover" class="cover"></div>
42 <div class="chips"></div> 47 <div data-montage-id="chips" class="chips"></div>
43 </div> 48 </div>
44 49
45 </div> 50 </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 this.element.getElementsByClassName('cp_gp_radial')[0].checked = 'true'; 90 this.radioRadial.checked = 'true';
106 } 91 }
107 // 92 //
108 if (!this.value) { 93 if (!this.value) {
109 this.addDefaultStops(); 94 this.addDefaultStops();
110 } else { 95 } else {
111 //Temp holder
112 var stops = this.value;
113 //Adding stops from preset value 96 //Adding stops from preset value
114 for (var i=0; stops[i]; i++) { 97 for (var i=0, stops = this.value; stops[i]; i++) {
115 this.addStop({color: {mode: stops[i].mode, value: stops[i].value}, percent:stops[i].position}, true); 98 this.addStop({color: {mode: stops[i].mode, value: stops[i].value}, percent:stops[i].position}, true);
116 } 99 }
117 } 100 }
@@ -120,10 +103,9 @@ exports.GradientPicker = Montage.create(Component, {
120 //////////////////////////////////////////////////////////////////// 103 ////////////////////////////////////////////////////////////////////
121 //