aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorValerio Virgillito2012-06-20 15:30:50 -0700
committerValerio Virgillito2012-06-20 15:30:50 -0700
commit392a559e90357d48c910a07617261483b2b45476 (patch)
treec207d1290be0e894a57b03098bbb7bbe5f2aee86
parentd21185cecb8a1ddf9c6aeeb6e4d9f8745c90058c (diff)
parentfe569a08853fe986849b6496384d01f3abb65e40 (diff)
downloadninja-392a559e90357d48c910a07617261483b2b45476.tar.gz
Merge pull request #317 from joseeight/Color
Color
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.js67
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 ////////////////////////////////////////////////////////////////////