jekyll-wikibonsai 0.0.9 → 0.0.10

data/assets/js/graph.js

@@ -0,0 +1,64 @@
+---
+---
+import JekyllGraph from './jekyll-graph.js';
+
+export default class GraphNav extends JekyllGraph {
+
+  constructor() {
+    super(); // 'this.graph' + 'this.graphDiv' set in JekyllGraph
+    this.graphTypeCheckBox = document.getElementById('graph-type-checkbox');
+    this.graphTypeEmojiSpan = document.getElementById('graph-type-emoji-span');
+    this.init(); // this.graphType set in initGraphType();
+  }
+
+  init() {
+    this.initGraphType();
+    this.bindEvents();
+    this.draw();
+  }
+  
+  bindEvents() {
+    this.graphTypeCheckBox.addEventListener('click', () => {
+      this.updateGraphType();
+      this.draw();
+    });
+  }
+
+  // draw
+  
+  draw() {
+    // redraw new chart
+    if (this.graphTypeCheckBox.checked) {
+      this.drawTree();
+    } else {
+      this.drawNetWeb();
+    }
+  }
+
+  redraw() {
+    this.updateGraphType();
+    this.draw();
+  }
+
+  // type
+  
+  initGraphType() {
+    this.graphType = localStorage.getItem('graph-type');
+    if (this.graphType !== "tree" && this.graphType !== "net-web") {
+      this.graphType = '{{ site.bonsai.nav.graph.type }}';	
+    }
+    this.graphTypeCheckBox.checked = (this.graphType === "tree");
+    this.updateGraphType();
+  }
+
+  updateGraphType() {
+    if (this.graphTypeCheckBox.checked) {
+      this.graphTypeEmojiSpan.innerText = "{{ site.data.emoji.net-web }}";
+      this.graphType = "tree";
+    } else {
+      this.graphTypeEmojiSpan.innerText = "{{ site.data.emoji.tree }}";
+      this.graphType = "net-web";
+    }
+    localStorage.setItem('graph-type', this.graphType);
+  } 
+}

data/assets/js/scripts.js

@@ -0,0 +1,64 @@
+---
+---
+import Entry from './entry.js';
+import SiteNav from './site-nav.js';
+
+// go
+// from: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t
+(() => {
+  initLinks();
+
+  if (!isSafari() && !isMobile()) {
+    applyPencilFilter();
+  }
+
+  new SiteNav();
+  if (document.getElementById('entry')) {
+    new Entry();
+  }
+})();
+
+// helpers
+
+function initLinks() {
+  // web
+  // open external links in new window; wiki-links in current window.
+  document.querySelectorAll('a.web-link').forEach(setupLinkOpen);
+  // wiki
+  //  init hp-tooltip.html listeners.
+  document.querySelectorAll('{{ include.wrapperQuerySelector }} a.wiki-link').forEach(setupListeners);
+  //  add microdata to wiki links
+  document.querySelectorAll('a.wiki-link').forEach((wikiLink) => wikiLink.classList.add('u-url'));
+}
+
+function setupLinkOpen (link) {
+  link.setAttribute("target", "_blank");
+  link.setAttribute("rel", "noopener");  // for security: https://css-tricks.com/use-target_blank/#correct-html
+}
+
+function applyPencilFilter() {
+  // apply pencil-filter to all svg images
+  let imgElements = document.getElementsByClassName('embed-image-wrapper');
+  Array.prototype.forEach.call(imgElements, (img) => {
+    if (img.firstElementChild.tagName === "svg") {
+      if ('{{ site.bonsai.svg.filter }}') {
+        // attach filter to svg element's parent because of safari/mobile bug
+        // bug from: https://github.com/Fyrd/caniuse/issues/3803
+        // workaround from: https://newbedev.com/why-is-filter-drop-shadow-causing-my-svg-to-disappear-in-safari
+        img.style.filter = "url(#PencilTexture)";
+      }
+    }
+  });
+}
+
+function isMobile() {
+  // from: https://stackoverflow.com/questions/58141018/mobile-device-detection
+  var check = false;
+  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+  return check;
+};
+
+function isSafari() {
+  // Safari 3.0+ "[object HTMLElementConstructor]" 
+  return /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
+};

data/assets/js/search.js

@@ -0,0 +1,165 @@
+---
+---
+
+window.store = {
+  {% for doc in site.documents %}
+    {% unless site.bonsai.nav.search.exclude contains doc.type %}
+      "{{ doc.url | slugify }}": {
+        "title": "{{ doc.title | xml_escape }}",
+        "content": {{ doc.content | strip_html | strip_newlines | jsonify }},
+        "status": "{{ doc.status | xml_escape }}",
+        "tags": "{{ doc.tags | xml_escape }}",
+        "emoji": "{{ doc.emoji | xml_escape }}",
+        "url": "{{ doc.url | xml_escape }}",
+      }
+      {% unless forloop.last %},{% endunless %}
+    {% endunless %}
+  {% endfor %}
+};
+export default class Search {
+
+  constructor() {
+    this.searchBtn = document.getElementById('search-btn');
+    this.search = document.getElementById('search');
+    this.searchInput = document.getElementById('search-input');
+    this.searchResults = document.getElementById('search-results');
+    this.navContent = document.getElementById('site-nav-content');
+    this.init();
+  }
+
+  init() {
+    this.searchInput.classList.add('hide');
+    this.searchResults.classList.add('hide');
+    this.initIndex();
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    // keys
+    /// cmd/ctrl + k
+    document.addEventListener('keydown', (event) => {
+      const macKeys = (event.metaKey && (event.key === 'k'));
+      const winKeys = (event.ctrlKey && (event.key === 'k'));
+      if (macKeys || winKeys) {
+        event.preventDefault();
+        this.toggleSearch();
+      }
+    });
+    // enter
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        this.doSearch();
+      }
+    });
+    /// esc
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        this.hideSearch();
+      }
+    });
+    // btn
+    this.searchBtn.addEventListener('click', () => {
+      this.toggleSearch();
+    });
+    // unfocus
+    this.searchInput.addEventListener('focusout', (event) => {
+      // click on a search result: 
+      //   if (event.relatedTarget.nodeName !== 'A')
+      if (!event.relatedTarget) {
+        this.hideSearch();
+      }
+    });
+  }
+
+  initIndex() {
+    // lunr: https://lunrjs.com/
+    // from: https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/
+    // Initalize lunr with the fields it will be searching on. I've given title
+    // a boost of 10 to indicate matches on this field are more important.
+    this.idx = lunr(function () {
+      this.field('id');
+      this.field('title', { boost: 10 });
+      this.field('status');
+      // this.field('tags');
+      this.field('emoji');
+      this.field('content');
+
+      for (var key in window.store) { // Add the data to lunr
+        this.add({
+          'id': key,
+          'title': window.store[key].title,
+          'status': window.store[key].status,
+          // 'tags': window.store[key].tags,
+          'emoji': window.store[key].emoji,
+          'content': window.store[key].content
+        });
+      }
+    });
+  }
+
+  toggleSearch() {
+    if (this.searchInput.classList.contains('hide')) {
+      this.showSearch();
+    } else {
+      this.hideSearch();
+    }
+  }
+
+  showSearch() {
+    this.searchInput.classList.remove('hide');
+    this.searchInput.focus();
+    this.navContent.style.filter = "blur(4px)";
+  }
+
+  hideSearch() {
+    this.searchInput.classList.add('hide');
+    this.searchResults.classList.add('hide');
+    this.navContent.style.filter = "";
+  }
+
+  doSearch() {
+    // from: https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/
+    var results = this.idx.search(this.searchInput.value);
+    this.displayResults(results, window.store);
+  }
+
+  displayResults(results, store) {
+    if (results.length) {
+      var appendString = '<ul>';
+  
+      for (var i = 0; i < results.length; i++) {
+        var item = store[results[i].ref];
+        appendString += '<li>'
+        appendString +=   '<a href="' + '{{ site.baseurl }}' + item.url + '">';
+        if (item.status) {
+          appendString +=     '<h6> ' + item.status + ' ' + item.title + '</h6>';
+        } else if (item.emoji) {
+          appendString +=     '<h6> ' + item.emoji + ' ' + item.title + '</h6>';
+        } else {
+          appendString +=     '<h6> ' + item.title + '</h6>';
+        }
+        appendString +=     '<p>' + item.content.substring(0, 150) + '...</p>';
+        appendString +=   '</a>';
+        appendString += '</li>';
+      }
+    } else {
+      var appendString = '<ul><li>No results found</li></ul>';
+    }
+    this.searchResults.innerHTML = appendString + '</ul>';
+    this.searchResults.classList.remove('hide');
+  }
+
+  // getQueryVariable(variable) {
+  //   // from: https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/
+  //   var query = window.location.search.substring(1);
+  //   var vars = query.split('&');
+
+  //   for (var i = 0; i < vars.length; i++) {
+  //     var pair = vars[i].split('=');
+
+  //     if (pair[0] === variable) {
+  //       return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
+  //     }
+  //   }
+  // }
+}

data/assets/js/site-nav.js

@@ -0,0 +1,132 @@
+---
+---
+
+import GraphNav from './graph.js';
+import Search from './search.js';
+import ThemeColors from './theme-colors.js';
+import VisitedNav from './visited-nav.js';
+
+export default class SiteNav {
+
+  constructor() {
+    // bonsai-burger --> [[.]]
+    this.bonsaiBurger = document.getElementById('bonsai-burger-nav-checkbox');
+    this.sideBar = document.getElementById('side-bar');
+    this.mainView = document.getElementById('main');
+    this.bonsai = document.getElementById('nav-bonsai');
+    
+    this.bonsaiBurger.addEventListener('click', () => {
+      this.toggleSiteNav();
+      this.graph.redraw();
+    });
+
+    // themes
+    new ThemeColors();
+    
+    // search
+    {% if site.bonsai.nav.search.enabled %}
+      this.search = new Search();
+    {% endif %}
+
+    // graph
+    this.graph = new GraphNav();
+
+    // visited nav
+    {% if site.bonsai.nav.visited.enabled %} 
+      // attach elements
+      // this.navType set in initNavType();
+      this.navTypeCheckBox = document.getElementById('nav-type-checkbox');
+      this.navTypeEmojiSpan = document.getElementById('nav-type-emoji-span');
+      this.visited = new VisitedNav();
+      this.initNavType();
+      this.navTypeCheckBox.addEventListener('click', () => {
+        this.updateNavType();
+      });
+    {% endif %}
+
+    // visited data
+    // visitedURLs set in initVisitedData();
+    this.deleteVisitedBtn = document.getElementById('delete-btn');
+    this.initVisitedData();
+    this.deleteVisitedBtn.addEventListener('click', () => {
+      this.deleteVisitedData();
+    });
+  }
+
+  // bonsai-burger
+
+  toggleSiteNav() {
+    if (document.getElementById('bonsai-burger-nav-checkbox').checked) {
+      this.sideBar.classList.add('nav-open');
+      this.mainView.classList.add('hide');
+      this.bonsai.hidden = false;
+    } else {
+      this.sideBar.classList.remove('nav-open');
+      this.mainView.classList.remove('hide');
+      this.bonsai.hidden = true;
+    }
+  }
+
+  // graph <-> visited toggles
+
+  initNavType() {
+    this.navType = localStorage.getItem('nav-type');
+    if (this.navType !== "graph" && this.navType !== "visited") {
+      this.navType = '{{ site.bonsai.nav.type }}';	
+    }
+    this.navTypeCheckBox.checked = (this.navType === "graph");
+    this.updateNavType();
+  }
+
+  updateNavType() {
+    if (this.navTypeCheckBox.checked) {
+      this.navTypeEmojiSpan.innerText = "{{ site.data.emoji.visited }}";
+      this.navType = "graph";
+      this.visited.hide();
+      this.graph.graphDiv.classList.remove("hide");
+    } else {
+      this.navTypeEmojiSpan.innerText = "{{ site.data.emoji.graph }}";
+      this.navType = "visited";
+      this.graph.graphDiv.classList.add("hide");
+      this.visited.show();
+    }
+    localStorage.setItem('nav-type', this.navType);
+  }
+
+    // visited-data
+
+    initVisitedData() {
+      // init
+      this.visitedURLs = JSON.parse(localStorage.getItem('visited'));
+      if (!this.visitedURLs) this.visitedURLs = [];
+      // populate
+      if (this.visitedURLs) {
+        // remove duplicates to current (since json and !SortedSet)
+        // step backward so splicing doesn't change indeces as tabs are removed
+        for (var i = this.visitedURLs.length - 1; i > -1; i--) {
+          let aTab = this.visitedURLs[i];
+          if ((aTab['title'] == window.document.title) 
+            && (aTab['url'] == window.location.pathname)) {
+              this.visitedURLs.splice(i, 1);
+          }
+        }
+        this.visitedURLs.push({ title: window.document.title, url: window.location.pathname }); 
+        localStorage.setItem('visited', JSON.stringify(this.visitedURLs));
+      }
+      // draw
+      {% if site.bonsai.nav.visited.enabled %} 
+        this.visited.build(this.visitedURLs);
+      {% endif %}
+    }
+  
+    deleteVisitedData() {
+      // reset
+      this.visitedURLs = [];
+      // store
+      localStorage.setItem('visited', JSON.stringify([]));
+      // redraw
+      {% if site.bonsai.nav.visited.enabled %} 
+        this.visited.rebuild(this.visitedURLs);
+      {% endif %}
+    }
+}

data/assets/js/theme-colors.js

@@ -0,0 +1,57 @@
+---
+---
+
+export default class ThemeColors {
+  constructor() {
+    // this.theme set in initThemeColors();
+    this.favicon = document.querySelector('[rel="icon"]');
+    this.navBonsai = document.getElementById('nav-bonsai');
+    this.navBase = document.getElementById('nav-base');
+    this.themeColorBtns = document.querySelectorAll('a[data-theme-id]');
+    // logo
+    this.homeLogo = document.getElementById('home-logo');
+    this.rootLogo = document.getElementById('root-logo');
+    this.init();
+  }
+
+  init() {
+    this.initThemeColors();
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    Array.prototype.forEach.call(this.themeColorBtns, (btn) => {
+      btn.addEventListener('click', (event) => {
+        this.updateThemeColors(event);
+      });
+    });
+  }
+
+  initThemeColors() {
+    this.theme = localStorage.getItem("theme-colors");
+    if (!this.theme) {
+      this.theme = '{{ site.bonsai.default_theme }}' !== "" ? '{{ site.bonsai.default_theme }}' : '{{ site.data.themes[0].id }}';
+    }
+    this.updateThemeColors();
+  }
+
+  updateThemeColors (event) {
+    if (event) {
+      this.theme = event.target.dataset.themeId;
+    }
+    // update theme color data
+    document.documentElement.setAttribute('data-theme', this.theme);
+    // update icons and images
+    this.favicon.setAttribute('href', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--favicon-src')}`.replaceAll(/\s/g,''));
+    this.navBase.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--nav-burger-base')}`.replaceAll(/\s/g,''));
+    this.navBonsai.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--nav-burger-bonsai')}`.replaceAll(/\s/g,''));
+    if (this.homeLogo) {
+      this.homeLogo.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--logo-src')}`.replaceAll(/\s/g,''));
+    }
+    if (this.rootLogo) {
+      this.rootLogo.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--logo-src')}`.replaceAll(/\s/g,''));
+    }
+    // save to local storage
+    window.localStorage.setItem('theme-colors', this.theme);
+  }
+}