astro-accelerator 5.10.8 → 5.10.9
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
CHANGED
package/public/css/main.css
CHANGED
|
@@ -429,12 +429,16 @@ a.navigation-icon:focus {
|
|
|
429
429
|
height: var(--icon-width);
|
|
430
430
|
}
|
|
431
431
|
|
|
432
|
+
.site-header .header-icon {
|
|
433
|
+
text-decoration: none;
|
|
434
|
+
}
|
|
435
|
+
|
|
432
436
|
.site-header .header-icon:hover,
|
|
433
437
|
.site-header .header-icon:focus {
|
|
434
438
|
stroke: var(--fore-link-alt);
|
|
435
439
|
}
|
|
436
440
|
|
|
437
|
-
.site-header .header-icon[data-
|
|
441
|
+
.site-header .header-icon[data-navigation-id='site-nav'] {
|
|
438
442
|
position: relative;
|
|
439
443
|
z-index: 100;
|
|
440
444
|
}
|
|
@@ -9,11 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
import { qs, qsa } from './query.js';
|
|
11
11
|
import { removeScroll, resetScroll } from './scrollbar.js';
|
|
12
|
-
import {
|
|
13
|
-
getFocusableElement,
|
|
14
|
-
trapFocusForward,
|
|
15
|
-
trapReverseFocus,
|
|
16
|
-
} from './focus.js';
|
|
12
|
+
import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus.js';
|
|
17
13
|
|
|
18
14
|
/**
|
|
19
15
|
* Provides an overlay with the navigation for mobile users.
|
|
@@ -28,7 +24,7 @@ import {
|
|
|
28
24
|
* @param {string} resizedEventName
|
|
29
25
|
*/
|
|
30
26
|
function addMobileNav(resizedEventName) {
|
|
31
|
-
const icons = qsa('[data-
|
|
27
|
+
const icons = qsa('[data-navigation-id]');
|
|
32
28
|
for (let icon of icons) {
|
|
33
29
|
addMobileNavigation(icon, resizedEventName);
|
|
34
30
|
}
|
|
@@ -48,11 +44,8 @@ function addMobileNav(resizedEventName) {
|
|
|
48
44
|
* @param {string} resizedEventName
|
|
49
45
|
*/
|
|
50
46
|
function addMobileNavigation(icon, resizedEventName) {
|
|
51
|
-
const navigationSelector = icon.
|
|
52
|
-
const iconType =
|
|
53
|
-
icon.firstElementChild && icon.firstElementChild.tagName == 'svg'
|
|
54
|
-
? 'svg'
|
|
55
|
-
: 'element';
|
|
47
|
+
const navigationSelector = icon.getAttribute('data-navigation-id') || '';
|
|
48
|
+
const iconType = icon.firstElementChild && icon.firstElementChild.tagName == 'svg' ? 'svg' : 'element';
|
|
56
49
|
|
|
57
50
|
const originalIcon = icon.innerHTML;
|
|
58
51
|
const overlay = document.createElement('div');
|
|
@@ -98,7 +91,7 @@ function addMobileNavigation(icon, resizedEventName) {
|
|
|
98
91
|
overlay.style.display = 'block';
|
|
99
92
|
menuElement.style.display = 'none';
|
|
100
93
|
|
|
101
|
-
qsa('[id]', overlay).forEach(
|
|
94
|
+
qsa('[id]', overlay).forEach(elem => {
|
|
102
95
|
elem.id = 'overlay__' + elem.id;
|
|
103
96
|
});
|
|
104
97
|
|
|
@@ -119,13 +112,21 @@ function addMobileNavigation(icon, resizedEventName) {
|
|
|
119
112
|
});
|
|
120
113
|
|
|
121
114
|
if (iconType === 'svg') {
|
|
122
|
-
icon.innerHTML =
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
115
|
+
icon.innerHTML = `
|
|
116
|
+
<svg
|
|
117
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
118
|
+
width="32"
|
|
119
|
+
height="32"
|
|
120
|
+
viewBox="0 0 24 24"
|
|
121
|
+
fill="none"
|
|
122
|
+
stroke-width="1"
|
|
123
|
+
stroke-linecap="round"
|
|
124
|
+
stroke-linejoin="round"
|
|
125
|
+
>
|
|
126
|
+
<path d="M18 6l-12 12" />
|
|
127
|
+
<path d="M6 6l12 12" />
|
|
128
|
+
</svg>
|
|
129
|
+
`;
|
|
129
130
|
}
|
|
130
131
|
|
|
131
132
|
document.body.appendChild(overlay);
|
|
@@ -156,14 +157,11 @@ function addMobileNavigation(icon, resizedEventName) {
|
|
|
156
157
|
return false;
|
|
157
158
|
});
|
|
158
159
|
|
|
159
|
-
document.addEventListener(
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
if (e.detail.change.width > 0) {
|
|
163
|
-
closeMobileMenu();
|
|
164
|
-
}
|
|
160
|
+
document.addEventListener(resizedEventName, function (/** @type {any} */ e) {
|
|
161
|
+
if (e.detail.change.width > 0) {
|
|
162
|
+
closeMobileMenu();
|
|
165
163
|
}
|
|
166
|
-
);
|
|
164
|
+
});
|
|
167
165
|
}
|
|
168
166
|
|
|
169
167
|
export { addMobileNav };
|
|
@@ -33,32 +33,30 @@ stats.stop();
|
|
|
33
33
|
<a href={searchUrl} class="header-icon" title={_(Translations.header.toggle_search)}>
|
|
34
34
|
<svg
|
|
35
35
|
xmlns="http://www.w3.org/2000/svg"
|
|
36
|
-
width="
|
|
37
|
-
height="
|
|
38
|
-
viewBox="0 0
|
|
39
|
-
stroke-width="1"
|
|
36
|
+
width="32"
|
|
37
|
+
height="32"
|
|
38
|
+
viewBox="0 0 24 24"
|
|
40
39
|
fill="none"
|
|
40
|
+
stroke-width="1"
|
|
41
41
|
stroke-linecap="round"
|
|
42
42
|
stroke-linejoin="round">
|
|
43
|
-
<path
|
|
44
|
-
|
|
45
|
-
></path>
|
|
43
|
+
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
|
|
44
|
+
<path d="M21 21l-6 -6"></path>
|
|
46
45
|
</svg>
|
|
47
46
|
</a>
|
|
48
|
-
<a href="#site-nav" data-
|
|
47
|
+
<a href="#site-nav" data-navigation-id="site-nav" class="header-icon" title={_(Translations.header.toggle_menu)}>
|
|
49
48
|
<svg
|
|
50
49
|
xmlns="http://www.w3.org/2000/svg"
|
|
51
|
-
width="
|
|
52
|
-
height="
|
|
50
|
+
width="32"
|
|
51
|
+
height="32"
|
|
53
52
|
viewBox="0 0 24 24"
|
|
54
|
-
stroke-width="1.5"
|
|
55
53
|
fill="none"
|
|
54
|
+
stroke-width="1"
|
|
56
55
|
stroke-linecap="round"
|
|
57
56
|
stroke-linejoin="round">
|
|
58
|
-
<path
|
|
59
|
-
<
|
|
60
|
-
<
|
|
61
|
-
<line x1="4" y1="18" x2="20" y2="18"></line>
|
|
57
|
+
<path d="M4 6l16 0"></path>
|
|
58
|
+
<path d="M4 12l16 0"></path>
|
|
59
|
+
<path d="M4 18l16 0"></path>
|
|
62
60
|
</svg>
|
|
63
61
|
</a>
|
|
64
62
|
</header>
|