Add anchors

diff --git a/docs/_includes/components/anchors.html b/docs/_includes/components/anchors.html
new file mode 100644 (file)
index 0000000..c66065c
--- /dev/null
+++ b/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>

diff --git a/docs/_includes/elements/anchor.html b/docs/_includes/elements/anchor.html
index 946f49ca954abd36128f105d740c47b5672f0420..5ab9cf67ec80cae402d5d3322f546a93bce05655 100644 (file)
--- a/docs/_includes/elements/anchor.html
+++ b/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>

diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 67459d3b993a50924253096deefc5678f3e64f08..7df0b12f71f1f13f02f6ad2feb452b3fd8c8932d 100644 (file)
--- a/docs/_javascript/main.js
+++ b/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;
-  // let lastY = 0;
+  window.addEventListener('scroll', function() {
+    const currentY = window.scrollY;
 
-  // window.addEventListener('scroll', function() {
-  //   const currentY = window.scrollY;
-
-  //   if (!ticking) {
-  //     window.requestAnimationFrame(function() {
-  //       upOrDown(lastY, currentY);
-  //       ticking = false;
-  //       lastY = currentY;
-  //     });
-  //   }
+    if (!ticking) {
+      window.requestAnimationFrame(function() {
+        // upOrDown(lastY, currentY);
+        whenScrolling(lastY, currentY);
+        ticking = false;
+        lastY = currentY;
+      });
+    }
 
-  //   ticking = true;
-  // });
+    ticking = true;
+  });
 
 });

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index d4c07c4b44b532a22cc120e53aa9b2e1f2b0bd7b..a2eccb6f4b58957555f13d5b303b3844c6ce4295 100644 (file)
--- a/docs/_layouts/documentation.html
+++ b/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>

diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass
index 38cc1af6bb68f3282ad4cd81182e8a5ce157e17f..53f2fb923843306e1021fd1c7fef0c34566c7bc8 100644 (file)
--- a/docs/_sass/main.sass
+++ b/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)
-      margin-bottom: 0.5em
-    &.is-current
-      a
-        color: $link
-  a
-    color: $text-light
+    &:last-child
+      margin-top: 1em
 
 +touch
   .bd-lead,

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 068c01b2e7765700f4da72272726f81da191e4b0..975aec779a32defbbcf2be54089044ccf2fd8963 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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) {
-  margin-bottom: 0.5em;
+.bd-anchors-reference {
+  height: 1px;
 }
 
-.bd-category-list li.is-current a {
-  color: #3273dc;
+.bd-anchors {
+  padding-top: calc(1.5rem - 1px);
 }
 
-.bd-category-list a {
-  color: #7a7a7a;
+.bd-anchors.is-pinned {
+  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) {

diff --git a/docs/lib/main.js b/docs/lib/main.js
index 7c526ee8aa60f23819396f05382908c9df7fb8ae..5ff21d05c6fdba685bf54ead4d9eb32c325e714a 100644 (file)
--- a/docs/lib/main.js
+++ b/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;
-  // let lastY = 0;
+  window.addEventListener('scroll', function () {
+    var currentY = window.scrollY;
 
-  // window.addEventListener('scroll', function() {
-  //   const currentY = window.scrollY;
-
-  //   if (!ticking) {
-  //     window.requestAnimationFrame(function() {
-  //       upOrDown(lastY, currentY);
-  //       ticking = false;
-  //       lastY = currentY;
-  //     });
-  //   }
+    if (!ticking) {
+      window.requestAnimationFrame(function () {
+        // upOrDown(lastY, currentY);
+        whenScrolling(lastY, currentY);
+        ticking = false;
+        lastY = currentY;
+      });
+    }
 
-  //   ticking = true;
-  // });
+    ticking = true;
+  });
 });
\ No newline at end of file