Add exSTATic support

src/lib/components/Reader/Reader.svelte

@@ -8,7 +8,7 @@
     zoomFitToScreen
   } from '$lib/panzoom';
   import { progress, settings, updateProgress, type VolumeSettings } from '$lib/settings';
-  import { clamp, debounce } from '$lib/util';
+  import { clamp, debounce, fireExstaticEvent } from '$lib/util';
   import { Input, Popover, Range, Spinner } from 'flowbite-svelte';
   import MangaPage from './MangaPage.svelte';
   import {
@@ -22,6 +22,7 @@
   import SettingsButton from './SettingsButton.svelte';
   import { getCharCount } from '$lib/util/count-chars';
   import QuickActions from './QuickActions.svelte';
+  import { beforeNavigate } from '$app/navigation';
 
   // TODO: Refactor this whole mess
   export let volumeSettings: VolumeSettings;
@@ -65,10 +66,12 @@
         return;
       }
       const pageClamped = clamp(newPage, 1, pages?.length);
+      const charCount = getCharCount(pages, pageClamped) || 0;
+
       updateProgress(
         volume.mokuroData.volume_uuid,
         pageClamped,
-        getCharCount(pages, pageClamped) || 0,
+        charCount,
         pageClamped === pages.length || pageClamped === pages.length - 1
       );
       zoomDefault();
@@ -198,6 +201,28 @@
       }
     }
   }
+
+  $: {
+    if (volume) {
+      fireExstaticEvent('mokuro-reader:page.change', {
+        title: volume.mokuroData.title,
+        volumeName: volume.mokuroData.volume,
+        currentCharCount: charCount || 0,
+        currentPageNum: page
+      });
+    }
+  }
+
+  beforeNavigate(() => {
+    if (volume) {
+      fireExstaticEvent('mokuro-reader:reader.closed', {
+        title: volume.mokuroData.title,
+        volumeName: volume.mokuroData.volume,
+        currentCharCount: charCount || 0,
+        currentPageNum: page
+      });
+    }
+  });
 </script>
 
 <svelte:window

src/lib/components/Settings/QuickAccess.svelte

@@ -3,11 +3,18 @@
   import { isReader } from '$lib/util';
 
   import { Button } from 'flowbite-svelte';
+
+  export let hidden = false;
+
+  function onClose() {
+    hidden = true;
+    history.back();
+  }
 </script>
 
 {#if isReader()}
   <div class="flex flex-col gap-2">
     <Button color="alternative" on:click={toggleFullScreen}>Toggle fullscreen</Button>
-    <Button color="alternative" on:click={() => history.back()}>Close reader</Button>
+    <Button color="alternative" on:click={onClose}>Close reader</Button>
   </div>
 {/if}

src/lib/components/Settings/Settings.svelte

@@ -56,7 +56,7 @@
   </div>
   <div class="flex flex-col gap-5">
     <Accordion flush>
-      <QuickAccess />
+      <QuickAccess bind:hidden />
       {#if isReader()}
         <VolumeSettings />
       {:else}

src/lib/util/count-chars.ts

@@ -12,7 +12,8 @@ import type { Page } from "$lib/types";
 export function countChars(line: string) {
   const isNotJapaneseRegex = /[^0-9A-Z○◯々-〇〻ぁ-ゖゝ-ゞァ-ヺー０-９Ａ-Ｚｦ-ﾝ\p{Radical}\p{Unified_Ideograph}]+/gimu
   const cleaned = line.replace(isNotJapaneseRegex, '')
-  return cleaned.length;
+
+  return Array.from(cleaned).length;
 }
 
 export function getCharCount(pages: Page[], currentPage?: number) {

src/lib/util/misc.ts

@@ -1,6 +1,7 @@
 import { page } from "$app/stores";
 import { get } from "svelte/store";
 import { showSnackbar } from "./snackbar";
+import { browser } from "$app/environment";
 
 export function clamp(num: number, min: number, max: number) {
   return Math.min(Math.max(num, min), max);
@@ -31,3 +32,18 @@ export function toClipboard() {
   );
   showSnackbar('Copied to clipboard');
 }
+
+type ExtaticPayload = {
+  title: string;
+  volumeName: string;
+  currentCharCount: number;
+  currentPageNum: number;
+}
+
+type ExtaticEvent = 'mokuro-reader:page.change' | 'mokuro-reader:reader.closed'
+
+export function fireExstaticEvent(event: ExtaticEvent, payload: ExtaticPayload) {
+  if (browser) {
+    document.dispatchEvent(new CustomEvent(event, { detail: payload }))
+  }
+}