diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 8 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 27 | ||||
-rwxr-xr-x | js/panels/color/colorpopup-manager.js | 232 |
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: { |
112 | enumerable: true, | ||
113 | value: false | 127 | value: false |
114 | }, | 128 | }, |
115 | //////////////////////////////////////////////////////////////////// | 129 | ///////////////////////////////////////////////////////////////// |