aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color
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/panels/color
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/panels/color')
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js27
-rwxr-xr-xjs/panels/color/colorpopup-manager.js232
2 files changed, 182 insertions, 77 deletions
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: {
112 enumerable: true,
113 value: false 127 value: false
114 }, 128 },
115 //////////////////////////////////////////////////////////////////// 129 ////////////////////////////////////////////////////////////////////
116 // 130 //
117 _colorChipPopupDrawing: { 131 _colorChipPopupDrawing: {
118 enumerable: true, 132 value: false
133 },
134 ////////////////////////////////////////////////////////////////////
135 //
136 _colorGradientPopupDrawing: {
119 value: false 137 value: false
120 }, 138 },
121 //////////////////////////////////////////////////////////////////// 139 ////////////////////////////////////////////////////////////////////
122 //TODO: Remove and use montage's built in component 140 //TODO: Remove and use montage's built in component
123 showColorPopup: { 141 showColorPopup: {
124 enumerable: true,
125 value: function (x, y, side, align) { 142 value: function (x, y, side, align) {
143 //Check to see if popup is drawing, avoids errors
126 if (this._colorPopupDrawing) { 144 if (this._colorPopupDrawing) {
127 return; 145 return;
128 } 146 }
147 //Check for toggling view
129 if (this._popupBase && this._popupBase.opened) { 148 if (this._popupBase && this._popupBase.opened) {
130 //Toogles if called and opened 149 //Toogles if called and opened
131 this.hideColorPopup(); 150 this.hideColorPopup();
@@ -138,7 +157,7 @@ exports.ColorPopupManager = Montage.create(Component, {
138 this._hasinit = true; 157 this._hasinit = true;
139 } 158 }
140 //////////////////////////////////////////////////// 159 ////////////////////////////////////////////////////
141 //Creating popup from m-js component 160 //Creating popup
142 var popup = document.createElement('div'); 161 var popup = document.createElement('div');
143 document.body.appendChild(popup); 162 document.body.appendChild(popup);
144 // 163 //
@@ -158,13 +177,13 @@ exports.ColorPopupManager = Montage.create(Component, {
158 //////////////////////////////////////////////////////////////////// 177 ////////////////////////////////////////////////////////////////////
159 // 178 //
160 hideColorPopup: { 179 hideColorPopup: {
161 enumerable: true,
162 value: function () { 180 value: function () {
163 if (this._popupBase && this._popupBase.opened) { 181 if (this._popupBase && this._popupBase.opened) {
164 // 182 //