From 4e6b00afe60a05d8b2ac23d10863e0c84d699eb2 Mon Sep 17 00:00:00 2001
From: Ned Batchelder <ned@nedbatchelder.com>
Date: Mon, 9 Aug 2021 21:04:28 -0400
Subject: [PATCH] full-screen mode

---
 CHANGES                               |  2 ++
 src/aptus/web/static/aptus.js         | 19 ++++++++++++++-----
 src/aptus/web/static/style.css        |  4 ++--
 src/aptus/web/static/style.scss       |  3 +++
 src/aptus/web/templates/mainpage.html |  1 +
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/CHANGES b/CHANGES
index 102402f..1b4cfb0 100644
--- a/CHANGES
+++ b/CHANGES
@@ -5,6 +5,8 @@ Unreleased
 
 * Added lightness tweaking controls.
 
+* Added "F" for full-screen mode.
+
 * Web interface now has a favicon.
 
 Aptus 3.0.1, July 25 2021
diff --git a/src/aptus/web/static/aptus.js b/src/aptus/web/static/aptus.js
index 2deb1e5..0a13967 100644
--- a/src/aptus/web/static/aptus.js
+++ b/src/aptus/web/static/aptus.js
@@ -536,11 +536,13 @@ const App = {
                     this.view.paint();
                     break;
 
-                case "L":
-                    const url = `${document.URL}${this.view.url_args()}`.replace("&", "&amp;");
-                    const html = `<a href="${url}">${url}</a>`;
-                    document.querySelector("#linklink").innerHTML = html;
-                    Panels.show_panel("#linkpanel");
+                case "F":
+                    if (document.fullscreenElement) {
+                        document.exitFullscreen();
+                    }
+                    else {
+                        document.querySelector("body").requestFullscreen().then(() => {});
+                    }
                     break;
 
                 case "i":
@@ -551,6 +553,13 @@ const App = {
                     Panels.toggle_panel("#infopanel");
                     break;
 
+                case "L":
+                    const url = `${document.URL}${this.view.url_args()}`.replace("&", "&amp;");
+                    const html = `<a href="${url}">${url}</a>`;
+                    document.querySelector("#linklink").innerHTML = html;
+                    Panels.show_panel("#linkpanel");
+                    break;
+
                 case "P":
                     Panels.toggle_panel("#palettepanel");
                     break;
diff --git a/src/aptus/web/static/style.css b/src/aptus/web/static/style.css
index 72d6650..bf4a981 100644
--- a/src/aptus/web/static/style.css
+++ b/src/aptus/web/static/style.css
@@ -12,7 +12,7 @@ html.wait { cursor: wait; }
 
 body { font-family: Helvetica; overflow: hidden; margin: 0; padding: 0; height: 100%; }
 
-.canvas_container { display: flex; justify-content: center; width: 100%; }
+.canvas_container { display: flex; justify-content: center; width: 100%; height: 100%; }
 
 .canvas_sizer { position: absolute; top: 0; overflow: hidden; }
 
@@ -42,7 +42,7 @@ canvas.view.move { cursor: grab; }
 
 #splash.hidden { visibility: hidden; opacity: 0; transition: opacity 1s, visibility 1s; }
 
-#helppanel { width: 20em; top: 5em; right: 5em; left: auto; padding: 1em 1em 0 1em; }
+#helppanel { width: 20em; top: 5em; right: 5em; left: auto; padding: 1em 1em 0 1em; max-height: 80%; overflow: scroll; }
 
 #infopanel { width: 18em; top: 5em; left: 5em; }
 
diff --git a/src/aptus/web/static/style.scss b/src/aptus/web/static/style.scss
index f690f8b..5e12456 100644
--- a/src/aptus/web/static/style.scss
+++ b/src/aptus/web/static/style.scss
@@ -36,6 +36,7 @@ body {
     display: flex;
     justify-content: center;
     width: 100%;
+    height: 100%;
 }
 
 .canvas_sizer {
@@ -127,6 +128,8 @@ canvas.view {
     right: 5em;
     left: auto;
     padding: 1em 1em 0 1em;
+    max-height: 80%;
+    overflow: scroll;
 }
 
 #infopanel {
diff --git a/src/aptus/web/templates/mainpage.html b/src/aptus/web/templates/mainpage.html
index b50ce7f..e531339 100644
--- a/src/aptus/web/templates/mainpage.html
+++ b/src/aptus/web/templates/mainpage.html
@@ -47,6 +47,7 @@
         <p>
         <kbd>a</kbd> set the angle<br/>
         <kbd>c</kbd> toggle continuous coloring<br/>
+        <kbd>F</kbd> toggle full-screen<br/>
         <kbd>i</kbd> set the iteration limit<br/>
         <kbd>I</kbd> toggle the computation parameters panel<br/>
         <kbd>L</kbd> display a permalink<br/>