// menu.js — adds a "UI Options" entry with toggles for arrows & side swipe
(function(){
window.AppMenu = window.AppMenu || [];
function optionsHTML(cfg){
const chk = (b) => b ? 'checked' : '';
return `
<div style="display:grid; gap:12px;">
<h2 style="margin:0 0 4px 0;">UI Options</h2>
<label style="display:flex;align-items:center;gap:.6rem;">
<input id="opt-arrows" type="checkbox" ${chk(cfg.showArrows)} />
<span>Show arrows (Prev/Next)</span>
</label>
<label style="display:flex;align-items:center;gap:.6rem;">
<input id="opt-swipe" type="checkbox" ${chk(cfg.enableSwipe)} />
<span>Enable side swipe</span>
</label>
<p style="color:#9aa4b2;margin:.25rem 0 0 0;">
Arrows are hidden automatically when there’s only one slide.
</p>
</div>
`;
}
function openOptions(){
const cfg = (window.AppOverlay && AppOverlay.getConfig) ? AppOverlay.getConfig() : { showArrows:true, enableSwipe:true };
const slides = [{
title: 'UI Options',
html: optionsHTML(cfg)
}];
if (!window.AppOverlay) return;
AppOverlay.open(slides, 0);
// Wire up the checkboxes after the overlay renders
setTimeout(() => {
const arrowsEl = document.getElementById('opt-arrows');
const swipeEl = document.getElementById('opt-swipe');
if (arrowsEl) {
arrowsEl.addEventListener('change', () => {
AppOverlay.configure({ showArrows: !!arrowsEl.checked });
});
}
if (swipeEl) {
swipeEl.addEventListener('change', () => {
AppOverlay.configure({ enableSwipe: !!swipeEl.checked });
});
}
}, 0);
}
// Register in 3-dots menu
window.AppMenu.push({
id: 'ui-options',
label: 'UI Options',
action: openOptions
});
})();