diff --git a/VERSION b/VERSION index 9b6937f..591d9ab 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.3.62-beta +0.3.63-beta diff --git a/public/css/teach.css b/public/css/teach.css index 926ee41..7a4d52e 100644 --- a/public/css/teach.css +++ b/public/css/teach.css @@ -460,6 +460,16 @@ } .dock-item:hover{background:var(--surface-2); transform:translateY(-2px);} .dock-item .di{font-size:16px; line-height:1;} + /* sluitknop op de dock-pil: geminimaliseerde widgets zijn direct te sluiten */ + .dock-item .dock-close{ + display:flex; align-items:center; justify-content:center; + width:20px; height:20px; margin:-2px -6px -2px 0; border-radius:7px; + font-size:11px; color:var(--muted); line-height:1; + } + .dock-item .dock-close:hover{background:var(--red-soft); color:var(--red);} + @media (pointer:coarse){ + .dock-item .dock-close{width:28px; height:28px;} + } .widget-head{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(255,255,255,.4); border-bottom:1px solid rgba(150,170,200,.28); diff --git a/public/js/board.js b/public/js/board.js index ff191f6..f7fa4cc 100644 --- a/public/js/board.js +++ b/public/js/board.js @@ -60,12 +60,24 @@ const REGISTRY = [ ]; const WIDGET_CATS = [["favorites","galleryFavorites"],["taal","catTaal"],["rekenen","catRekenen"],["class","catClass"],["tools","catTools"],["media","catMedia"]]; -/* houdt een (opgeslagen of standaard) widgetgrootte binnen het bord - zonder - dit passen desktop-formaten (tot 760px breed) niet op een telefoon/tablet */ +/* houdt een (opgeslagen of standaard) widgetgrootte binnen het bord. Op een + telefoon is de beschikbare ruimte leidend: een desktop-minimum van bv. + 640px mag daar niet alsnog horizontale overflow afdwingen. */ +function widgetSizeBounds(def, left=0, top=0){ + const maxW = Math.max(1, board.clientWidth - left - 8); + const maxH = Math.max(1, board.clientHeight - top - 8); + return { + minW: Math.min(def.minW || 240, maxW), + minH: Math.min(def.minH || 180, maxH), + maxW, maxH, + }; +} function clampWidgetSize(w, h, def){ - const fw = Math.max(def.minW || 240, Math.min(w, board.clientWidth)); - const fh = Math.max(def.minH || 180, Math.min(h, board.clientHeight)); - return { w: fw, h: fh }; + const {minW,minH,maxW,maxH} = widgetSizeBounds(def); + return { + w: Math.max(minW, Math.min(w, maxW)), + h: Math.max(minH, Math.min(h, maxH)), + }; } /* stabiel widget-instantie-id, zelfde patroon als genBoardId() verderop - nodig @@ -148,9 +160,14 @@ function makeWidget(def, saved){ win.style.display = "none"; pill = document.createElement("button"); pill.className = "dock-item"; - pill.innerHTML = `${def.icon}`; + pill.innerHTML = `${def.icon}`; pill.querySelector(".dl").textContent = T("wg_"+def.id); pill.title = T("wMax"); + /* ook een geminimaliseerde widget is direct te sluiten, zonder hem + eerst terug op het bord te hoeven zetten */ + const x = pill.querySelector(".dock-close"); + x.title = T("close"); + x.addEventListener("click", e=>{ e.stopPropagation(); removeWidget(); }); pill.addEventListener("click", ()=>setMin(false)); dock.appendChild(pill); }else if(!m && pill){ @@ -206,7 +223,11 @@ function makeWidget(def, saved){ minBtn.title = T("wMin"); maxBtn.title = T(win.dataset.max==="1" ? "wUnfull" : "wFull"); zBtn.title = T("wZoom"); - if(pill){ pill.querySelector(".dl").textContent = T("wg_"+def.id); pill.title = T("wMax"); } + if(pill){ + pill.querySelector(".dl").textContent = T("wg_"+def.id); + pill.title = T("wMax"); + pill.querySelector(".dock-close").title = T("close"); + } }; setTitle(); document.addEventListener("langchange", setTitle); @@ -233,11 +254,13 @@ function makeWidget(def, saved){ dupBtn.title=T("widgetDuplicate");dupBtn.setAttribute("aria-label",dupBtn.title);previewBtn.title=T("widgetPreview");previewBtn.setAttribute("aria-label",previewBtn.title); dupBtn.addEventListener("click",()=>makeWidget(def,{x:win.offsetLeft+28,y:win.offsetTop+28,w:win.offsetWidth,h:win.offsetHeight,wz:+win.dataset.wz||1,state:api.getState?structuredClone(api.getState()):null})); instances.add(inst); - close.addEventListener("click", ()=>{ + /* gedeeld sluitpad voor de ✕ in de widgetkop én de ✕ op de dock-pil */ + function removeWidget(){ markBoardChange(); if(pill){ pill.remove(); pill = null; } instances.delete(inst); win.remove(); updateEmptyHint(); - }); + } + close.addEventListener("click", removeWidget); updateEmptyHint(); markBoardChange(); return inst; diff --git a/public/js/core.js b/public/js/core.js index c84debb..9c0db0c 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -2,7 +2,7 @@ "use strict"; /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline). Kept in sync by hand with the VERSION file at the repo root on every release. */ -const VERSION = "0.3.62-beta"; +const VERSION = "0.3.63-beta"; (function(){ const tag = document.getElementById("verTag"); tag.textContent = "v"+VERSION;