@brandocms/jupiter 3.54.2 → 3.54.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/modules/Dropdown/index.js +41 -19
package/package.json
CHANGED
|
@@ -25,15 +25,20 @@ const DEFAULT_OPTIONS = {
|
|
|
25
25
|
selectors: {
|
|
26
26
|
trigger: '[data-dropdown-trigger]',
|
|
27
27
|
menu: '[data-dropdown-menu]',
|
|
28
|
-
menuItems: '[data-dropdown-menu] > li'
|
|
28
|
+
menuItems: '[data-dropdown-menu] > li',
|
|
29
29
|
},
|
|
30
30
|
tweens: {
|
|
31
31
|
items: {
|
|
32
32
|
duration: 0.2,
|
|
33
33
|
autoAlpha: 0,
|
|
34
|
-
stagger: 0.03
|
|
35
|
-
}
|
|
36
|
-
}
|
|
34
|
+
stagger: 0.03,
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
onBeforeOpen: async (dropdown) => {},
|
|
39
|
+
onAfterOpen: async (dropdown) => {},
|
|
40
|
+
onBeforeClose: async (dropdown) => {},
|
|
41
|
+
onAfterClose: async (dropdown) => {},
|
|
37
42
|
}
|
|
38
43
|
|
|
39
44
|
export default class Dropdown {
|
|
@@ -46,12 +51,17 @@ export default class Dropdown {
|
|
|
46
51
|
this.timeline = gsap.timeline({ paused: true, reversed: true })
|
|
47
52
|
this.elements.trigger = Dom.find(this.element, this.opts.selectors.trigger)
|
|
48
53
|
if (this.elements.trigger.hasAttribute('data-dropdown-target')) {
|
|
49
|
-
const dropdownTarget = this.elements.trigger.getAttribute(
|
|
54
|
+
const dropdownTarget = this.elements.trigger.getAttribute(
|
|
55
|
+
'data-dropdown-target'
|
|
56
|
+
)
|
|
50
57
|
this.elements.menu = Dom.find(dropdownTarget)
|
|
51
58
|
} else {
|
|
52
59
|
this.elements.menu = Dom.find(this.element, this.opts.selectors.menu)
|
|
53
60
|
}
|
|
54
|
-
this.elements.menuItems = Dom.all(
|
|
61
|
+
this.elements.menuItems = Dom.all(
|
|
62
|
+
this.elements.menu,
|
|
63
|
+
this.opts.selectors.menuItems
|
|
64
|
+
)
|
|
55
65
|
this.initialize()
|
|
56
66
|
this.checkForInitialOpen()
|
|
57
67
|
}
|
|
@@ -64,7 +74,7 @@ export default class Dropdown {
|
|
|
64
74
|
this.elements.menu,
|
|
65
75
|
{
|
|
66
76
|
className: `${this.elements.menu.className} zero-height`,
|
|
67
|
-
duration: 0.1
|
|
77
|
+
duration: 0.1,
|
|
68
78
|
},
|
|
69
79
|
|
|
70
80
|
'open'
|
|
@@ -73,7 +83,7 @@ export default class Dropdown {
|
|
|
73
83
|
this.elements.menu,
|
|
74
84
|
{
|
|
75
85
|
height: 'auto',
|
|
76
|
-
duration: 0.1
|
|
86
|
+
duration: 0.1,
|
|
77
87
|
},
|
|
78
88
|
'open'
|
|
79
89
|
)
|
|
@@ -85,7 +95,11 @@ export default class Dropdown {
|
|
|
85
95
|
const subMenuY = subMenuBound.y
|
|
86
96
|
const subMenuHeight = subMenuBound.height
|
|
87
97
|
|
|
88
|
-
Dom.setCSSVar(
|
|
98
|
+
Dom.setCSSVar(
|
|
99
|
+
'dropdown-menu-height',
|
|
100
|
+
`${subMenuHeight}px`,
|
|
101
|
+
this.elements.menu
|
|
102
|
+
)
|
|
89
103
|
|
|
90
104
|
if (subMenuHeight + subMenuY > windowHeight) {
|
|
91
105
|
this.elements.menu.setAttribute('data-dropdown-placement', 'top')
|
|
@@ -95,7 +109,11 @@ export default class Dropdown {
|
|
|
95
109
|
})
|
|
96
110
|
.to(this.elements.menu, { opacity: 1 })
|
|
97
111
|
if (this.elements.menuItems.length) {
|
|
98
|
-
this.timeline.from(
|
|
112
|
+
this.timeline.from(
|
|
113
|
+
this.elements.menuItems,
|
|
114
|
+
this.opts.tweens.items,
|
|
115
|
+
'open+=.1'
|
|
116
|
+
)
|
|
99
117
|
}
|
|
100
118
|
|
|
101
119
|
if (!this.elements.trigger) {
|
|
@@ -104,18 +122,22 @@ export default class Dropdown {
|
|
|
104
122
|
this.elements.trigger.addEventListener('click', this.onClick.bind(this))
|
|
105
123
|
}
|
|
106
124
|
|
|
107
|
-
onClick(event) {
|
|
125
|
+
async onClick(event) {
|
|
108
126
|
event.preventDefault()
|
|
109
127
|
event.stopPropagation()
|
|
110
128
|
|
|
111
129
|
if (this.open) {
|
|
112
|
-
this.
|
|
130
|
+
await this.opts.onBeforeClose(this)
|
|
131
|
+
await this.closeMenu()
|
|
132
|
+
this.opts.onAfterClose(this)
|
|
113
133
|
} else {
|
|
114
|
-
this.
|
|
134
|
+
await this.opts.onBeforeOpen(this)
|
|
135
|
+
await this.openMenu()
|
|
136
|
+
this.opts.onAfterOpen(this)
|
|
115
137
|
}
|
|
116
138
|
}
|
|
117
139
|
|
|
118
|
-
openMenu() {
|
|
140
|
+
async openMenu() {
|
|
119
141
|
if (!this.opts.multipleActive) {
|
|
120
142
|
if (this.app.currentMenu) {
|
|
121
143
|
this.app.currentMenu.closeMenu()
|
|
@@ -126,21 +148,21 @@ export default class Dropdown {
|
|
|
126
148
|
this.elements.trigger.dataset.dropdownActive = ''
|
|
127
149
|
|
|
128
150
|
if (this.timeline.reversed()) {
|
|
129
|
-
this.timeline.play()
|
|
151
|
+
await this.timeline.play()
|
|
130
152
|
} else {
|
|
131
|
-
this.timeline.reverse()
|
|
153
|
+
await this.timeline.reverse()
|
|
132
154
|
}
|
|
133
155
|
}
|
|
134
156
|
|
|
135
|
-
closeMenu() {
|
|
157
|
+
async closeMenu() {
|
|
136
158
|
this.app.currentMenu = null
|
|
137
159
|
this.open = false
|
|
138
160
|
delete this.elements.trigger.dataset.dropdownActive
|
|
139
161
|
|
|
140
162
|
if (this.timeline.reversed()) {
|
|
141
|
-
this.timeline.play()
|
|
163
|
+
await this.timeline.play()
|
|
142
164
|
} else {
|
|
143
|
-
this.timeline.reverse()
|
|
165
|
+
await this.timeline.reverse()
|
|
144
166
|
}
|
|
145
167
|
}
|
|
146
168
|
|