diff options
author | Jose Antonio Marquez | 2012-06-22 23:51:50 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-06-22 23:51:50 -0700 |
commit | 0e7e32cadeb2002ee0c77c224b23aa00859f2183 (patch) | |
tree | 6dec2801cdb405a1924126974d62009d09be70ad /js/panels/color/colorpopup-manager.js | |
parent | 7396ca7f01ca884564b1dd86a8847d28364f1a96 (diff) | |
download | ninja-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/colorpopup-manager.js')
-rwxr-xr-x | js/panels/color/colorpopup-manager.js | 232 |
1 files changed, 167 insertions, 65 deletions
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 | // |
165 | this._popupBase.popup.removeEventListener('didDraw', this, false); | 183 | this._popupBase.popup.removeEventListener('didDraw', this, false); |
166 | // | 184 | // |
167 | this.hideColorChipPopup(); | 185 | this.hideColorChipPopup(); |
186 | this.hideGradientChipPopup(); | ||
168 | //Making sure to return color manager to either stroke or fill (might be a Hack for now) | 187 | //Making sure to return color manager to either stroke or fill (might be a Hack for now) |
169 | if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { | 188 | if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { |
170 | this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; | 189 | this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; |
@@ -187,7 +206,6 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
187 | //////////////////////////////////////////////////////////////////// | 206 | //////////////////////////////////////////////////////////////////// |
188 | // | 207 | // |
189 | colorChipChange: { | 208 | colorChipChange: { |
190 | enumerable: true, | ||
191 | value: function (e) { | 209 | value: function (e) { |
192 | // | 210 | // |
193 | var ctx, | 211 | var ctx, |
@@ -224,16 +242,58 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
224 | }, | 242 | }, |
225 | //////////////////////////////////////////////////////////////////// | 243 | //////////////////////////////////////////////////////////////////// |
226 | // | 244 | // |
245 | colorGradientChipChange: { | ||
246 | value: function (e) { | ||
247 | // | ||
248 | var ctx, | ||
249 | cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], | ||
250 | rgb = this._popupGradientChipBase.colorManager.rgb, | ||
251 | hsl = this._popupGradientChipBase.colorManager.hsl, | ||
252 | alpha = this._popupGradientChipBase.colorManager.alpha.value; | ||
253 | // | ||
254 | if (cvs) { | ||
255 | ctx = cvs.getContext('2d'); | ||
256 | ctx.clearRect(0, 0, cvs.width, cvs.height); | ||
257 | ctx.beginPath(); | ||
258 | ctx.lineWidth = 2; | ||
259 | ctx.strokeStyle = "#666"; | ||
260 | ctx.moveTo(0, 0); | ||
261 | ctx.lineTo(cvs.width, 0); | ||
262 | ctx.lineTo(cvs.width, cvs.height); | ||
263 | ctx.lineTo(0, cvs.height); | ||
264 | ctx.lineTo(0, 0); | ||
265 | ctx.stroke(); | ||
266 | ctx.beginPath(); | ||
267 | ctx.lineWidth = 2; | ||
268 | ctx.strokeStyle = "#333"; | ||
269 | ctx.moveTo(2, 2); | ||
270 | ctx.lineTo(cvs.width-2, 2); | ||
271 | ctx.lineTo(cvs.width-2, cvs.height-2); | ||
272 | ctx.lineTo(2, cvs.height-2); | ||
273 | ctx.lineTo(2, 1); | ||
274 | ctx.stroke(); | ||
275 | } | ||
276 | // | ||
277 | this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); | ||
278 | } | ||
279 | }, | ||
280 | //////////////////////////////////////////////////////////////////// | ||
281 | // | ||
227 | showColorChipPopup: { |