json-timeline/views/renderAdvents.js

Generate Interactive Timelines stored in JSON Advents with Tags.

import{advents,tags}from"./advents.js";const adventDomGroups=advents.map(e=>e.map(e=>({advent:e,adventDiv:renderAdvent(e)}))).map(e=>({group:e,groupDom:renderAdventGroup(e)}));function renderAdvent(e){const t=document.createElement("div");t.classList.add("advent");const n=document.createElement("p");n.classList.add("title"),n.classList.add("mono-text"),n.innerText=e.title,t.appendChild(n);const d=document.createElement("p");d.classList.add("date"),d.classList.add("mono-text"),d.innerText=`${e.start.month}/${e.start.day}/${e.start.year}`+(null===e.end?"":`-${e.end.month}/${e.end.day}/${e.end.year}`),t.appendChild(d);const s=document.createElement("p");s.classList.add("tags"),s.classList.add("mono-text"),s.innerText=`Tags:${e.tags.join(",")}`,t.appendChild(s);const a=document.createElement("p");return a.classList.add("content"),a.classList.add("read-text"),a.innerText=e.content,t.appendChild(a),t}function renderAdventGroup(e){const t=document.createElement("div");t.classList.add("group");const n=document.createElement("p");n.classList.add("group-date"),n.classList.add("mono-text"),n.addEventListener("click",toggleVisibility());const{advent:{start:{month:d,day:s,year:a}}}=e[0],i=`${d}/${s}/${a}`;n.innerText=`${i} [▼]`,t.appendChild(n);const o=document.createElement("div");return o.classList.add("advents"),o.classList.add("hidden"),t.appendChild(o),t}export function renderTagToggles(e,t){const n=document.createElement("p");n.classList.add("toggle-container-title"),n.classList.add("mono-text"),n.innerText="Tags [▼]",n.addEventListener("click",toggleVisibility()),e.appendChild(n);const d=document.createElement("div");d.classList.add("toggles-container"),d.classList.add("hidden"),e.appendChild(d);for(const e of tags.keys()){const n=document.createElement("div");n.classList.add("toggle-container");const s=document.createElement("input");s.setAttribute("type","checkbox"),s.setAttribute("checked",!0),s.classList.add("tag-toggle"),s.addEventListener("click",()=>{tags.set(e,!tags.get(e)),renderTimeline(t)}),n.appendChild(s);const a=document.createElement("label");a.classList.add("tag-toggle-label"),a.classList.add("mono-text"),a.innerText=e,n.appendChild(a),d.appendChild(n)}}function toggleVisibility(e=(e=>e.nextElementSibling)){return function({target:t}){const n=e(t),d=t.innerText.length-3;t.innerText.endsWith("[▼]")?(n.classList.remove("hidden"),t.innerText=`${t.innerText.slice(0,d)}[▲]`):(n.classList.add("hidden"),t.innerText=`${t.innerText.slice(0,d)}[▼]`)}}export function renderTimeline(e){removeChildren(e);for(const{group:t,groupDom:n}of adventDomGroups){const[d,s]=n.children;removeChildren(s);for(const{advent:e,adventDiv:n}of t)e.tags.some(e=>tags.get(e))&&s.appendChild(n);s.firstChild&&e.appendChild(n)}}function removeChildren(e){for(;e.firstChild;)e.removeChild(e.firstChild)}