diff options
author | Kruti Shah | 2012-06-22 10:00:53 -0700 |
---|---|---|
committer | Kruti Shah | 2012-06-22 10:00:53 -0700 |
commit | 4bf8e4cdc179c3b388fc06f26008808aa4b77eb0 (patch) | |
tree | 743ea0d3a3af9cae65d5af531a6dba1951b03b33 /js/components/gradientpicker.reel/gradientpicker.js | |
parent | cb9fbfeba90b5b76d3f3f2b9303129ca4651e5be (diff) | |
parent | 020ad879a627c4234a8732f05e175ad69cedf180 (diff) | |
download | ninja-4bf8e4cdc179c3b388fc06f26008808aa4b77eb0.tar.gz |
Merge branch 'refs/heads/TimelineUberJD' into Timeline-local-kruti
Diffstat (limited to 'js/components/gradientpicker.reel/gradientpicker.js')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 67 |
1 files changed, 20 insertions, 47 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 7fd5d918..6071f3c6 100755 --- a/js/components/gradientpicker.reel/gradientpicker.js +++ b/js/components/gradientpicker.reel/gradientpicker.js | |||
@@ -52,6 +52,11 @@ exports.GradientPicker = Montage.create(Component, { | |||
52 | }, | 52 | }, |
53 | //////////////////////////////////////////////////////////////////// | 53 | //////////////////////////////////////////////////////////////////// |
54 | // | 54 | // |
55 | _trackData: { | ||
56 | value: {width: 0, x: 0, y: 0} | ||
57 | }, | ||
58 | //////////////////////////////////////////////////////////////////// | ||
59 | // | ||
55 | prepareForDraw: { | 60 | prepareForDraw: { |
56 | value: function() { | 61 | value: function() { |
57 | // | 62 | // |
@@ -62,7 +67,7 @@ exports.GradientPicker = Montage.create(Component, { | |||
62 | willDraw: { | 67 | willDraw: { |
63 | value: function() { | 68 | value: function() { |
64 | //Getting component views from layout | 69 | //Getting component views from layout |
65 | this.element._trackWidth = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText); | 70 | this._trackData.width = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText); |
66 | //TODO: Fix events and remove this hack | 71 | //TODO: Fix events and remove this hack |
67 | this.trackCover.addEventListener('mouseover', function () { | 72 | this.trackCover.addEventListener('mouseover', function () { |
68 | if (!this._updating) { | 73 | if (!this._updating) { |
@@ -83,13 +88,13 @@ exports.GradientPicker = Montage.create(Component, { | |||
83 | // | 88 | // |
84 | draw: { | 89 | draw: { |
85 | value: function() { | 90 | value: function() { |
86 | // | 91 | //Checking for mode to assign radio value |
87 | if (this.mode === 'linear') { | 92 | if (this.mode === 'linear') { |
88 | this.radioLinear.checked = 'true'; | 93 | this.radioLinear.checked = 'true'; |
89 | } else if (this.mode === 'radial') { | 94 | } else if (this.mode === 'radial') { |
90 | this.radioRadial.checked = 'true'; | 95 | this.radioRadial.checked = 'true'; |
91 | } | 96 | } |
92 | // | 97 | //Checkign for value to initialize stops |
93 | if (!this.value) { | 98 | if (!this.value) { |
94 | this.addDefaultStops(); | 99 | this.addDefaultStops(); |
95 | } else { | 100 | } else { |
@@ -104,35 +109,17 @@ exports.GradientPicker = Montage.create(Component, { | |||
104 | // | 109 | // |
105 | didDraw: { | 110 | didDraw: { |
106 | value: function() { | 111 | value: function() { |
107 | // | 112 | //Adding event listener for stops |
108 | this.trackMain.addEventListener('click', this, false); | 113 | this.trackMain.addEventListener('click', this, false); |
109 | 114 | //Getting position of track | |
110 | 115 | var point = webkitConvertPointFromNodeToPage(this.trackMain, new WebKitPoint(0, 0)); | |
111 | 116 | //Setting position of track to calculate movement | |
112 | 117 | this._trackData.x = point.x; | |
113 | 118 | this._trackData.y = point.y; | |
114 | //////////////////////////////////////////////////////////// | ||
115 | //////////////////////////////////////////////////////////// | ||
116 | //TODO: Determing a better way to get screen position | ||
117 | var element = this.trackMain; | ||
118 | this.element._trackX = 0, this.element._trackY = 0; | ||
119 | // | ||
120 | while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) { | ||
121 | this.element._trackX += element.offsetLeft - element.scrollLeft; | ||
122 | this.element._trackY += element.offsetTop - element.scrollTop; | ||
123 | element = element.parentNode; | ||
124 | } | ||
125 | //////////////////////////////////////////////////////////// | ||
126 | //////////////////////////////////////////////////////////// | ||
127 | |||
128 | //This is forever changing, not sure why | ||
129 | //console.log(this.element._trackX, this.element._trackY); | ||
130 | |||
131 | |||
132 | } | 119 | } |
133 | }, | 120 | }, |
134 | //////////////////////////////////////////////////////////////////// | 121 | //////////////////////////////////////////////////////////////////// |
135 | // | 122 | //Default stops funtion (reset) |
136 | addDefaultStops: { | 123 | addDefaultStops: { |
137 | value: function() { | 124 | value: function() { |
138 | this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true); | 125 | this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true); |
@@ -223,24 +210,10 @@ exports.GradientPicker = Montage.create(Component, { | |||
223 | } else if (percent>100) { | 210 | } else if (percent>100) { |
224 | percent = 100; | 211 | percent = 100; |
225 | } | 212 | } |
226 | 213 | // | |
227 | 214 | var adj = (parseInt(getComputedStyle(stop).getPropertyCSSValue('width').cssText)*percent/100)/this._trackData.width; | |
228 | |||
229 | |||
230 | //////////////////////////////////////////////////////////// | ||
231 | //////////////////////////////////////////////////////////// | ||
232 | //TODO: toggling visibility because of a browser bug | ||
233 | stop.style.visibility = 'hidden'; //TODO: To be removed | ||
234 | var adj = (parseInt(getComputedStyle(stop).getPropertyCSSValue('width').cssText)*percent/100)/this.element._trackWidth; | ||
235 | stop.style.left = Math.round(percent-Math.round(adj*100))+'%'; | 215 | stop.style.left = Math.round(percent-Math.round(adj*100))+'%'; |
236 | stop.button.stopPosition = percent; | 216 | stop.button.stopPosition = percent; |
237 | stop.style.visibility = 'visible'; //TODO: To be removed | ||
238 | //////////////////////////////////////////////////////////// | ||
239 | //////////////////////////////////////////////////////////// | ||
240 | |||
241 | |||
242 | |||
243 | |||
244 | } catch (e) { | 217 | } catch (e) { |
245 | //TEMP | 218 | //TEMP |
246 | } | 219 | } |
@@ -292,15 +265,15 @@ exports.GradientPicker = Montage.create(Component, { | |||
292 | // | 265 | // |
293 | this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); | 266 | this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); |
294 | // | 267 | // |
295 | if ((e._event.y+this.hack.y) > this.element._trackY+70 || (e._event.y+this.hack.y) < this.element._trackY) { | 268 | if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) { |
296 | this.removeStop(this.currentStop); | 269 | this.removeStop(this.currentStop); |
297 | } | 270 | } |
298 | // | 271 | // |
299 | if (this.currentStop.button.stopPosition !== Math.round(((e._event.x+this.hack.x)-(this.element._trackX-23))/this.element._trackWidth*100)) { | 272 | if (this.currentStop.button.stopPosition !== Math.round((e._event.x-this._trackData.x)/this._trackData.width*100)) { |
300 | this.trackCover.style.display = 'block'; | 273 | this.trackCover.style.display = 'block'; |
301 | } | 274 | } |
302 | // | 275 | // |
303 | this.positionStop(this.currentStop, Math.round(((e._event.x+this.hack.x)-(this.element._trackX-23))/this.element._trackWidth*100)); | 276 | this.positionStop(this.currentStop, Math.round((e._event.x-this._trackData.x)/this._trackData.width*100)); |
304 | } | 277 | } |
305 | }, | 278 | }, |
306 | //////////////////////////////////////////////////////////////////// | 279 | //////////////////////////////////////////////////////////////////// |