e21bc177e1
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 21s
- withSharedBranches (explorer.js): wikkelt een eigen-inhoud-adapter en voegt in de root de vaste takken "🌐 Systeem" (systeembreed) en "🏫 School" (binnen de eigen school) toe - Slepen tussen bomen = kopiëren: eigen bord/diagram of hele map naar een gedeelde tak publiceert (POST /shared, kopie - origineel blijft); gedeeld item of map naar de eigen boom kopieert (borden krijgen nieuw id + verse wids); binnen een tak is slepen echt verplaatsen (PATCH, server bewaakt) - Dubbelklik op een gedeeld bord kopieert en opent het; op een gedeeld ankerdiagram laadt het in het widget - Verkenner ondersteunt nu async adapters (init/mutaties), groene ok-meldingen ("Gedeeld ✓"/"Gekopieerd ✓") en een eigenaar-hint per tegel - Gasten en leerlingen zien alleen de eigen boom
402 lines
16 KiB
JavaScript
402 lines
16 KiB
JavaScript
/* widget: Ankerwoorden */
|
|
/* =========================================================
|
|
Anchor words — unlimited word grid around a theme
|
|
==========================================================*/
|
|
function mountAnchor(root, initState, opts){
|
|
const readonly = !!(opts && opts.readonly);
|
|
const CW = 128, CH = 56, G = 10;
|
|
/* colour cycle for connecting words: none → green → blue → red → purple → orange → yellow */
|
|
const COLS = [null,"#3fae6a","#3b7dd8","#e0554d","#9b59b6","#f28c38","#d9a400"];
|
|
const S = { cells:{}, pan:{x:0, y:0}, pics:{}, themeId:null };
|
|
if(initState){
|
|
const src = initState.cells || {};
|
|
Object.keys(src).forEach(k=>{
|
|
const v = src[k];
|
|
/* migrate: old format stored plain strings */
|
|
S.cells[k] = (typeof v==="string") ? {t:v, c:null} : {t:v.t||"", c:v.c||null};
|
|
});
|
|
S.pan = initState.pan || {x:0, y:0};
|
|
S.pics = initState.pics || {}; /* word -> resolved picture (undefined/null/URL) */
|
|
/* migrate: older boards stored the literal anchor emoji as a "picture" - treat
|
|
that the same as "no match found" now that it's no longer shown as a picture */
|
|
Object.keys(S.pics).forEach(w=>{ if(S.pics[w] === "⚓") S.pics[w] = null; });
|
|
S.themeId = initState.themeId || null;
|
|
}
|
|
/* S.pics[word]: undefined = not tried yet, null = tried, no ARASAAC match
|
|
(shown empty, no fake anchor icon), string = resolved picture URL */
|
|
const fetching = new Set();
|
|
function fetchPic(word){
|
|
if(S.pics[word] !== undefined || fetching.has(word)) return;
|
|
fetching.add(word);
|
|
arasaacSearch(word, LANG).then(arr=>{
|
|
S.pics[word] = (arr && arr.length) ? arasaacUrl(arr[0]._id) : null;
|
|
}).catch(()=>{
|
|
S.pics[word] = null;
|
|
}).finally(()=>{
|
|
fetching.delete(word);
|
|
syncSource();
|
|
render();
|
|
persistWords();
|
|
});
|
|
}
|
|
root.innerHTML = `
|
|
<div class="an">
|
|
<div class="an-hint"></div>
|
|
<div class="an-tools">
|
|
<button class="an-save" type="button">💾</button>
|
|
<button class="an-lib" type="button">🗂</button>
|
|
</div>
|
|
<div class="an-stage"><div class="an-layer"></div></div>
|
|
</div>`;
|
|
const stage = root.querySelector(".an-stage"),
|
|
layer = root.querySelector(".an-layer"),
|
|
hint = root.querySelector(".an-hint"),
|
|
toolsEl = root.querySelector(".an-tools"),
|
|
saveBtn = root.querySelector(".an-save"),
|
|
libBtn = root.querySelector(".an-lib");
|
|
if(readonly) toolsEl.remove();
|
|
const key = (x,y)=>x+","+y;
|
|
|
|
/* register this grid as a word source for the language widgets */
|
|
const reg = { el: root, name: T("wg_anchor"), words: [] };
|
|
ANCHORS.push(reg);
|
|
/* mirror words that already have a real picture into a linked theme, so the
|
|
existing woordkaart-editor (letters.js) can manage/fix their pictures too -
|
|
the anchor grid stays the source of truth for which words exist */
|
|
function syncTheme(){
|
|
if(!S.themeId) S.themeId = "an-"+Math.random().toString(36).slice(2,10);
|
|
const withPic = reg.words.filter(([,p]) => typeof p === "string");
|
|
const list = THEMES[LANG];
|
|
const idx = list.findIndex(t => t.id === S.themeId);
|
|
if(!withPic.length){
|
|
if(idx >= 0) list[idx].words = [];
|
|
return;
|
|
}
|
|
const name = "⚓ " + reg.name;
|
|
/* vaste map "⚓" zodat ankerthema's gegroepeerd staan in de editor- en
|
|
widget-dropdowns (zie de optgroup-weergave in letters.js/data.js) */
|
|
if(idx < 0) list.push({ id: S.themeId, name, folder: "⚓", words: withPic.slice() });
|
|
else{ list[idx].name = name; list[idx].folder = "⚓"; list[idx].words = withPic.slice(); }
|
|
}
|
|
function syncSource(quiet){
|
|
const center = S.cells["0,0"];
|
|
reg.name = (center && center.t) ? center.t : T("wg_anchor");
|
|
const seen = new Set();
|
|
reg.words = [];
|
|
Object.keys(S.cells).forEach(k=>{
|
|
const w = (S.cells[k].t||"").trim().toLowerCase();
|
|
if(/^[a-zà-ÿ]{2,24}$/.test(w) && !seen.has(w)){
|
|
seen.add(w);
|
|
if(S.pics[w] === undefined) fetchPic(w);
|
|
reg.words.push([w, S.pics[w] ?? null]);
|
|
}
|
|
});
|
|
syncTheme();
|
|
if(!quiet) document.dispatchEvent(new CustomEvent("wordschange"));
|
|
}
|
|
|
|
function applyPan(){ layer.style.transform = `translate(${-S.pan.x}px,${-S.pan.y}px)`; }
|
|
function render(){
|
|
layer.innerHTML = "";
|
|
const w = stage.offsetWidth, h = stage.offsetHeight;
|
|
if(w < 2) return;
|
|
const cx = w/2, cy = h/2;
|
|
const x0 = Math.floor((S.pan.x - cx - CW)/(CW+G)), x1 = Math.ceil((S.pan.x + w - cx + CW)/(CW+G));
|
|
const y0 = Math.floor((S.pan.y - cy - CH)/(CH+G)), y1 = Math.ceil((S.pan.y + h - cy + CH)/(CH+G));
|
|
for(let gx=x0; gx<=x1; gx++){
|
|
for(let gy=y0; gy<=y1; gy++){
|
|
const c = document.createElement("div");
|
|
const cell = S.cells[key(gx,gy)];
|
|
const word = cell && cell.t;
|
|
const isRoot = gx===0 && gy===0;
|
|
c.className = "an-cell" + (word ? " filled" : "") + (isRoot ? " root" : "");
|
|
c.style.left = (cx + gx*(CW+G) - CW/2)+"px";
|
|
c.style.top = (cy + gy*(CH+G) - CH/2)+"px";
|
|
if(word){
|
|
const normWord = word.trim().toLowerCase();
|
|
const wPic = S.pics[normWord];
|
|
const pic = document.createElement("div");
|
|
pic.className = "an-pic";
|
|
if(wPic){
|
|
setPic(pic, wPic);
|
|
}else{
|
|
/* no automatic match (or not tried yet) - stays empty, but doubles as a
|
|
shortcut to manually pick a picture instead of showing a fake anchor icon */
|
|
pic.classList.add("an-pic-empty");
|
|
if(!readonly){
|
|
pic.title = T("pickPic");
|
|
pic.addEventListener("pointerdown", ev=>ev.stopPropagation());
|
|
pic.addEventListener("click", ev=>{
|
|
ev.stopPropagation();
|
|
openPicPicker(normWord, chosen=>{
|
|
S.pics[normWord] = chosen;
|
|
syncSource();
|
|
render();
|
|
persistWords();
|
|
});
|
|
});
|
|
}
|
|
}
|
|
c.appendChild(pic);
|
|
const span = document.createElement("span");
|
|
span.className = "an-word";
|
|
span.textContent = word;
|
|
c.appendChild(span);
|
|
/* only the theme word is styled by default; other words are plain
|
|
until the teacher gives them a colour to show a connection */
|
|
if(!isRoot){
|
|
if(cell.c){
|
|
c.style.borderColor = cell.c;
|
|
c.style.background = cell.c + "1c";
|
|
}
|
|
if(!readonly){
|
|
const dot = document.createElement("button");
|
|
dot.className = "an-dot";
|
|
dot.style.background = cell.c || "#cdd7e4";
|
|
dot.title = T("anchorColor");
|
|
dot.addEventListener("pointerdown", ev=>ev.stopPropagation());
|
|
dot.addEventListener("click", ev=>{
|
|
ev.stopPropagation();
|
|
cell.c = COLS[(COLS.indexOf(cell.c)+1) % COLS.length];
|
|
render();
|
|
});
|
|
c.appendChild(dot);
|
|
}
|
|
}
|
|
}
|
|
c.dataset.gx = gx; c.dataset.gy = gy;
|
|
layer.appendChild(c);
|
|
}
|
|
}
|
|
applyPan();
|
|
hint.textContent = T(readonly ? "anchorHintReadonly" : "anchorHint");
|
|
}
|
|
/* pan by dragging, click (without moving) to type */
|
|
let pd = null;
|
|
stage.addEventListener("pointerdown", e=>{
|
|
if(e.target.tagName==="INPUT") return;
|
|
if(e.pointerType==="mouse" && e.button!==0) return;
|
|
e.preventDefault();
|
|
stage.setPointerCapture(e.pointerId);
|
|
const sc = stage.getBoundingClientRect().width / stage.offsetWidth;
|
|
pd = { x:e.clientX/sc, y:e.clientY/sc, px:S.pan.x, py:S.pan.y,
|
|
moved:false, target:e.target.closest(".an-cell"), sc };
|
|
});
|
|
stage.addEventListener("pointermove", e=>{
|
|
if(!pd) return;
|
|
const dx = e.clientX/pd.sc - pd.x, dy = e.clientY/pd.sc - pd.y;
|
|
if(Math.abs(dx) > 6 || Math.abs(dy) > 6) pd.moved = true;
|
|
if(pd.moved){ S.pan.x = pd.px - dx; S.pan.y = pd.py - dy; applyPan(); }
|
|
});
|
|
stage.addEventListener("pointerup", ()=>{
|
|
if(!pd) return;
|
|
const {moved, target} = pd;
|
|
pd = null;
|
|
if(moved){ render(); return; }
|
|
if(target && !readonly) editCell(target);
|
|
});
|
|
stage.addEventListener("pointercancel", ()=>{
|
|
const moved = pd && pd.moved;
|
|
pd = null;
|
|
if(moved) render();
|
|
});
|
|
function editCell(cell){
|
|
if(cell.querySelector("input")) return;
|
|
const gx = +cell.dataset.gx, gy = +cell.dataset.gy, k = key(gx,gy);
|
|
const inp = document.createElement("input");
|
|
inp.maxLength = 24;
|
|
inp.value = S.cells[k] ? S.cells[k].t : "";
|
|
if(gx===0 && gy===0) inp.placeholder = T("anchorPh");
|
|
cell.textContent = "";
|
|
cell.appendChild(inp);
|
|
setTimeout(()=>{ inp.focus(); inp.select(); }, 0);
|
|
let done = false;
|
|
const commit = ()=>{
|
|
if(done) return; done = true;
|
|
const v = inp.value.trim();
|
|
if(v) S.cells[k] = { t:v, c:(S.cells[k] && S.cells[k].c) || null };
|
|
else delete S.cells[k];
|
|
syncSource();
|
|
render();
|
|
persistWords();
|
|
};
|
|
inp.addEventListener("keydown", ev=>{
|
|
ev.stopPropagation();
|
|
if(ev.key==="Enter") commit();
|
|
if(ev.key==="Escape"){ done = true; render(); }
|
|
});
|
|
inp.addEventListener("blur", commit);
|
|
inp.addEventListener("pointerdown", ev=>ev.stopPropagation());
|
|
}
|
|
/* ---- ankerbibliotheek: diagram los van het bord bewaren en hergebruiken.
|
|
Opslag in ANCHOR_LIB (eigen save-sectie "anchors"), beheer via dezelfde
|
|
Windows-stijl mappenverkenner als de borden en thema's. */
|
|
function anchorLibAdapter(){
|
|
const split = n => (n||"").split("/").map(s=>s.trim()).filter(Boolean);
|
|
const join = p => p.join("/");
|
|
const wordCount = it => Object.keys(it.cells||{}).length;
|
|
const pending = new Set();
|
|
const changed = ()=>scheduleSave("anchors");
|
|
return {
|
|
title: ()=>T("anchorLibTitle"),
|
|
allowRootItems: true,
|
|
list(path){
|
|
const p = join(path);
|
|
const folderMap = new Map();
|
|
const items = [];
|
|
const seen = new Set(pending);
|
|
ANCHOR_LIB.forEach((it, i)=>{
|
|
const j = join(split(it.folder));
|
|
if(j === p) items.push({ key: i, name: `${it.name} (${wordCount(it)})`, icon: "⚓" });
|
|
else if(!p || j.startsWith(p + "/")) seen.add(j);
|
|
});
|
|
seen.forEach(j=>{
|
|
if(j === p) return;
|
|
if(p && !j.startsWith(p + "/")) return;
|
|
if(!p && !j) return;
|
|
const seg = (p ? j.slice(p.length + 1) : j).split("/")[0];
|
|
if(!seg) return;
|
|
const full = p ? p + "/" + seg : seg;
|
|
const under = ANCHOR_LIB.filter(it=>{ const ij = join(split(it.folder)); return ij === full || ij.startsWith(full + "/"); }).length;
|
|
folderMap.set(seg, under);
|
|
});
|
|
const folders = [...folderMap].map(([name, count])=>({name, count}))
|
|
.sort((a,b)=>a.name.localeCompare(b.name));
|
|
return { folders, items };
|
|
},
|
|
createFolder(path, name){
|
|
if(this.list(path).folders.some(f=>f.name===name)) return T("exExists");
|
|
pending.add(join([...path, name]));
|
|
return null;
|
|
},
|
|
renameFolder(path, oldName, newName){
|
|
return this.moveFolder([...path, oldName], path, newName);
|
|
},
|
|
moveFolder(srcPath, targetPath, newName){
|
|
const from = join(srcPath);
|
|
const to = join([...targetPath, newName || srcPath[srcPath.length-1]]);
|
|
if(from === to) return null;
|
|
if(ANCHOR_LIB.some(it=>{ const j = join(split(it.folder)); return j === to || j.startsWith(to + "/"); }) || pending.has(to)) return T("exExists");
|
|
ANCHOR_LIB.forEach(it=>{
|
|
const j = join(split(it.folder));
|
|
if(j === from || j.startsWith(from + "/")) it.folder = to + j.slice(from.length);
|
|
});
|
|
[...pending].forEach(j=>{
|
|
if(j === from || j.startsWith(from + "/")){ pending.delete(j); pending.add(to + j.slice(from.length)); }
|
|
});
|
|
changed();
|
|
return null;
|
|
},
|
|
deleteFolder(path, name){
|
|
const full = join([...path, name]);
|
|
if(ANCHOR_LIB.some(it=>{ const j = join(split(it.folder)); return j === full || j.startsWith(full + "/"); })) return T("exFolderNotEmpty");
|
|
[...pending].forEach(j=>{ if(j === full || j.startsWith(full + "/")) pending.delete(j); });
|
|
return null;
|
|
},
|
|
renameItem(i, name){
|
|
if(!ANCHOR_LIB[i]) return null;
|
|
ANCHOR_LIB[i].name = name;
|
|
changed();
|
|
return null;
|
|
},
|
|
moveItem(i, targetPath){
|
|
const it = ANCHOR_LIB[i];
|
|
if(!it) return null;
|
|
if(targetPath.length) it.folder = join(targetPath); else delete it.folder;
|
|
pending.delete(join(targetPath));
|
|
changed();
|
|
return null;
|
|
},
|
|
deleteItem(i){
|
|
if(!ANCHOR_LIB[i]) return null;
|
|
ANCHOR_LIB.splice(i, 1);
|
|
changed();
|
|
return null;
|
|
},
|
|
/* dubbelklik: bewaard diagram in dít widget laden */
|
|
openItem(i){
|
|
const it = ANCHOR_LIB[i];
|
|
if(!it) return;
|
|
S.cells = structuredClone(it.cells || {});
|
|
S.pics = structuredClone(it.pics || {});
|
|
S.pan = {x:0, y:0};
|
|
syncSource();
|
|
render();
|
|
persistWords();
|
|
/* programmatisch geladen: de bord-autosave-listeners zien dit niet */
|
|
markBoardChange();
|
|
},
|
|
};
|
|
}
|
|
if(!readonly){
|
|
saveBtn.title = T("anchorLibSave");
|
|
libBtn.title = T("anchorLibOpen");
|
|
saveBtn.addEventListener("click", ()=>{
|
|
if(!Object.keys(S.cells).length){ hint.textContent = T("anchorLibEmptyGrid"); return; }
|
|
ANCHOR_LIB.push({
|
|
id: "al-"+Math.random().toString(36).slice(2,10),
|
|
name: reg.name,
|
|
cells: structuredClone(S.cells),
|
|
pics: structuredClone(S.pics),
|
|
});
|
|
scheduleSave("anchors");
|
|
const orig = saveBtn.textContent;
|
|
saveBtn.textContent = "✓";
|
|
setTimeout(()=>{ saveBtn.textContent = orig; }, 1200);
|
|
});
|
|
/* koppelstuk voor de gedeelde bibliotheek: diagrammen als {name, data} */
|
|
const anchorSharedHooks = ()=>{
|
|
const split = n => (n||"").split("/").map(s=>s.trim()).filter(Boolean);
|
|
const join = p => p.join("/");
|
|
return {
|
|
exportItem(i){
|
|
const it = ANCHOR_LIB[i];
|
|
return it ? { name: it.name, data: { cells: structuredClone(it.cells||{}), pics: structuredClone(it.pics||{}) } } : null;
|
|
},
|
|
exportFolder(path){
|
|
const p = join(path);
|
|
const out = [];
|
|
ANCHOR_LIB.forEach(it=>{
|
|
const j = join(split(it.folder));
|
|
if(j === p || j.startsWith(p + "/")){
|
|
const rel = j === p ? [] : j.slice(p.length + 1).split("/");
|
|
out.push({ name: it.name, rel, data: { cells: structuredClone(it.cells||{}), pics: structuredClone(it.pics||{}) } });
|
|
}
|
|
});
|
|
return out;
|
|
},
|
|
copyIn(item, destPath){
|
|
const entry = {
|
|
id: "al-"+Math.random().toString(36).slice(2,10),
|
|
name: item.name,
|
|
cells: structuredClone(item.data.cells || {}),
|
|
pics: structuredClone(item.data.pics || {}),
|
|
};
|
|
if(destPath.length) entry.folder = join(destPath);
|
|
ANCHOR_LIB.push(entry);
|
|
scheduleSave("anchors");
|
|
return null;
|
|
},
|
|
openShared(item){
|
|
S.cells = structuredClone(item.data.cells || {});
|
|
S.pics = structuredClone(item.data.pics || {});
|
|
S.pan = {x:0, y:0};
|
|
syncSource();
|
|
render();
|
|
persistWords();
|
|
markBoardChange();
|
|
return null;
|
|
},
|
|
};
|
|
};
|
|
libBtn.addEventListener("click", ()=>openExplorer(withSharedBranches("anchor", anchorLibAdapter(), anchorSharedHooks())));
|
|
}
|
|
|
|
new ResizeObserver(render).observe(stage);
|
|
document.addEventListener("langchange", render);
|
|
syncSource(true);
|
|
render();
|
|
if(reg.words.length) document.dispatchEvent(new CustomEvent("wordschange"));
|
|
return { getState: ()=>({ cells:S.cells, pan:S.pan, pics:S.pics, themeId:S.themeId }) };
|
|
}
|
|
|