squiffy-runtime 6.0.0-alpha.14 → 6.0.0-alpha.17

package/src/plugins/animate.ts

@@ -0,0 +1,97 @@
+import { PluginHost, SquiffyPlugin } from "../types.plugins.js";
+import Handlebars from "handlebars";
+
+export function AnimatePlugin(): SquiffyPlugin {
+    let squiffy: PluginHost;
+
+    const parseDataset = (dataset: DOMStringMap): Record<string, any> => {
+        const result: Record<string, any> = {};
+
+        for (const [key, value] of Object.entries(dataset)) {
+            if (value == null) {
+                result[key] = value;
+                continue;
+            }
+
+            try {
+                result[key] = JSON.parse(value);
+            } catch {
+                result[key] = value;
+            }
+        }
+
+        return result;
+    };
+
+    const setupAnimations = (element: HTMLElement) => {
+        const selector = ".squiffy-animate";
+        for (const el of element.querySelectorAll<HTMLElement>(selector)) {
+            const params = parseDataset(el.dataset);
+
+            if (!params.content) {
+                continue;
+            }
+            el.innerHTML = params.content;
+
+            if (!params.name) {
+                continue;
+            }
+
+            const runAnimation = () => {
+                if (params.loop) {
+                    squiffy.animation.runAnimation(params.name, el, params, () => {}, true);
+                } else {
+                    squiffy.addTransition(() => {
+                        return new Promise<void>((resolve) => {
+                            const currentContent = el.innerHTML;
+                            squiffy.animation.runAnimation(params.name, el, params, () => {
+                                el.classList.remove("squiffy-animate");
+                                el.innerHTML = currentContent;
+                                resolve();
+                            }, false);
+                        });
+                    });
+                }
+            };
+
+            if (params.trigger === "link") {
+                const links = el.querySelectorAll("a");
+                for (const link of links) {
+                    squiffy.animation.addLinkAnimation(link, runAnimation);
+                }
+            } else {
+                runAnimation();
+            }
+        }
+    };
+
+    return {
+        name: "animate",
+        init(sq: PluginHost) {
+            squiffy = sq;
+
+            squiffy.registerHelper("animate", (name: string, options) => {
+                const content = options.fn(this);
+                const dataset: Record<string, any> = {
+                    name,
+                    content,
+                    ...options.hash,
+                };
+
+                const attrs = Object.entries(dataset)
+                    .map(([key, value]) =>
+                        ` data-${Handlebars.escapeExpression(key)}="${Handlebars.escapeExpression(JSON.stringify(value))}"`
+                    )
+                    .join("");
+
+                return new Handlebars.SafeString(`<span class="squiffy-animate"${attrs}></span>`);
+            });
+        },
+        onWrite(element: HTMLElement) {
+            setupAnimations(element);
+        },
+        onLoad() {
+            setupAnimations(squiffy.outputElement);
+        }
+    };
+}

package/src/plugins/index.ts

@@ -0,0 +1,13 @@
+import { ReplaceLabel } from "./replaceLabel.js";
+import { RotateSequencePlugin } from "./rotateSequence.js";
+import { RandomPlugin } from "./random.js";
+import { LivePlugin } from "./live.js";
+import { AnimatePlugin } from "./animate.js";
+
+export const Plugins = {
+    ReplaceLabel,
+    RotateSequencePlugin,
+    RandomPlugin,
+    LivePlugin,
+    AnimatePlugin,
+};

package/src/plugins/live.ts

@@ -0,0 +1,83 @@
+import { PluginHost, SquiffyPlugin } from "../types.plugins.js";
+import Handlebars from "handlebars";
+import { fadeReplace } from "../utils.js";
+import { SquiffyEventMap } from "../events.js";
+
+export function LivePlugin(): SquiffyPlugin {
+    let squiffy: PluginHost;
+    return {
+        name: "live",
+        init(sq: PluginHost) {
+            squiffy = sq;
+
+            // No need to render the attribute value (or section or passage contents) here - this
+            // is handled by onWrite, so that we pick up any attribute values set in the same passage.
+            // TODO: We could mark values as "pending", then in onWrite we could iteratively resolve
+            // any that are still pending. That would let us pick up {{live}} helpers inside embed
+            // live sections/passages.
+            squiffy.registerHelper("live", (attribute: string, options) => {
+                const section = options.hash.section as string || "";
+                if (section) {
+                    return new Handlebars.SafeString(`<span class="squiffy-live" data-attribute="${attribute}" data-section="${section}"></span>`);
+                }
+                const passage = options.hash.passage as string || "";
+                if (passage) {
+                    return new Handlebars.SafeString(`<span class="squiffy-live" data-attribute="${attribute}" data-passage="${passage}"></span>`);
+                }
+                return new Handlebars.SafeString(`<span class="squiffy-live" data-attribute="${attribute}"></span>`);
+            });
+
+            const onSet = async (e: SquiffyEventMap["set"]) => {
+                const promises: Promise<void>[] = [];
+                const selector = `.squiffy-live[data-attribute="${CSS.escape(e.attribute)}"]`;
+                for (const el of squiffy.outputElement.querySelectorAll<HTMLElement>(selector)) {
+                    const oldContent = el.innerHTML;
+                    let newContent = "";
+                    if (el.dataset.section) {
+                        const sectionText = squiffy.getSectionText(el.dataset.section);
+                        if (sectionText) {
+                            newContent = squiffy.processText(sectionText, true);
+                        }
+                    } else if (el.dataset.passage) {
+                        const passageText = squiffy.getPassageText(el.dataset.passage);
+                        if (passageText) {
+                            newContent = squiffy.processText(passageText, true);
+                        }
+                    } else {
+                        newContent = e.value;
+                    }
+                    if (oldContent !== newContent) {
+                        promises.push(fadeReplace(el, newContent));
+                    }
+                }
+                await Promise.all(promises);
+            };
+
+            let setQueue: Promise<void> = Promise.resolve();
+            squiffy.on("set", (e) => {
+                setQueue = setQueue.then(() => onSet(e));
+            });
+        },
+        onWrite(element: HTMLElement) {
+            if (!squiffy) return;
+
+            const selector = ".squiffy-live";
+            element.querySelectorAll<HTMLElement>(selector).forEach((el) => {
+                if (el.dataset.section) {
+                    const sectionText = squiffy.getSectionText(el.dataset.section);
+                    if (sectionText) {
+                        el.innerHTML = squiffy.processText(sectionText, true);
+                    }
+                } else if (el.dataset.passage) {
+                    const passageText = squiffy.getPassageText(el.dataset.passage);
+                    if (passageText) {
+                        el.innerHTML = squiffy.processText(passageText, true);
+                    }
+                } else {
+                    const attribute = el.dataset.attribute;
+                    el.textContent = attribute ? squiffy.get(attribute) : "";
+                }
+            });
+        }
+    };
+}

package/src/plugins/random.ts

@@ -0,0 +1,22 @@
+import { PluginHost, SquiffyPlugin } from "../types.plugins.js";
+import Handlebars from "handlebars";
+import type { SafeString } from "handlebars";
+
+export function RandomPlugin() : SquiffyPlugin {
+    return {
+        name: "random",
+        init(squiffy: PluginHost) {
+            squiffy.registerHelper("random", (items: (string | SafeString)[], options) => {
+                const stringItems = items.map(i => i.toString());
+                const randomIndex = Math.floor(Math.random() * stringItems.length);
+                const item = stringItems[randomIndex];
+
+                const attribute = options.hash.set as string || "";
+                if (attribute) {
+                    squiffy.set(attribute, item);
+                }
+                return new Handlebars.SafeString(item);
+            });
+        }
+    };
+}

package/src/plugins/replaceLabel.ts

@@ -0,0 +1,22 @@
+import { PluginHost, SquiffyPlugin } from "../types.plugins.js";
+import Handlebars from "handlebars";
+import { fadeReplace } from "../utils.js";
+
+export function ReplaceLabel() : SquiffyPlugin {
+    return {
+        name: "replaceLabel",
+        init(squiffy: PluginHost) {
+            squiffy.registerHelper("label", (name: string, options) => {
+                return new Handlebars.SafeString(`<span class="squiffy-label-${name}">${options.fn(this)}</span>`);
+            });
+            squiffy.registerHelper("replace", (name: string, options) => {
+                const result = options.fn(this);
+                const element = squiffy.outputElement.querySelector<HTMLElement>(`.squiffy-label-${name}`);
+                if (element) {
+                    squiffy.addTransition(() => fadeReplace(element, result));
+                }
+                return "";
+            });
+        }
+    };
+}

package/src/plugins/rotateSequence.ts

@@ -0,0 +1,61 @@
+import { HandleLinkResult, PluginHost, SquiffyPlugin } from "../types.plugins.js";
+import Handlebars from "handlebars";
+import type { SafeString } from "handlebars";
+
+export function RotateSequencePlugin() : SquiffyPlugin {
+    const rotateSequence = (squiffy: PluginHost, type: string, items: (string | SafeString)[], options: any) => {
+        const stringItems = items.map(i => i.toString());
+        const rotation = rotate(stringItems, null);
+        const attribute = options.hash.set as string || "";
+        if (attribute) {
+            squiffy.set(attribute, rotation[0]);
+        }
+        const optionsString = JSON.stringify(rotation.slice(1)) || "";
+        const text = options.hash.show == "next" ? rotation[1] : rotation[0];
+        return new Handlebars.SafeString(`<a class="squiffy-link" data-handler="${type}" data-value="${rotation[0]}" data-show="${options.hash.show || ""}" data-options='${optionsString}' data-attribute="${attribute}" role="link">${text}</a>`);
+    };
+
+    const handleLink = (squiffy: PluginHost, link: HTMLElement, isRotate: boolean) => {
+        const result: HandleLinkResult = {};
+        const options = JSON.parse(link.getAttribute("data-options")) as string[] || [];
+
+        const rotateResult = rotate(options, isRotate ? link.getAttribute("data-value") : "");
+
+        link.innerHTML = link.getAttribute("data-show") == "next" ? rotateResult[1] : rotateResult[0];
+        link.setAttribute("data-value", rotateResult[0]);
+        link.setAttribute("data-options", JSON.stringify(rotateResult.slice(1)) || "");
+        if (!rotateResult[1]) {
+            result.disableLink = true;
+        }
+        const attribute = link.getAttribute("data-attribute");
+        if (attribute) {
+            squiffy.set(attribute, link.getAttribute("data-value"));
+        }
+
+        return result;
+    };
+
+    const rotate = (options: string[], current: string | null): string[] => {
+        const next = options[0];
+        const remaining = options.slice(1);
+        if (current) remaining.push(current);
+        return [next, ...remaining];
+    };
+
+    return {
+        name: "rotateSequence",
+        init(squiffy: PluginHost) {
+            squiffy.registerHelper("rotate", (items: (string | SafeString)[], options) =>
+                rotateSequence(squiffy, "rotate", items, options));
+            squiffy.registerHelper("sequence", (items: (string | SafeString)[], options) =>
+                rotateSequence(squiffy, "sequence", items, options));
+
+            squiffy.registerLinkHandler("rotate", (link: HTMLElement) => {
+                return handleLink(squiffy, link, true);
+            });
+            squiffy.registerLinkHandler("sequence", (link: HTMLElement) => {
+                return handleLink(squiffy, link, false);
+            });
+        }
+    };
+}