aboutsummaryrefslogtreecommitdiff
path: root/js/components/gradientpicker.reel/gradientpicker.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/gradientpicker.reel/gradientpicker.js')
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.js76
1 files changed, 24 insertions, 52 deletions
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 // 104 //
122 didDraw: { 105 didDraw: {
123 enumerable: false,
124 value: function() { 106 value: function() {
125 // 107 //
126 this.element._components.gradientTrack.addEventListener('click', this, false); 108 this.trackMain.addEventListener('click', this, false);
127 109
128 110
129 111
@@ -132,7 +114,7 @@ exports.GradientPicker = Montage.create(Component, {
132 //////////////////////////////////////////////////////////// 114 ////////////////////////////////////////////////////////////
133 //////////////////////////////////////////////////////////// 115 ////////////////////////////////////////////////////////////
134 //TODO: Determing a better way to get screen position 116 //TODO: Determing a better way to get screen position
135 var element = this.element._components.gradientTrack; 117 var element = this.trackMain;
136 this.element._trackX = 0, this.element._trackY = 0; 118 this.element._trackX = 0, this.element._trackY = 0;
137 // 119 //
138 while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) { 120 while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
@@ -152,7 +134,6 @@ exports.GradientPicker = Montage.create(Component, {
152 //////////////////////////////////////////////////////////////////// 134 ////////////////////////////////////////////////////////////////////
153 // 135 //
154 addDefaultStops: { 136 addDefaultStops: {
155 enumerable: false,
156 value: function() { 137 value: function() {
157 this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true); 138 this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true);
158 this.addStop({color: {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}}, percent: 100}, true); 139 this.addStop({color: {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}}, percent: 100}, true);
@@ -161,7 +142,6 @@ exports.GradientPicker = Montage.create(Component, {
161 //////////////////////////////////////////////////////////////////// 142 ////////////////////////////////////////////////////////////////////
162 // 143 //
163 addStop: { 144 addStop: {
164 enumerable: false,
165 value: function(data, silent) { 145 value: function(data, silent) {
166 if (this.application.ninja.colorController.colorPopupManager) { 146 if (this.application.ninja.colorController.colorPopupManager) {
167 //Hiding any open popups (of gradient buttons) 147 //Hiding any open popups (of gradient buttons)
@@ -182,7 +162,7 @@ exports.GradientPicker = Montage.create(Component, {