Merge branch 'main' into use-package-loading-estimates-for-notebook-l…

…aunch-time-estimate

frontend/binder.css

@@ -133,13 +133,11 @@ body.wiggle_binder .edit_or_run > button {
 .binder_help_text {
  --width: min(85vw, 570px);
  position: fixed;
- top: 5rem;
  max-height: calc(100vh - 4rem);
  overflow: auto;
  width: var(--width);
  padding: 16px;
  border-radius: 8px;
- left: calc(50vw - var(--width) / 2);
  background-color: white;
  color: black;
  color-scheme: light;

frontend/common/useDialog.js

@@ -0,0 +1,41 @@
+//@ts-ignore
+import dialogPolyfill from "https://cdn.jsdelivr.net/npm/[email protected]/dist/dialog-polyfill.esm.min.js"
+
+import { useEffect, useLayoutEffect, useRef } from "../imports/Preact.js"
+
+/**
+ * @returns {[import("../imports/Preact.js").Ref<HTMLDialogElement?>, () => void, () => void, () => void]}
+ */
+export const useDialog = ({ light_dismiss = false } = {}) => {
+ const dialog_ref = useRef(/** @type {HTMLDialogElement?} */ (null))
+
+ useLayoutEffect(() => {
+ if (dialog_ref.current != null) dialogPolyfill.registerDialog(dialog_ref.current)
+ }, [dialog_ref.current])
+
+ //@ts-ignore
+ const open = () => dialog_ref.current.showModal()
+ //@ts-ignore
+ const close = () => dialog_ref.current.close()
+ //@ts-ignore
+ const toggle = () => (dialog_ref.current.open ? dialog_ref.current?.close() : dialog_ref.current?.showModal())
+
+ useEffect(() => {
+ if (light_dismiss) {
+ const handleclick = (e) => {
+ if (dialog_ref.current?.open && dialog_ref.current.contains(e.target)) {
+ close()
+ // Avoid activating whatever was below
+ e.stopPropagation()
+ e.preventDefault()
+ }
+ }
+ document.body.addEventListener("click", handleclick)
+ return () => {
+ document.body.removeEventListener("click", handleclick)
+ }
+ }
+ }, [dialog_ref.current])
+
+ return [dialog_ref, open, close, toggle]
+}

frontend/components/EditOrRunButton.js

@@ -1,8 +1,11 @@
 import _ from "../imports/lodash.js"
+import { html, useEffect, useState, useRef, useLayoutEffect } from "../imports/Preact.js"
 import { BackendLaunchPhase } from "../common/Binder.js"
-import { html, useEffect, useState, useRef } from "../imports/Preact.js"
 import { time_estimate, usePackageTimingData } from "../common/InstallTimeEstimate.js"
 
+import { has_ctrl_or_cmd_pressed } from "../common/KeyboardShortcuts.js"
+import { useDialog } from "../common/useDialog.js"
+
 export const RunLocalButton = ({ show, start_local }) => {
  //@ts-ignore
  window.open_edit_or_run_popup = () => {
@@ -31,36 +34,14 @@ export const RunLocalButton = ({ show, start_local }) => {
  * }} props
  * */
 export const BinderButton = ({ offer_binder, start_binder, notebookfile, notebook }) => {
- const [popupOpen, setPopupOpen] = useState(false)
+ const [dialog_ref, openModal, closeModal, toggleModal] = useDialog({ light_dismiss: true })
+
  const [showCopyPopup, setShowCopyPopup] = useState(false)
  const notebookfile_ref = useRef("")
  notebookfile_ref.current = notebookfile ?? ""
 
  //@ts-ignore
- window.open_edit_or_run_popup = () => {
- setPopupOpen(true)
- }
-
- useEffect(() => {
- const handlekeyup = (e) => {
- e.key === "Escape" && setPopupOpen(false)
- }
- const handleclick = (e) => {
- if (popupOpen && !e.target?.closest(".binder_help_text")) {
- setPopupOpen(false)
- // Avoid activating whatever was below
- e.stopPropagation()
- e.preventDefault()
- }
- }
- document.body.addEventListener("keyup", handlekeyup)
- document.body.addEventListener("click", handleclick)
-
- return () => {
- document.body.removeEventListener("keyup", handlekeyup)
- document.body.removeEventListener("click", handleclick)
- }
- }, [popupOpen])
+ window.open_edit_or_run_popup = openModal
 
  useEffect(() => {
  //@ts-ignore
@@ -79,16 +60,15 @@ export const BinderButton = ({ offer_binder, start_binder, notebookfile, noteboo
  return html`<div class="edit_or_run">
  <button
  onClick=${(e) => {
+ toggleModal()
  e.stopPropagation()
  e.preventDefault()
- setPopupOpen(!popupOpen)
  }}
  >
  <b>Edit</b> or <b>run</b> this notebook
  </button>
- ${popupOpen &&
- html`<div class="binder_help_text">
- <span onClick=${() => setPopupOpen(false)} class="close"></span>
+ <dialog ref=${dialog_ref} class="binder_help_text">
+ <span onClick=${closeModal} class="close"></span>
  ${offer_binder
  ? html`
  <p style="text-align: center;">
@@ -165,7 +145,7 @@ export const BinderButton = ({ offer_binder, start_binder, notebookfile, noteboo
  `}
  </li>
  </ol>
- </div>`}
+ </dialog>
  </div>`
 }
 

frontend/components/Editor.js

@@ -1510,9 +1510,6 @@ patch: ${JSON.stringify(
  />`)
  }
  <div class="flex_grow_2"></div>
- <button class="toggle_export" title="Export..." onClick=${() => {
- this.setState({ export_menu_open: !export_menu_open })
- }}><span></span></button>
  <div id="process_status">${
  status.binder && status.loading
  ? "Loading binder..."
@@ -1532,6 +1529,9 @@ patch: ${JSON.stringify(
  ? html`${restart_button("Run notebook code", true)}`
  : null
  }</div>
+ <button class="toggle_export" title="Export..." onClick=${() => {
+ this.setState({ export_menu_open: !export_menu_open })
+ }}><span></span></button>
  </nav>
  </header>
  

frontend/components/FrontmatterInput.js

@@ -7,6 +7,7 @@ import "https://cdn.jsdelivr.net/gh/fonsp/[email protected]/lib/rebel-tag-in
 //@ts-ignore
 import dialogPolyfill from "https://cdn.jsdelivr.net/npm/[email protected]/dist/dialog-polyfill.esm.min.js"
 import immer from "../imports/immer.js"
+import { useDialog } from "../common/useDialog.js"
 
 /**
  * @param {{
@@ -32,15 +33,7 @@ export const FrontMatterInput = ({ remote_frontmatter, set_remote_frontmatter })
  })
  )
 
- const dialog_ref = useRef(/** @type {HTMLDialogElement?} */ (null))
- useLayoutEffect(() => {
- dialogPolyfill.registerDialog(dialog_ref.current)
- })
-
- //@ts-ignore
- const open = () => dialog_ref.current.showModal()
- //@ts-ignore
- const close = () => dialog_ref.current.close()
+ const [dialog_ref, open, close, _toggle] = useDialog({ light_dismiss: false })
 
  const cancel = () => {
  set_frontmatter(remote_frontmatter ?? {})