From 3f108c0a461123e8c19cdff27e6459b118a6ee1f Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Mon, 2 Oct 2023 16:04:18 +0200
Subject: [PATCH] Button to toggle presentation mode in export menu (#2660)

---
 frontend/components/ExportBanner.js  | 11 +++++++++++
 frontend/components/SlideControls.js | 12 ++++++------
 frontend/editor.css                  |  5 +++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/frontend/components/ExportBanner.js b/frontend/components/ExportBanner.js
index 2cfdc24696..dff5a1fb43 100644
--- a/frontend/components/ExportBanner.js
+++ b/frontend/components/ExportBanner.js
@@ -108,6 +108,17 @@ export const ExportBanner = ({ notebook_id, open, onClose, notebookfile_url, not
                     >
                         <span></span>
                     </button>
+                    <button
+                        title="Start presentation"
+                        class="toggle_presentation"
+                        onClick=${() => {
+                            onClose()
+                            // @ts-ignore
+                            window.present()
+                        }}
+                    >
+                        <span></span>
+                    </button>
                     <button title="Close" class="toggle_export" onClick=${() => onClose()}>
                         <span></span>
                     </button>
diff --git a/frontend/components/SlideControls.js b/frontend/components/SlideControls.js
index d96e3dce9b..d1295b436c 100644
--- a/frontend/components/SlideControls.js
+++ b/frontend/components/SlideControls.js
@@ -37,9 +37,9 @@ export const SlideControls = () => {
         const height = window.innerHeight
         const headers = Array.from(notebook_node.querySelectorAll("pluto-output h1, pluto-output h2"))
         const pos = headers.map((el) => el.getBoundingClientRect())
-        const edges = pos.map((rect) => rect.top + window.pageYOffset)
+        const edges = pos.map((rect) => rect.top + window.scrollY)
 
-        edges.push(notebook_node.getBoundingClientRect().bottom + window.pageYOffset)
+        edges.push(notebook_node.getBoundingClientRect().bottom + window.scrollY)
 
         const scrollPositions = headers.map((el, i) => {
             if (el.tagName == "H1") {
@@ -58,15 +58,15 @@ export const SlideControls = () => {
     const go_previous_slide = (/** @type {Event} */ e) => {
         const positions = calculate_slide_positions(e)
 
-        const pos = positions.reverse().find((y) => y < window.pageYOffset - 10)
+        const pos = positions.reverse().find((y) => y < window.scrollY - 10)
 
-        if (pos) window.scrollTo(window.pageXOffset, pos)
+        if (pos) window.scrollTo(window.scrollX, pos)
     }
 
     const go_next_slide = (/** @type {Event} */ e) => {
         const positions = calculate_slide_positions(e)
-        const pos = positions.find((y) => y - 10 > window.pageYOffset)
-        if (pos) window.scrollTo(window.pageXOffset, pos)
+        const pos = positions.find((y) => y - 10 > window.scrollY)
+        if (pos) window.scrollTo(window.scrollX, pos)
     }
 
     const presenting_ref = useRef(false)
diff --git a/frontend/editor.css b/frontend/editor.css
index 97f5913be3..0ca807c9f4 100644
--- a/frontend/editor.css
+++ b/frontend/editor.css
@@ -511,6 +511,7 @@ aside#export div#container {
     max-width: 1000px;
     padding-right: 10em;
     margin: 0 auto;
+    position: relative;
 }
 header aside#export div#container {
     /* to prevent the div from taking up horizontal page when the export pane is closed. On small screen this causes overscroll on the right. */
@@ -732,6 +733,10 @@ aside#export button.toggle_frontmatter_edit span {
     background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/newspaper-outline.svg");
     filter: invert(1);
 }
+aside#export button.toggle_presentation span {
+    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/easel-outline.svg");
+    filter: invert(1);
+}
 nav#at_the_top:after {
     margin-left: auto;
     align-self: center;