d1d3265c6c
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 8s
24 lines
868 B
JavaScript
24 lines
868 B
JavaScript
/* stoplicht (bordgereedschap-variant zit in board.js) */
|
|
/* =========================================================
|
|
Traffic light widget
|
|
==========================================================*/
|
|
function mountLight(root, initState){
|
|
let on = (initState && initState.on) || "green";
|
|
root.innerHTML = `
|
|
<div class="tl">
|
|
<div class="tl-house">
|
|
<button class="tl-lamp red" data-c="red"></button>
|
|
<button class="tl-lamp orange" data-c="orange"></button>
|
|
<button class="tl-lamp green" data-c="green"></button>
|
|
</div>
|
|
</div>`;
|
|
function apply(){
|
|
root.querySelectorAll(".tl-lamp").forEach(l=>l.classList.toggle("on", l.dataset.c===on));
|
|
}
|
|
root.querySelectorAll(".tl-lamp").forEach(l=>{
|
|
l.addEventListener("click", ()=>{ on = l.dataset.c; apply(); });
|
|
});
|
|
apply();
|
|
return { getState: ()=>({on}) };
|
|
}
|
|
|