✨ ENH: Adding fullscreen button optional (#328)

Co-authored-by: lberndsenbaken <[email protected]>

docs/conf.py

@@ -114,6 +114,7 @@
     "use_repository_button": True,
     "use_download_button": True,
     # For testing
+    # "use_fullscreen_button": False,
     # "home_page_in_toc": True,
     # "single_page": True,
     # "extra_footer": "<a href='https://google.com'>Test</a>",  # DEPRECATED KEY

docs/configure.md

@@ -98,6 +98,18 @@ html_theme_options = {
     ...
 }
 ```
+## Fullscreen button
+
+You can add a button allowing users to toggle fullscreen mode for the webpage. To include this button, use the following configuration:
+
+```python
+html_theme_options = {
+    ...
+    "use_fullscreen_button": True,
+    ...
+}
+```
+
 
 ## Use a single-page version of this theme
 

sphinx_book_theme/__init__.py

@@ -185,6 +185,7 @@ def sbt_generate_nav_html(
         "theme_use_repository_button",
         "theme_use_issues_button",
         "theme_use_download_button",
+        "theme_use_fullscreen_button",
     ]
     for key in btns:
         if key in context:

sphinx_book_theme/theme.conf

@@ -18,6 +18,7 @@ extra_navbar = Theme by the <a href="https://ebp.jupyterbook.org">Executable Boo
 extra_footer =
 use_issues_button = False
 use_download_button = True
+use_fullscreen_button = True
 use_repository_button = False
 theme_dev_mode = False
 show_navbar_depth = 1

sphinx_book_theme/topbar.html

@@ -14,13 +14,7 @@
             {% endif %}
             {% include "topbar/download.html" %}
             {% include "topbar/repobuttons.html" %}
-
-            <!-- Full screen (wrap in <a> to have style consistency -->
-            <a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
-                    data-placement="bottom" onclick="toggleFullScreen()" aria-label="{{ translate('Fullscreen mode') }}"
-                    title="{{ translate('Fullscreen mode') }}"><i
-                        class="fas fa-expand"></i></button></a>
-
+            {% include "topbar/fullscreen.html" %}
             {% include "topbar/launchbuttons.html" %}
         </div>
 

sphinx_book_theme/topbar/fullscreen.html

@@ -0,0 +1,7 @@
+<!-- Full screen (wrap in <a> to have style consistency -->
+{% if theme_use_fullscreen_button %}
+<a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
+        data-placement="bottom" onclick="toggleFullScreen()" aria-label="{{ translate('Fullscreen mode') }}"
+        title="{{ translate('Fullscreen mode') }}"><i
+            class="fas fa-expand"></i></button></a>
+{% endif %}

src/jinja/theme.conf.j2

@@ -18,6 +18,7 @@ extra_navbar = Theme by the <a href="https://ebp.jupyterbook.org">Executable Boo
 extra_footer =
 use_issues_button = False
 use_download_button = True
+use_fullscreen_button = True
 use_repository_button = False
 theme_dev_mode = False
 show_navbar_depth = 1

tests/test_build.py

@@ -260,6 +260,20 @@ def test_topbar_download_button_off(sphinx_build_factory, file_regression):
     file_regression.check(source_btns.prettify(), extension=".html", encoding="utf8")
 
 
+def test_topbar_fullscreen_button_off(sphinx_build_factory, file_regression):
+    confoverrides = {
+        "html_theme_options.use_fullscreen_button": False,
+    }
+    sphinx_build = sphinx_build_factory("base", confoverrides=confoverrides).build(
+        assert_pass=True
+    )
+
+    fullscreen_buttons = sphinx_build.html_tree("section1", "ntbk.html").select(
+        ".full-screen-button"
+    )
+    assert len(fullscreen_buttons) == 0
+
+
 def test_right_sidebar_title(sphinx_build_factory, file_regression):
     confoverrides = {"html_theme_options.toc_title": "My Contents"}
     sphinx_build = sphinx_build_factory("base", confoverrides=confoverrides).build(