neotoc
Version:
Neotoc is a smoothly animated, foldable table of contents generator.
3 lines (2 loc) • 14.5 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).neotoc=e()}(this,(function(){"use strict";function t(t){if(t===document.documentElement)return[0,t.clientHeight];const e=t.getBoundingClientRect().y+t.clientTop;return[e,e+t.clientHeight]}function e([l,o],n){const[i,d]=t(n);let r=null,s=null;return null===l?[l,o]:(l<=i?o>i&&(r=i):l<d&&(r=l),o<=d?o>i&&(s=o):l<d&&(s=d),n===document.documentElement?[r,s]:e([r,s],n.parentElement))}function l(l,o,n){const[i,d]=t(l),[r,s]=[i+o,d-n],c=l.parentElement;return c?e([r,s],c):[r,s]}function o(t,e){let l=t.parentElement.parentElement.parentElement;return"A"===t.tagName&&(l=l.parentElement),l.classList.contains(e)?l:null}function n(t,e){let l=e;for(let e=0;e<t.length;e++){const o=t[e].getBoundingClientRect().bottom;o<l&&(l=o)}return l}function i(t,e,l){for(let o=0;o<e.length;o++){const n=e[o];if(l.get(n).includes(t))return!0}return!1}function d(t,e){const l=t.scrollTop;return[l+e,l+t.clientHeight-e]}function r(t,e,l){const o=l?30:-30,n=l?.5:-.5;for(let i=0;(l?i<o:i>o)&&(t.scrollTop=e+i,!(l?t.scrollTop>=e:t.scrollTop<=e));i+=n);}function s(t,e,l){if(l.isScrolling){const n=()=>{const e=l.motorcycleScrollingStartScrollTop+l.scrollNeeded;let o=!0;l.scrollNeeded>0?o=!0:l.scrollNeeded<0&&(o=!1),r(t,e,o),l.isScrolling=!1},i=t.scrollTop;l.timeFrac=(e-l.motorcycleScrollingStartTime)/300,l.timeFrac>1&&(l.timeFrac=1);const d=l.scrollNeeded*(o=l.timeFrac,1-Math.pow(1-o,3));null===l.lastAutoScrollTop||l.lastAutoScrollTop===i?(t.scrollTop=l.motorcycleScrollingStartScrollTop+d,l.lastAutoScrollTop=t.scrollTop):(l.isScrolling=!1,l.lastAutoScrollTop=null),1==l.timeFrac&&n()}var o}function c(t){return`calc(calc(var(--toggle-fold-btn-width) / 2) * pow(calc(100 / var(--relative-font-size)), ${t}) + calc(var(--indent-line-width) / 2))`}function a(t){return`calc(var(--max-indent-width) - ${c(t)})`}return function({io:t,to:e,title:u="On this page",fillAnchor:p=t=>t.textContent,onBreadcrumbChange:g=()=>{},ellipsis:m=!1,classPrefix:f="nt-",initialFoldLevel:h=6,offsetTop:w=0,offsetBottom:T=0,autoFold:v=!1,autoScroll:b=!0,autoScrollOffset:y=50,toggleFoldIcon:q='<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 5.75L8 10.25l4.25-4.5"/></svg>',unfoldableIcon:F='<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><circle cx="12.1" cy="12.1" r="1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.65"/></svg>',foldIcon:B='<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.9l-2.4 2.4q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.1-3.1q.15-.15.325-.212t.375-.063t.375.063t.325.212l3.1 3.1q.275.275.275.7t-.275.7t-.7.275t-.7-.275zm0-9.8l2.4-2.4q.275-.275.7-.275t.7.275t.275.7t-.275.7l-3.1 3.1q-.15.15-.325.213T12 9.475t-.375-.062T11.3 9.2L8.2 6.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z"/></svg>',foldAllIcon:L='<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12.025 20.8L9.55 23.25q-.275.275-.687.288t-.713-.288q-.275-.275-.275-.7t.275-.7l3.175-3.175q.15-.15.325-.213t.375-.062t.375.063t.325.212L15.9 21.85q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3zm0-5L9.55 18.25q-.275.275-.687.288t-.713-.288q-.275-.275-.275-.7t.275-.7l3.175-3.175q.15-.15.325-.213t.375-.062t.375.063t.325.212L15.9 16.85q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3zm0-7.65l2.45-2.45q.3-.3.713-.3t.712.3t.3.7t-.3.7l-3.175 3.2q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-3.2-3.2q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3zm0-5L14.475.7q.3-.3.713-.3t.712.3t.3.7t-.3.7l-3.175 3.2q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-3.2-3.2q-.3-.3-.288-.712T8.15.675t.713-.3t.712.3z"/></svg>',unfoldIcon:S='<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 18.1l2.325-2.325q.3-.3.725-.3t.725.3t.3.725t-.3.725L12.7 20.3q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-3.075-3.075q-.3-.3-.3-.725t.3-.725t.725-.3t.725.3zM12 6L9.675 8.325q-.3.3-.725.3t-.725-.3t-.3-.725t.3-.725L11.3 3.8q.15-.15.325-.213T12 3.526t.375.063t.325.212l3.075 3.075q.3.3.3.725t-.3.725t-.725.3t-.725-.3z"/></svg>',unfoldAllIcon:E='<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12.025 21.15l2.475-2.475q.3-.3.7-.288t.7.313q.275.3.287.7t-.287.7l-3.175 3.175q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213L8.15 20.1q-.275-.275-.288-.687t.288-.713q.275-.275.7-.275t.7.275zm0-5l2.475-2.475q.3-.3.7-.287t.7.312q.275.3.287.7t-.287.7l-3.175 3.175q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213L8.15 15.1q-.275-.275-.288-.687t.288-.713q.275-.275.7-.275t.7.275zm0-8.325L9.55 10.3q-.3.3-.712.288t-.713-.313t-.3-.712t.3-.713l3.2-3.175q.15-.15.325-.213t.375-.062t.375.062t.325.213l3.175 3.2q.3.3.3.7t-.3.7t-.713.3t-.712-.3zm0-5L9.55 5.3q-.3.3-.712.288t-.713-.313t-.3-.712t.3-.713l3.2-3.175q.15-.15.325-.212T12.025.4t.375.063t.325.212l3.175 3.2q.3.3.3.7t-.3.7t-.713.3t-.712-.3z"/></svg>'}){function x(t,e){const l=document.createElement(t);return e&&(l.className=f+e),l}function A(t,e){t.classList.add(f+e)}function M(t,e){t.classList.toggle(f+e)}v&&(h=1);const C=[],$={startTime:0,duration:1e3,on:!1},k={startTime:0,duration:1e3,lastTop:0,on:!1};let I=0,N=0;const H={},z={},R=new Map,U=new Map,j=new Map,[P,V,D]=t.split(">>").map((t=>t.trim())),O=document.querySelectorAll(`${P} :is(${"h*"==V?"h1,h2,h3,h4,h5,h6":V})`),G=O.length>0?+O[0].tagName[1]:0;function J(t,e){for(let l=0;l<C.length;l++){const{isFolded:o,level:n,toggleFold:i}=C[l];t?!o&&n>=e&&(i(),v&&(C[l].isManuallyToggledFoldInAutoFold=!0)):o&&n<=e&&(i(),v&&(C[l].isManuallyToggledFoldInAutoFold=!0))}Q()}let K;function Q(){const t=C[0].isFolded;let e,l=!0;for(let e=1;e<C.length;e++)C[e].isFolded!=t&&(l=!1);var o;e=l?t?"allFolded":"allUnfolded":"mixed",e!=K&&(K=e,"allFolded"==(o=e)?(it.disabled=!0,rt.disabled=!1,nt.disabled=!0,dt.disabled=!1):"allUnfolded"==o?(it.disabled=!1,rt.disabled=!0,nt.disabled=!1,dt.disabled=!0):"mixed"==o&&(it.disabled=!1,rt.disabled=!1,nt.disabled=!1,dt.disabled=!1))}function W(){let t,e;for(let l=0;l<C.length;l++){const{isFolded:o,level:n}=C[l];o?e?n<e&&(e=n):e=n:t?n>t&&(t=n):t=n}return[e,t]}const X=function t(e){if(!e.length)return;const l=x("ul");for(let o=0;o<e.length;o++){const n=e[o],i=x("li"),d=x("a","a"),r=x("div","non-foldable");d.href=`#${n.id}`,d.append(p(n)),z[`#${n.id}`]=n;const s=n.textContent.trim().replace(/\s+/g," ");m&&(A(d,"ellipsis"),r.title=s),r.append(d),i.append(r),H[n.id]=d;const u=[],g=+n.tagName[1];I&&N?(g<I&&(I=g),g>N&&(N=g)):I=N=g;for(let t=o+1;t<e.length&&+e[t].tagName[1]>g;t++)u.push(e[t]);const w=g-G;if(u.length>0){const e=t(u),l=x("div","toggle-fold-btn"),o=x("div","foldable"),n=x("hr","fold-indicator-line"),s=g>=h;s&&A(o,"foldable-folded"),l.tabIndex=0,l.role="button",l.ariaPressed=s?"true":"false",l.ariaExpanded=s?"false":"true",l.ariaLabel="Toggle fold",l.title="",l.innerHTML=q,l.classList.add(f+`level-${w+1}`);const c="toggle-fold-btn-folded",a="opacity-1";s&&(A(l,c),A(n,a)),r.prepend(l),r.append(n),o.append(e),i.append(o);const p={isFolded:s,level:g,toggleFold(){p.isFolded=!p.isFolded,l.ariaPressed=p.isFolded?"true":"false",l.ariaExpanded=p.isFolded?"false":"true",M(o,"foldable-folded"),M(l,c),M(n,a),p.isFolded&&($.on=!0),Q()},foldableDiv:o,anchor:d,isManuallyToggledFoldInAutoFold:!1};C.push(p);const m=()=>{v&&(p.isManuallyToggledFoldInAutoFold=!0),p.toggleFold()};l.addEventListener("click",(()=>{m()})),l.addEventListener("keydown",(t=>{"Enter"!=t.key&&" "!=t.key||(" "==t.key&&t.preventDefault(),m())}))}else{const t=x("div","unfoldable-icon");t.innerHTML=F,r.prepend(t)}let T="",b="";for(let t=1;t<=w;t++){const e=x("div","indent-block");r.prepend(e),T=`${c(t)} ${t==w?"":a(t)} var(--indent-line-gap) ${T}`,b=`calc(${c(t)} ${t==w?"":`+ ${a(t)}`} + var(--indent-line-gap)) ${b?`+ ${b}`:""}`}r.style.cssText=`--max-indent-width: ${c(w)}; grid-template-columns: ${T} var(--toggle-fold-btn-width) 1fr`,b=`calc(${b?`${b} + `:""}var(--toggle-fold-btn-width) + var(--anchor-padding-inline))`,d.style.paddingLeft=b,l.append(i),o+=u.length}return l}(O);if(!X)return()=>{};const Y=D?document.querySelector(D):e;if(!Y)throw new Error("Nothing was found to append Neotoc to!");const Z=x("div","widget"),_=x("div","body"),tt=x("div","header"),et=x("h2","title"),lt=x("div","btn-group"),ot="header-btn",nt=x("button",ot),it=x("button",ot),dt=x("button",ot),rt=x("button",ot),st=x("div","top-gradient"),ct=x("div","bottom-gradient");_.style.position="relative",_.ariaLabel=u,_.tabIndex=0,nt.innerHTML=B,it.innerHTML=L,dt.innerHTML=S,rt.innerHTML=E;const at=["Fold one level","Fold all","Unfold one level","Unfold all"];if(nt.ariaLabel=at[0],nt.title=at[0],it.ariaLabel=at[1],it.title=at[1],dt.ariaLabel=at[2],dt.title=at[2],rt.ariaLabel=at[3],rt.title=at[3],C.length){N-I>1?lt.append(nt,dt,it,rt):lt.append(nt,dt),Q()}et.innerHTML=u,tt.append(et,lt),_.append(X,st,ct),Z.append(tt),Z.append(_),Y.append(Z);const ut=+getComputedStyle(_).paddingTop.slice(0,-2)+ +getComputedStyle(_).paddingBottom.slice(0,-2);function pt(){const t=_.scrollTop,e=_.scrollHeight-_.clientHeight;st.style.top=t+"px",ct.style.bottom=-t+"px",st.style.opacity=t>5?"1":"0",ct.style.opacity=t+5<e?"1":"0"}pt(),X.querySelectorAll("a").forEach((t=>{const[e,l]=function(t,e,l){const n=[],i=[],d=l+e;let r=o(t,d);for(;r;)n.push(r),i.push(r.previousSibling.lastChild.previousSibling),r=o(r,d);return[n,i]}(t,"foldable",f);R.set(t,e),U.set(t,l),j.set(t,[...l.reverse(),t].map((t=>({content:p(z[t.getAttribute("href")]),hash:t.hash}))))}));const gt=document.querySelector(P);let mt;const ft={isScrolling:!1,wasTopEndAboveTopBoundary:null,wasBottomEndBelowBottomBoundary:null,timeFrac:0,scrollNeeded:0,motorcycleScrollingStartScrollTop:0,motorcycleScrollingStartTime:0,lastAutoScrollTop:null},ht=function(t){let e=t.parentElement;for(;e;){const{overflow:t}=window.getComputedStyle(e);if(t.split(" ").every((t=>"auto"===t||"scroll"===t)))return e;e=e.parentElement}return document.documentElement}(gt),wt=function(t,e,l,o,n){const i=e("div","light-bar"),d=e("div","light-bar-top"),r=e("div","light"),s=e("div","light-bar-bottom");i.append(d,r,s),i.style.position="absolute",i.style.display="none",t.append(i);let c=[];const a="on-fold",u="enlightend-a";return t=>{if(t.isVisible){const{top:e,height:r,isTopInAFold:p,isBottomInAFold:g,anchors:m}=t;i.style.display="",i.style.top=`${e}px`,i.style.height=`${r}px`,p?l(d,a):o(d,a),g?l(s,a):o(s,a),c.forEach((t=>{m.includes(t)||o(t,u)})),m.forEach((t=>{n(t,u)||l(t,u)})),c=m}else i.style.display="none",c.forEach((t=>o(t,u)))}}(_,x,A,(function(t,e){t.classList.remove(f+e)}),(function(t,e){return t.classList.contains(f+e)}));let Tt=null,vt=null,bt=null,yt=null,qt=null,Ft=null,Bt=null,Lt=null,St=null;const Et=t=>{((Bt!==bt||Lt!==yt)&&Ft!==vt||qt!==Tt)&&t()},xt=t=>{const[e,o]=l(ht,w+1,T),c=[];let a=null,u=null,p=null;const m=()=>{v&&function(t,e,l,o){for(let n=0;n<t.length;n++){const{anchor:d,isFolded:r,toggleFold:s}=t[n],c=!t[n].isManuallyToggledFoldInAutoFold,a=()=>{t[n].isManuallyToggledFoldInAutoFold=!1},u=()=>{c&&s()},p=()=>{r?a():u()};if(e.length){const t=i(d,e,l);e.includes(d)||t?r?(u(),t&&(o.on=!0)):a():p()}else p()}}(C,c,U,k)};for(let t=0;t<O.length;t++){const l=O[t],n=O[t+1],i=l.getBoundingClientRect().top,d=n?n.getBoundingClientRect().top:gt.getBoundingClientRect().bottom,r=d-i;if(null!==e)if(i<e){if(d>e){const t=(Math.min(d,o)-e)/r;a?u=t:a=t,c.push(H[l.id]),null===p&&(p=(e-i)/r)}}else if(i<o){const t=(Math.min(d,o)-i)/r;a?u=t:a=t,c.push(H[l.id]),null===p&&(p=0)}}if(c.length){const l=c[0],i=l.parentElement.getBoundingClientRect(),f=i.top+i.height*p;let h=f+i.height*a;const w=R.get(l),T=n(w,f);let v=n(w,h);if(c.length>1){const t=c[c.length-1],e=t.parentElement.getBoundingClientRect();h=e.top+e.height*u,v=n(R.get(t),h)}const q=_.getBoundingClientRect().top,F=_.scrollTop,B=_.clientTop;qt=null===e?null:o-e;const L=T+F-q-B,S=v+F-q-B;Ft=ht.scrollTop,Bt=Math.round(f+F-q-B),Lt=Math.round(h+F-q-B),Et((()=>{const e=Ft-(vt||Ft),l=e>0?"down":e<0?"up":"down";m(),b&&(function(t,e,l,o,n){const i=t.scrollTop,[s,c]=d(t,o),a=e<s,u=l>c;null===n.wasTopEndAboveTopBoundary&&(n.wasTopEndAboveTopBoundary=a),null===n.wasBottomEndBelowBottomBoundary&&(n.wasBottomEndBelowBottomBoundary=u),a&&!1===n.wasTopEndAboveTopBoundary&&r(t,i-(s-e),!1);u&&!1===n.wasBottomEndBelowBottomBoundary&&r(t,i+l-c,!0)}(_,L,S,y,ft),function(t,e,l,o,n,i,r){const[s,c]=d(e,n);if(r.isScrolling=!(l>s&&o<c)&&(l===s?"up"!=t&&o>c:o!==c||"down"!=t&&l<s),r.isScrolling){r.scrollNeeded="up"==t?l-s:o-c;const n=e.scrollTop,d=e.scrollHeight-e.clientHeight,a=n+r.scrollNeeded;a<0?r.scrollNeeded=-n:a>d&&(r.scrollNeeded=d-n),r.scrollNeeded||(r.isScrolling=!1),r.timeFrac=0,r.motorcycleScrollingStartTime=i,r.motorcycleScrollingStartScrollTop=n}}(l,_,L,S,y,t,ft))})),b&&(!function(t,e,l,o,n){const[i,r]=d(t,o),s=e<i,c=l>r;n.wasTopEndAboveTopBoundary=s,n.wasBottomEndBelowBottomBoundary=c}(_,L,S,y,ft),s(_,t,ft)),wt({height:v-T,top:L,bottom:S,isTopInAFold:Math.round(T)<Math.round(f),isBottomInAFold:Math.round(v)<Math.round(h),anchors:c,time:t,isVisible:!0}),pt();const E=c[0];if(E!==St){const t=j.get(E);t&&g(t)}k.on&&(0==k.startTime&&(k.startTime=t,k.lastTop=L),_.scrollTop=_.scrollTop+(L-k.lastTop),t-k.startTime>k.duration&&(k.on=!1,k.startTime=0),k.lastTop=L),Tt=qt,vt=Ft,bt=Bt,yt=Lt,St=E}else qt=Ft=Bt=Lt=null,Et((()=>{m()})),wt({isVisible:!1,time:t}),pt(),St&&g([]),Tt=vt=bt=yt=St=null;if($.on){0===$.startTime&&($.startTime=t);const e=_.scrollHeight;let l=_.firstElementChild?.getBoundingClientRect().height;"number"==typeof l&&(l=Math.round(l+ut),0!=_.scrollTop&&(_.scrollTop=_.scrollTop-(e-l))),t-$.startTime>$.duration&&($.on=!1,$.startTime=0)}};let At=0;const Mt=t=>{(0===At||t-At>8)&&(xt(t),At=t),mt=window.requestAnimationFrame(Mt)};return mt=window.requestAnimationFrame(Mt),nt.addEventListener("click",(()=>{const[t,e]=W();t?J(!0,t-1):e&&J(!0,e)})),dt.addEventListener("click",(()=>{const[t]=W();t&&(J(!0,t+1),J(!1,t))})),it.addEventListener("click",(()=>J(!0,1))),rt.addEventListener("click",(()=>J(!1,5))),()=>{Z.remove(),window.cancelAnimationFrame(mt)}}}));
//# sourceMappingURL=index.umd.js.map