Code for issue #62: Add Custom Title instead of "Click to show/hide"

sphinx_togglebutton/__init__.py

@@ -2,6 +2,7 @@
 import os
 from docutils.parsers.rst import Directive, directives
 from docutils import nodes
+import base64
 
 __version__ = "0.3.2"
 
@@ -31,18 +32,33 @@ def insert_custom_selection_config(app):
 class Toggle(Directive):
     """Hide a block of markup text by wrapping it in a container."""
 
-    optional_arguments = 1
+    optional_arguments = 3
     final_argument_whitespace = True
     has_content = True
 
-    option_spec = {"id": directives.unchanged, "show": directives.flag}
-
+    option_spec = {
+        "id": directives.unchanged,
+        "show": directives.flag,
+        "hint": directives.unchanged,
+        "hint_hide": directives.unchanged,
+    }
+
     def run(self):
         self.assert_has_content()
         classes = ["toggle"]
         if "show" in self.options:
             classes.append("toggle-shown")
 
+        # Retrieve global hints if specific hints are not provided
+        env = self.state.document.settings.env
+        hint = self.options.get('hint', env.config.togglebutton_hint)
+        hint_hide = self.options.get('hint_hide', env.config.togglebutton_hint_hide)
+
+        hint_encoded = base64.urlsafe_b64encode(hint.encode()).decode().replace('=', 'EQ')
+        classes.append(f"hint-show-{hint_encoded}")
+        hint_hide_encoded = base64.urlsafe_b64encode(hint_hide.encode()).decode().replace('=', 'EQ')
+        classes.append(f"hint-hide-{hint_hide_encoded}")
+
         parent = nodes.container(classes=classes)
         self.state.nested_parse(self.content, self.content_offset, parent)
         return [parent]

sphinx_togglebutton/_static/togglebutton.js

@@ -15,6 +15,23 @@ var initToggleItems = () => {
   );
   // Add the button to each admonition and hook up a callback to toggle visibility
   itemsToToggle.forEach((item, index) => {
+    // Use custom hint and hint_hide if available
+    let customHintShow = toggleHintShow;
+    let customHintHide = toggleHintHide;
+
+    const classes = item.className.split(/\s+/);
+    classes.forEach((cls) => {
+      if (cls.startsWith("hint-show-")) {
+        const encoded = cls.substring(10).replace(/EQ/g, "=");
+        const decoded = atob(encoded.replace(/_/g, "/").replace(/-/g, "+"));
+        customHintShow = decoded;
+      } else if (cls.startsWith("hint-hide-")) {
+        const encoded = cls.substring(10).replace(/EQ/g, "=");
+        const decoded = atob(encoded.replace(/_/g, "/").replace(/-/g, "+"));
+        customHintHide = decoded;
+      }
+    });
+
     if (item.classList.contains("admonition")) {
       // If it's an admonition block, then we'll add a button inside
       // Generate unique IDs for this item
@@ -27,15 +44,7 @@ var initToggleItems = () => {
       }
       // This is the button that will be added to each item to trigger the toggle
       var collapseButton = `
-        <button type="button"
-                id="${buttonID}"
-                class="toggle-button"
-                data-target="${toggleID}"
-                data-button="${buttonID}"
-                data-toggle-hint="${toggleHintShow}"
-                aria-label="Toggle hidden content"
-                aria-expanded="false"
-            >
+        <button type="button" id="${buttonID}" class="toggle-button" data-target="${toggleID}" data-button="${buttonID}" data-toggle-hint="${customHintShow}" aria-label="Toggle hidden content">
             ${toggleChevron}
         </button>`;
 
@@ -68,7 +77,7 @@ var initToggleItems = () => {
         <details class="toggle-details">
             <summary class="toggle-details__summary">
               ${toggleChevron}
-              <span class="toggle-details__summary-text">${toggleHintShow}</span>
+              <span class="toggle-details__summary-text">${customHintShow}</span>
             </summary>
         </details>`;
       item.insertAdjacentHTML("beforebegin", detailsBlock);
@@ -91,16 +100,19 @@ var initToggleItems = () => {
         // Update the inner text for the proper hint
         if (details.open) {
           summary.querySelector("span.toggle-details__summary-text").innerText =
-            toggleHintShow;
+            customHintShow;
         } else {
           summary.querySelector("span.toggle-details__summary-text").innerText =
-            toggleHintHide;
+            customHintHide;
         }
       });
 
       // If we have a toggle-shown class, open details block should be open
       if (item.classList.contains("toggle-shown")) {
-        details.click();
+        details.open = true;
+        let summary = details.querySelector("summary");
+        summary.querySelector("span.toggle-details__summary-text").innerText =
+          customHintHide;
       }
     }
   });
@@ -114,12 +126,10 @@ var toggleHidden = (button) => {
     itemToToggle.classList.remove("toggle-hidden");
     button.classList.remove("toggle-button-hidden");
     button.dataset.toggleHint = toggleHintHide;
-    button.setAttribute("aria-expanded", true);
   } else {
     itemToToggle.classList.add("toggle-hidden");
     button.classList.add("toggle-button-hidden");
     button.dataset.toggleHint = toggleHintShow;
-    button.setAttribute("aria-expanded", false);
   }
 };