Attempt add adding a full screen in tab button. (#135)

Author: Carreau

docs/full.md

@@ -1,5 +1,10 @@
 # Fullscreen access
 
+Once and JupyterLite example has been activate by a user, and "Open in Tab" button is available that will open the same
+JupyterLite instance in a separate tab.
+
+## custom link to JupyterLite
+
 You can access the JupyterLite deployment that `jupyterlite-sphinx` made for you, in fullscreen, following the `./lite/lab` and `./lite/retro` relative urls:
 
 - [JupyterLab](./lite/lab/index.html)

jupyterlite_sphinx/jupyterlite_sphinx.js

@@ -115,6 +115,21 @@ window.tryExamplesHideIframe = (examplesContainerId, iframeParentContainerId) =>
     examplesContainer.classList.remove("hidden");
 }
 
+// this will be used by the "Open in tab" button that is present next
+// # to the "go back" button after an iframe is made visible.
+window.openInNewTab = (examplesContainerId, iframeParentContainerId) => {
+  const examplesContainer = document.getElementById(examplesContainerId);
+  const iframeParentContainer = document.getElementById(
+    iframeParentContainerId
+  );
+
+  window.open(
+    // we make some assumption that there is a single iframe and the the src is what we want to open.
+    // Maybe we should have tabs open JupyterLab by default.
+    iframeParentContainer.getElementsByTagName("iframe")[0].getAttribute("src")
+  );
+  tryExamplesHideIframe(examplesContainerId, iframeParentContainerId);
+};
 
 /* Global variable for try_examples iframe minHeight. Defaults to 0 but can be
  * modified based on configuration in try_examples.json */

jupyterlite_sphinx/jupyterlite_sphinx.py

@@ -442,12 +442,17 @@ def run(self):
 
         # Button with the onclick event to swap embedded notebook back to examples.
         go_back_button_html = (
-            '<div class="try_examples_button_container">'
             '<button class="try_examples_button" '
             f"onclick=\"window.tryExamplesHideIframe('{examples_div_id}',"
             f"'{iframe_parent_div_id}')\">"
             "Go Back</button>"
-            "</div>"
+        )
+
+        full_screen_button_html = (
+            '<button class="try_examples_button" '
+            f"onclick=\"window.openInNewTab('{examples_div_id}',"
+            f"'{iframe_parent_div_id}')\">"
+            "Open In Tab</button>"
         )
 
         # Button with the onclick event to swap examples with embedded notebook.
@@ -465,7 +470,10 @@ def run(self):
         # Combine everything
         notebook_container_html = (
             iframe_parent_container_div_start
+            + '<div class="try_examples_button_container">'
             + go_back_button_html
+            + full_screen_button_html
+            + "</div>"
             + iframe_container_div
             + iframe_parent_container_div_end
         )