diff options
Diffstat (limited to 'js/panels/color/colorpopup-manager.js')
-rwxr-xr-x | js/panels/color/colorpopup-manager.js | 604 |
1 files changed, 417 insertions, 187 deletions
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 4667f2b4..5be652c9 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js | |||
@@ -8,8 +8,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
8 | // | 8 | // |
9 | var Montage = require("montage/core/core").Montage, | 9 | var Montage = require("montage/core/core").Montage, |
10 | Component = require("montage/ui/component").Component, | 10 | Component = require("montage/ui/component").Component, |
11 | ColorChipPopup = require("js/panels/Color/colorchippopup.reel").ColorChipPopup, | 11 | ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup, |
12 | ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup; | 12 | ColorModel = require("js/models/color-model").ColorModel; |
13 | //////////////////////////////////////////////////////////////////////// | 13 | //////////////////////////////////////////////////////////////////////// |
14 | //Exporting as ColorPopupManager | 14 | //Exporting as ColorPopupManager |
15 | exports.ColorPopupManager = Montage.create(Component, { | 15 | exports.ColorPopupManager = Montage.create(Component, { |
@@ -20,138 +20,194 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
20 | }, | 20 | }, |
21 | //////////////////////////////////////////////////////////////////// | 21 | //////////////////////////////////////////////////////////////////// |
22 | // | 22 | // |
23 | _hasInit: { | 23 | _hasCloseEvents: { |
24 | value: false | 24 | value: false |
25 | }, | ||
26 | //////////////////////////////////////////////////////////////////// | ||
27 | // | ||
28 | addCloseEvents: { | ||
29 | value: function () { | ||
30 | // | ||
31 | this._hasCloseEvents = true; | ||
32 | //////////////////////////////////////////////////////////// | ||
33 | //Closing popups on resize | ||
34 | window.addEventListener('resize', this, false); | ||
35 | //Closing popups if outside limits | ||
36 | document.addEventListener('mousedown', this, false); | ||
37 | //////////////////////////////////////////////////////////// | ||
38 | } | ||
25 | }, | 39 | }, |
26 | //////////////////////////////////////////////////////////////////// | 40 | //////////////////////////////////////////////////////////////////// |
27 | // | 41 | // |
28 | init: { | 42 | removeCloseEvents: { |
29 | enumerable: false, | ||
30 | value: function () { | 43 | value: function () { |
44 | // | ||
45 | this._hasCloseEvents = false; | ||
31 | //////////////////////////////////////////////////////////// | 46 | //////////////////////////////////////////////////////////// |
32 | //Closing popups on resize | 47 | //Closing popups on resize |
33 | window.addEventListener('resize', function (e) { | 48 | window.removeEventListener('resize', this, false); |
34 | this.application.ninja.colorController.colorPopupManager.hideColorPopup(); | ||
35 | }.bind(this)); | ||
36 | //Storing limits of popup | ||
37 | var top, bottom, left, right; | ||
38 | //Closing popups if outside limits | 49 | //Closing popups if outside limits |
39 | document.addEventListener('mousedown', function (e) { | 50 | document.removeEventListener('mousedown', this, false); |
40 | //Checking for popup to be opened otherwise nothing happens | ||
41 | if (this._popupPanel.opened && this._popupPanel.popup && this._popupPanel.popup.element && !e._event.srcElement.inputType) { | ||
42 | //Getting horizontal limits | ||
43 | left = parseInt(this._popupPanel.popup.element.style.left) + parseInt(this._popupPanel.popup.element.style.marginLeft); | ||
44 | right = left + parseInt(this._popupPanel.popup.element.offsetWidth); | ||
45 | //Getting vertical limits | ||
46 | top = parseInt(this._popupPanel.popup.element.style.top) + parseInt(this._popupPanel.popup.element.style.marginTop); | ||
47 | bottom = left + parseInt(this._popupPanel.popup.element.offsetHeight); | ||
48 | //Checking click position in relation to limits | ||
49 | if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) { | ||
50 | //Hides popups since click is outside limits | ||
51 | this.application.ninja.colorController.colorPopupManager.hideColorPopup(); | ||
52 | } | ||
53 | } | ||
54 | }.bind(this)); | ||
55 | //////////////////////////////////////////////////////////// | 51 | //////////////////////////////////////////////////////////// |
56 | } | 52 | } |
57 | }, | 53 | }, |
58 | //////////////////////////////////////////////////////////////////// | 54 | //////////////////////////////////////////////////////////////////// |
59 | // | 55 | // |
60 | _popupPanel: { | 56 | handleMousedown: { |
61 | enumerable: false, | 57 | value: function (e) { |
62 | value: {} | 58 | // |
59 | this.closeAllPopups(e); | ||
60 | } | ||
61 | }, | ||
62 | //////////////////////////////////////////////////////////////////// | ||
63 | // | ||
64 | handleResize: { | ||
65 | value: function (e) { | ||
66 | // | ||
67 | this.hideColorPopup(); | ||
68 | } | ||
63 | }, | 69 | }, |
64 | //////////////////////////////////////////////////////////////////// | 70 | //////////////////////////////////////////////////////////////////// |
65 | // | 71 | // |
66 | _popupChip: { | 72 | closeAllPopups: { |
67 | enumerable: false, | 73 | value: function (e) { |
68 | value: {} | 74 | // |
75 | if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) { | ||
76 | if(!this.popupHitCheck(this._popupBase, e)) { | ||
77 | this.hideColorPopup(); | ||
78 | } | ||
79 | } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { | ||
80 | if(!this.popupHitCheck(this._popupChipBase, e)) { | ||
81 | this.hideColorChipPopup(); | ||
82 | } | ||
83 | } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { | ||
84 | if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { | ||
85 | this.hideColorPopup(); | ||
86 | } | ||
87 | } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) { | ||
88 | if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { | ||
89 | this.hideColorPopup(); | ||
90 | } | ||
91 | } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) { | ||
92 | if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { | ||
93 | this.hideColorChipPopup(); | ||
94 | } | ||
95 | } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) { | ||
96 | if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { | ||
97 | this.hideColorPopup(); | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | }, | ||
102 | //////////////////////////////////////////////////////////////////// | ||
103 | // | ||
104 | popupHitCheck: { | ||
105 | value: function (element, e) { | ||
106 | //Prevent any action for button to handle toggling | ||
107 | if (e._event.target.inputType || e._event.target.colorMode) return true; | ||
108 | //Storing limits of popup | ||
109 | var top, bottom, left, right; | ||
110 | //Checking for popup to be opened otherwise nothing happens | ||
111 | if (element && element.opened && element.popup && element.popup.element) { | ||
112 | //Getting horizontal limits | ||
113 | left = parseInt(element.popup.element.style.left) + parseInt(element.popup.element.style.marginLeft); | ||
114 | right = left + parseInt(element.popup.element.offsetWidth); | ||
115 | //Getting vertical limits | ||
116 | top = parseInt(element.popup.element.style.top) + parseInt(element.popup.element.style.marginTop); | ||
117 | bottom = top + parseInt(element.popup.element.offsetHeight); | ||
118 | //Checking click position in relation to limits | ||
119 | if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) { | ||
120 | //Hides popups since click is outside limits | ||
121 | return false; | ||
122 | } else { | ||
123 | //Keeps popup open since click inside area | ||
124 | return true; | ||
125 | } | ||
126 | } else { | ||
127 | //Hides popups since element not detected | ||
128 | return false; | ||
129 | } | ||
130 | } | ||
69 | }, | 131 | }, |
70 | //////////////////////////////////////////////////////////////////// | 132 | //////////////////////////////////////////////////////////////////// |
71 | // | 133 | // |
72 | _popupBase: { | 134 | _popupBase: { |
73 | enumerable: false, | ||
74 | value: null | 135 | value: null |
75 | }, | 136 | }, |
76 | //////////////////////////////////////////////////////////////////// | 137 | //////////////////////////////////////////////////////////////////// |
77 | // | 138 | // |
78 | _popupChipBase: { | 139 | _popupChipBase: { |
79 | enumerable: false, | 140 | value: null |
141 | }, | ||
142 | //////////////////////////////////////////////////////////////////// | ||
143 | // | ||
144 | _popupChipBtn: { | ||
145 | value: null | ||
146 | }, | ||
147 | //////////////////////////////////////////////////////////////////// | ||
148 | // | ||
149 | _popupGradientChipBase: { | ||
150 | value: null | ||
151 | }, | ||
152 | //////////////////////////////////////////////////////////////////// | ||
153 | // | ||
154 | _popupGradientChipBtn: { | ||
80 | value: null | 155 | value: null |
81 | }, | 156 | }, |
82 | //////////////////////////////////////////////////////////////////// | 157 | //////////////////////////////////////////////////////////////////// |
83 | //Storing color manager | 158 | //Storing color manager |
84 | _colorManager: { | 159 | _colorManager: { |
85 | enumerable: false, | ||
86 | value: null | 160 | value: null |
87 | }, | 161 | }, |
88 | //////////////////////////////////////////////////////////////////// | 162 | //////////////////////////////////////////////////////////////////// |
89 | // | 163 | // |
90 | colorManager: { | 164 | colorManager: { |
91 | enumerable: true, | 165 | get: function() {return this._colorManager;}, |
92 | get: function() { | 166 | set: function(value) {this._colorManager = value;} |
93 | return this._colorManager; | ||
94 | }, | ||
95 | set: function(value) { | ||
96 | this._colorManager = value; | ||
97 | } | ||