diff options
Diffstat (limited to 'js/panels/color')
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 27 | ||||
-rwxr-xr-x | js/panels/color/colorpopup-manager.js | 232 |
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 | // |
165 | this._popupBase.popup.removeEventListener('didDraw', this, false); | 183 | this._popupBase.popup.removeEventListener('didDraw', this, false); |
166 | // | 184 | // |
167 |