ENHANCE: Improve hiding behavior for togglebuttons

docs/conf.py

@@ -88,6 +88,11 @@
 
 myst_enable_extensions = ["colon_fence"]
 
+# To test behavior in JS
+# togglebutton_hint = "test show"
+# togglebutton_hint_hide = "test hide"
+# togglebutton_open_on_print = False
+
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".

docs/use.md

@@ -173,5 +173,10 @@ button.toggle-button {
 
 ## Printing behavior with toggle buttons
 
-When you print the screen while using `sphinx-togglebutton`, the toggle-able content will not show up.
-To reveal it for printing, you must manually un-toggle the items and then print.
+By default `sphinx-togglebutton` will **open all toggle-able content when you print**.
+It will close them again when the printing operation is complete.
+To disable this behavior, use the following configuration in `conf.py`:
+
+```python
+togglebutton_open_on_print = False
+```

sphinx_togglebutton/__init__.py

@@ -15,6 +15,8 @@ def initialize_js_assets(app, config):
     # Update the global context
     app.add_js_file(None, body=f"let toggleHintShow = '{config.togglebutton_hint}';")
     app.add_js_file(None, body=f"let toggleHintHide = '{config.togglebutton_hint_hide}';")
+    open_print = str(config.togglebutton_open_on_print).lower()
+    app.add_js_file(None, body=f"let toggleOpenOnPrint = '{open_print}';")
     app.add_js_file("togglebutton.js")
 
 
@@ -59,6 +61,7 @@ def setup(app):
     app.add_config_value("togglebutton_selector", ".toggle, .admonition.dropdown", "html")
     app.add_config_value("togglebutton_hint", "Click to show", "html")
     app.add_config_value("togglebutton_hint_hide", "Click to hide", "html")
+    app.add_config_value("togglebutton_open_on_print", True, "html")
 
     # Run the function after the builder is initialized
     app.connect("builder-inited", insert_custom_selection_config)

sphinx_togglebutton/_static/togglebutton.css

@@ -7,8 +7,6 @@
     transition: opacity .3s, height .3s;
 }
 
-/* Overrides for admonition toggles */
-
 /* Toggle buttons inside admonitions so we see the title */
 .toggle.admonition {
     position: relative;
@@ -53,10 +51,8 @@ button.toggle-button {
 @media (min-width: 768px) {
     button.toggle-button.toggle-button-hidden:before {
         content: attr(data-toggle-hint);  /* This will be filled in by JS */
-        position: absolute;
         font-size: .8em;
-        left: -6.5em;
-        bottom: .4em;
+        align-self: center;
     }
 }
 
@@ -91,6 +87,7 @@ details.toggle-details summary {
     display: flex;
     align-items: center;
     width: fit-content;
+    cursor: pointer;
     list-style: none;
     border-radius: .4em;
     border: 1px solid #ccc;
@@ -99,6 +96,14 @@ details.toggle-details summary {
     font-size: .9em;
 }
 
+details.toggle-details summary:hover {
+    background: #f6f6f6;
+}
+
+details.toggle-details summary:active {
+    background: #eee;
+}
+
 details.toggle-details[open] summary {
     margin-bottom: .5em;
 }
@@ -115,3 +120,11 @@ details.toggle-details[open] summary ~ * {
   from {opacity: 0%;}
   to {opacity: 100%;}
 }
+
+/* Print rules - we hide all toggle button elements at print */
+@media print {
+    /* Always hide the summary so the button doesn't show up */
+    details.toggle-details summary {
+        display: none;
+    }
+}

sphinx_togglebutton/_static/togglebutton.js

@@ -137,3 +137,36 @@ const sphinxToggleRunWhenDOMLoaded = cb => {
 }
 sphinxToggleRunWhenDOMLoaded(addToggleToSelector)
 sphinxToggleRunWhenDOMLoaded(initToggleItems)
+
+/** Toggle details blocks to be open when printing */
+if (toggleOpenOnPrint == "true") {
+  window.addEventListener("beforeprint", () => {
+    // Open the details
+    document.querySelectorAll("details.toggle-details").forEach((el) => {
+      el.dataset["togglestatus"] = el.open;
+      el.open = true;
+    });
+
+    // Open the admonitions
+    document.querySelectorAll(".admonition.toggle.toggle-hidden").forEach((el) => {
+      console.log(el);
+      el.querySelector("button.toggle-button").click();
+      el.dataset["toggle_after_print"] = "true";
+    });
+  });
+  window.addEventListener("afterprint", () => {
+    // Re-close the details that were closed
+    document.querySelectorAll("details.toggle-details").forEach((el) => {
+      el.open = el.dataset["togglestatus"] == "true";
+      delete el.dataset["togglestatus"];
+    });
+
+    // Re-close the admonition toggle buttons
+    document.querySelectorAll(".admonition.toggle").forEach((el) => {
+      if (el.dataset["toggle_after_print"] == "true") {
+        el.querySelector("button.toggle-button").click();
+        delete el.dataset["toggle_after_print"];
+      }
+    });
+  });
+}