menu: el boton atras de Android cierra la hoja

En el emulador, con la hoja abierta, atras cambiaba de pagina. Un script
minimo (public/js/mobile_menu.js, servido desde /js como permite la CSP)
apunta una entrada en el historial al abrirla y la quita al cerrarla; sin
el script el menu funciona igual. El estudio de navegacion recoge lo que
salio en la prueba.
This commit is contained in:
hacklab 2026-10-19 14:29:07 +02:00
parent 062d49c367
commit 1beb53568c
4 changed files with 40 additions and 6 deletions

View file

@ -0,0 +1,21 @@
// Pestaña Menu del movil: que el boton atras de Android cierre la hoja en vez de
// salir de la pagina. Al abrirla se apunta una entrada en el historial; atras la
// quita y cierra la hoja. Sin este fichero el menu funciona igual (es una casilla
// y CSS), solo que atras cambia de pagina. Ver docs/ESTUDIO_NAVEGACION.md.
(function () {
var box = document.getElementById('oasis-menu-toggle');
if (!box || !window.history || !history.pushState) return;
// al volver atras a una pagina desde la que se abrio otra con el menu, la entrada
// del historial es la del menu abierto: se ensena abierto y el siguiente atras lo cierra
if (history.state && history.state.oasisMenu) box.checked = true;
box.addEventListener('change', function () {
if (box.checked) {
history.pushState({ oasisMenu: true }, '');
} else if (history.state && history.state.oasisMenu) {
history.back();
}
});
window.addEventListener('popstate', function () {
if (box.checked) box.checked = false;
});
})();

View file

@ -7,7 +7,7 @@
// cada integracion. Aqui solo depende de i18n, que se inyecta porque main_views
// lo muta en cada peticion sin reasignarlo.
const { a, button, div, form, h2, h3, img, input, label, nav, p, section, span } = require("../server/node_modules/hyperaxe");
const { a, button, div, form, h2, h3, img, input, label, nav, p, script, section, span } = require("../server/node_modules/hyperaxe");
const { getConfig } = require("../configs/config-manager.js");
const sharedState = require("../configs/shared-state");
const { iconNode, iconKeyOf } = require("./mobile_icons");
@ -133,7 +133,9 @@ module.exports = ({ i18n }) => {
label({ class: 'menu-sheet-close', for: 'oasis-menu-toggle', 'aria-label': i18n.bbMenuClose || 'Close' }, '✕')
),
renderHiveNav()
)
),
// atras cierra la hoja (sin este script el menu funciona igual)
script({ src: '/js/mobile_menu.js', defer: 'defer' })
);
};