hyperbook 0.72.1 → 0.73.0

package/dist/assets/client.js

@@ -4,34 +4,39 @@ var hyperbook = (function () {
    * @param {HTMLElement} root - The root element to initialize.
    */
   const initCollapsibles = (root) => {
-    const collapsibleEls = root.getElementsByClassName("collapsible");
-    for (let collapsible of collapsibleEls) {
-      const id = collapsible.parentElement.getAttribute("data-id");
-
-      if (id.startsWith("_nav:") && !collapsible.classList.contains("empty")) {
-        const link = collapsible.querySelector("a");
+    // Handle both navigation sections and directive-collapsible elements
+    const detailsEls = root.querySelectorAll("details.section, details.directive-collapsible");
+    for (let details of detailsEls) {
+      const id = details.getAttribute("data-id");
+
+      // Prevent link clicks from toggling the details element in navigation
+      if (id && id.startsWith("_nav:") && !details.classList.contains("empty")) {
+        const link = details.querySelector("summary a");
         link?.addEventListener("click", (event) => {
           event.stopPropagation();
         });
       }
-      collapsible.addEventListener("click", () => {
-        collapsible.classList.toggle("expanded");
+
+      // Listen for toggle events to persist state and sync with other elements
+      details.addEventListener("toggle", () => {
         if (id) {
-          store.collapsibles.get(id).then((result) => {
-            if (!result) {
-              store.collapsibles.put({ id }).then(() => {
-                updateCollapsibles(root);
-              });
-            } else {
-              store.collapsibles.delete(id).then(() => {
-                updateCollapsibles(root);
-              });
+          if (details.open) {
+            store.collapsibles.put({ id });
+          } else {
+            store.collapsibles.delete(id);
+          }
+
+          // Sync all elements with the same ID
+          const allWithSameId = document.querySelectorAll(`[data-id="${id}"]`);
+          for (let el of allWithSameId) {
+            if (el !== details && el.tagName === "DETAILS") {
+              el.open = details.open;
             }
-          });
+          }
         }
 
         setTimeout(() => {
-          window.dispatchEvent(new Event("resize")); // geogebra new this in order resize the applet
+          window.dispatchEvent(new Event("resize")); // geogebra needs this to resize the applet
         }, 100);
       });
     }
@@ -43,15 +48,15 @@ var hyperbook = (function () {
    */
   const updateCollapsibles = (root) => {
     store.collapsibles.toArray().then((collapsibles) => {
-      const collapsibleEls = root.getElementsByClassName("collapsible");
-      for (let collapsibleEl of collapsibleEls) {
-        const id = collapsibleEl.parentElement.getAttribute("data-id");
+      const detailsEls = root.querySelectorAll("details.section, details.directive-collapsible");
+      for (let details of detailsEls) {
+        const id = details.getAttribute("data-id");
         if (id) {
-          const expanded = collapsibles.some((c) => c.id === id);
-          if (expanded) {
-            collapsibleEl.classList.add("expanded");
-          } else if (!id.startsWith("_nav:")) {
-            collapsibleEl.classList.remove("expanded");
+          const shouldBeOpen = collapsibles.some((c) => c.id === id);
+          // Only update if state differs and it's not a navigation section
+          // (navigation sections are auto-expanded based on current page)
+          if (!id.startsWith("_nav:") && details.open !== shouldBeOpen) {
+            details.open = shouldBeOpen;
           }
         }
       }

package/dist/assets/directive-collapsible/style.css

@@ -2,7 +2,7 @@
   display: flow-root;
 }
 
-.directive-collapsible>button {
+.directive-collapsible>summary {
   width: 100%;
   text-align: left;
   border-style: solid;
@@ -13,37 +13,46 @@
   padding: 8px 16px;
   border-radius: 4px;
   margin-bottom: 10px;
+  list-style: none;
+  color: var(--color-text);
+  border-color: var(--color-spacer);
+  background-color: var(--color-nav);
+}
+
+.directive-collapsible>summary::-webkit-details-marker {
+  display: none;
 }
 
-.directive-collapsible>button.expanded {
+.directive-collapsible>summary::marker {
+  display: none;
+}
+
+.directive-collapsible[open]>summary {
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   margin-bottom: 0px;
 }
 
-.directive-collapsible>button:after {
+.directive-collapsible>summary:after {
   content: "\02795";
   /* Unicode character for "plus" sign (+) */
   font-size: 13px;
   float: right;
   margin-left: 5px;
+  color: var(--color-text);
 }
 
-.directive-collapsible>button.expanded:after {
+.directive-collapsible[open]>summary:after {
   content: "\2796";
   /* Unicode character for "minus" sign (-) */
 }
 
-.directive-collapsible .collapsible-content {
+.directive-collapsible .content {
   border-top: none;
   margin-bottom: 10px;
 }
 
-.directive-collapsible .collapsible-content {
-  display: none;
-}
-
-.directive-collapsible>button.expanded+.collapsible-content {
+.directive-collapsible[open] .content {
   display: block;
   border-style: solid;
   border-width: 1px;
@@ -53,18 +62,5 @@
   margin-bottom: 10px;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-}
-
-.directive-collapsible>button {
-  color: var(--color-text);
-  border-color: var(--color-spacer);
-  background-color: var(--color-nav);
-}
-
-.directive-collapsible>button:after {
-  color: var(--color-text);
-}
-
-.directive-collapsible .collapsible-content {
   border-color: var(--color-spacer);
 }

package/dist/assets/directive-tabs/client.js

@@ -1,43 +1,47 @@
 hyperbook.tabs = (function () {
   const init = (root) => {
-    let allTabs = root.querySelectorAll(".directive-tabs .tab[data-tabs-id]");
-    allTabs.forEach((tab) => {
-      const tabsId = tab.getAttribute("data-tabs-id");
-      const tabId = tab.getAttribute("data-tab-id");
-      tab.addEventListener("click", () => {
-        store.tabs.put({
-          id: tabsId,
-          active: tabId,
-        });
-        selectTab(tabsId, tabId);
+    // Find all radio inputs for tabs
+    let allTabInputs = root.querySelectorAll(".directive-tabs .tab-input[data-tabs-id]");
+    allTabInputs.forEach((input) => {
+      const tabsId = input.getAttribute("data-tabs-id");
+      const tabId = input.getAttribute("data-tab-id");
+      
+      // Listen for changes on radio inputs
+      input.addEventListener("change", () => {
+        if (input.checked) {
+          store.tabs.put({
+            id: tabsId,
+            active: tabId,
+          });
+          
+          // Sync all radio inputs with the same tabs-id and tab-id
+          syncAllTabs(tabsId, tabId);
+        }
       });
     });
+    
+    // Restore saved tab selections
     store.tabs.each((result) => {
       selectTab(result.id, result.active);
     });
   };
 
-  function selectTab(tabsId, tabId) {
-    let relevantTabButtons = document.querySelectorAll(
-      `.directive-tabs .tab[data-tabs-id="${tabsId}"]`
-    );
-    relevantTabButtons.forEach((e) => {
-      e.className = e.className.replace(" active", "");
-      if (e.getAttribute("data-tab-id") == tabId) {
-        e.className += " active";
-      }
-    });
-    let relevantTabPanels = document.querySelectorAll(
-      `.directive-tabs .tabpanel[data-tabs-id="${tabsId}"]`
+  function syncAllTabs(tabsId, tabId) {
+    // Find all radio inputs with the same tabs-id and tab-id across the page
+    const allMatchingInputs = document.querySelectorAll(
+      `.directive-tabs .tab-input[data-tabs-id="${tabsId}"][data-tab-id="${tabId}"]`
     );
-    relevantTabPanels.forEach((e) => {
-      e.className = e.className.replace(" active", "");
-      if (e.getAttribute("data-tab-id") == tabId) {
-        e.className += " active";
-      }
+    
+    allMatchingInputs.forEach((input) => {
+      input.checked = true;
     });
   }
 
+  function selectTab(tabsId, tabId) {
+    // Sync all tabs with this combination
+    syncAllTabs(tabsId, tabId);
+  }
+
   init(document.body);
 
   // Observe for new tabs added to the DOM

package/dist/assets/directive-tabs/style.css

@@ -10,6 +10,15 @@
   border-width: 1px;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
+  background-color: var(--color-nav);
+  border-color: var(--color-spacer);
+}
+
+/* Hide radio inputs */
+.directive-tabs .tab-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .directive-tabs > .tabs .tab {
@@ -23,6 +32,7 @@
   padding: 8px 16px;
   transition: 0.3s;
   border-bottom: 4px solid transparent;
+  color: var(--color-text);
 }
 
 .directive-tabs > .tabpanel {
@@ -34,33 +44,106 @@
   margin-bottom: 12px;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
+  border-color: var(--color-spacer);
+  display: none;
 }
 
-.directive-tabs .tabs {
-  background-color: var(--color-nav);
-  border-color: var(--color-spacer);
+.directive-tabs .tabs .tab:hover {
+  border-bottom-color: var(--color-spacer);
+  color: var(--color-brand);
 }
 
-.directive-tabs .tab {
-  color: var(--color-text);
+/* Style active tab based on radio button state using :has() */
+/* Check each input position and style the corresponding label */
+.directive-tabs:has(> .tab-input:nth-of-type(1):checked) .tabs .tab:nth-of-type(1) {
+  border-bottom-color: var(--color-brand);
+  color: var(--color-brand);
 }
 
-.directive-tabs .tabs .tab:hover {
-  border-bottom-color: var(--color-spacer);
+.directive-tabs:has(> .tab-input:nth-of-type(2):checked) .tabs .tab:nth-of-type(2) {
+  border-bottom-color: var(--color-brand);
   color: var(--color-brand);
 }
 
-.directive-tabs .tabs .tab.active {
+.directive-tabs:has(> .tab-input:nth-of-type(3):checked) .tabs .tab:nth-of-type(3) {
   border-bottom-color: var(--color-brand);
   color: var(--color-brand);
 }
 
-.directive-tabs .tabpanel {
-  border-color: var(--color-spacer);
-  display: none;
+.directive-tabs:has(> .tab-input:nth-of-type(4):checked) .tabs .tab:nth-of-type(4) {
+  border-bottom-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+.directive-tabs:has(> .tab-input:nth-of-type(5):checked) .tabs .tab:nth-of-type(5) {
+  border-bottom-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+.directive-tabs:has(> .tab-input:nth-of-type(6):checked) .tabs .tab:nth-of-type(6) {
+  border-bottom-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+.directive-tabs:has(> .tab-input:nth-of-type(7):checked) .tabs .tab:nth-of-type(7) {
+  border-bottom-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+.directive-tabs:has(> .tab-input:nth-of-type(8):checked) .tabs .tab:nth-of-type(8) {
+  border-bottom-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+.directive-tabs:has(> .tab-input:nth-of-type(9):checked) .tabs .tab:nth-of-type(9) {
+  border-bottom-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+.directive-tabs:has(> .tab-input:nth-of-type(10):checked) .tabs .tab:nth-of-type(10) {
+  border-bottom-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+/* Show tabpanel based on checked radio input using general sibling combinator */
+/* Note: nth-of-type counts by element type, and .tabs div is the first div */
+.directive-tabs > .tab-input:nth-of-type(1):checked ~ .tabpanel:nth-of-type(2) {
+  display: block;
+}
+
+.directive-tabs > .tab-input:nth-of-type(2):checked ~ .tabpanel:nth-of-type(3) {
+  display: block;
+}
+
+.directive-tabs > .tab-input:nth-of-type(3):checked ~ .tabpanel:nth-of-type(4) {
+  display: block;
+}
+
+.directive-tabs > .tab-input:nth-of-type(4):checked ~ .tabpanel:nth-of-type(5) {
+  display: block;
+}
+
+.directive-tabs > .tab-input:nth-of-type(5):checked ~ .tabpanel:nth-of-type(6) {
+  display: block;
+}
+
+.directive-tabs > .tab-input:nth-of-type(6):checked ~ .tabpanel:nth-of-type(7) {
+  display: block;
+}
+
+.directive-tabs > .tab-input:nth-of-type(7):checked ~ .tabpanel:nth-of-type(8) {
+  display: block;
+}
+
+.directive-tabs > .tab-input:nth-of-type(8):checked ~ .tabpanel:nth-of-type(9) {
+  display: block;
+}
+
+.directive-tabs > .tab-input:nth-of-type(9):checked ~ .tabpanel:nth-of-type(10) {
+  display: block;
 }
 
-.directive-tabs .tabpanel.active {
+.directive-tabs > .tab-input:nth-of-type(10):checked ~ .tabpanel:nth-of-type(11) {
   display: block;
 }