| const $=s=>document.querySelector(s); |
| const fams=[...new Set(TAX.map(t=>t[2]))]; |
| const fsel=$('#fam'),csel=$('#coord'); |
| fams.forEach(f=>fsel.add(new Option(f,f))); |
| function fillCoords(){csel.length=1;TAX.filter(t=>!fsel.value||t[2]===fsel.value).forEach(t=>csel.add(new Option(t[1],t[0])))} |
| fillCoords(); |
| let shown=12,list=[]; |
| function esc(s){return String(s).replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c]))} |
| function render(){ |
| const q=$('#q').value.toLowerCase(),f=fsel.value,c=csel.value,l=$('#lab').value; |
| list=ROWS.filter(r=>{ |
| if(l==='yes'&&!r.d.length)return false; if(l==='no'&&r.d.length)return false; |
| if(c&&!r.d.some(d=>d[0]==c))return false; |
| if(f&&!r.d.some(d=>TAX[d[0]-1][2]===f))return false; |
| if(q&&!r.turns.some(t=>t[1].toLowerCase().includes(q)))return false; |
| return true}); |
| $('#count').textContent=list.length+' of '+ROWS.length+' sampled rows'; |
| $('#rows').innerHTML=list.slice(0,shown).map(r=>{ |
| const t=r.turns.map((x,i)=>`<div class="turn ${x[0]} ${i===r.t?'t':''}"><small>Speaker ${x[0]}${i===r.t?' (target)':''}</small>${esc(x[1])}</div>`).join(''); |
| const ch=r.d.length?r.d.map(d=>`<span class="chip" title="${esc(TAX[d[0]-1][3])}">${esc(TAX[d[0]-1][1])} ${d[1]}</span>`).join(''):'<span class="chip none">no expressed coordinate</span>'; |
| return `<div class="dlg">${t}<div>${ch}</div><div class="meta">Labels are for speaker ${r.s}, turn ${r.t}. Hover a label for its definition.</div></div>`}).join('')||'<p class="note">No rows match.</p>'; |
| $('#more').style.display=list.length>shown?'inline-block':'none'; |
| } |
| ['q','coord','lab'].forEach(i=>$('#'+i).addEventListener('input',()=>{shown=12;render()})); |
| fsel.addEventListener('input',()=>{fillCoords();shown=12;render()}); |
| $('#more').onclick=()=>{shown+=12;render()}; |
| render(); |
| const fam=$('#famgrid');fams.forEach(f=>{const n=TAX.filter(t=>t[2]===f);fam.insertAdjacentHTML('beforeend',`<div><b>${esc(f)}</b><span>${n.length} coordinates, e.g. ${n.slice(0,3).map(x=>esc(x[1])).join(', ')}</span></div>`)}); |
| const io=new IntersectionObserver(e=>e.forEach(x=>x.isIntersecting&&x.target.classList.add('in2')),{threshold:.08}); |
| document.querySelectorAll('section').forEach(s=>{s.classList.add('fade');io.observe(s)}); |
| document.querySelectorAll('.stat b[data-n]').forEach(el=>{const n=+el.dataset.n,d=el.dataset.d||'',s=el.dataset.s||'';let k=0;const id=setInterval(()=>{k+=n/30;if(k>=n){k=n;clearInterval(id)}el.textContent=(d?k.toFixed(+d):Math.round(k).toLocaleString())+s},30)}); |
|
|
