Button to toggle presentation mode in export menu (#2660)

fonsp · Oct 2, 2023 · 3f108c0 · 3f108c0
1 parent 049ff09
commit 3f108c0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;