SteUP_Dotnet/SteUp.Shared/wwwroot/js/main.js

// Interoperabilità minima con l'host. Il feedback al tocco e gli stati sono
// gestiti in CSS: qui resta solo ciò che il CSS non può fare.

window.goBack = function () {
    history.back();
};

// Tastiera: porta il campo attivo dentro l'area visibile.
// Il layout e' a piena altezza con lo scroll in un contenitore, quindi quando
// l'host riduce la WebView per la tastiera il browser non scrolla da solo sul
// campo col focus.
(function () {
    const SELECTOR = 'input, textarea, [contenteditable="true"]';
    let pending = null;

    function scrollFocusedIntoView() {
        const el = document.activeElement;
        if (!el || !el.matches || !el.matches(SELECTOR)) return;
        el.scrollIntoView({block: 'center', behavior: 'smooth'});
    }

    function schedule() {
        clearTimeout(pending);
        // attende la fine dell'animazione di apertura della tastiera e del relayout
        pending = setTimeout(scrollFocusedIntoView, 300);
    }

    document.addEventListener('focusin', function (event) {
        if (event.target && event.target.matches && event.target.matches(SELECTOR)) {
            schedule();
        }
    });

    // Il resize arriva quando la tastiera si apre/chiude o cambia altezza
    // (es. passaggio a tastiera emoji o suggerimenti).
    if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', schedule);
    } else {
        window.addEventListener('resize', schedule);
    }
})();

// Un doppio tocco ravvicinato su una WebView fa zoomare la pagina: e' il
// gesto del browser, non quello di un'app. Il viewport lo vieta gia', questo
// copre i casi in cui Android lo reintroduce.
(function () {
    let lastTouch = 0;

    document.addEventListener('touchend', function (event) {
        const now = Date.now();
        if (now - lastTouch <= 320) event.preventDefault();
        lastTouch = now;
    }, {passive: false});
})();