hr-design-system-handlebars 0.47.4 → 0.47.5
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.47.5 (Tue Jun 07 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- some new code in header_alpine.js [#239](https://github.com/mumprod/hr-design-system-handlebars/pull/239) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.47.4 (Thu Jun 02 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//Main Alpine Init Listener
|
|
2
|
-
document.addEventListener('alpine:init', () => {
|
|
2
|
+
document.addEventListener('alpine:init', () => {
|
|
3
3
|
// Alpine.stores for global variables
|
|
4
4
|
Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
|
|
5
5
|
Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
|
|
@@ -7,23 +7,24 @@ document.addEventListener('alpine:init', () => {
|
|
|
7
7
|
Alpine.store('searchFieldOpen', false);
|
|
8
8
|
Alpine.store('serviceNavIsOpen', false);
|
|
9
9
|
Alpine.store('searchID', {
|
|
10
|
-
current: '{{nextRandom}}'
|
|
10
|
+
current: '{{nextRandom}}'
|
|
11
11
|
});
|
|
12
12
|
Alpine.store('serviceID', {
|
|
13
13
|
open: false,
|
|
14
|
-
current: '0'
|
|
14
|
+
current: '0'
|
|
15
15
|
});
|
|
16
16
|
Alpine.store('navIsVisible', true);
|
|
17
|
+
Alpine.store('subNavIsVisible', false);
|
|
17
18
|
|
|
18
19
|
// context for the main header element
|
|
19
20
|
Alpine.data('mainNavigationHandler', () =>({
|
|
20
|
-
|
|
21
|
+
|
|
21
22
|
debounce (callback, wait) {
|
|
22
23
|
let timeoutId = null;
|
|
23
24
|
return (...args) => {
|
|
24
25
|
window.clearTimeout(timeoutId);
|
|
25
26
|
timeoutId = window.setTimeout(() => {
|
|
26
|
-
|
|
27
|
+
callback.apply(null, args);
|
|
27
28
|
}, wait);
|
|
28
29
|
};
|
|
29
30
|
|
|
@@ -33,14 +34,15 @@ document.addEventListener('alpine:init', () => {
|
|
|
33
34
|
let height = top.innerHeight
|
|
34
35
|
|
|
35
36
|
window.addEventListener('scroll', this.debounce( () => {
|
|
36
|
-
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
37
|
+
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
37
38
|
winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
|
|
38
39
|
//let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
|
|
39
40
|
this.percent = Math.round((winScroll / height) * 100)
|
|
40
41
|
lastScrollTop = winScroll
|
|
41
|
-
//console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
|
|
42
|
+
//console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
|
|
42
43
|
this.$store.navIsVisible = !this.isNavHidden()
|
|
43
|
-
|
|
44
|
+
this.$store.subNavIsVisible = !this.isSubNavHidden()
|
|
45
|
+
//console.log(this.$store.navIsVisible);
|
|
44
46
|
},50))
|
|
45
47
|
},
|
|
46
48
|
percent: 0,
|
|
@@ -52,22 +54,33 @@ document.addEventListener('alpine:init', () => {
|
|
|
52
54
|
return this.shouldServiceNavBeHidden()
|
|
53
55
|
}
|
|
54
56
|
},
|
|
57
|
+
isSubNavHidden() {
|
|
58
|
+
if(this.$screen('lg')){
|
|
59
|
+
if (document.querySelector('.isSelectedAndOpen') !== null) {
|
|
60
|
+
return false
|
|
61
|
+
} else {
|
|
62
|
+
return true
|
|
63
|
+
}
|
|
64
|
+
} else {
|
|
65
|
+
return true
|
|
66
|
+
}
|
|
67
|
+
},
|
|
55
68
|
shouldBrandNavBeHidden() {
|
|
56
|
-
return this.percent > 0
|
|
69
|
+
return this.percent > 0
|
|
57
70
|
},
|
|
58
71
|
shouldSectionNavBeHidden() {
|
|
59
72
|
return this.percent > 50 && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
|
|
60
73
|
},
|
|
61
74
|
shouldServiceNavBeHidden() {
|
|
62
|
-
return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
|
|
75
|
+
return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
|
|
63
76
|
},
|
|
64
77
|
shouldServiceIconsBeHidden() {
|
|
65
|
-
return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
|
|
78
|
+
return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
|
|
66
79
|
},
|
|
67
80
|
shouldFlyoutBeHidden() {
|
|
68
81
|
return (this.percent > 50 && this.scrollingDown && this.$screen('lg') )
|
|
69
82
|
},
|
|
70
|
-
resetNav() {
|
|
83
|
+
resetNav() {
|
|
71
84
|
if(window.innerWidth > 1023) {
|
|
72
85
|
this.$refs.sectionnavigation.setAttribute("style","")
|
|
73
86
|
} else {
|
|
@@ -85,8 +98,8 @@ document.addEventListener('alpine:init', () => {
|
|
|
85
98
|
this.$store.clientWidth = nowClientWidth
|
|
86
99
|
}
|
|
87
100
|
else{
|
|
88
|
-
|
|
89
|
-
let timeout
|
|
101
|
+
// timeout is used to dispatch events after the resize is done
|
|
102
|
+
let timeout
|
|
90
103
|
clearTimeout(timeout)
|
|
91
104
|
timeout = setTimeout(() => {
|
|
92
105
|
this.$refs.sectionnavigation.classList.remove('hidden')
|
|
@@ -100,29 +113,29 @@ document.addEventListener('alpine:init', () => {
|
|
|
100
113
|
nextNowClientHeight = nowClientHeight
|
|
101
114
|
this.$store.clientWidth = nowClientWidth
|
|
102
115
|
}
|
|
103
|
-
},
|
|
116
|
+
},
|
|
104
117
|
toggleSectionNav() {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
console.log('toggleSectionNav, Event: ' + this.$event.detail )
|
|
108
|
-
if(this.$event.detail === false) {
|
|
109
|
-
if (window.innerWidth < 1024) {
|
|
118
|
+
//false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0 /// desktop? just clear maxHeight attribute )
|
|
119
|
+
//true = sectionNav öffnet (maxheight = scrollheight)
|
|
120
|
+
console.log('toggleSectionNav, Event: ' + this.$event.detail )
|
|
121
|
+
if(this.$event.detail === false) {
|
|
122
|
+
if (window.innerWidth < 1024) {
|
|
110
123
|
this.$refs.sectionnavigation.style.maxHeight='0px'
|
|
111
|
-
} else {
|
|
124
|
+
} else {
|
|
112
125
|
this.$refs.sectionnavigation.style.maxHeight = ''
|
|
113
126
|
}
|
|
114
127
|
} else {
|
|
115
128
|
let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
|
|
116
129
|
let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
|
|
117
|
-
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
118
|
-
|
|
130
|
+
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
131
|
+
|
|
119
132
|
if(navheight > winheightcorr){
|
|
120
133
|
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
121
134
|
this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
|
|
122
|
-
|
|
135
|
+
|
|
123
136
|
} else {
|
|
124
137
|
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
125
|
-
this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
|
|
138
|
+
this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
|
|
126
139
|
}
|
|
127
140
|
}
|
|
128
141
|
},
|
|
@@ -142,39 +155,39 @@ document.addEventListener('alpine:init', () => {
|
|
|
142
155
|
}
|
|
143
156
|
if(this.$screen('lg') && mode == true){
|
|
144
157
|
this.enableScrolling()
|
|
145
|
-
}
|
|
146
|
-
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
147
160
|
|
|
148
161
|
}))
|
|
149
162
|
|
|
150
163
|
// context for the overlay
|
|
151
164
|
Alpine.data('overlayHandler', () => ({
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
165
|
+
shouldOverlayBeShown() {
|
|
166
|
+
return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true ))
|
|
167
|
+
},
|
|
168
|
+
overlayWasClicked() {
|
|
169
|
+
this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
|
|
170
|
+
this.$dispatch('burger-close')
|
|
171
|
+
this.$dispatch('close-servicemenu')
|
|
172
|
+
// this.$dispatch('toggleScrolling', true )
|
|
173
|
+
this.toggleScrolling(true)
|
|
174
|
+
}
|
|
175
|
+
}))
|
|
163
176
|
|
|
164
177
|
// context for all dropdowns
|
|
165
178
|
Alpine.data('dropdown', () => ({
|
|
166
179
|
dropped: false,
|
|
167
180
|
toggle() {
|
|
168
|
-
this.dropped = ! this.dropped;
|
|
181
|
+
this.dropped = ! this.dropped;
|
|
169
182
|
},
|
|
170
183
|
toggleServiceNav(){
|
|
171
184
|
this.dropped = ! this.dropped;
|
|
172
185
|
this.$store.searchFieldOpen = false;
|
|
173
|
-
|
|
174
|
-
this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
|
|
175
|
-
|
|
186
|
+
|
|
187
|
+
this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
|
|
188
|
+
|
|
176
189
|
this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
|
|
177
|
-
|
|
190
|
+
|
|
178
191
|
console.log('currentID: '+ this.$store.serviceID.current)
|
|
179
192
|
console.log('target-id: '+this.$event.target.id)
|
|
180
193
|
console.log('element-id: '+this.$el.id)
|
|
@@ -183,70 +196,71 @@ document.addEventListener('alpine:init', () => {
|
|
|
183
196
|
this.$store.serviceID.current = this.$el.id
|
|
184
197
|
|
|
185
198
|
this.toggleScrolling(!this.$store.serviceNavIsOpen)
|
|
186
|
-
|
|
199
|
+
|
|
187
200
|
let myFlyout = document.querySelector('#flyout-'+this.$el.id)
|
|
188
|
-
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
201
|
+
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
189
202
|
|
|
190
203
|
if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
|
|
191
204
|
window.setTimeout(function(){
|
|
192
205
|
if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
|
|
193
206
|
myFlyout.style.height = 'auto'
|
|
194
|
-
window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
|
|
207
|
+
window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
|
|
195
208
|
myFlyout.style.overflowY = 'scroll'
|
|
196
209
|
} else {
|
|
197
210
|
myFlyout.style.maxHeight = ''
|
|
198
|
-
|
|
199
|
-
|
|
211
|
+
//myFlyout.style.overflowY = 'hidden'
|
|
212
|
+
}
|
|
200
213
|
},150)
|
|
201
214
|
}
|
|
202
215
|
}
|
|
203
216
|
}))
|
|
204
217
|
|
|
205
218
|
// There are several Flyouts sharing the same functionality and context, so put the data in an Alpine.data to make it reusable
|
|
206
|
-
Alpine.data('flyoutHandler', () => ({
|
|
219
|
+
Alpine.data('flyoutHandler', () => ({
|
|
207
220
|
init() {
|
|
208
|
-
//Initial: x-collapse only on mobile/tablet
|
|
221
|
+
//Initial: x-collapse only on mobile/tablet
|
|
209
222
|
if(window.innerWidth < 1024) {
|
|
210
223
|
this.$el.setAttribute("x-collapse","")
|
|
211
|
-
}
|
|
224
|
+
}
|
|
212
225
|
},
|
|
213
226
|
sectionNavFlyoutWatcher() {
|
|
214
227
|
//Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
|
|
215
228
|
this.$watch('dropped', value => {
|
|
216
229
|
let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
|
|
217
230
|
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
218
|
-
if(window.innerWidth < 1024) {
|
|
219
|
-
if(value == true ) {
|
|
220
|
-
|
|
231
|
+
if(window.innerWidth < 1024) {
|
|
232
|
+
if(value == true ) {
|
|
233
|
+
|
|
221
234
|
if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
|
|
222
235
|
this.$refs.sectionnavigation.style.maxHeight = a +'px'
|
|
223
236
|
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
224
237
|
} else {
|
|
225
238
|
this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
|
|
226
239
|
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
227
|
-
}
|
|
240
|
+
}
|
|
228
241
|
} else {
|
|
229
242
|
if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
|
|
230
243
|
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
231
244
|
} else {
|
|
232
|
-
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
245
|
+
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
233
246
|
}
|
|
234
247
|
}
|
|
235
248
|
}
|
|
236
|
-
|
|
249
|
+
|
|
250
|
+
})
|
|
237
251
|
},
|
|
238
252
|
setFlyoutAnimationStyle() {
|
|
239
253
|
//sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
|
|
240
254
|
if(window.innerWidth > 1023) {
|
|
241
255
|
if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
|
|
242
256
|
this.$el.removeAttribute("x-collapse.duration.500ms")
|
|
243
|
-
delete this.$el._x_transition;
|
|
244
|
-
this.$el.style.removeProperty('overflow');
|
|
245
|
-
this.$el.style.removeProperty('height');
|
|
257
|
+
delete this.$el._x_transition;
|
|
258
|
+
this.$el.style.removeProperty('overflow');
|
|
259
|
+
this.$el.style.removeProperty('height');
|
|
246
260
|
if (! this.$el._x_isShown) this.$el.style.display = 'none'
|
|
247
261
|
if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
|
|
248
262
|
}
|
|
249
|
-
|
|
263
|
+
|
|
250
264
|
} else {
|
|
251
265
|
if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
|
|
252
266
|
}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "0.47.
|
|
9
|
+
"version": "0.47.5",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//Main Alpine Init Listener
|
|
2
|
-
document.addEventListener('alpine:init', () => {
|
|
2
|
+
document.addEventListener('alpine:init', () => {
|
|
3
3
|
// Alpine.stores for global variables
|
|
4
4
|
Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
|
|
5
5
|
Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
|
|
@@ -7,23 +7,24 @@ document.addEventListener('alpine:init', () => {
|
|
|
7
7
|
Alpine.store('searchFieldOpen', false);
|
|
8
8
|
Alpine.store('serviceNavIsOpen', false);
|
|
9
9
|
Alpine.store('searchID', {
|
|
10
|
-
current: '{{nextRandom}}'
|
|
10
|
+
current: '{{nextRandom}}'
|
|
11
11
|
});
|
|
12
12
|
Alpine.store('serviceID', {
|
|
13
13
|
open: false,
|
|
14
|
-
current: '0'
|
|
14
|
+
current: '0'
|
|
15
15
|
});
|
|
16
16
|
Alpine.store('navIsVisible', true);
|
|
17
|
+
Alpine.store('subNavIsVisible', false);
|
|
17
18
|
|
|
18
19
|
// context for the main header element
|
|
19
20
|
Alpine.data('mainNavigationHandler', () =>({
|
|
20
|
-
|
|
21
|
+
|
|
21
22
|
debounce (callback, wait) {
|
|
22
23
|
let timeoutId = null;
|
|
23
24
|
return (...args) => {
|
|
24
25
|
window.clearTimeout(timeoutId);
|
|
25
26
|
timeoutId = window.setTimeout(() => {
|
|
26
|
-
|
|
27
|
+
callback.apply(null, args);
|
|
27
28
|
}, wait);
|
|
28
29
|
};
|
|
29
30
|
|
|
@@ -33,14 +34,15 @@ document.addEventListener('alpine:init', () => {
|
|
|
33
34
|
let height = top.innerHeight
|
|
34
35
|
|
|
35
36
|
window.addEventListener('scroll', this.debounce( () => {
|
|
36
|
-
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
37
|
+
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
37
38
|
winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
|
|
38
39
|
//let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
|
|
39
40
|
this.percent = Math.round((winScroll / height) * 100)
|
|
40
41
|
lastScrollTop = winScroll
|
|
41
|
-
//console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
|
|
42
|
+
//console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
|
|
42
43
|
this.$store.navIsVisible = !this.isNavHidden()
|
|
43
|
-
|
|
44
|
+
this.$store.subNavIsVisible = !this.isSubNavHidden()
|
|
45
|
+
//console.log(this.$store.navIsVisible);
|
|
44
46
|
},50))
|
|
45
47
|
},
|
|
46
48
|
percent: 0,
|
|
@@ -52,22 +54,33 @@ document.addEventListener('alpine:init', () => {
|
|
|
52
54
|
return this.shouldServiceNavBeHidden()
|
|
53
55
|
}
|
|
54
56
|
},
|
|
57
|
+
isSubNavHidden() {
|
|
58
|
+
if(this.$screen('lg')){
|
|
59
|
+
if (document.querySelector('.isSelectedAndOpen') !== null) {
|
|
60
|
+
return false
|
|
61
|
+
} else {
|
|
62
|
+
return true
|
|
63
|
+
}
|
|
64
|
+
} else {
|
|
65
|
+
return true
|
|
66
|
+
}
|
|
67
|
+
},
|
|
55
68
|
shouldBrandNavBeHidden() {
|
|
56
|
-
return this.percent > 0
|
|
69
|
+
return this.percent > 0
|
|
57
70
|
},
|
|
58
71
|
shouldSectionNavBeHidden() {
|
|
59
72
|
return this.percent > 50 && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
|
|
60
73
|
},
|
|
61
74
|
shouldServiceNavBeHidden() {
|
|
62
|
-
return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
|
|
75
|
+
return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
|
|
63
76
|
},
|
|
64
77
|
shouldServiceIconsBeHidden() {
|
|
65
|
-
return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
|
|
78
|
+
return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
|
|
66
79
|
},
|
|
67
80
|
shouldFlyoutBeHidden() {
|
|
68
81
|
return (this.percent > 50 && this.scrollingDown && this.$screen('lg') )
|
|
69
82
|
},
|
|
70
|
-
resetNav() {
|
|
83
|
+
resetNav() {
|
|
71
84
|
if(window.innerWidth > 1023) {
|
|
72
85
|
this.$refs.sectionnavigation.setAttribute("style","")
|
|
73
86
|
} else {
|
|
@@ -85,8 +98,8 @@ document.addEventListener('alpine:init', () => {
|
|
|
85
98
|
this.$store.clientWidth = nowClientWidth
|
|
86
99
|
}
|
|
87
100
|
else{
|
|
88
|
-
|
|
89
|
-
let timeout
|
|
101
|
+
// timeout is used to dispatch events after the resize is done
|
|
102
|
+
let timeout
|
|
90
103
|
clearTimeout(timeout)
|
|
91
104
|
timeout = setTimeout(() => {
|
|
92
105
|
this.$refs.sectionnavigation.classList.remove('hidden')
|
|
@@ -100,29 +113,29 @@ document.addEventListener('alpine:init', () => {
|
|
|
100
113
|
nextNowClientHeight = nowClientHeight
|
|
101
114
|
this.$store.clientWidth = nowClientWidth
|
|
102
115
|
}
|
|
103
|
-
},
|
|
116
|
+
},
|
|
104
117
|
toggleSectionNav() {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
console.log('toggleSectionNav, Event: ' + this.$event.detail )
|
|
108
|
-
if(this.$event.detail === false) {
|
|
109
|
-
if (window.innerWidth < 1024) {
|
|
118
|
+
//false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0 /// desktop? just clear maxHeight attribute )
|
|
119
|
+
//true = sectionNav öffnet (maxheight = scrollheight)
|
|
120
|
+
console.log('toggleSectionNav, Event: ' + this.$event.detail )
|
|
121
|
+
if(this.$event.detail === false) {
|
|
122
|
+
if (window.innerWidth < 1024) {
|
|
110
123
|
this.$refs.sectionnavigation.style.maxHeight='0px'
|
|
111
|
-
} else {
|
|
124
|
+
} else {
|
|
112
125
|
this.$refs.sectionnavigation.style.maxHeight = ''
|
|
113
126
|
}
|
|
114
127
|
} else {
|
|
115
128
|
let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
|
|
116
129
|
let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
|
|
117
|
-
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
118
|
-
|
|
130
|
+
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
131
|
+
|
|
119
132
|
if(navheight > winheightcorr){
|
|
120
133
|
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
121
134
|
this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
|
|
122
|
-
|
|
135
|
+
|
|
123
136
|
} else {
|
|
124
137
|
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
125
|
-
this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
|
|
138
|
+
this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
|
|
126
139
|
}
|
|
127
140
|
}
|
|
128
141
|
},
|
|
@@ -142,39 +155,39 @@ document.addEventListener('alpine:init', () => {
|
|
|
142
155
|
}
|
|
143
156
|
if(this.$screen('lg') && mode == true){
|
|
144
157
|
this.enableScrolling()
|
|
145
|
-
}
|
|
146
|
-
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
147
160
|
|
|
148
161
|
}))
|
|
149
162
|
|
|
150
163
|
// context for the overlay
|
|
151
164
|
Alpine.data('overlayHandler', () => ({
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
165
|
+
shouldOverlayBeShown() {
|
|
166
|
+
return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true ))
|
|
167
|
+
},
|
|
168
|
+
overlayWasClicked() {
|
|
169
|
+
this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
|
|
170
|
+
this.$dispatch('burger-close')
|
|
171
|
+
this.$dispatch('close-servicemenu')
|
|
172
|
+
// this.$dispatch('toggleScrolling', true )
|
|
173
|
+
this.toggleScrolling(true)
|
|
174
|
+
}
|
|
175
|
+
}))
|
|
163
176
|
|
|
164
177
|
// context for all dropdowns
|
|
165
178
|
Alpine.data('dropdown', () => ({
|
|
166
179
|
dropped: false,
|
|
167
180
|
toggle() {
|
|
168
|
-
this.dropped = ! this.dropped;
|
|
181
|
+
this.dropped = ! this.dropped;
|
|
169
182
|
},
|
|
170
183
|
toggleServiceNav(){
|
|
171
184
|
this.dropped = ! this.dropped;
|
|
172
185
|
this.$store.searchFieldOpen = false;
|
|
173
|
-
|
|
174
|
-
this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
|
|
175
|
-
|
|
186
|
+
|
|
187
|
+
this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
|
|
188
|
+
|
|
176
189
|
this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
|
|
177
|
-
|
|
190
|
+
|
|
178
191
|
console.log('currentID: '+ this.$store.serviceID.current)
|
|
179
192
|
console.log('target-id: '+this.$event.target.id)
|
|
180
193
|
console.log('element-id: '+this.$el.id)
|
|
@@ -183,70 +196,71 @@ document.addEventListener('alpine:init', () => {
|
|
|
183
196
|
this.$store.serviceID.current = this.$el.id
|
|
184
197
|
|
|
185
198
|
this.toggleScrolling(!this.$store.serviceNavIsOpen)
|
|
186
|
-
|
|
199
|
+
|
|
187
200
|
let myFlyout = document.querySelector('#flyout-'+this.$el.id)
|
|
188
|
-
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
201
|
+
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
189
202
|
|
|
190
203
|
if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
|
|
191
204
|
window.setTimeout(function(){
|
|
192
205
|
if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
|
|
193
206
|
myFlyout.style.height = 'auto'
|
|
194
|
-
window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
|
|
207
|
+
window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
|
|
195
208
|
myFlyout.style.overflowY = 'scroll'
|
|
196
209
|
} else {
|
|
197
210
|
myFlyout.style.maxHeight = ''
|
|
198
|
-
|
|
199
|
-
|
|
211
|
+
//myFlyout.style.overflowY = 'hidden'
|
|
212
|
+
}
|
|
200
213
|
},150)
|
|
201
214
|
}
|
|
202
215
|
}
|
|
203
216
|
}))
|
|
204
217
|
|
|
205
218
|
// There are several Flyouts sharing the same functionality and context, so put the data in an Alpine.data to make it reusable
|
|
206
|
-
Alpine.data('flyoutHandler', () => ({
|
|
219
|
+
Alpine.data('flyoutHandler', () => ({
|
|
207
220
|
init() {
|
|
208
|
-
//Initial: x-collapse only on mobile/tablet
|
|
221
|
+
//Initial: x-collapse only on mobile/tablet
|
|
209
222
|
if(window.innerWidth < 1024) {
|
|
210
223
|
this.$el.setAttribute("x-collapse","")
|
|
211
|
-
}
|
|
224
|
+
}
|
|
212
225
|
},
|
|
213
226
|
sectionNavFlyoutWatcher() {
|
|
214
227
|
//Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
|
|
215
228
|
this.$watch('dropped', value => {
|
|
216
229
|
let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
|
|
217
230
|
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
218
|
-
if(window.innerWidth < 1024) {
|
|
219
|
-
if(value == true ) {
|
|
220
|
-
|
|
231
|
+
if(window.innerWidth < 1024) {
|
|
232
|
+
if(value == true ) {
|
|
233
|
+
|
|
221
234
|
if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
|
|
222
235
|
this.$refs.sectionnavigation.style.maxHeight = a +'px'
|
|
223
236
|
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
224
237
|
} else {
|
|
225
238
|
this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
|
|
226
239
|
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
227
|
-
}
|
|
240
|
+
}
|
|
228
241
|
} else {
|
|
229
242
|
if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
|
|
230
243
|
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
231
244
|
} else {
|
|
232
|
-
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
245
|
+
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
233
246
|
}
|
|
234
247
|
}
|
|
235
248
|
}
|
|
236
|
-
|
|
249
|
+
|
|
250
|
+
})
|
|
237
251
|
},
|
|
238
252
|
setFlyoutAnimationStyle() {
|
|
239
253
|
//sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
|
|
240
254
|
if(window.innerWidth > 1023) {
|
|
241
255
|
if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
|
|
242
256
|
this.$el.removeAttribute("x-collapse.duration.500ms")
|
|
243
|
-
delete this.$el._x_transition;
|
|
244
|
-
this.$el.style.removeProperty('overflow');
|
|
245
|
-
this.$el.style.removeProperty('height');
|
|
257
|
+
delete this.$el._x_transition;
|
|
258
|
+
this.$el.style.removeProperty('overflow');
|
|
259
|
+
this.$el.style.removeProperty('height');
|
|
246
260
|
if (! this.$el._x_isShown) this.$el.style.display = 'none'
|
|
247
261
|
if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
|
|
248
262
|
}
|
|
249
|
-
|
|
263
|
+
|
|
250
264
|
} else {
|
|
251
265
|
if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
|
|
252
266
|
}
|