Add anchors

docs/_includes/components/anchors.html

@@ -0,0 +1,8 @@
+<div id="anchorsReference" class="bd-anchors-reference"></div>
+<nav id="anchors" class="bd-anchors">
+  <p class="bd-anchors-title">
+    On this page
+  </p>
+
+  <ul class="bd-anchors-list"></ul>
+</nav>

docs/_includes/elements/anchor.html

@@ -1,7 +1,9 @@
 <hr class="hr" style="margin-bottom: 0;">
 
 <h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
-  {{ include.name }}
+  <span class="bd-anchor-name">
+    {{ include.name }}
+  </span>
   <a class="bd-anchor-link" href="#{{ include.name | slugify }}">
     #
   </a>

docs/_javascript/main.js

@@ -5,26 +5,6 @@ document.addEventListener('DOMContentLoaded', () => {
   const cookieBookModalName = 'bulma_closed_book_modal';
   const cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
 
-  // Book modal
-
-  // const $bookModal = document.getElementById('bookModal');
-  // const $bookModalCloseButtons = getAll('.bd-book-modal-close');
-
-  // if (!cookieBookModal) {
-  //   setTimeout(() => {
-  //     openModal('bookModal');
-  //   }, 5000);
-  // }
-
-  // if ($bookModalCloseButtons.length > 0) {
-  //   $bookModalCloseButtons.forEach($el => {
-  //     $el.addEventListener('click', event => {
-  //       event.stopPropagation();
-  //       Cookies.set(cookieBookModalName, true, { expires: 30 });
-  //     });
-  //   });
-  // }
-
   // Sidebar links
 
   const $categories = getAll('#categories .bd-category');
@@ -49,6 +29,56 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+  const anchors_ref_el = document.getElementById('anchorsReference');
+  const anchors_el = document.getElementById('anchors');
+  const anchor_links_el = getAll('.bd-anchor-link');
+
+  if (anchors_el && anchor_links_el.length > 0) {
+    const anchors_el_list = anchors_el.querySelector('.bd-anchors-list');
+
+    anchor_links_el.forEach(el => {
+      const link_target = el.getAttribute('href');
+      const link_text = el.previousElementSibling.innerText;
+
+      if (link_text != '') {
+        const item_el = createAnchorLink(link_text, link_target);
+        anchors_el_list.appendChild(item_el);
+      }
+    });
+
+    const back_to_top_el = createAnchorLink('Back to top', '');
+    back_to_top_el.onclick = scrollToTop;
+    anchors_el_list.appendChild(back_to_top_el);
+  }
+
+  function scrollToTop() {
+    window.scrollTo(0, 0);
+  }
+
+  function createAnchorLink(text, target) {
+    const item_el = document.createElement('li');
+    const link_el = document.createElement('a');
+    const text_node = document.createTextNode(text);
+
+    if (target) {
+      link_el.setAttribute('href', target);
+    }
+
+    link_el.appendChild(text_node);
+    item_el.appendChild(link_el);
+
+    return item_el;
+  }
+
+  function closeCategories(current_el) {
+    $categories.forEach(el => {
+      if (current_el == el) {
+        return;
+      }
+      el.classList.remove('is-active');
+    });
+  }
+
   // Meta links
 
   const $metalinks = getAll('#meta a');
@@ -220,6 +250,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Scrolling
 
+  const html_el = document.documentElement;
   const navbarEl = document.getElementById('navbar');
   const navbarBurger = document.getElementById('navbarBurger');
   const specialShadow = document.getElementById('specialShadow');
@@ -241,6 +272,18 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  function whenScrolling(lastY, currentY) {
+    if (anchors_ref_el) {
+      const bounds = anchors_ref_el.getBoundingClientRect();
+
+      if (bounds.top < 1) {
+        anchors_el.classList.add('is-pinned');
+      } else {
+        anchors_el.classList.remove('is-pinned');
+      }
+    }
+  }
+
   function upOrDown(lastY, currentY) {
     if (currentY >= lastY) {
       return goingDown(currentY);
@@ -310,23 +353,22 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  // translateHeader(window.scrollY, false);
+  let ticking = false;
+  let lastY = 0;
 
-  // let ticking = false;
+  window.addEventListener('scroll', function() {
-  // let lastY = 0;
+    const currentY = window.scrollY;
 
-  // window.addEventListener('scroll', function() {
+    if (!ticking) {
-  //   const currentY = window.scrollY;
+      window.requestAnimationFrame(function() {
+        // upOrDown(lastY, currentY);
+        whenScrolling(lastY, currentY);
+        ticking = false;
+        lastY = currentY;
+      });
+    }
 
-  //   if (!ticking) {
+    ticking = true;
-  //     window.requestAnimationFrame(function() {
+  });
-  //       upOrDown(lastY, currentY);
-  //       ticking = false;
-  //       lastY = currentY;
-  //     });
-  //   }
-
-  //   ticking = true;
-  // });
 
 });

docs/_layouts/documentation.html

@@ -85,6 +85,7 @@ route: documentation
       <aside class="bd-side">
         {% unless page.hide_categories %}
           {% include components/categories.html %}
+          {% include components/anchors.html %}
         {% endunless %}
       </aside>
     </div>

docs/_sass/main.sass

@@ -77,6 +77,19 @@
   right: 0
   top: 0
 
+%bd-list
+  font-size: 0.875rem
+  li
+    &:not(:last-child)
+      margin-bottom: 0.5em
+    &.is-current
+      a
+        color: $link
+  a
+    color: $text-light
+    &:hover
+      color: $link
+
 .bd-category
   a
     &:hover
@@ -110,17 +123,30 @@
   position: relative
 
 .bd-category-list
+  @extend %bd-list
   display: none
-  font-size: 0.875rem
   padding: 0.5rem
+
+.bd-anchors-reference
+  height: 1px
+
+.bd-anchors
+  padding-top: calc(1.5rem - 1px)
+  &.is-pinned
+    position: fixed
+    top: 0
+
+.bd-anchors-title
+  color: $grey-light
+  font-size: 0.875rem
+  font-weight: $weight-semibold
+  margin-bottom: 0.5rem
+
+.bd-anchors-list
+  @extend %bd-list
   li
-    &:not(:last-child)
+    &:last-child
-      margin-bottom: 0.5em
+      margin-top: 1em
-    &.is-current
-      a
-        color: $link
-  a
-    color: $text-light
 
 +touch
   .bd-lead,

docs/css/bulma-docs.css

@@ -9604,6 +9604,26 @@ label.panel-block:hover {
   top: 0;
 }
 
+.bd-category-list, .bd-anchors-list {
+  font-size: 0.875rem;
+}
+
+.bd-category-list li:not(:last-child), .bd-anchors-list li:not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
+.bd-category-list li.is-current a, .bd-anchors-list li.is-current a {
+  color: #3273dc;
+}
+
+.bd-category-list a, .bd-anchors-list a {
+  color: #7a7a7a;
+}
+
+.bd-category-list a:hover, .bd-anchors-list a:hover {
+  color: #3273dc;
+}
+
 .bd-category a:hover {
   color: #3273dc;
 }
@@ -9645,20 +9665,31 @@ label.panel-block:hover {
 
 .bd-category-list {
   display: none;
-  font-size: 0.875rem;
   padding: 0.5rem;
 }
 
-.bd-category-list li:not(:last-child) {
+.bd-anchors-reference {
-  margin-bottom: 0.5em;
+  height: 1px;
 }
 
-.bd-category-list li.is-current a {
+.bd-anchors {
-  color: #3273dc;
+  padding-top: calc(1.5rem - 1px);
 }
 
-.bd-category-list a {
+.bd-anchors.is-pinned {
-  color: #7a7a7a;
+  position: fixed;
+  top: 0;
+}
+
+.bd-anchors-title {
+  color: #b5b5b5;
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.bd-anchors-list li:last-child {
+  margin-top: 1em;
 }
 
 @media screen and (max-width: 1087px) {

docs/lib/main.js

@@ -7,26 +7,6 @@ document.addEventListener('DOMContentLoaded', function () {
   var cookieBookModalName = 'bulma_closed_book_modal';
   var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
 
-  // Book modal
-
-  // const $bookModal = document.getElementById('bookModal');
-  // const $bookModalCloseButtons = getAll('.bd-book-modal-close');
-
-  // if (!cookieBookModal) {
-  //   setTimeout(() => {
-  //     openModal('bookModal');
-  //   }, 5000);
-  // }
-
-  // if ($bookModalCloseButtons.length > 0) {
-  //   $bookModalCloseButtons.forEach($el => {
-  //     $el.addEventListener('click', event => {
-  //       event.stopPropagation();
-  //       Cookies.set(cookieBookModalName, true, { expires: 30 });
-  //     });
-  //   });
-  // }
-
   // Sidebar links
 
   var $categories = getAll('#categories .bd-category');
@@ -51,6 +31,56 @@ document.addEventListener('DOMContentLoaded', function () {
     });
   }
 
+  var anchors_ref_el = document.getElementById('anchorsReference');
+  var anchors_el = document.getElementById('anchors');
+  var anchor_links_el = getAll('.bd-anchor-link');
+
+  if (anchors_el && anchor_links_el.length > 0) {
+    var anchors_el_list = anchors_el.querySelector('.bd-anchors-list');
+
+    anchor_links_el.forEach(function (el) {
+      var link_target = el.getAttribute('href');
+      var link_text = el.previousElementSibling.innerText;
+
+      if (link_text != '') {
+        var item_el = createAnchorLink(link_text, link_target);
+        anchors_el_list.appendChild(item_el);
+      }
+    });
+
+    var back_to_top_el = createAnchorLink('Back to top', '');
+    back_to_top_el.onclick = scrollToTop;
+    anchors_el_list.appendChild(back_to_top_el);
+  }
+
+  function scrollToTop() {
+    window.scrollTo(0, 0);
+  }
+
+  function createAnchorLink(text, target) {
+    var item_el = document.createElement('li');
+    var link_el = document.createElement('a');
+    var text_node = document.createTextNode(text);
+
+    if (target) {
+      link_el.setAttribute('href', target);
+    }
+
+    link_el.appendChild(text_node);
+    item_el.appendChild(link_el);
+
+    return item_el;
+  }
+
+  function closeCategories(current_el) {
+    $categories.forEach(function (el) {
+      if (current_el == el) {
+        return;
+      }
+      el.classList.remove('is-active');
+    });
+  }
+
   // Meta links
 
   var $metalinks = getAll('#meta a');
@@ -222,6 +252,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Scrolling
 
+  var html_el = document.documentElement;
   var navbarEl = document.getElementById('navbar');
   var navbarBurger = document.getElementById('navbarBurger');
   var specialShadow = document.getElementById('specialShadow');
@@ -243,6 +274,18 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   });
 
+  function whenScrolling(lastY, currentY) {
+    if (anchors_ref_el) {
+      var bounds = anchors_ref_el.getBoundingClientRect();
+
+      if (bounds.top < 1) {
+        anchors_el.classList.add('is-pinned');
+      } else {
+        anchors_el.classList.remove('is-pinned');
+      }
+    }
+  }
+
   function upOrDown(lastY, currentY) {
     if (currentY >= lastY) {
       return goingDown(currentY);
@@ -310,22 +353,21 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
-  // translateHeader(window.scrollY, false);
+  var ticking = false;
+  var lastY = 0;
 
-  // let ticking = false;
+  window.addEventListener('scroll', function () {
-  // let lastY = 0;
+    var currentY = window.scrollY;
 
-  // window.addEventListener('scroll', function() {
+    if (!ticking) {
-  //   const currentY = window.scrollY;
+      window.requestAnimationFrame(function () {
+        // upOrDown(lastY, currentY);
+        whenScrolling(lastY, currentY);
+        ticking = false;
+        lastY = currentY;
+      });
+    }
 
-  //   if (!ticking) {
+    ticking = true;
-  //     window.requestAnimationFrame(function() {
+  });
-  //       upOrDown(lastY, currentY);
-  //       ticking = false;
-  //       lastY = currentY;
-  //     });
-  //   }
-
-  //   ticking = true;
-  // });
 });