diff options
Diffstat (limited to 'js/components/gradientpicker.reel/gradientpicker.js')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 76 |
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 | // |
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')[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, { | |||