aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-06-22 23:51:50 -0700
committerJose Antonio Marquez2012-06-22 23:51:50 -0700
commit0e7e32cadeb2002ee0c77c224b23aa00859f2183 (patch)
tree6dec2801cdb405a1924126974d62009d09be70ad /js
parent7396ca7f01ca884564b1dd86a8847d28364f1a96 (diff)
downloadninja-0e7e32cadeb2002ee0c77c224b23aa00859f2183.tar.gz
Added third gradient chip popup
Need to add support for gradient events dispatching from standalone chips. Just need to hook up relays for events besides HSV to bubble up.
Diffstat (limited to 'js')
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.js8
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js27
-rwxr-xr-xjs/panels/color/colorpopup-manager.js232
3 files changed, 186 insertions, 81 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 6b50fae2..9acd24ac 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -43,7 +43,7 @@ exports.GradientPicker = Montage.create(Component, {
43 get: function() {return this._mode;}, 43 get: function() {return this._mode;},
44 set: function(value) { 44 set: function(value) {
45 // 45 //
46 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); 46 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
47 // 47 //
48 this._mode = value; 48 this._mode = value;
49 // 49 //
@@ -132,7 +132,7 @@ exports.GradientPicker = Montage.create(Component, {
132 value: function(data, silent) { 132 value: function(data, silent) {
133 if (this.application.ninja.colorController.colorPopupManager) { 133 if (this.application.ninja.colorController.colorPopupManager) {
134 //Hiding any open popups (of gradient buttons) 134 //Hiding any open popups (of gradient buttons)
135 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); 135 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
136 //Creating stop elements 136 //Creating stop elements
137 var stop = document.createElement('div'), 137 var stop = document.createElement('div'),
138 holder = document.createElement('div'), 138 holder = document.createElement('div'),
@@ -160,7 +160,7 @@ exports.GradientPicker = Montage.create(Component, {
160 //Initialing button with color data 160 //Initialing button with color data
161 button.color(data.color.mode, data.color.value); 161 button.color(data.color.mode, data.color.value);
162 //Button popup data 162 //Button popup data
163 button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true, history: false}; 163 button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, gradientPopup: true, history: false};
164 //Listening for color events from button 164 //Listening for color events from button
165 button.addEventListener('change', this, false); 165 button.addEventListener('change', this, false);
166 //Dispatching event depending on type of mode 166 //Dispatching event depending on type of mode
@@ -263,7 +263,7 @@ exports.GradientPicker = Montage.create(Component, {
263 // 263 //
264 this._updating = true; 264 this._updating = true;
265 // 265 //
266 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); 266 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
267 // 267 //
268 if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) { 268 if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) {
269 this.removeStop(this.currentStop); 269 this.removeStop(this.currentStop);
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 153817c1..179dc02c 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -60,7 +60,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
60 value: function () { 60 value: function () {
61 // 61 //
62 this._components = null; 62 this._components = null;
63 this._components = {wheel: null, combo: null}; 63 this._components = {wheel: null, combo: null, gradient: null};
64 } 64 }
65 }, 65 },
66 //////////////////////////////////////////////////////////////////// 66 ////////////////////////////////////////////////////////////////////
@@ -369,27 +369,30 @@ exports.ColorPanelPopup = Montage.create(Component, {
369 drawGradient: { 369 drawGradient: {
370 value: function (g) { 370 value: function (g) {
371 //TODO: Remove container, insert in reel 371 //TODO: Remove container, insert in reel
372 var container = document.createElement('div'), gradient = GradientPicker.create(); 372 var container = document.createElement('div');
373 //
374 this._components.gradient = GradientPicker.create();
375 //
373 this.gradients.appendChild(container); 376 this.gradients.appendChild(container);
374 //Creating gradient picker from components 377 //Creating gradient picker from components
375 gradient.element = container; 378 this._components.gradient.element = container;
376 gradient.hack = this.hack; // TODO: Remove 379 this._components.gradient.hack = this.hack; // TODO: Remove
377 // 380 //
378 if (g && g.value && g.value.stops) { 381 if (g && g.value && g.value.stops) {
379 if (g.value.gradientMode) { 382 if (g.value.gradientMode) {
380 gradient._mode = g.value.gradientMode; 383 this._components.gradient._mode = g.value.gradientMode;
381 gradient.value = g.value.stops; 384 this._components.gradient.value = g.value.stops;
382 } else { 385 } else {
383 gradient._mode = 'linear'; 386 this._components.gradient._mode = 'linear';
384 gradient.value = g.value.stops; 387 this._components.gradient.value = g.value.stops;
385 } 388 }
386 } else { 389 } else {
387 gradient._mode = this.defaultGradient.gradientMode; 390 this._components.gradient._mode = this.defaultGradient.gradientMode;
388 gradient.value = this.defaultGradient.stops; 391 this._components.gradient.value = this.defaultGradient.stops;
389 } 392 }
390 // 393 //
391 gradient.needsDraw = true; 394 this._components.gradient.needsDraw = true;
392 gradient.addEventListener('change', function (e){ 395 this._components.gradient.addEventListener('change', function (e){
393 // 396 //
394 if (!e._event.wasSetByCode) { 397 if (!e._event.wasSetByCode) {
395 this.colorManager.gradient = {value: e._event.gradient, type: 'change', wasSetByCode: false}; 398 this.colorManager.gradient = {value: e._event.gradient, type: 'change', wasSetByCode: false};
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index bccfcebc..717e6fa2 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -36,18 +36,30 @@ exports.ColorPopupManager = Montage.create(Component, {
36 //Closing popups if outside limits 36 //Closing popups if outside limits
37 document.addEventListener('mousedown', function (e) { 37 document.addEventListener('mousedown', function (e) {
38 // 38 //
39 if (this._popupBase && !this._popupChipBase) { 39 if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) {
40 if(!this.popupHitCheck(this._popupBase, e)) { 40 if(!this.popupHitCheck(this._popupBase, e)) {
41 this.hideColorPopup(); 41 this.hideColorPopup();
42 } 42 }
43 } else if (!this._popupBase && this._popupChipBase) { 43 } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
44 if(!this.popupHitCheck(this._popupChipBase, e)) { 44 if(!this.popupHitCheck(this._popupChipBase, e)) {
45 this.hideColorChipPopup(); 45 this.hideColorChipPopup();
46 } 46 }
47 } else if (this._popupBase && this._popupChipBase) { 47 } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
48 if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { 48 if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) {
49 this.hideColorPopup(); 49 this.hideColorPopup();
50 } 50 }
51 } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
52 if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
53 this.hideColorPopup();
54 }
55 } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
56 if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
57 this.hideColorChipPopup();
58 }
59 } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) {
60 if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
61 this.hideColorPopup();
62 }
51 } 63 }
52 }.bind(this)); 64 }.bind(this));
53 //////////////////////////////////////////////////////////// 65 ////////////////////////////////////////////////////////////
@@ -74,9 +86,11 @@ exports.ColorPopupManager = Montage.create(Component, {
74 //Hides popups since click is outside limits 86 //Hides popups since click is outside limits
75 return false; 87 return false;
76 } else { 88 } else {
89 //Keeps popup open since click inside area
77 return true; 90 return true;
78 } 91 }
79 } else { 92 } else {
93 //Hides popups since element not detected
80 return false; 94 return false;
81 } 95 }
82 } 96 }
@@ -92,6 +106,11 @@ exports.ColorPopupManager = Montage.create(Component, {
92 value: null 106 value: null
93 }, 107 },
94 //////////////////////////////////////////////////////////////////// 108 ////////////////////////////////////////////////////////////////////
109 //
110 _popupGradientChipBase: {
111 value: null
112 },
113 ////////////////////////////////////////////////////////////////////
95 //Storing color manager 114 //Storing color manager
96 _colorManager: { 115 _colorManager: {
97 value: null 116 value: null
@@ -99,33 +118,33 @@ exports.ColorPopupManager = Montage.create(Component, {
99 //////////////////////////////////////////////////////////////////// 118 ////////////////////////////////////////////////////////////////////
100 // 119 //
101 colorManager: { 120 colorManager: {
102 get: function() { 121 get: function() {return this._colorManager;},
103 return this._colorManager; 122 set: function(value) {this._colorManager = value;}
104 },
105 set: function(value) {
106 this._colorManager = value;
107 }
108 }, 123 },
109 //////////////////////////////////////////////////////////////////// 124 ////////////////////////////////////////////////////////////////////
110 // 125 //
111 _colorPopupDrawing: { 126 _colorPopupDrawing: {