spec-up-t 1.2.3 → 1.2.5

package/assets/css/terms-and-definitions.css

@@ -26,7 +26,8 @@ h6 {
   #terminology-section-utility-container {
     position: sticky;
     top: 3.5em;
-    z-index: 10; /* Higher z-index to ensure it stays on top */
+    z-index: 10;
+    /* Higher z-index to ensure it stays on top */
   }
 }
 
@@ -47,43 +48,51 @@ dl.terms-and-definitions-list {
   margin: 0;
   padding: 0;
   position: relative;
-  z-index: 1; /* Set a baseline z-index for the whole list */
+  z-index: 1;
+  /* Set a baseline z-index for the whole list */
 }
 
 /* ====== DEFAULT STYLING ====== */
 /* Term styling (dt) */
-dl.terms-and-definitions-list > dt {
+dl.terms-and-definitions-list>dt {
   font-weight: 700;
   margin: 0;
   background-color: var(--card-bg-dt);
   border: 1px solid var(--card-border);
-  padding: 0.5rem 1.25rem; /* Increased vertical padding for better readability */
+  padding: 0.5rem 1.25rem;
+  /* Increased vertical padding for better readability */
   border-radius: 0.375rem 0.375rem 0 0;
   color: var(--card-text);
-  position: relative; /* Position relative for stacking */
-  line-height: 1.5; /* Improve line spacing */
-  font-size: 1.05em; /* Slightly larger font for better hierarchy */
-  align-items: center; /* Vertically center the content */
+  position: relative;
+  /* Position relative for stacking */
+  line-height: 1.5;
+  /* Improve line spacing */
+  font-size: 1.05em;
+  /* Slightly larger font for better hierarchy */
+  align-items: center;
+  /* Vertically center the content */
 }
 
 /* This adds spacing between the term text and the buttons */
-dl.terms-and-definitions-list > dt > span {
-  margin-right: 1.5em; /* Add spacing to the right of the term text */
+dl.terms-and-definitions-list>dt>span {
+  margin-right: 1.5em;
+  /* Add spacing to the right of the term text */
 }
 
 
 /* Increase the size for all buttons in definition terms */
-dl.terms-and-definitions-list > dt .btn {
-  font-size: 1.2em !important; /* Increase button size */
+dl.terms-and-definitions-list>dt .btn {
+  font-size: 1.2em !important;
+  /* Increase button size */
 }
 
-dl.terms-and-definitions-list > dt:hover {
+dl.terms-and-definitions-list>dt:hover {
   background-color: var(--card-hover-bg);
   transition: background-color 0.2s ease-in-out;
 }
 
 /* Definition styling (dd) */
-dl.terms-and-definitions-list > dd {
+dl.terms-and-definitions-list>dd {
   margin: 0;
   background-color: var(--card-bg);
   border: 1px solid var(--card-border);
@@ -102,7 +111,7 @@ dl.terms-and-definitions-list dd p {
 }
 
 /* Remove the blue line indicator for dd */
-dl.terms-and-definitions-list > dd::before {
+dl.terms-and-definitions-list>dd::before {
   display: none;
 }
 
@@ -173,16 +182,16 @@ dl>dd:has(table).meta-info-content-wrapper>div {
 */
 
 /* Borders and spacing between elements */
-dl.terms-and-definitions-list dt + dd {
+dl.terms-and-definitions-list dt+dd {
   border-bottom: none;
 }
 
-dl.terms-and-definitions-list dd + dd {
+dl.terms-and-definitions-list dd+dd {
   border-top: none;
   border-bottom: none;
 }
 
-dl.terms-and-definitions-list dd + dt {
+dl.terms-and-definitions-list dd+dt {
   margin-top: 1rem;
 }
 
@@ -194,9 +203,10 @@ dl.terms-and-definitions-list dd.last-dd {
 
 /* ====== DENSE INFO STYLING ====== */
 /* Apply original, more condensed styling when the html element has class "dense-info" */
-html.dense-info dl.terms-and-definitions-list > dt {
+html.dense-info dl.terms-and-definitions-list>dt {
   padding: 0.1rem 1.25rem;
-  display: block; /* Revert from flexbox to block */
+  display: block;
+  /* Revert from flexbox to block */
   line-height: inherit;
   font-size: inherit;
 }
@@ -205,12 +215,14 @@ html.dense-info dl.terms-and-definitions-list dd+dt {
   margin-top: 0.3rem;
 }
 
-html.dense-info dl.terms-and-definitions-list > dt::before {
-  display: none; /* Remove the blue indicator bar */
+html.dense-info dl.terms-and-definitions-list>dt::before {
+  display: none;
+  /* Remove the blue indicator bar */
 }
 
-html.dense-info dl.terms-and-definitions-list > dt > span {
-  margin-right: 0; /* Remove spacing for term text */
+html.dense-info dl.terms-and-definitions-list>dt>span {
+  margin-right: 0;
+  /* Remove spacing for term text */
 }
 
 /* ====== TRANSCLUSIONS STYLING ====== */
@@ -229,7 +241,8 @@ dd.transcluded-xref-term {
   font-variant: small-caps;
   text-transform: uppercase;
   position: relative;
-  z-index: 5; /* Higher z-index for all buttons */
+  z-index: 5;
+  /* Higher z-index for all buttons */
 }
 
 .collapse-all-defs-button {
@@ -243,7 +256,7 @@ dd.transcluded-xref-term {
 }
 
 /* Embedded transclusions in definition lists */
-dl.terms-and-definitions-list > dd.transcluded-xref-term-embedded {
+dl.terms-and-definitions-list>dd.transcluded-xref-term-embedded {
   position: relative;
   padding-left: 2.5rem;
   padding-top: 0.3rem;
@@ -254,15 +267,15 @@ dl.terms-and-definitions-list > dd.transcluded-xref-term-embedded {
 dl.terms-and-definitions-list span.transcluded-xref-term::after {
   content: "";
   position: absolute;
-  left: 0.5rem;
   top: 50%;
-  width: 1rem;
-  height: 1rem;
   transform: translateY(-50%);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-box-arrow-right' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
+  width: 0.8rem;
+  height: 0.8rem;
+  left: 0.2rem;
 }
 
 /* Inline span styling for transclusions */
@@ -271,12 +284,6 @@ dl.terms-and-definitions-list span.transcluded-xref-term {
   display: inline-block;
 }
 
-dl.terms-and-definitions-list span.transcluded-xref-term::after {
-  width: 0.8rem;
-  height: 0.8rem;
-  left: 0.2rem;
-}
-
 .placeholder-tref {
   display: none;
 }
@@ -292,5 +299,4 @@ dl.terms-and-definitions-list span.transcluded-xref-term::after {
   font-size: 0.8rem;
   font-variant: small-caps;
   text-transform: uppercase;
-}
-
+}

package/assets/js/add-bootstrap-classes-to-images.js

@@ -0,0 +1,98 @@
+/**
+ * @file This file adds Bootstrap classes to images for better responsiveness and styling.
+ * @author Kor Dwarshuis
+ * @version 1.0.0
+ */
+
+/**
+ * Function to add Bootstrap classes to images for better responsiveness
+ */
+function addBootstrapClassesToImages() {
+  const images = document.querySelectorAll('#content img');
+  images.forEach(image => {
+    // Add Bootstrap responsive image class
+    image.classList.add('img-fluid');
+    
+    // Optional: Add rounded corners
+    image.classList.add('rounded');
+    
+    // Optional: Add subtle shadow for better appearance
+    image.classList.add('shadow-sm');
+    
+    // Add appropriate margins
+    image.classList.add('my-3');
+    
+    // Create a figure element for images that are not already in one
+    if (!image.closest('figure') && !image.parentElement.classList.contains('image-container')) {
+      // Check if not already wrapped
+      const figure = document.createElement('figure');
+      figure.classList.add('figure', 'text-center');
+      
+      // Get the original parent and replace the image with the figure
+      const parent = image.parentElement;
+      parent.replaceChild(figure, image);
+      
+      // Add the image to the figure
+      figure.appendChild(image);
+      
+      // If the image has an alt text, create a caption
+      if (image.alt && image.alt.trim() !== '') {
+        const figcaption = document.createElement('figcaption');
+        figcaption.classList.add('figure-caption', 'text-center');
+        figcaption.textContent = image.alt;
+        figure.appendChild(figcaption);
+      }
+    }
+  });
+}
+
+/**
+ * Initialize the image enhancement with Bootstrap classes
+ */
+function initImageBootstrapClasses() {
+  const markdownElement = document.querySelector('#content');
+  
+  if (markdownElement) {
+    // Initialize bootstrap classes for all existing images
+    addBootstrapClassesToImages();
+    
+    // Add a mutation observer to detect dynamically added images
+    if (typeof MutationObserver !== 'undefined') {
+      const observer = new MutationObserver((mutations) => {
+        let shouldUpdate = false;
+        
+        mutations.forEach(mutation => {
+          // Check if new nodes were added
+          if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+            // Look for added images
+            mutation.addedNodes.forEach(node => {
+              if (node.nodeType === 1) { // Element node
+                if (node.tagName === 'IMG') {
+                  shouldUpdate = true;
+                } else if (node.querySelector && node.querySelector('img')) {
+                  shouldUpdate = true;
+                }
+              }
+            });
+          }
+        });
+        
+        if (shouldUpdate) {
+          // Apply Bootstrap classes to newly added images
+          addBootstrapClassesToImages();
+        }
+      });
+      
+      // Start observing content changes
+      observer.observe(markdownElement, { 
+        childList: true, 
+        subtree: true 
+      });
+    }
+  }
+}
+
+// Run when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+  initImageBootstrapClasses();
+});

package/assets/js/add-href-to-snapshot-link.js

@@ -13,7 +13,8 @@ function addHrefToSnapshotLink() {
    const currentUrl = window.location.href;
 
    // Regex to match up to and including the 'versions/' directory (if it exists)
-   const versionsMatch = currentUrl.match(/^(https?:\/\/[^\/]+(?:\/[^\/]+)*)\/versions\/(?:[^\/]+\/)?/);
+   const versionsRegex = new RegExp('^(https?://[^/]+(?:/[^/]+)*)/versions/(?:[^/]+/)?');
+   const versionsMatch = versionsRegex.exec(currentUrl);
 
    // If we are already in the 'versions' directory or deeper, strip down to 'versions/'
    // Otherwise, append '/versions/' to the current directory

package/assets/js/addAnchorsToTerms.js

@@ -16,7 +16,6 @@ function addAnchorsToTerms() {
     dts.forEach(item => {
 
         const dt = findDeepestSpan(item);
-        // dt.classList.add('toc-anchor');
         const id = dt.getAttribute('id');
         const a = document.createElement('a');
         a.setAttribute('href', `#${id}`);

package/assets/js/adjust-font-size.js

@@ -6,7 +6,6 @@
 
 function adjustFontSize() {
    const body = document.body;
-   const DEFAULT_SIZE = parseFloat(window.getComputedStyle(body).fontSize); // Define default font size for reset
 
    function adjust(change) {
       // Get current font size from body (in pixels)
@@ -21,17 +20,9 @@ function adjustFontSize() {
       }
    }
 
-   function reset() {
-      const body = document.body;
-
-      // Set font size to default value
-      body.style.fontSize = `${DEFAULT_SIZE}px`;
-   }
-
    // Add event listeners to buttons
    document.getElementById('decreaseBtn').addEventListener('click', () => adjust(-2));
    document.getElementById('increaseBtn').addEventListener('click', () => adjust(2));
-   // document.getElementById('resetBtn').addEventListener('click', reset);
 }
 
 document.addEventListener("DOMContentLoaded", function () {

package/assets/js/create-alphabet-index.js

@@ -5,14 +5,23 @@
  * @since 2024-09-19
  */
 function createAlphabetIndex() {
-    const terminologySectionUtilityContainer = document.getElementById("terminology-section-utility-container");
+    // Check if the terms and definitions list exists
+    // If it doesn't exist, exit the function
+    // This prevents errors when the script is run on pages without the terms and definitions list
+    // and ensures that the script only runs when necessary
     const termsListElement = document.querySelector(".terms-and-definitions-list");
-    const dtElements = termsListElement.querySelectorAll("dt");
+    const dtElements = termsListElement ? termsListElement.querySelectorAll("dt") : [];
+    
+    if (dtElements.length === 0) {
+        return;
+    }
+    
+    const terminologySectionUtilityContainer = document.getElementById("terminology-section-utility-container");
     const alphabetIndex = {};
 
     dtElements.forEach(dt => {
         const span = dt.querySelector("span");
-        if (span && span.id) {
+        if (span?.id) {
             const termId = span.id;
             const firstChar = termId.charAt(termId.indexOf("term:") + 5).toUpperCase();
             if (!alphabetIndex[firstChar]) {

package/assets/js/create-term-filter.js

@@ -5,6 +5,18 @@
  * @since 2024-09-19
  */
 function createTermFilter() {
+    // Check if the terms and definitions list exists
+    // If it doesn't exist, exit the function
+    // This prevents errors when the script is run on pages without the terms and definitions list
+    // and ensures that the script only runs when necessary
+    const termsListElement = document.querySelector(".terms-and-definitions-list");
+    const dtElements = termsListElement ? termsListElement.querySelectorAll("dt") : [];
+
+    if (dtElements.length === 0) {
+        return;
+    }
+
+
     const terminologySectionUtilityContainer = document.getElementById("terminology-section-utility-container");
 
     // Create checkboxes container

package/assets/js/custom-elements.js

@@ -24,17 +24,16 @@ customElements.define('slide-panels', class SidePanels extends HTMLElement {
   close (){
     this.removeAttribute('open');
   }
+
   attributeChangedCallback(attr, last, current) {
-    switch(attr) {
-      case 'open': for (let child of this.children) {
+    if (attr === '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'];
@@ -60,23 +59,19 @@ customElements.define('detail-box', class DetailBox extends HTMLElement {
     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';
-              }
+    if (attr === '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;
+          } else if (node.offsetHeight > 0) {
+            node.style.height = node.offsetHeight + 'px';
+            node.style.height = 0;
           }
         }
+      }
     }
   }
 });

package/assets/js/declare-markdown-it.js

@@ -1,5 +1,5 @@
 
-var md = window.markdownit({
+const md = window.markdownit({
    html: true, // Allow raw HTML in Markdown
    linkify: true, // Automatically convert URLs to clickable links
    typographer: true // Enable smart quotes and other typographic enhancements

package/assets/js/hide-show-utility-container.js

@@ -0,0 +1,17 @@
+function hideShowUtilityContainer() {
+   // Check if the terms and definitions list exists
+   // If it doesn't exist, exit the function
+   // This prevents errors when the script is run on pages without the terms and definitions list
+   // and ensures that the script only runs when necessary
+   const termsListElement = document.querySelector(".terms-and-definitions-list");
+   const dtElements = termsListElement ? termsListElement.querySelectorAll("dt") : [];
+
+   if (dtElements.length === 0) {
+      document.getElementById("terminology-section-utility-container")?.remove();
+      // document.getElementById("terminology-section-utility-container")?.style.display = "none";
+   }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+   hideShowUtilityContainer();
+});

package/assets/js/highlightMenuItems.js

@@ -18,7 +18,7 @@ function highlightMenuItems() {
       if (menuItem) {
          menuItem.classList.add("highlight-cfib41dyhcd99sm");
          menuItem.scrollIntoView({ behavior: "smooth", block: "center" });
-         
+
          // Dispatch custom event for the collapsible menu to handle
          document.dispatchEvent(new CustomEvent('highlight-menu-item', {
             detail: { menuItem, headingId: heading.id }
@@ -40,10 +40,10 @@ function highlightMenuItems() {
          // Update last heading in view to the first one found in the current viewport
          lastHeadingInView = headingsInView[0];
          highlightMenuItem(lastHeadingInView);
-      } else {
+      } else if (lastHeadingInView) {
          // No headings are currently in view
          // Highlight the last heading in view if it exists
-         if (lastHeadingInView) highlightMenuItem(lastHeadingInView);
+         highlightMenuItem(lastHeadingInView);
       }
    }, options);
 

package/assets/js/image-full-size.js

@@ -0,0 +1,76 @@
+/**
+ * @file This file adds functionality to display images in full-size on a web page when clicked. The functionality is implemented via a class added to the image element.
+ * @author Kor Dwarshuis
+ * @version 1.0.0
+ */
+
+
+const imageFullSize = () => {
+  const imageFullSizeClass = 'image-full-page';
+  
+  // All images get a click event listener via event delegation
+  const markdownElement = document.querySelector('#content');
+
+  function removeContainer() {
+    let container = document.querySelector('.image-container-full-page');
+    if (container) {
+      document.body.removeChild(container);
+    }
+  }
+
+  if (markdownElement) {
+    console.log("event listener added");
+    
+    markdownElement.addEventListener('click', (event) => {
+      if (event.target.tagName === 'IMG') {
+
+        // To be implemented: also account for SVG, path, circle, rect
+        // if ((event.target.tagName === 'svg' || event.target.tagName === 'path' || event.target.tagName === 'circle' || event.target.tagName === 'rect') && event.target.closest('.markdown')) {
+
+        let image = event.target;
+
+        if (document.querySelector('.image-container-full-page') === null) {
+          // Add container if it doesn't exist
+
+          // Clone the image element
+          const clonedImage = image.cloneNode(true);
+
+          // Create a new div element with the class .full-page-image-container
+          const container = document.createElement('div');
+          container.classList.add('image-container');
+          container.classList.add('image-container-full-page');
+
+          // Add the cloned image to the new container div
+          container.appendChild(clonedImage);
+
+          // Append the new container div to the body
+          document.body.appendChild(container);
+
+          // Add event listener to the new container
+          container.addEventListener('click', function containerClickEvent() {
+            container.removeEventListener('click', containerClickEvent); // remove this click listener
+            removeContainer();
+          });
+
+        }
+
+        // Toggle the full size class on the original image
+        image.classList.toggle(imageFullSizeClass);
+      }
+    });
+
+    // Add keydown event listener to handle the ESC key
+    document.addEventListener('keydown', (event) => {
+      if (event.key === "Escape") {
+        removeContainer();
+      }
+    });
+
+  } else {
+    console.log("Element with class '.markdown' not found.");
+  }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  imageFullSize();
+});

package/assets/js/index.js

@@ -1,9 +1,6 @@
 
 (function(){
 
-var markdown = window.markdownit();
-
-
 /* GitHub Issues */
 
  let source = specConfig.source;
@@ -19,7 +16,7 @@ var markdown = window.markdownit();
           repo_issue_list.innerHTML = issues.map(issue => {
             return `<li class="repo-issue">
               <detail-box>
-                <section>${markdown.render(issue.body || '')}</section>
+                <section>${md.render(issue.body || '')}</section>
                 <header class="repo-issue-title">
                   <span class="repo-issue-number">${issue.number}</span>
                   <span class="repo-issue-link">
@@ -34,7 +31,6 @@ var markdown = window.markdownit();
         })
     }
   }
-  //${markdown.render(issue.body)}
 
 /* Mermaid Diagrams */
 

package/assets/js/insert-trefs.js

@@ -41,7 +41,7 @@ function insertTrefs(allXTrefs) { // Pass allXTrefs as a parameter
          const dt = termElement.closest('dt');
          if (dt) {
             const nextElement = dt.nextElementSibling;
-            if (nextElement && nextElement.classList.contains('transcluded-xref-term') &&
+            if (nextElement?.classList.contains('transcluded-xref-term') &&
                nextElement.classList.contains('meta-info-content-wrapper')) {
                return; // Already processed
             }
@@ -134,7 +134,7 @@ function insertTrefs(allXTrefs) { // Pass allXTrefs as a parameter
    }
    
 
-   if (allXTrefs && allXTrefs.xtrefs) {
+   if (allXTrefs?.xtrefs) {
       processTerms(allXTrefs);
    } else {
       console.error('allXTrefs is undefined or missing xtrefs property');

package/assets/js/modal.js

@@ -2,6 +2,9 @@
  * Displays a modal with the given content.
  *
  * @param {string} content - The HTML content to display inside the modal.
+ *
+ * Example usage:
+ * showModal('<h2>This is a Modal</h2><p>You can put any content here.</p>');
  */
 function showModal(content) {
    // Create the modal overlay
@@ -47,6 +50,3 @@ function showModal(content) {
       }
    }, { once: true });
 }
-
-// // Example usage:
-// showModal('<h2>This is a Modal</h2><p>You can put any content here.</p>');

package/assets/js/search.js

@@ -14,6 +14,18 @@
 */
 
 function inPageSearch() {
+   // Check if the terms and definitions list exists
+   // If it doesn't exist, exit the function
+   // This prevents errors when the script is run on pages without the terms and definitions list
+   // and ensures that the script only runs when necessary
+   const termsListElement = document.querySelector(".terms-and-definitions-list");
+   const dtElements = termsListElement ? termsListElement.querySelectorAll("dt") : [];
+
+   if (dtElements.length === 0) {
+      return;
+   }
+
+
    /*****************/
    /* CONFIGURATION */
 
@@ -295,9 +307,9 @@ function inPageSearch() {
          */
          function hasHiddenAncestor(node) {
             while (node) {
-               if (node.classList && node.classList.contains('hidden')) {
-                  return true;
-               }
+                  if (node?.classList?.contains('hidden')) {
+                    return true;
+                  }
                node = node.parentNode;
             }
             return false;