7a5d7c57ff
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 41s
19 lines
1.9 KiB
JavaScript
19 lines
1.9 KiB
JavaScript
/* widget: Notities */
|
|
/* =========================================================
|
|
Notes widget
|
|
==========================================================*/
|
|
function mountNotes(root, initState){
|
|
const S={theme:initState?.theme||'sun',large:!!initState?.large};
|
|
root.innerHTML='<div class="notes-app"><div class="notes-tools"><span class="notes-color-label"></span><div class="notes-swatches"></div><button class="notes-size" type="button">Aa</button><output class="notes-count"></output></div></div>';
|
|
const ta = document.createElement("textarea");
|
|
ta.className = "notes";
|
|
ta.placeholder = T("notesPh");
|
|
if(initState && typeof initState.text==="string") ta.value = initState.text;
|
|
const app=root.querySelector('.notes-app'),swatches=root.querySelector('.notes-swatches');
|
|
['sun','mint','sky','lilac'].forEach(theme=>{const b=document.createElement('button');b.type='button';b.dataset.theme=theme;b.setAttribute('aria-label',theme);b.onclick=()=>{S.theme=theme;apply()};swatches.append(b)});
|
|
app.appendChild(ta);
|
|
function apply(){app.dataset.theme=S.theme;ta.classList.toggle('large',S.large);root.querySelectorAll('.notes-swatches button').forEach(b=>{const on=b.dataset.theme===S.theme;b.classList.toggle('on',on);b.setAttribute('aria-pressed',String(on))});root.querySelector('.notes-size').classList.toggle('on',S.large);root.querySelector('.notes-size').setAttribute('aria-pressed',String(S.large));root.querySelector('.notes-count').textContent=T('notesCount').replace('{count}',ta.value.length)}
|
|
function labels(){ta.placeholder=T('notesPh');root.querySelector('.notes-color-label').textContent=T('notesColor');root.querySelector('.notes-size').title=T('notesLarge');apply()}
|
|
ta.addEventListener('input',apply);root.querySelector('.notes-size').onclick=()=>{S.large=!S.large;apply()};document.addEventListener("langchange",labels);labels();
|
|
return { getState: ()=>({text:ta.value,theme:S.theme,large:S.large}) };
|
|
}
|