diff --git a/docs/conf.py b/docs/conf.py index fb638ce..c289685 100644 --- a/docs/conf.py +++ b/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". diff --git a/docs/use.md b/docs/use.md index 3df27fc..4612b3d 100644 --- a/docs/use.md +++ b/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 +``` diff --git a/sphinx_togglebutton/__init__.py b/sphinx_togglebutton/__init__.py index 6cbeba9..26c9fc5 100644 --- a/sphinx_togglebutton/__init__.py +++ b/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) diff --git a/sphinx_togglebutton/_static/togglebutton.css b/sphinx_togglebutton/_static/togglebutton.css index 2c86bb4..3560ceb 100644 --- a/sphinx_togglebutton/_static/togglebutton.css +++ b/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; + } +} \ No newline at end of file diff --git a/sphinx_togglebutton/_static/togglebutton.js b/sphinx_togglebutton/_static/togglebutton.js index 1ce6047..0d15d0c 100644 --- a/sphinx_togglebutton/_static/togglebutton.js +++ b/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"]; + } + }); + }); +}