diff --git a/sipa/static/css/tocbot.css b/sipa/static/css/tocbot.css new file mode 100644 index 00000000..41c54b69 --- /dev/null +++ b/sipa/static/css/tocbot.css @@ -0,0 +1 @@ +.toc{overflow-y:auto}.toc>.toc-list{overflow:hidden;position:relative}.toc>.toc-list li{list-style:none}.js-toc{overflow-y:hidden}.toc-list{margin:0;padding-left:10px}a.toc-link{color:currentColor;height:100%}.is-collapsible{max-height:1000px;overflow:hidden;transition:all 300ms ease-in-out}.is-collapsed{max-height:0}.is-position-fixed{position:fixed !important;top:0}.is-active-link{font-weight:700}.toc-link::before{background-color:#eee;content:" ";display:inline-block;height:inherit;left:0;margin-top:-1px;position:absolute;width:2px}.is-active-link::before{background-color:#54bc4b}/*# sourceMappingURL=tocbot.css.map */ diff --git a/sipa/static/css/usersuite_index.css b/sipa/static/css/usersuite_index.css index 4604b648..8c691889 100644 --- a/sipa/static/css/usersuite_index.css +++ b/sipa/static/css/usersuite_index.css @@ -1,9 +1,10 @@ -#usersuite-sidebar-nav .nav>li>a { - font-size: 20px; +.toc .node-name--H2 { + font-size: 1.5rem; } -#usersuite-sidebar-nav .nav .nav>li>a { - font-size: 19px; +.toc .node-name--H3 { + font-size: 1.25rem; } + h2,h3 { padding-top: 70px; margin-top: -50px; diff --git a/sipa/static/js/tocbot.min.js b/sipa/static/js/tocbot.min.js new file mode 100644 index 00000000..34d30430 --- /dev/null +++ b/sipa/static/js/tocbot.min.js @@ -0,0 +1 @@ +(()=>{var e={163:e=>{e.exports=function(e){var t,n=[].forEach,l=[].some,o=document.body,r=!0,i=" ";function s(t,l){var o,r,c,d=l.appendChild((o=t,r=document.createElement("li"),c=document.createElement("a"),e.listItemClass&&r.setAttribute("class",e.listItemClass),e.onClick&&(c.onclick=e.onClick),e.includeTitleTags&&c.setAttribute("title",o.textContent),e.includeHtml&&o.childNodes.length?n.call(o.childNodes,(function(e){c.appendChild(e.cloneNode(!0))})):c.textContent=o.textContent,c.setAttribute("href",e.basePath+"#"+o.id),c.setAttribute("class",e.linkClass+i+"node-name--"+o.nodeName+i+e.extraLinkClasses),r.appendChild(c),r));if(t.children.length){var u=a(t.isCollapsed);t.children.forEach((function(e){s(e,u)})),d.appendChild(u)}}function a(t){var n=e.orderedList?"ol":"ul",l=document.createElement(n),o=e.listClass+i+e.extraListClasses;return t&&(o=(o=o+i+e.collapsibleClass)+i+e.isCollapsedClass),l.setAttribute("class",o),l}function c(t){var n=0;return null!==t&&(n=t.offsetTop,e.hasInnerContainers&&(n+=c(t.offsetParent))),n}function d(t){return t&&-1!==t.className.indexOf(e.collapsibleClass)&&-1!==t.className.indexOf(e.isCollapsedClass)?(t.className=t.className.split(i+e.isCollapsedClass).join(""),d(t.parentNode.parentNode)):t}return{enableTocAnimation:function(){r=!0},disableTocAnimation:function(t){var n=t.target||t.srcElement;"string"==typeof n.className&&-1!==n.className.indexOf(e.linkClass)&&(r=!1)},render:function(e,n){var l=a(!1);if(n.forEach((function(e){s(e,l)})),null!==(t=e||t))return t.firstChild&&t.removeChild(t.firstChild),0===n.length?t:t.appendChild(l)},updateToc:function(s){var a;a=e.scrollContainer&&document.querySelector(e.scrollContainer)?document.querySelector(e.scrollContainer).scrollTop:document.documentElement.scrollTop||o.scrollTop,e.positionFixedSelector&&function(){var n;n=e.scrollContainer&&document.querySelector(e.scrollContainer)?document.querySelector(e.scrollContainer).scrollTop:document.documentElement.scrollTop||o.scrollTop;var l=document.querySelector(e.positionFixedSelector);"auto"===e.fixedSidebarOffset&&(e.fixedSidebarOffset=t.offsetTop),n>e.fixedSidebarOffset?-1===l.className.indexOf(e.positionFixedClass)&&(l.className+=i+e.positionFixedClass):l.className=l.className.split(i+e.positionFixedClass).join("")}();var u,f=s;if(r&&null!==t&&f.length>0){l.call(f,(function(t,n){return c(t)>a+e.headingsOffset+10?(u=f[0===n?n:n-1],!0):n===f.length-1?(u=f[f.length-1],!0):void 0}));var m=t.querySelector("."+e.activeLinkClass),h=t.querySelector("."+e.linkClass+".node-name--"+u.nodeName+'[href="'+e.basePath+"#"+u.id.replace(/([ #;&,.+*~':"!^$[\]()=>|/\\@])/g,"\\$1")+'"]');if(m===h)return;var p=t.querySelectorAll("."+e.linkClass);n.call(p,(function(t){t.className=t.className.split(i+e.activeLinkClass).join("")}));var C=t.querySelectorAll("."+e.listItemClass);n.call(C,(function(t){t.className=t.className.split(i+e.activeListItemClass).join("")})),h&&-1===h.className.indexOf(e.activeLinkClass)&&(h.className+=i+e.activeLinkClass);var g=h&&h.parentNode;g&&-1===g.className.indexOf(e.activeListItemClass)&&(g.className+=i+e.activeListItemClass);var v=t.querySelectorAll("."+e.listClass+"."+e.collapsibleClass);n.call(v,(function(t){-1===t.className.indexOf(e.isCollapsedClass)&&(t.className+=i+e.isCollapsedClass)})),h&&h.nextSibling&&-1!==h.nextSibling.className.indexOf(e.isCollapsedClass)&&(h.nextSibling.className=h.nextSibling.className.split(i+e.isCollapsedClass).join("")),d(h&&h.parentNode.parentNode)}}}}},547:e=>{e.exports={tocSelector:".js-toc",contentSelector:".js-toc-content",headingSelector:"h1, h2, h3",ignoreSelector:".js-toc-ignore",hasInnerContainers:!1,linkClass:"toc-link",extraLinkClasses:"",activeLinkClass:"is-active-link",listClass:"toc-list",extraListClasses:"",isCollapsedClass:"is-collapsed",collapsibleClass:"is-collapsible",listItemClass:"toc-list-item",activeListItemClass:"is-active-li",collapseDepth:0,scrollSmooth:!0,scrollSmoothDuration:420,scrollSmoothOffset:0,scrollEndCallback:function(e){},headingsOffset:1,throttleTimeout:50,positionFixedSelector:null,positionFixedClass:"is-position-fixed",fixedSidebarOffset:"auto",includeHtml:!1,includeTitleTags:!1,onClick:function(e){},orderedList:!0,scrollContainer:null,skipRendering:!1,headingLabelCallback:!1,ignoreHiddenElements:!1,headingObjectCallback:null,basePath:"",disableTocScrollSync:!1,tocScrollOffset:0}},971:(e,t,n)=>{var l,o,r;o=[],void 0===(r="function"==typeof(l=function(e){"use strict";var t,l,o,r=n(547),i={},s={},a=n(163),c=n(279),d=n(938),u=!!(e&&e.document&&e.document.querySelector&&e.addEventListener);if("undefined"!=typeof window||u){var f=Object.prototype.hasOwnProperty;return s.destroy=function(){var e=h(i);null!==e&&(i.skipRendering||e&&(e.innerHTML=""),i.scrollContainer&&document.querySelector(i.scrollContainer)?(document.querySelector(i.scrollContainer).removeEventListener("scroll",this._scrollListener,!1),document.querySelector(i.scrollContainer).removeEventListener("resize",this._scrollListener,!1),t&&document.querySelector(i.scrollContainer).removeEventListener("click",this._clickListener,!1)):(document.removeEventListener("scroll",this._scrollListener,!1),document.removeEventListener("resize",this._scrollListener,!1),t&&document.removeEventListener("click",this._clickListener,!1)))},s.init=function(e){if(u){i=function(){for(var e={},t=0;t{e.exports=function(e){var t=[].reduce;function n(e){return e[e.length-1]}function l(e){return+e.nodeName.toUpperCase().replace("H","")}function o(t){if(!function(e){try{return e instanceof window.HTMLElement||e instanceof window.parent.HTMLElement}catch(t){return e instanceof window.HTMLElement}}(t))return t;if(e.ignoreHiddenElements&&(!t.offsetHeight||!t.offsetParent))return null;const n=t.getAttribute("data-heading-label")||(e.headingLabelCallback?String(e.headingLabelCallback(t.textContent)):t.textContent.trim());var o={id:t.id,children:[],nodeName:t.nodeName,headingLevel:l(t),textContent:n};return e.includeHtml&&(o.childNodes=t.childNodes),e.headingObjectCallback?e.headingObjectCallback(o,t):o}return{nestHeadingsArray:function(l){return t.call(l,(function(t,l){var r=o(l);return r&&function(t,l){for(var r=o(t),i=r.headingLevel,s=l,a=n(s),c=i-(a?a.headingLevel:0);c>0&&(!(a=n(s))||i!==a.headingLevel);)a&&void 0!==a.children&&(s=a.children),c--;i>=e.collapseDepth&&(r.isCollapsed=!0),s.push(r)}(r,t.nest),t}),{nest:[]})},selectHeadings:function(t,n){var l=n;e.ignoreSelector&&(l=n.split(",").map((function(t){return t.trim()+":not("+e.ignoreSelector+")"})));try{return t.querySelectorAll(l)}catch(e){return console.warn("Headers not found with selector: "+l),null}}}}},374:(e,t)=>{t.initSmoothScrolling=function(e){var t=e.duration,n=e.offset,l=location.hash?o(location.href):location.href;function o(e){return e.slice(0,e.lastIndexOf("#"))}document.body.addEventListener("click",(function(r){var i;"a"!==(i=r.target).tagName.toLowerCase()||!(i.hash.length>0||"#"===i.href.charAt(i.href.length-1))||o(i.href)!==l&&o(i.href)+"#"!==l||r.target.className.indexOf("no-smooth-scroll")>-1||"#"===r.target.href.charAt(r.target.href.length-2)&&"!"===r.target.href.charAt(r.target.href.length-1)||-1===r.target.className.indexOf(e.linkClass)||function(e,t){var n,l,o=window.pageYOffset,r={duration:t.duration,offset:t.offset||0,callback:t.callback,easing:t.easing||function(e,t,n,l){return(e/=l/2)<1?n/2*e*e+t:-n/2*(--e*(e-2)-1)+t}},i=document.querySelector('[id="'+decodeURI(e).split("#").join("")+'"]')||document.querySelector('[id="'+e.split("#").join("")+'"]'),s="string"==typeof e?r.offset+(e?i&&i.getBoundingClientRect().top||0:-(document.documentElement.scrollTop||document.body.scrollTop)):e,a="function"==typeof r.duration?r.duration(s):r.duration;function c(e){l=e-n,window.scrollTo(0,r.easing(l,o,s,a)),l{e.exports=function(e){var t=e.tocElement||document.querySelector(e.tocSelector);if(t&&t.scrollHeight>t.clientHeight){var n=t.querySelector("."+e.activeListItemClass);n&&(t.scrollTop=n.offsetTop-e.tocScrollOffset)}}}},t={};function n(l){var o=t[l];if(void 0!==o)return o.exports;var r=t[l]={exports:{}};return e[l](r,r.exports,n),r.exports}n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n(971)})(); \ No newline at end of file diff --git a/sipa/static/js/usersuite_index.js b/sipa/static/js/usersuite_index.js index 5e2810e0..d0d194fe 100644 --- a/sipa/static/js/usersuite_index.js +++ b/sipa/static/js/usersuite_index.js @@ -1,14 +1,13 @@ -document.addEventListener("DOMContentLoaded", () => { - const selector = '#usersuite-sidebar-nav'; - const $toc = $(selector); - const $parent = $toc.parent(); - const offset = 60; - const $body = $('body'); - Toc.init($toc); - $body.scrollspy({target: selector, offset: offset}); - $toc.affix({ - offset: {top: () => $parent.offset().top - offset} - }); - // Handle window resize - $(window).resize(() => $toc.affix('checkPosition')); +tocbot.init({ + // Where to render the table of contents. + tocSelector: '.js-toc', + // Where to grab the headings to build the table of contents. + contentSelector: '.js-toc-content', + // Which headings to grab inside of the contentSelector element. + headingSelector: 'h2, h3', + // For headings inside relative or absolute positioned containers within content. + hasInnerContainers: true, + + positionFixedSelector: '#usersuite-sidebar-nav', + extraLinkClasses: 'text-decoration-none' }); diff --git a/sipa/templates/base.html b/sipa/templates/base.html index 21249003..353ace3c 100644 --- a/sipa/templates/base.html +++ b/sipa/templates/base.html @@ -68,7 +68,7 @@ - +