115 lines
6.0 KiB
JavaScript
115 lines
6.0 KiB
JavaScript
/* Kundenansicht neu: Navigation der Hülle. Handy: Fahrstuhl-Zeile unten mit vier Wörtern und schwarzem Balken (reiter.js, art 'balken').
|
|
Desktop: Menü links, Wörter ohne Icons. Beide zeigen dieselben Zähler. Dazu der reine Zustand der Bildschirmtastatur
|
|
(Leiste und Streifen verschwinden nur bei Texteingabe) und seine Verdrahtung mit visualViewport, focusin und focusout. */
|
|
|
|
import { h, leeren } from './dom.js'
|
|
import { baueReiter, anzeigeText } from './reiter.js'
|
|
|
|
// Genau einmal in JS; das CSS führt dieselbe Abfrage (basis.css, huelle.css).
|
|
export const HANDY_ABFRAGE = '(max-width: 880px), (pointer: coarse) and (max-height: 500px)'
|
|
|
|
export const WOERTER = [
|
|
{ key: 'website', label: 'Website' },
|
|
{ key: 'funktionen', label: 'Funktionen' },
|
|
{ key: 'chat', label: 'Chat', einheit: 'ungelesen' },
|
|
{ key: 'vertraege', label: 'Verträge', einheit: 'offen', ausrufText: 'Zahlung fehlgeschlagen' },
|
|
]
|
|
|
|
const beschriftung = (wort, anzeige) => {
|
|
const text = anzeigeText(anzeige)
|
|
if (!text) return null
|
|
if (anzeige.ausruf) return `${wort.label}, ${wort.ausrufText ?? 'Hinweis'}`
|
|
return `${wort.label}, ${text}${wort.einheit ? ` ${wort.einheit}` : ''}`
|
|
}
|
|
|
|
/** Fahrstuhl-Zeile in `haupt` und Menü in `menue` bauen. onWahl(bereich) wird bei Klick auf ein Wort gerufen. */
|
|
export function baueNavigation({ haupt, menue, onWahl }) {
|
|
const reiter = baueReiter({ eintraege: WOERTER, aktiv: '', art: 'balken', ariaLabel: 'Bereiche', bei: (key) => onWahl(key) })
|
|
leeren(haupt).append(reiter)
|
|
|
|
const knoepfe = Object.fromEntries(WOERTER.map((w) => [w.key, h('button', { class: 'kn-nav-item', type: 'button', 'data-bereich': w.key, on: { click: () => onWahl(w.key) } }, h('span', { class: 'kn-nav-text' }, w.label))]))
|
|
leeren(menue).append(h('span', { class: 'kn-marke' }, 'WEBklar'), ...WOERTER.map((w) => knoepfe[w.key]))
|
|
|
|
function setzeAktiv(bereich) {
|
|
reiter.setzeAktiv(bereich)
|
|
for (const w of WOERTER) {
|
|
if (w.key === bereich) knoepfe[w.key].setAttribute('aria-current', 'page')
|
|
else knoepfe[w.key].removeAttribute('aria-current')
|
|
}
|
|
}
|
|
|
|
function zeigeZahl(wort, anzeige) {
|
|
reiter.setzeAnzeige(wort.key, anzeige)
|
|
const knopf = knoepfe[wort.key]
|
|
let zahl = knopf.querySelector('.kn-nav-zahl')
|
|
const text = anzeigeText(anzeige)
|
|
if (!text) { zahl?.remove(); knopf.removeAttribute('aria-label'); return }
|
|
if (!zahl) { zahl = h('span', { class: 'kn-nav-zahl' }); knopf.append(zahl) }
|
|
zahl.textContent = text
|
|
zahl.classList.toggle('kn-nav-zahl--heiss', wort.key === 'chat' || anzeige.ausruf === true)
|
|
knopf.setAttribute('aria-label', beschriftung(wort, anzeige))
|
|
}
|
|
|
|
function setzeZaehler({ chat = 0, vertraege = { zahl: 0, ausruf: false } } = {}) {
|
|
zeigeZahl(WOERTER[2], { zahl: chat, ausruf: false })
|
|
zeigeZahl(WOERTER[3], { zahl: vertraege.zahl ?? 0, ausruf: vertraege.ausruf === true })
|
|
}
|
|
|
|
/** Etage 2 offen: das Reel (Elternelement der Hauptzeile) fährt eine Zeile hoch, die Hauptzeile ist gesperrt. */
|
|
function setzeEtage(offen) {
|
|
const reel = haupt.parentElement
|
|
if (offen) { reel?.setAttribute('data-etage', 'offen'); haupt.setAttribute('inert', '') }
|
|
else { reel?.removeAttribute('data-etage'); haupt.removeAttribute('inert') }
|
|
}
|
|
|
|
return { setzeAktiv, setzeZaehler, setzeEtage }
|
|
}
|
|
|
|
const SCHWELLE = 150 // so viel kleiner als die volle Höhe heißt: Tastatur offen (wie app.js:2475)
|
|
const TEXT_FELD = 'textarea, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=date]):not([type=button]):not([type=submit]):not([type=range]):not([type=color])'
|
|
|
|
/** Reiner Zustand { voll, breite, offen, tippt }. Ereignisse: { art:'vv', hoehe, breite, textfeldAktiv?, grob? }, { art:'fokus', textfeld, grob }, { art:'unfokus', textfeldAktiv }. */
|
|
export function tastaturZustand(alt, ereignis) {
|
|
if (ereignis.art === 'fokus') return { ...alt, tippt: Boolean(ereignis.textfeld && ereignis.grob) }
|
|
if (ereignis.art === 'unfokus') return { ...alt, tippt: alt.tippt && Boolean(ereignis.textfeldAktiv) }
|
|
// visualViewport: ein Breitenwechsel (Drehen, Zoom) setzt die volle Höhe zurück, sonst wächst sie mit
|
|
const gedreht = Math.abs(ereignis.breite - alt.breite) > 1
|
|
const voll = gedreht ? ereignis.hoehe : Math.max(alt.voll, ereignis.hoehe)
|
|
const offen = gedreht ? false : ereignis.hoehe < voll - SCHWELLE
|
|
let tippt = alt.tippt
|
|
if (alt.offen && !offen) tippt = false // Tastatur ging zu, auch per Android-Geste ohne Blur
|
|
else if (offen && ereignis.textfeldAktiv && ereignis.grob) tippt = true
|
|
return { voll, breite: gedreht ? ereignis.breite : alt.breite, offen, tippt }
|
|
}
|
|
|
|
/** Leiste und Streifen sind nur bei Texteingabe weg. */
|
|
export const leisteSichtbar = (zustand) => !zustand.tippt
|
|
|
|
/** Verdrahtung mit visualViewport, focusin und focusout; onChange(zustand) nur bei Änderung von offen oder tippt. */
|
|
export function beobachteTastatur({ win = window, doc = document, onChange }) {
|
|
const vv = win.visualViewport
|
|
const grob = () => Boolean(win.matchMedia?.('(pointer: coarse)').matches)
|
|
const istTextfeld = (el) => Boolean(el?.matches?.(TEXT_FELD))
|
|
let z = { voll: vv?.height ?? win.innerHeight, breite: vv?.width ?? win.innerWidth, offen: false, tippt: false }
|
|
const wende = (ereignis) => {
|
|
const alt = z
|
|
z = tastaturZustand(alt, ereignis)
|
|
if (z.offen !== alt.offen || z.tippt !== alt.tippt) onChange(z)
|
|
}
|
|
const beiFokus = (ev) => wende({ art: 'fokus', textfeld: istTextfeld(ev.target), grob: grob() })
|
|
// Nach dem Blur kurz warten: wechselt der Fokus von Feld zu Feld, bleibt die Tastatur
|
|
const beiUnfokus = () => win.setTimeout(() => wende({ art: 'unfokus', textfeldAktiv: istTextfeld(doc.activeElement) }), 80)
|
|
const beiVv = () => wende({ art: 'vv', hoehe: vv.height, breite: vv.width, textfeldAktiv: istTextfeld(doc.activeElement), grob: grob() })
|
|
doc.addEventListener('focusin', beiFokus)
|
|
doc.addEventListener('focusout', beiUnfokus)
|
|
vv?.addEventListener('resize', beiVv)
|
|
return {
|
|
stand: () => z,
|
|
beende() {
|
|
doc.removeEventListener('focusin', beiFokus)
|
|
doc.removeEventListener('focusout', beiUnfokus)
|
|
vv?.removeEventListener('resize', beiVv)
|
|
},
|
|
}
|
|
}
|