jekyll-theme-open-project 1.2.5 → 1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f554f580dec2539c21dafb88d79d1b8e72a5a8c2ca86aca931d0234420a050ff
-  data.tar.gz: abcd76ed84e0ecc88ed9b0f1ca3d42c08b720dff3dbd6acddb36b63b4ab7cee5
+  metadata.gz: 82039c5e0b7470495d92c3be14a95d13cfce792e2870a4f8a8750d2c5420352e
+  data.tar.gz: 9bc073983409ad7f531b9a98cf560615fddb746a3274ec89edfede271350dc90
 SHA512:
-  metadata.gz: ec98188faff28d0c290e4a6a0c0b2061599062bc8ceab89b5fea78afb9448e67540823efd3fef98415acc29d24c054457dc00027d96727330867a3b03e25e41c
-  data.tar.gz: 89f5a8b43ba97b7abba070275f4c5d575892cfa6cf581b40a0adc0d8ebc8d12881b985ed22384938daa7b0fe28a6f69752c7ce64c422c70e45dea384f47aa629
+  metadata.gz: 9e0bb94398bfa1112d58c8df0ee5b4974253cd3e3bc3e64fc192810244a65319571391c71a7b1c8ca1e24f147f8cc1f1d00bb6e43a2ba101b601923c5d0e6219
+  data.tar.gz: e04958a143f4bff3bdd185fd052a656f05380e8fb4c83aca8277c6c40406ed65a8f27392cfc201d5365c95d6d626a267db93bacedc899a604ff6b0c7fabc39f7

data/_includes/_nav-item.html

@@ -11,7 +11,8 @@
 {% endif %}
 
 <li class="item {% if selected %}selected{% endif %}">
-  <div class="item-title">
+  <div class="item-title"
+      title="{{ include.item.title }}{% if include.item.description %} ({{ include.item.description }}){% endif %}">
     {% if include.item.path == null or selected == true %}
       <span>
         {{ include.item.title }}

data/_layouts/docs-base.html

@@ -83,3 +83,6 @@ layout: default
 
   </article>
 </section>
+
+<script src="{{ "/assets/js/anchor-scroll.js" | relative_url }}"></script>
+<script src="{{ "/assets/js/adoc-toc.js" | relative_url }}"></script>

data/_layouts/product.html

@@ -4,3 +4,6 @@ html-class: docs-page
 ---
 
 {% include item-doc-page.html items=site.software item_type='software' %}
+
+<script src="{{ "/assets/js/anchor-scroll.js" | relative_url }}"></script>
+<script src="{{ "/assets/js/adoc-toc.js" | relative_url }}"></script>

data/_sass/open-project-mixins.scss

@@ -145,6 +145,15 @@
     padding: .3em .6em;
   }
 
+  h1, h2, h3, h4, h5, h6 {
+    &.highlighted {
+      &:before {
+        content: "→";
+        margin-right: .5em;
+      }
+    }
+  }
+
   // Used for tip block labels
   .admonitionblock {
     overflow-x: scroll;
@@ -319,7 +328,7 @@
 
       // New style: Nav with nested items
       > ul.nav-items {
-        $sidePadding: 2em;
+        $sidePadding: 1em;
 
         @include reset-list;
 
@@ -328,7 +337,7 @@
         bottom: 0;
         right: 0;
 
-        padding: 0 $sidePadding;
+        padding: .75em $sidePadding;
 
         z-index: 5;
         background: #f7f7f7;
@@ -350,7 +359,19 @@
           font-size: 15px;
           font-weight: normal;
 
+          > .item-title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
           &.selected {
+            > .item-title {
+              background-color: #f0f0f0;
+              margin-left: -.5em;
+              padding-left: .5em;
+            }
+
             span {
               font-weight: bold;
               color: $primary-dark-color;
@@ -362,13 +383,46 @@
         > li.item {
           > .item-title {
             font-size: 20px;
-            font-weight: bold;
             margin: 0;
             line-height: 1.8;
           }
           > ul {
             @include reset-list;
+
+            margin-left: .75em;
+            padding-left: 0;
             line-height: 2;
+            margin-bottom: .5em;
+          }
+
+          ul {
+            margin-left: 1.25em;
+            padding-left: 0;
+          }
+
+          ul.in-page-toc {
+            padding: .25em .25em .25em 1em;
+            background-color: #f0f0f0;
+
+            margin-left: .75em;
+
+            &, ul {
+              list-style: none;
+            }
+            ul {
+              padding: 0;
+            }
+            li.item {
+              font-size: 13px;
+              line-height: 1.5;
+
+              &.highlighted > .item-title {
+                a:link, a:visited {
+                  color: $primary-dark-color;
+                  font-weight: bold;
+                }
+              }
+            }
           }
         }
       }
@@ -517,9 +571,6 @@
 
     .docs-nav {
       .external-links {
-        margin-top: 1em;
-        margin-bottom: .5em;
-
         > .nav-items > .item {
           margin-bottom: 0;
           margin-right: -$external-links-side-margin;

data/assets/js/adoc-toc.js

@@ -0,0 +1,124 @@
+(function () {
+
+  const HEADER_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+  const IN_PAGE_NAV_HTML_CLASS = 'in-page-toc';
+
+  /* Given a container of AsciiDoc .sectN elementss,
+   * returns an object containing navigation structure like this:
+   * { items: [ { title: "Some title", path: "./#some-title", items: [ ...subitems ] }, ... }
+   * Works recursively through nested sections.
+   */
+  function getAdocTocItems(containerEl, sectLvl) {
+    sectLvl = sectLvl || 1;
+    var items = [];
+
+    const topLevelSections = Array.from(containerEl.children).filter((el) => {
+      return el.matches(`div.sect${sectLvl}`);
+    });
+
+    for (let sectionEl of topLevelSections) {
+      const headerEl = Array.from(sectionEl.children).filter((el) => {
+        for (let hTagName of HEADER_TAGS) {
+          if (el.matches(hTagName)) { return true; }
+        }
+        return false;
+      })[0];
+      const headerId = headerEl.getAttribute('id');
+
+      var subItems = [];
+      const sectionBody = sectionEl.querySelector('div.sectionbody');
+      if (sectionBody) {
+        subItems = getAdocTocItems(sectionBody, sectLvl + 1);
+      } else {
+        subItems = getAdocTocItems(sectionEl, sectLvl + 1);
+      }
+
+      items.push({
+        title: headerEl.innerText,
+        description: headerEl.innerText,
+        path: `./#${headerId}`,
+        items: subItems,
+
+        id: headerId,
+      });
+    }
+
+    return items;
+  }
+
+  function highlightSelected(headerId, itemPath) {
+    for (const itemEl of document.querySelectorAll(`.${IN_PAGE_NAV_HTML_CLASS} li`)) {
+      const link = (itemEl.firstChild || {}).firstChild;
+      if (link && link.getAttribute('href') == itemPath) {
+        itemEl.classList.add('highlighted');
+      } else {
+        itemEl.classList.remove('highlighted');
+      }
+    }
+    for (const hTag of HEADER_TAGS) {
+      for (const headerEl of document.querySelectorAll(hTag)) {
+        headerEl.classList.remove('highlighted');
+      }
+    }
+    const selectedHeaderEl = document.getElementById(headerId);
+    selectedHeaderEl.classList.add('highlighted');
+  }
+
+  /* Given a list of navigation items, returns an <ul> containing items recursively
+   * with CSS classes and layout consistent with docs navigation markup expected by the theme.
+   */
+  function formatSubItems(tocItems) {
+    const subItemContainer = document.createElement('ul');
+
+    subItemContainer.classList.add('nav-items');
+    subItemContainer.classList.add('subitems');
+
+    for (let item of tocItems) {
+      let itemEl, itemTitleEl, itemLinkEl;
+
+      itemEl = document.createElement('li');
+      itemEl.classList.add('item');
+
+      itemTitleEl = document.createElement('div');
+      itemTitleEl.classList.add('item-title');
+
+      itemLinkEl = document.createElement('a');
+      itemLinkEl.setAttribute('href', item.path);
+      itemLinkEl.setAttribute('title', item.title);
+      itemLinkEl.innerText = item.title;
+
+      itemTitleEl.appendChild(itemLinkEl);
+      itemEl.appendChild(itemTitleEl);
+
+      if (item.items.length > 0) {
+        itemEl.appendChild(formatSubItems(item.items));
+      }
+
+      itemLinkEl.addEventListener('click', () => highlightSelected(item.id, item.path));
+
+      subItemContainer.appendChild(itemEl);
+    }
+
+    return subItemContainer;
+  }
+
+  const articleBody = document.querySelector('main section article .body');
+  const selectedItem = document.querySelector('main .docs-nav .nav-items .item.selected');
+
+  if (articleBody && selectedItem) {
+    const items = getAdocTocItems(articleBody);
+
+    if (items.length > 0) {
+      const ulEl = formatSubItems(items);
+      ulEl.classList.add(IN_PAGE_NAV_HTML_CLASS);
+
+      const existingSubItems = selectedItem.querySelector('ul.nav-items');
+      if (existingSubItems) {
+        selectedItem.insertBefore(ulEl, existingSubItems);
+      } else {
+        selectedItem.appendChild(ulEl);
+      }
+    }
+  }
+
+}());

data/assets/js/anchor-scroll.js

@@ -0,0 +1,81 @@
+/* Credit: Ian Clark https://stackoverflow.com/a/13067009/247441 */
+
+(function(document, history, location) {
+  var HISTORY_SUPPORT = !!(history && history.pushState);
+
+  var anchorScrolls = {
+    ANCHOR_REGEX: /^#[^ ]+$/,
+    OFFSET_HEIGHT_PX: 150, // Roughly Metanorma’s header
+
+    /**
+     * Establish events, and fix initial scroll position if a hash is provided.
+     */
+    init: function() {
+      this.scrollToCurrent();
+      window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
+      document.body.addEventListener('click', this.delegateAnchors.bind(this));
+    },
+
+    /**
+     * Return the offset amount to deduct from the normal scroll position.
+     * Modify as appropriate to allow for dynamic calculations
+     */
+    getFixedOffset: function() {
+      return this.OFFSET_HEIGHT_PX;
+    },
+
+    /**
+     * If the provided href is an anchor which resolves to an element on the
+     * page, scroll to it.
+     * @param  {String} href
+     * @return {Boolean} - Was the href an anchor.
+     */
+    scrollIfAnchor: function(href, pushToHistory) {
+      var match, rect, anchorOffset;
+
+      if(!this.ANCHOR_REGEX.test(href)) {
+        return false;
+      }
+
+      match = document.getElementById(href.slice(1));
+
+      if(match) {
+        rect = match.getBoundingClientRect();
+        anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
+        window.scrollTo(window.pageXOffset, anchorOffset);
+
+        // Add the state to history as-per normal anchor links
+        if(HISTORY_SUPPORT && pushToHistory) {
+          history.pushState({}, document.title, location.pathname + href);
+        }
+      }
+
+      return !!match;
+    },
+
+    /**
+     * Attempt to scroll to the current location's hash.
+     */
+    scrollToCurrent: function() {
+      this.scrollIfAnchor(window.location.hash);
+    },
+
+    /**
+     * If the click event's target was an anchor, fix the scroll position.
+     */
+    delegateAnchors: function(e) {
+      var elem = e.target;
+
+      if(
+        elem.nodeName === 'A' &&
+        this.scrollIfAnchor(elem.getAttribute('href'), true)
+      ) {
+        e.preventDefault();
+      }
+    }
+  };
+
+  window.addEventListener(
+    'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
+  );
+})(window.document, window.history, window.location);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-open-project
 version: !ruby/object:Gem::Version
-  version: 1.2.5
+  version: '1.3'
 platform: ruby
 authors:
 - Ribose Inc.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-31 00:00:00.000000000 Z
+date: 2019-02-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -72,14 +72,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.2.5
+        version: '1.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.2.5
+        version: '1.3'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -208,6 +208,8 @@ files:
 - assets/fa/fa-solid.js
 - assets/fa/fontawesome.js
 - assets/img/external-link.svg
+- assets/js/adoc-toc.js
+- assets/js/anchor-scroll.js
 - assets/js/headroom.min.js
 - assets/js/opf.js
 homepage: https://github.com/riboseinc/jekyll-theme-open-project/