spec-up-t 0.11.1

package/assets/js/custom-elements.js

@@ -0,0 +1,120 @@
+
+
+
+customElements.define('slide-panels', class SidePanels extends HTMLElement {
+  static get observedAttributes() {
+    return ['open'];
+  }
+  constructor() {
+    super();
+    
+    this.addEventListener('pointerup', e => {
+      if (e.target === this) this.close();
+    })
+  }
+  get active (){
+    return this.getAttribute('open');
+  }
+  toggle(panel){
+    this.active === panel ? this.close() : this.open(panel)
+  }
+  open (panel){
+    this.setAttribute('open', panel);
+  }
+  close (){
+    this.removeAttribute('open');
+  }
+  attributeChangedCallback(attr, last, current) {
+    switch(attr) {
+      case 'open': for (let child of this.children) {
+        if (child.id === current) child.setAttribute('open', '');
+        else child.removeAttribute('open', '');
+      }
+      break;
+    }
+  }
+});
+
+customElements.define('detail-box', class DetailBox extends HTMLElement {
+  static get observedAttributes() {
+    return ['open'];
+  }
+  constructor() {
+    super();   
+    
+    this.addEventListener('pointerup', e => {
+      if (e.target.hasAttribute('detail-box-toggle')) {
+        e.stopPropagation();
+        this.toggle();   
+      }
+    });
+
+    this.addEventListener('transitionend', e => {
+      let node = e.target;
+      if (node.parentElement === this && node.tagName === 'SECTION' && e.propertyName === 'height') {
+        node.style.height = this.hasAttribute('open') ? 'auto' : null;
+      }
+    });
+  }
+  toggle(){
+    this.toggleAttribute('open');
+  }
+  attributeChangedCallback(attr, last, current) {
+    switch(attr) {
+      case 'open':
+        for (let node of this.children) {
+          if (node.tagName === 'SECTION') {
+            if (current !== null) {
+              if (node.offsetHeight < node.scrollHeight) {
+                node.style.height = node.scrollHeight + 'px';
+              }
+            }
+            else if (node.offsetHeight > 0) {
+              node.style.height = node.offsetHeight + 'px';
+              let scroll = this.scrollHeight;
+              node.style.height = 0;
+            }
+            break;
+          }
+        }
+    }
+  }
+});
+
+customElements.define('tab-panels', class TabPanels extends HTMLElement {
+  constructor() {
+    super();
+    delegateEvent('click', 'tab-panels > nav > *', (e, delegate) => {
+      let nav = delegate.parentElement;
+      if (nav.parentElement === this) {
+        this.setAttribute('selected-index', Array.prototype.indexOf.call(nav.children, delegate))
+      }
+    }, { container: this, passive: true });
+  }
+  static get observedAttributes() {
+    return ['selected-index'];
+  }
+  attributeChangedCallback(attr, last, current) {
+    domReady.then(() => {
+      switch(attr) {  
+        case 'selected-index':
+          let index = current || 0;
+          let nav = this.querySelector('nav');
+          if (nav.parentElement === this) {
+            let tabs = nav.children;
+            let selected = tabs[index];
+            for (let tab of tabs) tab.removeAttribute('selected');
+            if (selected) selected.setAttribute('selected', '');
+            let panel = Array.prototype.filter.call(this.children, node => {
+              if (node.tagName === 'SECTION') {
+                node.removeAttribute('selected');
+                return true;
+              }
+            })[index];
+            if (panel) panel.setAttribute('selected', '');
+          }
+          break;
+      }
+    });
+  }
+});

package/assets/js/edit-term-buttons.js

@@ -0,0 +1,47 @@
+/**
+ * @file This file creates links to the terms definitions on GitHub via client side JS DOM manipulation.
+ * @author Kor Dwarshuis
+ * @version 0.0.1
+ * @license MIT
+ * @since 2024-06-09
+ */
+
+function editTermButtons() {
+   // find the definition list that is the next sibling of #terms-definitions
+   const termsDefinitions = document.querySelector('#terms-definitions ~ dl');
+
+   // Remove "./" or "/" from the beginning of a string and "/" at the end of the string
+   function cleanPath(path) {
+      // Remove "./" or "/" from the beginning of the string
+      if (path.startsWith("./")) {
+         path = path.substring(2);
+      } else if (path.startsWith("/")) {
+         path = path.substring(1);
+      }
+
+      // Remove "/" at the end of the string if it exists
+      if (path.endsWith("/")) {
+         path = path.slice(0, -1);
+      }
+
+      return path;
+   }
+
+   // Example usage with the string from the file
+
+   const cleanedSpecDir = cleanPath(specConfig.spec_directory);
+
+   termsDefinitions.querySelectorAll('dt').forEach(term => {
+      const url = term.querySelector('span').getAttribute('id');
+
+      // cut “url” on the “:” and keep the second part
+      const fileName = url.split(":")[1];
+
+      // add edit and history buttons to term
+      term.innerHTML += `<sup class="edit-term-button-sup"><a target="_blank" rel="noopener" href="https://github.com/${specConfig.source.account}/ctwg-main-glossary/blob/main/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" class="edit-term-button">Edit</a></sup><sup class="history-term-button-sup"><a target="_blank" rel="noopener" href="https://github.com/${specConfig.source.account}/ctwg-main-glossary/commits/main/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" class="history-term-button">History</a></sup>`;
+   });
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+   editTermButtons();
+});

package/assets/js/font-awesome.js

@@ -0,0 +1,2 @@
+window.FontAwesomeKitConfig = {"asyncLoading":{"enabled":true},"autoA11y":{"enabled":true},"baseUrl":"https://kit-free.fontawesome.com","detectConflictsUntil":null,"license":"free","method":"css","minify":{"enabled":true},"v4FontFaceShim":{"enabled":true},"v4shim":{"enabled":false},"version":"latest"};
+!function(){function r(e){var t,n=[],i=document,o=i.documentElement.doScroll,r="DOMContentLoaded",a=(o?/^loaded|^c/:/^loaded|^i|^c/).test(i.readyState);a||i.addEventListener(r,t=function(){for(i.removeEventListener(r,t),a=1;t=n.shift();)t()}),a?setTimeout(e,0):n.push(e)}!function(){if(!(void 0===window.Element||"classList"in document.documentElement)){var e,t,n,i=Array.prototype,o=i.push,r=i.splice,a=i.join;d.prototype={add:function(e){this.contains(e)||(o.call(this,e),this.el.className=this.toString())},contains:function(e){return-1!=this.el.className.indexOf(e)},item:function(e){return this[e]||null},remove:function(e){if(this.contains(e)){for(var t=0;t<this.length&&this[t]!=e;t++);r.call(this,t,1),this.el.className=this.toString()}},toString:function(){return a.call(this," ")},toggle:function(e){return this.contains(e)?this.remove(e):this.add(e),this.contains(e)}},window.DOMTokenList=d,e=Element.prototype,t="classList",n=function(){return new d(this)},Object.defineProperty?Object.defineProperty(e,t,{get:n}):e.__defineGetter__(t,n)}function d(e){for(var t=(this.el=e).className.replace(/^\s+|\s+$/g,"").split(/\s+/),n=0;n<t.length;n++)o.call(this,t[n])}}();function a(e){var t,n,i,o;prefixesArray=e||["fa"],prefixesSelectorString="."+Array.prototype.join.call(e,",."),t=document.querySelectorAll(prefixesSelectorString),Array.prototype.forEach.call(t,function(e){n=e.getAttribute("title"),e.setAttribute("aria-hidden","true"),i=!e.nextElementSibling||!e.nextElementSibling.classList.contains("sr-only"),n&&i&&((o=document.createElement("span")).innerHTML=n,o.classList.add("sr-only"),e.parentNode.insertBefore(o,e.nextSibling))})}var d=function(e,t){var n=document.createElement("link");n.href=e,n.media="all",n.rel="stylesheet",t&&t.detectingConflicts&&t.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(t.detectionIgnoreAttr)),document.getElementsByTagName("head")[0].appendChild(n)},c=function(e,t){!function(e,t){var n,i=t&&t.before||void 0,o=t&&t.media||void 0,r=window.document,a=r.createElement("link");if(t&&t.detectingConflicts&&t.detectionIgnoreAttr&&a.setAttributeNode(document.createAttribute(t.detectionIgnoreAttr)),i)n=i;else{var d=(r.body||r.getElementsByTagName("head")[0]).childNodes;n=d[d.length-1]}var c=r.styleSheets;a.rel="stylesheet",a.href=e,a.media="only x",function e(t){if(r.body)return t();setTimeout(function(){e(t)})}(function(){n.parentNode.insertBefore(a,i?n:n.nextSibling)});var s=function(e){for(var t=a.href,n=c.length;n--;)if(c[n].href===t)return e();setTimeout(function(){s(e)})};function l(){a.addEventListener&&a.removeEventListener("load",l),a.media=o||"all"}a.addEventListener&&a.addEventListener("load",l),(a.onloadcssdefined=s)(l)}(e,t)},e=function(e,t,n){var i=t&&void 0!==t.autoFetchSvg?t.autoFetchSvg:void 0,o=t&&void 0!==t.async?t.async:void 0,r=t&&void 0!==t.autoA11y?t.autoA11y:void 0,a=document.createElement("script"),d=document.scripts[0];a.src=e,void 0!==r&&a.setAttribute("data-auto-a11y",r?"true":"false"),i&&(a.setAttributeNode(document.createAttribute("data-auto-fetch-svg")),a.setAttribute("data-fetch-svg-from",t.fetchSvgFrom)),o&&a.setAttributeNode(document.createAttribute("defer")),n&&n.detectingConflicts&&n.detectionIgnoreAttr&&a.setAttributeNode(document.createAttribute(n.detectionIgnoreAttr)),d.parentNode.appendChild(a)};function s(e,t){var n=t&&t.addOn||"",i=t&&t.baseFilename||e.license+n,o=t&&t.minify?".min":"",r=t&&t.fileSuffix||e.method,a=t&&t.subdir||e.method;return e.baseUrl+"/releases/"+("latest"===e.version?"latest":"v".concat(e.version))+"/"+a+"/"+i+o+"."+r}var t,n,i,o,l;try{if(window.FontAwesomeKitConfig){var u,f=window.FontAwesomeKitConfig,m={detectingConflicts:f.detectConflictsUntil&&new Date<=new Date(f.detectConflictsUntil),detectionIgnoreAttr:"data-fa-detection-ignore",detectionTimeoutAttr:"data-fa-detection-timeout",detectionTimeout:null};"js"===f.method&&(o=m,l={async:(i=f).asyncLoading.enabled,autoA11y:i.autoA11y.enabled},"pro"===i.license&&(l.autoFetchSvg=!0,l.fetchSvgFrom=i.baseUrl+"/releases/"+("latest"===i.version?"latest":"v".concat(i.version))+"/svgs"),i.v4shim.enabled&&e(s(i,{addOn:"-v4-shims",minify:i.minify.enabled})),e(s(i,{minify:i.minify.enabled}),l,o)),"css"===f.method&&function(e,t){var n,i=a.bind(a,["fa","fab","fas","far","fal","fad"]);e.autoA11y.enabled&&(r(i),n=i,"undefined"!=typeof MutationObserver&&new MutationObserver(n).observe(document,{childList:!0,subtree:!0})),e.v4shim.enabled&&(e.license,e.asyncLoading.enabled?c(s(e,{addOn:"-v4-shims",minify:e.minify.enabled}),t):d(s(e,{addOn:"-v4-shims",minify:e.minify.enabled}),t));e.v4FontFaceShim.enabled&&(e.asyncLoading.enabled?c(s(e,{addOn:"-v4-font-face",minify:e.minify.enabled}),t):d(s(e,{addOn:"-v4-font-face",minify:e.minify.enabled}),t));var o=s(e,{minify:e.minify.enabled});e.asyncLoading.enabled?c(o,t):d(o,t)}(f,m),m.detectingConflicts&&((u=document.currentScript.getAttribute(m.detectionTimeoutAttr))&&(m.detectionTimeout=u),document.currentScript.setAttributeNode(document.createAttribute(m.detectionIgnoreAttr)),t=f,n=m,r(function(){var e=document.createElement("script");n&&n.detectionIgnoreAttr&&e.setAttributeNode(document.createAttribute(n.detectionIgnoreAttr)),n&&n.detectionTimeoutAttr&&n.detectionTimeout&&e.setAttribute(n.detectionTimeoutAttr,n.detectionTimeout),e.src=s(t,{baseFilename:"conflict-detection",fileSuffix:"js",subdir:"js",minify:t.minify.enabled}),e.async=!0,document.body.appendChild(e)}))}}catch(e){}}();

package/assets/js/highlightMenuItems.js

@@ -0,0 +1,50 @@
+/*
+  Author: Kor Dwarshuis, kor@dwarshuis.com
+  Created: 2024-03-30
+  Description: Highlight menu items based on visibility of corresponding headings in main content. Styling in /assets/css/highlightMenuItems.css
+*/
+
+function highlightMenuItems() {
+   let lastHeadingInView = null;
+
+   function highlightMenuItem(heading) {
+      // Remove highlight from all menu items first
+      document.querySelectorAll('#toc_list a').forEach(item => {
+         item.classList.remove("highlight-cfib41dyhcd99sm");
+      });
+
+      // Highlight the new menu item
+      const menuItem = document.querySelector(`#toc_list a[href="#${heading.id}"]`);
+      if (menuItem) {
+         menuItem.classList.add("highlight-cfib41dyhcd99sm");
+         menuItem.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+   }
+
+   const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+   };
+
+   const observer = new IntersectionObserver((entries, observer) => {
+      // Find all headings currently in view
+      const headingsInView = entries.filter(entry => entry.isIntersecting).map(entry => entry.target);
+
+      if (headingsInView.length > 0) {
+         // Update last heading in view to the first one found in the current viewport
+         lastHeadingInView = headingsInView[0];
+         highlightMenuItem(lastHeadingInView);
+      } else {
+         // No headings are currently in view
+         // Highlight the last heading in view if it exists
+         if (lastHeadingInView) highlightMenuItem(lastHeadingInView);
+      }
+   }, options);
+
+   document.querySelectorAll('h2, h3, h4, h5, h6').forEach(target => observer.observe(target));
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+   highlightMenuItems();
+});

package/assets/js/index.js

@@ -0,0 +1,97 @@
+
+(function(){
+
+var markdown = window.markdownit();
+
+/* Sidebar Interactions */
+
+delegateEvent('pointerup', '[panel-toggle]', (e, delegate) => {
+  slidepanels.toggle(delegate.getAttribute('panel-toggle'));
+}, { passive: true });
+
+window.addEventListener('hashchange', (e) => slidepanels.close());
+
+/* GitHub Issues */
+
+ let source = specConfig.source;
+  if (source) {
+    if (source.host === 'github') {
+      fetch(`https://api.github.com/repos/${ source.account + '/' + source.repo }/issues`)
+        .then(response => response.json())
+        .then(issues => {
+          let count = issues.length;
+          document.querySelectorAll('[issue-count]').forEach(node => {
+            node.setAttribute('issue-count', count)
+          });
+          repo_issue_list.innerHTML = issues.map(issue => {
+            return `<li class="repo-issue">
+              <detail-box>
+                <section>${markdown.render(issue.body || '')}</section>
+                <header class="repo-issue-title">
+                  <span class="repo-issue-number">${issue.number}</span>
+                  <span class="repo-issue-link">
+                    <a href="${issue.html_url}" target="_blank">${issue.title}</a>
+                  </span>
+                  <span detail-box-toggle></span>
+                </header>
+              </detail-box>
+            </li>`
+          }).join('');
+          Prism.highlightAllUnder(repo_issue_list);
+        })
+    }
+  }
+  //${markdown.render(issue.body)}
+
+/* Mermaid Diagrams */
+
+mermaid.initialize({
+  startOnLoad: true,
+  theme: 'neutral'
+});
+
+/* Charts */
+
+document.querySelectorAll('.chartjs').forEach(chart => {
+  new Chart(chart, JSON.parse(chart.textContent));
+});
+
+/* Tooltips */
+let tipMap = new WeakMap();
+delegateEvent('pointerover', '.term-reference, .spec-reference', (e, anchor) => {
+  const id = anchor.getAttribute('data-local-href') || anchor.getAttribute('href') || '';
+  let term = document.getElementById(id.replace('#', ''));
+  if (!term || tipMap.has(anchor)) return;
+  let container = term.closest('dt, td:first-child');
+  if (!container) return;
+  let tip = {
+    allowHTML: true,
+    inlinePositioning: true
+  } 
+  switch (container.tagName) {
+    case 'DT':
+      tip.content = container.nextElementSibling.textContent;
+      break;
+    case 'TD':
+      let table = container.closest('table');
+      let tds = Array.from(container.closest('tr').children);
+          tds.shift();
+      if (table) {
+        let headings = Array.from(table.querySelectorAll('thead th'));
+            headings.shift();
+        if (headings.length) {
+          tip.content = `
+            <header>${container.textContent}</header>
+            <table>
+              ${headings.map((th, i) => {
+                return `<tr><td>${th.textContent}:</td><td>${tds[i] ? tds[i].textContent : ''}</td></tr>`
+              }).join('')}
+            </table>`;
+        }
+      }
+      break;
+  }
+  if (tip.content) tipMap.set(anchor, tippy(anchor, tip));
+}, { passive: true });
+
+})();