respect back / forward navigation (fixes kjk#53)

l2dy · Jul 6, 2024 · f7f8b84 · f7f8b84
1 parent a52df86
commit f7f8b84
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 28 deletions.
diff --git a/src/components/App.svelte b/src/components/App.svelte
@@ -55,15 +55,16 @@
     kMyFunctionsNoteName,
     loadNoteIfExists,
     debugRemoveLocalStorageNotes,
+    noteExists,
   } from "../notes";
-  import { getMetadata, getNoteMeta, getNotesMetadata } from "../metadata";
+  import { getNoteMeta, getNotesMetadata } from "../metadata";
   import {
     getAltChar,
     getClipboardText,
     isAltNumEvent,
     isDev,
     len,
-    setURLHashNoReload,
+    pushHistory,
     stringSizeInUtf8Bytes,
     throwIf,
     trimPrefix,
@@ -230,18 +231,27 @@
       }
     });
 
-    //    window.onbeforeunload = async (ev) => {
-    // //ev.preventDefault();
-    // try {
-    //   await onAppExit();
-    // } catch (e) {
-    //   console.log(e);
-    // }
-    // setTimeout(() => {
-    //   console.log("yes, fnished");
-    // }, 1000); // wait for 1 second
-    // return false;
-    //  };
+    window.addEventListener("popstate", function (ev) {
+      let state = ev.state;
+      if (!state || !state.noteName) {
+        console.log(
+          "popstate: state is null or has no 'noteName' field:",
+          state,
+        );
+        return;
+      }
+      let name = state.noteName;
+      console.log("popstate:", name, state);
+      if (name === noteName) {
+        console.log("smae as noteName, nothing to do");
+        return;
+      }
+      if (!noteExists(name)) {
+        console.log(`Note with name '${name}' doesn't exist`);
+        return;
+      }
+      openNote(name, false /* skip save */, true /* noPushHistory */);
+    });
 
     logAppOpen();
 
@@ -1514,13 +1524,18 @@
     }
   }
 
-  async function openNote(name, skipSave = false) {
+  /**
+   * @param {string} name
+   * @param {boolean} skipSave
+   * @param {boolean} noPushHistory
+   */
+  async function openNote(name, skipSave = false, noPushHistory = false) {
     console.log("App.openNote:", name);
     let editor = getEditorComp();
     editor.setReadOnly(true);
     let msg = `Loading <span class="font-bold">${name}</span>...`;
     showModalMessageHTML(msg, 300);
-    await editor.openNote(name, skipSave);
+    await editor.openNote(name, skipSave, noPushHistory);
     // await sleep(400);
     clearModalMessage();
     getEditorComp().focus();
@@ -1590,8 +1605,9 @@
 
   /**
    * @param {string} name
+   * @param {boolean} noPushHistory
    */
-  function didOpenNote(name) {
+  function didOpenNote(name, noPushHistory = false) {
     console.log("didOpenNote:", name);
     throwIf(!name);
     noteName = name;
@@ -1604,7 +1620,9 @@
     }
 
     window.document.title = name;
-    setURLHashNoReload(name);
+    if (!noPushHistory) {
+      pushHistory(name);
+    }
     setSetting("currentNoteName", name);
     updateDocSize();
   }

diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
@@ -32,7 +32,7 @@
     fontSize: number,
     cursorChange: (e: SelectionChangeEvent) => void,
     docDidChange: () => void,
-    didOpenNote: (name: string) => void,
+    didOpenNote: (name: string, noPushHistory: boolean) => void,
    }}*/
 
   let {
@@ -138,7 +138,7 @@
       let settings = getSettings();
       let name = settings.currentNoteName;
       throwIf(!name);
-      didOpenNote(name);
+      didOpenNote(name, false);
 
       scheduleRefreshFromDisk();
     });
@@ -323,7 +323,11 @@
   /**
    * @param {string} name
    */
-  export async function openNote(name, skipSave = false) {
+  export async function openNote(
+    name,
+    skipSave = false,
+    noPushHistory = false,
+  ) {
     console.log("openNote:", name);
     if (!skipSave) {
       // TODO: this is async so let's hope it works
@@ -346,7 +350,7 @@
     });
     focus();
     console.log("openNote: triggering docChanged event, name:", name);
-    didOpenNote(name);
+    didOpenNote(name, noPushHistory);
   }
 </script>
 

diff --git a/src/notes.js b/src/notes.js
@@ -636,13 +636,21 @@ function loadNoteLS(name) {
   return localStorage.getItem(key);
 }
 
+/**
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function noteExists(name) {
+  let notes = getLatestNoteNames();
+  return notes.includes(name);
+}
+
 /**
  * @param {string} name
  * @returns {Promise<string>}
  */
 export async function loadNoteIfExists(name) {
-  let notes = getLatestNoteNames();
-  if (!notes.includes(name)) {
+  if (!noteExists(name)) {
     return null;
   }
   return await loadNote(name);

diff --git a/src/util.js b/src/util.js
@@ -230,14 +230,15 @@ export function isAltNumEvent(e) {
 }
 
 /**
- * @param {string} hash
+ * @param {string} noteName
  */
-export function setURLHashNoReload(hash) {
+export function pushHistory(noteName) {
   // @ts-ignore
   let url = new URL(window.location);
-  url.hash = encodeURIComponent(hash);
+  url.hash = encodeURIComponent(noteName);
   // update browser's URL without reloading the page
-  window.history.pushState({}, "", url);
+  window.history.pushState({ noteName: noteName }, noteName, url);
+  console.log("window.history.pushState:", noteName);
 }
 
 let sleepSetTimeout_ctrl;