bes-r/teach
1
0
Fork 0
Code Issues Pull requests 5 Projects Releases Packages Wiki Activity Actions

v0.2.15-beta: ankerwoorden tonen nu ook zelf hun plaatje
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 8s
Details

Browse source 
- De automatische ARASAAC-plaatjes (sinds v0.2.06-beta) werden alleen doorgegeven aan andere widgets (Hak/Flits/Bal/Woordkaart) als woordbron, maar nooit getoond in het Ankerwoorden-raster zelf - vandaar dat het leek te ontbreken, voor zowel bestaande als nieuwe woorden
- render() tekent nu een klein plaatje naast elk woord in de cel, met een render()-aanroep zodra een opgehaald plaatje binnenkomt
- Getest tegen de echte ARASAAC-API: bestaande woorden (uit een opgeslagen bord) tonen hun plaatje meteen bij het laden, nieuwe woorden tonen eerst het ankersymbool en daarna het echte plaatje zodra dat binnenkomt

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Ramon 2026-07-13 17:32:42 +02:00
parent baf2a4cb13
commit 6cb0965a9c
2 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
public/css/teach.css
View file

@ -873,7 +873,7 @@
.an-layer{position:absolute; inset:0;} .an-layer{position:absolute; inset:0;}
.an-cell{ .an-cell{
position:absolute; width:128px; height:56px; border-radius:12px; border:2px dashed #dbe4f0; position:absolute; width:128px; height:56px; border-radius:12px; border:2px dashed #dbe4f0;
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; font-size:15px;
color:var(--ink); padding:2px 8px; overflow:hidden; text-align:center; cursor:pointer; color:var(--ink); padding:2px 8px; overflow:hidden; text-align:center; cursor:pointer;
} }
.an-cell:hover{border-color:#b6c6dc;} .an-cell:hover{border-color:#b6c6dc;}
@ -882,6 +882,11 @@
.an-cell.root.filled{background:var(--yellow); font-size:16px;} .an-cell.root.filled{background:var(--yellow); font-size:16px;}
.an-cell input{width:100%; border:none; outline:none; font:inherit; text-align:center; background:transparent;} .an-cell input{width:100%; border:none; outline:none; font:inherit; text-align:center; background:transparent;}
.an-word{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;} .an-word{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.an-pic{
flex:none; width:22px; height:22px; display:flex; align-items:center;
justify-content:center; font-size:16px; line-height:1;
}
.an-pic img{width:100%; height:100%; object-fit:contain;}
.an-dot{ .an-dot{
position:absolute; right:4px; bottom:4px; width:15px; height:15px; border-radius:50%; position:absolute; right:4px; bottom:4px; width:15px; height:15px; border-radius:50%;
border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer; padding:0; border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer; padding:0;

5
public/js/widgets/anchor.js
View file

@ -30,6 +30,7 @@ function mountAnchor(root, initState){
}).finally(()=>{ }).finally(()=>{
fetching.delete(word); fetching.delete(word);
syncSource(); syncSource();
render();
}); });
} }
root.innerHTML = ` root.innerHTML = `
@ -79,6 +80,10 @@ function mountAnchor(root, initState){
c.style.left = (cx + gx*(CW+G) - CW/2)+"px"; c.style.left = (cx + gx*(CW+G) - CW/2)+"px";
c.style.top = (cy + gy*(CH+G) - CH/2)+"px"; c.style.top = (cy + gy*(CH+G) - CH/2)+"px";
if(word){ if(word){
const pic = document.createElement("div");
pic.className = "an-pic";
setPic(pic, S.pics[word.trim().toLowerCase()] || FALLBACK_PIC);
c.appendChild(pic);
const span = document.createElement("span"); const span = document.createElement("span");
span.className = "an-word"; span.className = "an-word";
span.textContent = word; span.textContent = word;