@hkdigital/lib-sveltekit 0.1.43 → 0.1.44

package/dist/widgets/presenter/Presenter.state.svelte.d.ts

@@ -26,11 +26,15 @@ export class PresenterState {
     /** @type {string} */
     currentSlideName: string;
     /** @type {string} */
+    nextSlideName: string;
+    /** @type {string} */
     pendingSlideName: string;
     /** @type {boolean} */
     configured: boolean;
-    /** @type {Map<Symbol, () => void>} */
-    onUpdateListeners: Map<Symbol, () => void>;
+    /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+    onBeforeListeners: Map<Symbol, (params: ListenerParams) => void>;
+    /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+    onShowListeners: Map<Symbol, (params: ListenerParams) => void>;
     /**
      * Configure the presentation
      *
@@ -64,25 +68,6 @@ export class PresenterState {
 export type Slide = import("./typedef").Slide;
 export type Transition = import("./typedef").Transition;
 export type Layer = import("./typedef").Layer;
-export type LoadController = {
-    /**
-     * - Function to call when loading is complete
-     */
-    loaded: () => void;
-    /**
-     * - Function to return to the previous slide
-     */
-    cancel: () => void;
-};
-export type PresenterRef = {
-    /**
-     * - Navigate to a slide by name
-     */
-    gotoSlide: (name: string) => void;
-    /**
-     * - Get the current slide name
-     */
-    getCurrentSlideName: () => string;
-    onUpdate: (callback: any) => Function;
-};
+export type PresenterRef = import("./typedef").Layer;
+export type LoadController = import("./typedef").Layer;
 import { HkPromise } from '../../classes/promise/index.js';

package/dist/widgets/presenter/Presenter.state.svelte.js

@@ -6,6 +6,8 @@ import { untrack } from 'svelte';
 
 import { HkPromise } from '../../classes/promise/index.js';
 
+import { STAGE_BEFORE, STAGE_SHOW } from './constants.js';
+
 /**
  * @typedef {import("./typedef").Slide} Slide
  */
@@ -19,16 +21,11 @@ import { HkPromise } from '../../classes/promise/index.js';
  */
 
 /**
- * @typedef {Object} LoadController
- * @property {() => void} loaded - Function to call when loading is complete
- * @property {() => void} cancel - Function to return to the previous slide
+ * @typedef {import("./typedef").Layer} PresenterRef
  */
 
 /**
- * @typedef {Object} PresenterRef
- * @property {(name: string) => void} gotoSlide - Navigate to a slide by name
- * @property {() => string} getCurrentSlideName - Get the current slide name
- * @property {(callback)=>Function} onUpdate
+ * @typedef {import("./typedef").Layer} LoadController
  */
 
 const Z_BACK = 0;
@@ -89,14 +86,20 @@ export class PresenterState {
     return currentSlide?.name || '';
   });
 
+  /** @type {string} */
+  nextSlideName;
+
   /** @type {string} */
   pendingSlideName;
 
   /** @type {boolean} */
   configured = false;
 
-  /** @type {Map<Symbol, () => void>} */
-  onUpdateListeners = new Map();
+  /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+  onBeforeListeners = new Map();
+
+  /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+  onShowListeners = new Map();
 
   /**
    * Initialize the presenter state and set up reactivity
@@ -281,11 +284,19 @@ export class PresenterState {
       throw new Error('Not configured yet');
     }
 
+    if (slide.name === this.currentSlideName) {
+      throw new Error(`gotoSlide cannot transition to current slide`);
+    }
+
+    this.nextSlideName = slide.name;
+
     if (this.busy) {
       this.pendingSlideName = slide.name;
       return;
     }
 
+    this.#callOnBeforeListeners();
+
     this.slideLoadingPromise = null;
 
     // Get a presenter reference to pass to the slide
@@ -396,6 +407,7 @@ export class PresenterState {
     if (this.pendingSlideName) {
       const pendingName = this.pendingSlideName;
 
+      this.nextSlideName = pendingName;
       this.pendingSlideName = null;
 
       untrack(() => {
@@ -403,14 +415,26 @@ export class PresenterState {
           this.gotoSlide(pendingName);
         }
       });
+    } else {
+      this.nextSlideName = null;
     }
 
-    this.#CallUpdateListeners();
+    this.#callOnShowListeners();
   }
 
-  #CallUpdateListeners() {
-    for (const fn of this.onUpdateListeners.values()) {
-      fn();
+  #callOnBeforeListeners() {
+    let nextSlideName = this.nextSlideName;
+
+    for (const fn of this.onBeforeListeners.values()) {
+      fn({ stage: STAGE_BEFORE, slideName: nextSlideName });
+    }
+  }
+
+  #callOnShowListeners() {
+    let currentSlideName = this.currentSlideName;
+
+    for (const fn of this.onShowListeners.values()) {
+      fn({ stage: STAGE_SHOW, slideName: currentSlideName });
     }
   }
 
@@ -557,12 +581,20 @@ export class PresenterState {
     return {
       gotoSlide: (name) => this.gotoSlide(name),
       getCurrentSlideName: () => this.currentSlideName,
-      onUpdate: (callback) => {
+      onBefore: (callback) => {
+        const key = Symbol();
+        this.onBeforeListeners.set(key, callback);
+
+        return () => {
+          this.onBeforeListeners.delete(key);
+        };
+      },
+      onAfter: (callback) => {
         const key = Symbol();
-        this.onUpdateListeners.set(key, callback);
+        this.onShowListeners.set(key, callback);
 
         return () => {
-          this.onUpdateListeners.delete(key);
+          this.onShowListeners.delete(key);
         };
       }
     };

package/dist/widgets/presenter/constants.d.ts

@@ -1,3 +1,5 @@
 export const TRANSITION_CSS: "css";
 export const FADE_IN: "fade-in";
 export const FADE_OUT: "fade-out";
+export const STAGE_BEFORE: "stage-before";
+export const STAGE_SHOW: "stage-show";

package/dist/widgets/presenter/constants.js

@@ -2,3 +2,6 @@ export const TRANSITION_CSS = 'css';
 
 export const FADE_IN = 'fade-in';
 export const FADE_OUT = 'fade-out';
+
+export const STAGE_BEFORE = 'stage-before';
+export const STAGE_SHOW = 'stage-show';

package/dist/widgets/presenter/typedef.d.ts

@@ -25,6 +25,31 @@ export type FadeOutTransition = {
     duration?: number;
     timing?: string;
 };
+export type ListenerParams = {
+    stage: string;
+    slideName: string;
+};
+export type LoadController = {
+    /**
+     * - Function to call when loading is complete
+     */
+    loaded: () => void;
+    /**
+     * - Function to return to the previous slide
+     */
+    cancel: () => void;
+};
+export type PresenterRef = {
+    /**
+     * - Navigate to a slide by name
+     */
+    gotoSlide: (name: string) => void;
+    /**
+     * - Get the current slide name
+     */
+    getCurrentSlideName: () => string;
+    onUpdate: (callback: any) => Function;
+};
 export type Transition = CssTransition | FadeInTransition | FadeOutTransition;
 export type SlideData = {
     [attrs: string]: any;

package/dist/widgets/presenter/typedef.js

@@ -32,6 +32,26 @@
  * }} FadeOutTransition
  */
 
+/**
+ * @typedef {{
+ *   stage: string,
+ *   slideName: string
+ * }} ListenerParams
+ */
+
+/**
+ * @typedef {Object} LoadController
+ * @property {() => void} loaded - Function to call when loading is complete
+ * @property {() => void} cancel - Function to return to the previous slide
+ */
+
+/**
+ * @typedef {Object} PresenterRef
+ * @property {(name: string) => void} gotoSlide - Navigate to a slide by name
+ * @property {() => string} getCurrentSlideName - Get the current slide name
+ * @property {(callback)=>Function} onUpdate
+ */
+
 /**
  * @typedef {CssTransition|FadeInTransition|FadeOutTransition} Transition
  */

package/dist/widgets/presenter/util.js

@@ -25,7 +25,7 @@ export function waitForRender(callback) {
           setTimeout(() => {
             callback();
             resolve();
-          }, 50);
+          }, 20);
         });
       });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.43",
+	"version": "0.1.44",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"