Sakurai/poke
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update html/map.ejs

Browse Source
This commit is contained in:
ashley 2025-08-17 22:43:48 +02:00
parent f9d5cce9cf
commit e326331cf8
1 changed files with 107 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
html/map.ejs
View File

@ -1,4 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -13,7 +12,10 @@
--vh:100vh;--pad:12px;--radius:14px;--fg:#fff;--bg:rgba(0,0,0,.6);--glass:blur(12px); --vh:100vh;--pad:12px;--radius:14px;--fg:#fff;--bg:rgba(0,0,0,.6);--glass:blur(12px);
--marker-size:20px;--marker-color:#e53935;--marker-ring:rgba(229,57,53,.35);--ring-width:3px; --marker-size:20px;--marker-color:#e53935;--marker-ring:rgba(229,57,53,.35);--ring-width:3px;
--panel:rgba(0,0,0,.85);--accent:#0ea5e9;--chip:#111;--chipb:#222;--tip:#888; --panel:rgba(0,0,0,.85);--accent:#0ea5e9;--chip:#111;--chipb:#222;--tip:#888;
--surface:#0b0b0b;--border:#333 --surface:#0b0b0b;--border:#333;
--sidew:320px; /* resizable desktop sidebar width */
--sidew-min:260px;
--sidew-max:560px;
} }
*{box-sizing:border-box} *{box-sizing:border-box}
html,body{height:100%;margin:0} html,body{height:100%;margin:0}
@ -77,17 +79,27 @@
.settings textarea{width:100%;min-height:120px;border-radius:10px;border:1px solid var(--border);background:#0a0a0a;color:#eee;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .settings textarea{width:100%;min-height:120px;border-radius:10px;border:1px solid var(--border);background:#0a0a0a;color:#eee;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.settings .about{font-size:13px;opacity:.92;line-height:1.5} .settings .about{font-size:13px;opacity:.92;line-height:1.5}
/* Desktop layout — simplified & clean */ /* Desktop layout — resizable, scrollable sidebar */
.desktop .bar{grid-column:2} .desktop .bar{grid-column:2}
.desktop .app{grid-template-columns:320px 1fr;grid-template-rows:auto 1fr} .desktop .app{grid-template-columns:var(--sidew) 1fr;grid-template-rows:auto 1fr}
.desktop .sidebar{position:fixed;left:0;top:0;bottom:0;width:320px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:12px;padding:12px;z-index:9} .desktop .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidew);background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:12px;padding:12px;z-index:9;overflow:auto}
.desktop .sidecard{border:1px solid #222;border-radius:12px;overflow:hidden} .desktop .sidecard{border:1px solid #222;border-radius:12px;overflow:hidden}
.desktop .sidecard header{padding:10px 12px;border-bottom:1px solid #222;font-weight:600;display:flex;justify-content:space-between;align-items:center} .desktop .sidecard header{padding:10px 12px;border-bottom:1px solid #222;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.desktop .sidecard .row{display:flex;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid #111} .desktop .sidecard .row{display:flex;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid #111}
.desktop .sidecard .row:first-of-type{border-top:0} .desktop .sidecard .row:first-of-type{border-top:0}
.desktop .sidecard .hint{font-size:12px;opacity:.75;padding:8px 12px} .desktop .sidecard .hint{font-size:12px;opacity:.75;padding:8px 12px}
.desktop .mapwrap{grid-column:2} .desktop .mapwrap{grid-column:2}
/* Suppress popovers on desktop (sidebar replaces them) */
/* Sidebar resizer */
.desktop .resizer{position:fixed;left:calc(var(--sidew));top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;background:transparent}
.desktop .resizer::after{content:"";position:absolute;right:0;top:40px;bottom:40px;width:2px;background:rgba(255,255,255,.08)}
/* Hide floating buttons on desktop (they exist in the sidebar) */
.desktop .dock,
.desktop #menuBtn,
.desktop #locate{ display:none !important }
/* Suppress mobile popovers on desktop (sidebar replaces them) */
.desktop .menu,.desktop .pins,.desktop .settings{display:none !important} .desktop .menu,.desktop .pins,.desktop .settings{display:none !important}
/* Pro detail rows subtly toned down */ /* Pro detail rows subtly toned down */
@ -292,8 +304,7 @@
const accentColorEl=S("#accentColor"), accentResetEl=S("#accentReset"); const accentColorEl=S("#accentColor"), accentResetEl=S("#accentReset");
const customCSSEl=S("#customCSS"), applyCSSEl=S("#applyCSS"), clearCSSEl=S("#clearCSS"); const customCSSEl=S("#customCSS"), applyCSSEl=S("#applyCSS"), clearCSSEl=S("#clearCSS");
/* Pro mode */ const PREFS_KEY="pokemaps_prefs_v7";
const PREFS_KEY="pokemaps_prefs_v6";
const LS_PINS="pokemaps_pins_v1"; const LS_PINS="pokemaps_pins_v1";
const LS_SEARCH="pokemaps_search_hist_v1"; const LS_SEARCH="pokemaps_search_hist_v1";
@ -302,7 +313,7 @@
const prefs=loadPrefs(); applyPrefs(); const prefs=loadPrefs(); applyPrefs();
const isDesktop=()=> matchMedia("(min-width: 1024px)").matches && matchMedia("(pointer: fine)").matches; const isDesktop=()=> matchMedia("(min-width: 1024px)").matches && matchMedia("(pointer: fine)").matches;
const applyDesktopClass=()=>{ document.body.classList.toggle("desktop", isDesktop()) }; const applyDesktopClass=()=>{ document.body.classList.toggle("desktop", isDesktop()); if(isDesktop()) ensureDesktopSidebar(); else removeDesktopSidebar() };
applyDesktopClass(); addEventListener("resize",applyDesktopClass,{passive:true}); applyDesktopClass(); addEventListener("resize",applyDesktopClass,{passive:true});
const setVH=()=>{const vh=window.innerHeight*0.01;document.documentElement.style.setProperty("--vh",`${vh*100}px`)}; const setVH=()=>{const vh=window.innerHeight*0.01;document.documentElement.style.setProperty("--vh",`${vh*100}px`)};
@ -419,7 +430,7 @@
const highlight=(text,term)=>{ const highlight=(text,term)=>{
term=term.trim(); if(!term) return text; term=term.trim(); if(!term) return text;
const esc=term.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"); const esc=term.replace(/[.*+?^${}()|[\\]\\\\]/g,"\\\\$&");
return text.replace(new RegExp(esc,"ig"),m=>`<mark>${m}</mark>`); return text.replace(new RegExp(esc,"ig"),m=>`<mark>${m}</mark>`);
}; };
@ -429,7 +440,6 @@
const renderSuggest=(items, term="")=>{ const renderSuggest=(items, term="")=>{
if(!sug) return; if(!sug) return;
// keep the sticky head; rebuild the rest
const head = sug.querySelector(".head"); const head = sug.querySelector(".head");
sug.innerHTML=""; sug.innerHTML="";
if(head) sug.appendChild(head); if(head) sug.appendChild(head);
@ -557,15 +567,15 @@
}; };
function button(t,fn){ const b=document.createElement("button"); b.textContent=t; b.className="iconbtn"; b.onclick=fn; return b } function button(t,fn){ const b=document.createElement("button"); b.textContent=t; b.className="iconbtn"; b.onclick=fn; return b }
const nameFromState=()=> q.value?.trim() || new Date().toLocaleString(); const nameFromState=()=> q.value?.trim() || new Date().toLocaleString();
savepin.onclick=()=>{ const pins=loadPins(); pins.unshift({name:nameFromState(), lat:state.lat, lon:state.lon, delta:state.delta, layer:state.layer}); savePins(pins); renderPins(); pinsPane.style.display="block" }; savepin && (savepin.onclick=()=>{ const pins=loadPins(); pins.unshift({name:nameFromState(), lat:state.lat, lon:state.lon, delta:state.delta, layer:state.layer}); savePins(pins); renderPins(); pinsPane.style.display="block" });
showpins.onclick=()=>{ renderPins(); pinsPane.style.display="block" }; showpins && (showpins.onclick=()=>{ renderPins(); pinsPane.style.display="block" });
closepins.onclick=()=>{ pinsPane.style.display="none" }; closepins && (closepins.onclick=()=>{ pinsPane.style.display="none" });
// Panels (mobile/tablet only; desktop has sidebar) // Panels (mobile/tablet only; desktop has sidebar)
menuBtn.onclick=()=>{ if(isDesktop()) return; menu.style.display="block" }; menuBtn.onclick=()=>{ if(isDesktop()) return; menu.style.display="block" };
closeMenu && (closeMenu.onclick=()=>{ menu.style.display="none" }); closeMenu && (closeMenu.onclick=()=>{ menu.style.display="none" });
opensettings.onclick=()=>{ if(isDesktop()) return; settings.style.display="block" }; opensettings && (opensettings.onclick=()=>{ if(isDesktop()) return; settings.style.display="block" });
closesettings.onclick=()=>{ settings.style.display="none" }; closesettings && (closesettings.onclick=()=>{ settings.style.display="none" });
// Prefs -> UI // Prefs -> UI
toggleCoords.checked = !!prefs.showCoords; toggleCoords.checked = !!prefs.showCoords;
@ -624,7 +634,7 @@
addEventListener("keydown",(e)=>{ addEventListener("keydown",(e)=>{
if(e.target.matches("input, textarea")) return; if(e.target.matches("input, textarea")) return;
if(e.key.toLowerCase()==="l"){ e.preventDefault(); locate() } if(e.key.toLowerCase()==="l"){ e.preventDefault(); locate() }
if(e.key.toLowerCase()==="s"){ e.preventDefault(); savepin.click() } if(e.key.toLowerCase()==="s"){ e.preventDefault(); savepin?.click() }
if(e.key.toLowerCase()==="h"){ e.preventDefault(); toggleFollow() } if(e.key.toLowerCase()==="h"){ e.preventDefault(); toggleFollow() }
if(e.key.toLowerCase()==="r"){ e.preventDefault(); reset() } if(e.key.toLowerCase()==="r"){ e.preventDefault(); reset() }
if(e.key.toLowerCase()==="1"){ e.preventDefault(); setLayer("mapnik") } if(e.key.toLowerCase()==="1"){ e.preventDefault(); setLayer("mapnik") }
@ -653,7 +663,7 @@
applyMarkerStyle(prefs.markerStyle||"dot"); applyMarkerStyle(prefs.markerStyle||"dot");
setAccent(prefs.accent||"#0ea5e9"); setAccent(prefs.accent||"#0ea5e9");
applyTheme(prefs.theme||"auto"); applyTheme(prefs.theme||"auto");
// apply pro mode class on body if(prefs.sideW) document.documentElement.style.setProperty("--sidew", clamp(prefs.sideW, getMinSide(), getMaxSide()) + "px");
document.body.classList.toggle("pro-enabled", !!prefs.proMode); document.body.classList.toggle("pro-enabled", !!prefs.proMode);
} }
function applyMarkerStyle(style){ markerEl.classList.toggle("crosshair", style==="crosshair") } function applyMarkerStyle(style){ markerEl.classList.toggle("crosshair", style==="crosshair") }
@ -696,11 +706,22 @@
if(!urlHasLat){ locate() } if(!urlHasLat){ locate() }
if(prefs.autoFollow) startFollow(); if(prefs.autoFollow) startFollow();
// Desktop sidebar builder (clean, with Pro toggle) /* ===== Desktop sidebar: build once, resizable + scrollable ===== */
if(isDesktop()) buildDesktopSidebar(); let sideBuilt=false, sideEl=null, resizerEl=null;
function ensureDesktopSidebar(){
if(sideBuilt) return;
buildDesktopSidebar();
sideBuilt=true;
}
function removeDesktopSidebar(){
if(!sideBuilt) return;
sideEl?.remove(); resizerEl?.remove();
sideEl=null; resizerEl=null; sideBuilt=false;
}
function buildDesktopSidebar(){ function buildDesktopSidebar(){
const side=document.createElement("div"); side.className="sidebar"; sideEl=document.createElement("div"); sideEl.className="sidebar";
side.innerHTML=` sideEl.innerHTML=`
<div class="sidecard"> <div class="sidecard">
<header> <header>
<span>Overview</span> <span>Overview</span>
@ -715,10 +736,10 @@
<option value="transportmap">Transport</option> <option value="transportmap">Transport</option>
<option value="hot">Humanitarian</option> <option value="hot">Humanitarian</option>
</select></div> </select></div>
<div class="row"><button class="iconbtn" id="d_locate">Locate</button><button class="iconbtn" id="d_follow">Follow</button><button class="iconbtn" id="d_reset">Reset</button></div> <div class="row"><button class="iconbtn" id="d_locate">Near me</button><button class="iconbtn" id="d_follow">Follow</button><button class="iconbtn" id="d_reset">Reset</button></div>
<div class="row"><button class="iconbtn" id="d_copy">Copy Link</button><button class="iconbtn" id="d_copyc">Copy Coords</button></div> <div class="row"><button class="iconbtn" id="d_copy">Copy Link</button><button class="iconbtn" id="d_copyc">Copy Coords</button></div>
<div class="row"><button class="iconbtn" id="d_osm">Open in OSM</button><button class="iconbtn" id="d_gmaps">Google Maps</button></div> <div class="row"><button class="iconbtn" id="d_share">Share</button><button class="iconbtn" id="d_osm">Open in OSM</button><button class="iconbtn" id="d_gmaps">Google Maps</button></div>
<div class="hint">Tip: / to focus search • 1–4 change layers • S save pin • R reset</div> <div class="hint">Tip: / focus • 1–4 layers • S save pin • R reset</div>
</div> </div>
<div class="sidecard"> <div class="sidecard">
@ -746,7 +767,6 @@
<div class="row"><select class="select" id="d_fmt"><option value="dec">DD (Decimal)</option><option value="dms">DMS</option></select></div> <div class="row"><select class="select" id="d_fmt"><option value="dec">DD (Decimal)</option><option value="dms">DMS</option></select></div>
<div class="row pro-only"><label style="flex:1">Precision</label><input type="range" id="d_prec" min="0" max="8"><span id="d_precv"></span></div> <div class="row pro-only"><label style="flex:1">Precision</label><input type="range" id="d_prec" min="0" max="8"><span id="d_precv"></span></div>
<div class="row"><label style="flex:1">Accent</label><input type="color" id="d_accent"><button class="iconbtn" id="d_accent_reset">Reset</button></div> <div class="row"><label style="flex:1">Accent</label><input type="color" id="d_accent"><button class="iconbtn" id="d_accent_reset">Reset</button></div>
<div class="row pro-only"><button class="iconbtn" id="d_share">Share</button><button class="iconbtn" id="d_copy2">Copy Link</button></div>
</div> </div>
<div class="sidecard pro-only"> <div class="sidecard pro-only">
@ -765,38 +785,44 @@
<div class="row"><small>Powered by openstreetmap.org • Data © OSM contributors • Public Beta</small></div> <div class="row"><small>Powered by openstreetmap.org • Data © OSM contributors • Public Beta</small></div>
</div> </div>
`; `;
document.body.appendChild(side); document.body.appendChild(sideEl);
// Resizer
resizerEl=document.createElement("div");
resizerEl.className="resizer";
document.body.appendChild(resizerEl);
initResizer();
// Mirror search // Mirror search
const d_searchmirror=side.querySelector("#d_searchmirror"); const d_searchmirror=sideEl.querySelector("#d_searchmirror");
d_searchmirror.value=q.value||""; d_searchmirror.value=q.value||"";
d_searchmirror.addEventListener("input",()=>{ q.value=d_searchmirror.value; q.dispatchEvent(new Event("input",{bubbles:true})) }); d_searchmirror.addEventListener("input",()=>{ q.value=d_searchmirror.value; q.dispatchEvent(new Event("input",{bubbles:true})) });
// Pro toggle // Pro toggle
const proToggle=side.querySelector("#pro_toggle"); const proToggle=sideEl.querySelector("#pro_toggle");
const updatePro=()=>{ prefs.proMode = proToggle.checked; savePrefs(); document.body.classList.toggle("pro-enabled", !!prefs.proMode) }; const updatePro=()=>{ prefs.proMode = proToggle.checked; savePrefs(); document.body.classList.toggle("pro-enabled", !!prefs.proMode) };
proToggle.addEventListener("change",updatePro); proToggle.addEventListener("change",updatePro);
document.body.classList.toggle("pro-enabled", !!prefs.proMode); document.body.classList.toggle("pro-enabled", !!prefs.proMode);
const d_layer=side.querySelector("#d_layer"); const d_layer=sideEl.querySelector("#d_layer");
side.querySelector("#d_osm").onclick=()=>window.open(osmViewURL(state),"_blank"); sideEl.querySelector("#d_osm").onclick=()=>window.open(osmViewURL(state),"_blank");
side.querySelector("#d_copy").onclick=copyLink; sideEl.querySelector("#d_copy").onclick=copyLink;
side.querySelector("#d_copy2").onclick=copyLink; sideEl.querySelector("#d_copyc").onclick=copyCoords;
side.querySelector("#d_share").onclick=shareLink; sideEl.querySelector("#d_share").onclick=shareLink;
side.querySelector("#d_locate").onclick=locate; sideEl.querySelector("#d_locate").onclick=locate;
side.querySelector("#d_follow").onclick=toggleFollow; sideEl.querySelector("#d_follow").onclick=toggleFollow;
side.querySelector("#d_reset").onclick=reset; sideEl.querySelector("#d_reset").onclick=reset;
side.querySelector("#d_gmaps").onclick=()=>window.open(gmapsURL(state), "_blank"); sideEl.querySelector("#d_gmaps").onclick=()=>window.open(gmapsURL(state), "_blank");
d_layer.value=state.layer; d_layer.value=state.layer;
d_layer.onchange=()=>setLayer(d_layer.value); d_layer.onchange=()=>setLayer(d_layer.value);
// Marker group // Marker group
const d_markerv=side.querySelector("#d_markerv"); const d_markerv=sideEl.querySelector("#d_markerv");
const d_style=side.querySelector("#d_style"); const d_style=sideEl.querySelector("#d_style");
const d_ms=side.querySelector("#d_ms"), d_msv=side.querySelector("#d_msv"); const d_ms=sideEl.querySelector("#d_ms"), d_msv=sideEl.querySelector("#d_msv");
const d_mc=side.querySelector("#d_mc"); const d_mc=sideEl.querySelector("#d_mc");
const d_mr=side.querySelector("#d_mr"); const d_mr=sideEl.querySelector("#d_mr");
const d_rw=side.querySelector("#d_rw"), d_rwv=side.querySelector("#d_rwv"); const d_rw=sideEl.querySelector("#d_rw"), d_rwv=sideEl.querySelector("#d_rwv");
d_markerv.checked=!prefs.markerHidden; d_markerv.checked=!prefs.markerHidden;
d_style.value=prefs.markerStyle||"dot"; d_style.value=prefs.markerStyle||"dot";
@ -813,17 +839,17 @@
d_rw && (d_rw.oninput=()=>{ ringWidthEl.value=d_rw.value; ringWidthEl.oninput(); d_rwv.textContent=d_rw.value+"px" }); d_rw && (d_rw.oninput=()=>{ ringWidthEl.value=d_rw.value; ringWidthEl.oninput(); d_rwv.textContent=d_rw.value+"px" });
// Pins mini // Pins mini
const d_save=side.querySelector("#d_save"); const d_save=sideEl.querySelector("#d_save");
const d_showpins=side.querySelector("#d_showpins"); const d_showpins=sideEl.querySelector("#d_showpins");
const d_pinlistmini=side.querySelector("#d_pinlistmini"); const d_pinlistmini=sideEl.querySelector("#d_pinlistmini");
d_save.onclick=()=>savepin.click(); d_save.onclick=()=>savepin?.click();
d_showpins.onclick=()=>{ renderPins(); pinsPane.style.display="block" }; d_showpins.onclick=()=>{ renderPins(); pinsPane.style.display="block" };
const renderPinsMini=()=>{ const renderPinsMini=()=>{
d_pinlistmini.innerHTML=""; d_pinlistmini.innerHTML="";
const pins=loadPins().slice(0,6); const pins=loadPins().slice(0,6);
if(!pins.length){ d_pinlistmini.innerHTML='<small style="opacity:.6">No pins yet.</small>'; return } if(!pins.length){ d_pinlistmini.innerHTML='<small style="opacity:.6">No pins yet.</small>'; return }
pins.forEach((p,idx)=>{ pins.forEach((p)=>{
const row=document.createElement("div"); const row=document.createElement("div");
row.style.display="flex"; row.style.gap="6px"; row.style.alignItems="center"; row.style.justifyContent="space-between"; row.style.display="flex"; row.style.gap="6px"; row.style.alignItems="center"; row.style.justifyContent="space-between";
const txt=document.createElement("div"); const txt=document.createElement("div");
@ -835,10 +861,10 @@
renderPinsMini(); renderPinsMini();
// Display group // Display group
const d_showc=side.querySelector("#d_showc"); const d_showc=sideEl.querySelector("#d_showc");
const d_fmt=side.querySelector("#d_fmt"); const d_fmt=sideEl.querySelector("#d_fmt");
const d_prec=side.querySelector("#d_prec"), d_precv=side.querySelector("#d_precv"); const d_prec=sideEl.querySelector("#d_prec"), d_precv=sideEl.querySelector("#d_precv");
const d_accent=side.querySelector("#d_accent"), d_accent_reset=side.querySelector("#d_accent_reset"); const d_accent=sideEl.querySelector("#d_accent"), d_accent_reset=sideEl.querySelector("#d_accent_reset");
d_showc.checked=!!prefs.showCoords; d_showc.checked=!!prefs.showCoords;
d_fmt.value=prefs.coordFmt||"dec"; d_fmt.value=prefs.coordFmt||"dec";
d_prec && (d_prec.value=prefs.prec??6, d_precv.textContent=String(prefs.prec??6)); d_prec && (d_prec.value=prefs.prec??6, d_precv.textContent=String(prefs.prec??6));
@ -848,12 +874,35 @@
d_prec && (d_prec.oninput=()=>{ coordPrecEl.value=d_prec.value; coordPrecEl.oninput(); d_precv.textContent=d_prec.value }); d_prec && (d_prec.oninput=()=>{ coordPrecEl.value=d_prec.value; coordPrecEl.oninput(); d_precv.textContent=d_prec.value });
d_accent.oninput=()=>{ accentColorEl.value=d_accent.value; accentColorEl.oninput() }; d_accent.oninput=()=>{ accentColorEl.value=d_accent.value; accentColorEl.oninput() };
d_accent_reset.onclick=()=>{ accentResetEl.click(); d_accent.value=accentColorEl.value }; d_accent_reset.onclick=()=>{ accentResetEl.click(); d_accent.value=accentColorEl.value };
}
// Custom CSS function getMinSide(){ return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidew-min'))||260 }
const d_usercss=side.querySelector("#d_usercss"); function getMaxSide(){ return Math.max(380, Math.min(window.innerWidth*0.6, parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidew-max'))||560)) }
const d_applycss=side.querySelector("#d_applycss");
const d_clearcss=side.querySelector("#d_clearcss"); function initResizer(){
if(d_usercss){ d_usercss.value=prefs.userCSS||""; d_applycss.onclick=()=>applyCSSEl.onclick(); d_clearcss.onclick=()=>clearCSSEl.onclick() } let dragging=false, startX=0, startW=0;
const onPointerDown=(e)=>{
dragging=true; startX=e.clientX; startW=parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidew'))||320;
document.body.style.userSelect="none";
};
const onPointerMove=(e)=>{
if(!dragging) return;
const dx=e.clientX-startX;
const newW=clamp(startW+dx, getMinSide(), getMaxSide());
document.documentElement.style.setProperty("--sidew", newW+"px");
prefs.sideW=newW; savePrefs();
};
const onPointerUp=()=>{ dragging=false; document.body.style.userSelect="" };
resizerEl.addEventListener("mousedown",onPointerDown);
window.addEventListener("mousemove",onPointerMove);
window.addEventListener("mouseup",onPointerUp);
// Touch
resizerEl.addEventListener("touchstart",e=>onPointerDown(e.touches[0]));
window.addEventListener("touchmove",e=>onPointerMove(e.touches[0]));
window.addEventListener("touchend",onPointerUp);
// keep width within limits on resize
window.addEventListener("resize",()=>{ const w=parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidew'))||320; const clamped=clamp(w,getMinSide(),getMaxSide()); if(clamped!==w){ document.documentElement.style.setProperty('--sidew',clamped+'px'); prefs.sideW=clamped; savePrefs(); } }, {passive:true});
} }
function tickCoords(){ updateCoordsFast(); setTimeout(tickCoords,120) } function tickCoords(){ updateCoordsFast(); setTimeout(tickCoords,120) }
@ -863,5 +912,3 @@
<script src="/static/data-mobile.js" defer></script> <script src="/static/data-mobile.js" defer></script>
</body> </body>
</html> </html>