Merge pull request #29 from webrecorder/onbeforeunload-listener

add `beforeunload` handler on page change & remove it after download button is pressed

Author: emma-sg

src/archive-now.ts

@@ -22,6 +22,13 @@ const DEFAULT_URL = "https://example.com/";
 
 type Hint = "first-load" | "page-load" | "error" | "over-page-min" | "finished";
 
+const beforeUnloadHandler = (event: Event) => {
+  event.preventDefault();
+
+  // Included for legacy support, e.g. Chrome/Edge < 119
+  event.returnValue = true;
+};
+
 @customElement("archive-now")
 class ArchiveNow extends LitElement {
   @state()
@@ -281,6 +288,7 @@ class ArchiveNow extends LitElement {
     if (!win) {
       return;
     }
+    this.setWarnOnPageClose(true);
 
     const resp = await win.fetch(`./w/api/c/${this.collId}?all=1`);
     try {
@@ -291,6 +299,14 @@ class ArchiveNow extends LitElement {
     }
   }
 
+  setWarnOnPageClose(on: boolean) {
+    if (on) {
+      window.addEventListener("beforeunload", beforeUnloadHandler);
+    } else {
+      window.removeEventListener("beforeunload", beforeUnloadHandler);
+    }
+  }
+
   render() {
     return html`
       <header class="flex items-center justify-between [grid-area:header]">
@@ -355,6 +371,7 @@ class ArchiveNow extends LitElement {
           target="_blank"
           size="large"
           variant="primary"
+          @click=${() => this.setWarnOnPageClose(false)}
         >
           <sl-icon slot="prefix" name="download"></sl-icon>
           Download Archive (.wacz)