@klodd/ds 3.14.3 → 3.14.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/css/00-primitives.css +1 -0
- package/css/components/nav.css +1 -1
- package/js/pwa-register.js +25 -0
- package/package.json +1 -1
package/css/00-primitives.css
CHANGED
package/css/components/nav.css
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
================================================================ */
|
|
31
31
|
.bottom-nav {
|
|
32
32
|
position: fixed;
|
|
33
|
-
bottom: calc(var(--safe-bottom) + var(--space-12));
|
|
33
|
+
bottom: calc(var(--safe-bottom) + var(--space-12) + var(--vv-offset));
|
|
34
34
|
left: var(--space-16);
|
|
35
35
|
right: var(--space-16);
|
|
36
36
|
z-index: var(--z-nav);
|
package/js/pwa-register.js
CHANGED
|
@@ -61,6 +61,24 @@
|
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
/*------------------------------------------------------------
|
|
65
|
+
Visual viewport-sync for .bottom-nav (iOS PWA cold-start)
|
|
66
|
+
iOS Safari beraknar layout viewport (window.innerHeight) fel
|
|
67
|
+
vid cold start - skiljer sig fran visual viewport (faktiskt
|
|
68
|
+
synlig area). Skriver skillnaden till --vv-offset sa
|
|
69
|
+
.bottom-nav kan kompensera via bottom: calc(... + var(--vv-offset)).
|
|
70
|
+
|
|
71
|
+
Vid normal anvandning ar offset 0px. Vid iOS cold-start eller
|
|
72
|
+
on-screen-keyboard ar offset > 0 och pillen hoppar uppat dar
|
|
73
|
+
visual viewport faktiskt slutar.
|
|
74
|
+
------------------------------------------------------------*/
|
|
75
|
+
function syncNavBottom() {
|
|
76
|
+
const vv = root.visualViewport;
|
|
77
|
+
if (!vv) return;
|
|
78
|
+
const offset = root.innerHeight - vv.height - vv.offsetTop;
|
|
79
|
+
doc.documentElement.style.setProperty('--vv-offset', offset + 'px');
|
|
80
|
+
}
|
|
81
|
+
|
|
64
82
|
/*------------------------------------------------------------
|
|
65
83
|
Public API. Anvand KloddPWA.init({...}) FORE script-laddning av
|
|
66
84
|
denna fil (sa _cfg ar satt nar getCfg() koras), eller bara lat
|
|
@@ -71,4 +89,11 @@
|
|
|
71
89
|
root.KloddPWA.config = cfg;
|
|
72
90
|
|
|
73
91
|
registerSW(cfg);
|
|
92
|
+
|
|
93
|
+
if (root.visualViewport) {
|
|
94
|
+
root.visualViewport.addEventListener('resize', syncNavBottom);
|
|
95
|
+
root.visualViewport.addEventListener('scroll', syncNavBottom);
|
|
96
|
+
}
|
|
97
|
+
doc.addEventListener('DOMContentLoaded', syncNavBottom);
|
|
98
|
+
root.addEventListener('load', syncNavBottom);
|
|
74
99
|
})(typeof window !== 'undefined' ? window : globalThis, document);
|