@finsweet/webflow-apps-utils 1.0.6 → 1.0.8

package/dist/utils/webflow/DisplayController.d.ts

@@ -0,0 +1,55 @@
+import { animations, type Easings } from '../animations';
+import { type InteractionParams } from './Interaction';
+export interface DisplayControllerParams {
+    /**
+     * The main element. Accepts both an HTMLElement or a string selector.
+     */
+    element: HTMLElement;
+    /**
+     * If the display must be controlled through a Webflow interaction.
+     */
+    interaction?: InteractionParams;
+    /**
+     * Defines a custom animation to be used when showing/hiding the element.
+     */
+    animation?: keyof typeof animations;
+    /**
+     * If set to true, the element will be set to `display: none`.
+     */
+    startsHidden?: boolean;
+    /**
+     * The duration of the animation in milliseconds.
+     */
+    animationDuration?: number;
+    /**
+     * The easing of the animation.
+     */
+    animationEasing: Easings[number];
+}
+/**
+ * Controls showing/hiding an element.
+ * Works with Webflow interactions, built-in fade animations or no animations at all.
+ */
+export declare class DisplayController {
+    private readonly interaction;
+    private readonly animation;
+    private readonly animationEasing;
+    private readonly animationDuration;
+    private visible;
+    readonly element: HTMLElement;
+    constructor({ element, interaction, animation, startsHidden, animationEasing, animationDuration }: DisplayControllerParams);
+    /**
+     * @returns If the element is visible
+     */
+    isVisible: () => boolean;
+    /**
+     * Displays the element
+     * @returns An awaitable promise
+     */
+    show(): Promise<void>;
+    /**
+     * Hides the element
+     * @returns An awaitable promise
+     */
+    hide(): Promise<void>;
+}

package/dist/utils/webflow/DisplayController.js

@@ -0,0 +1,91 @@
+import { animations } from '../animations';
+import { isVisible } from '../helpers';
+import { Interaction } from './Interaction';
+/**
+ * Controls showing/hiding an element.
+ * Works with Webflow interactions, built-in fade animations or no animations at all.
+ */
+export class DisplayController {
+    interaction;
+    animation;
+    animationEasing;
+    animationDuration;
+    visible;
+    element;
+    constructor({ element, interaction, animation, startsHidden, animationEasing, animationDuration }) {
+        // Store properties
+        this.element = element;
+        this.animation = animation;
+        this.animationEasing = animationEasing;
+        this.animationDuration = animationDuration;
+        // Visibility check
+        if (startsHidden) {
+            this.element.style.display = 'none';
+            this.visible = false;
+        }
+        else
+            this.visible = isVisible(this.element);
+        if (interaction) {
+            const { element, duration } = interaction;
+            this.interaction = new Interaction({ element, duration });
+        }
+    }
+    /**
+     * @returns If the element is visible
+     */
+    isVisible = () => this.visible;
+    /**
+     * Displays the element
+     * @returns An awaitable promise
+     */
+    async show() {
+        if (this.visible)
+            return;
+        const { interaction, animation, element, animationDuration, animationEasing } = this;
+        const display = 'block';
+        // Interaction
+        if (interaction) {
+            await interaction.trigger('first');
+        }
+        // Animation
+        else if (animation) {
+            animations[animation].prepareIn(element, { display });
+            await animations[animation].animateIn(element, {
+                display,
+                duration: animationDuration,
+                easing: animationEasing
+            });
+        }
+        // No interaction or animation
+        else {
+            element.style.display = display;
+        }
+        this.visible = true;
+    }
+    /**
+     * Hides the element
+     * @returns An awaitable promise
+     */
+    async hide() {
+        if (!this.visible)
+            return;
+        const { interaction, animation, element, animationDuration, animationEasing } = this;
+        // Interaction
+        if (interaction) {
+            await interaction.trigger('second');
+        }
+        // Animation
+        else if (animation) {
+            await animations[animation].animateOut(element, {
+                display: 'none',
+                duration: animationDuration,
+                easing: animationEasing
+            });
+        }
+        // No interaction or animation
+        else {
+            element.style.display = 'none';
+        }
+        this.visible = false;
+    }
+}

package/dist/utils/webflow/Interaction.d.ts

@@ -0,0 +1,47 @@
+export interface InteractionParams {
+    /**
+     * The element that has a Webflow Ix2 Click interaction binded to it.
+     */
+    element: HTMLElement | string;
+    /**
+     * The duration of the interaction.
+     * If a single number is passed, it will be used for both first and second interactions.
+     * If an object is passed, you can specify the duration for each interaction.
+     */
+    duration?: number | Partial<Interaction['duration']>;
+}
+export declare class Interaction {
+    private readonly element;
+    private active;
+    private running;
+    private runningPromise?;
+    readonly duration: {
+        first: number;
+        second: number;
+    };
+    /**
+     * Acts as the controller for a Webflow Interaction.
+     * It accepts an element that will be clicked when required (firing a Mouse Click interaction).
+     * @param element Element that has the Mouse Click interaction.
+     * @param duration Optionally, the duration can be explicitly set so the trigger methods will return an awaitable Promise.
+     */
+    constructor({ element, duration }: InteractionParams);
+    /**
+     * Trigger the interaction
+     * @param click Perform first or second click
+     * @returns True if the interaction was fired
+     */
+    trigger(click?: 'first' | 'second'): Promise<boolean>;
+    /**
+     * @returns If the interaction is active
+     */
+    isActive: () => boolean;
+    /**
+     * @returns If the interaction is running
+     */
+    isRunning: () => boolean;
+    /**
+     * @returns A promise that fulfills when the current running interaction has finished
+     */
+    untilFinished: () => Promise<unknown> | undefined;
+}

package/dist/utils/webflow/Interaction.js

@@ -0,0 +1,52 @@
+import { simulateEvent, wait } from '../helpers';
+export class Interaction {
+    element;
+    active = false;
+    running = false;
+    runningPromise;
+    duration;
+    /**
+     * Acts as the controller for a Webflow Interaction.
+     * It accepts an element that will be clicked when required (firing a Mouse Click interaction).
+     * @param element Element that has the Mouse Click interaction.
+     * @param duration Optionally, the duration can be explicitly set so the trigger methods will return an awaitable Promise.
+     */
+    constructor({ element, duration }) {
+        this.element =
+            typeof element === 'string' ? document.querySelector(element) : element;
+        this.duration = {
+            first: typeof duration === 'number' ? duration : (duration?.first ?? 0),
+            second: typeof duration === 'number' ? duration : (duration?.second ?? 0)
+        };
+    }
+    /**
+     * Trigger the interaction
+     * @param click Perform first or second click
+     * @returns True if the interaction was fired
+     */
+    async trigger(click) {
+        if ((click === 'first' && this.active) || (click === 'second' && !this.active))
+            return false;
+        if (!click)
+            click = this.active ? 'second' : 'first';
+        simulateEvent(this.element, 'click');
+        this.running = true;
+        this.runningPromise = wait(this.duration[click]);
+        await this.runningPromise;
+        this.running = false;
+        this.active = click === 'first';
+        return true;
+    }
+    /**
+     * @returns If the interaction is active
+     */
+    isActive = () => this.active;
+    /**
+     * @returns If the interaction is running
+     */
+    isRunning = () => this.running;
+    /**
+     * @returns A promise that fulfills when the current running interaction has finished
+     */
+    untilFinished = () => this.runningPromise;
+}

package/dist/utils/webflow/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DisplayController';
+export * from './Interaction';
+export * from './CopyJSONButton';
+export * from './webflow';

package/dist/utils/webflow/index.js

@@ -0,0 +1,4 @@
+export * from './DisplayController';
+export * from './Interaction';
+export * from './CopyJSONButton';
+export * from './webflow';

package/dist/utils/webflow/webflow.d.ts

@@ -0,0 +1,32 @@
+import type { WebflowModule } from '../../types';
+/**
+ * @returns The Webflow Site ID of the website.
+ * @param page The page to get the site ID from. Defaults to the current page.
+ */
+export declare const getSiteId: (page?: Document) => string | null;
+/**
+ * Extracts the publish date of a Webflow site
+ * @returns A Date object, if found.
+ * @param page The page to get the publish date from. Defaults to the current page.
+ */
+export declare const getPublishDate: (page?: Document) => Date | undefined;
+/**
+ * Restarts the Webflow JS library.
+ *
+ * @param modules An array of {@link WebflowModule} to restart. If passed, only those modules will be restarted instead of the whole `Webflow` instance.
+ *
+ * @returns An awaitable promise that is fulfilled when the library has been correctly reinitialized.
+ */
+export declare const restartWebflow: (modules?: WebflowModule[]) => Promise<unknown>;
+export declare const FORM_CSS_CLASSES: {
+    readonly formBlock: "w-form";
+    readonly checkboxField: "w-checkbox";
+    readonly checkboxInput: "w-checkbox-input";
+    readonly radioField: "w-radio";
+    readonly radioInput: "w-radio-input";
+    readonly checkboxOrRadioLabel: "w-form-label";
+    readonly checkboxOrRadioFocus: "w--redirected-focus";
+    readonly checkboxOrRadioChecked: "w--redirected-checked";
+    readonly successMessage: "w-form-done";
+    readonly errorMessage: "w-form-fail";
+};

package/dist/utils/webflow/webflow.js

@@ -0,0 +1,90 @@
+/**
+ * @returns The Webflow Site ID of the website.
+ * @param page The page to get the site ID from. Defaults to the current page.
+ */
+export const getSiteId = (page = document) => page.documentElement.getAttribute('data-wf-site');
+/**
+ * Extracts the publish date of a Webflow site
+ * @returns A Date object, if found.
+ * @param page The page to get the publish date from. Defaults to the current page.
+ */
+export const getPublishDate = (page = document) => {
+    const publishDatePrefix = 'Last Published:';
+    for (const node of Array.from(page.childNodes)) {
+        if (node.nodeType === Node.COMMENT_NODE && node.textContent?.includes(publishDatePrefix)) {
+            const publishDateValue = node.textContent.trim().split(publishDatePrefix)[1];
+            if (publishDateValue)
+                return new Date(publishDateValue);
+        }
+    }
+};
+/**
+ * Restarts the Webflow JS library.
+ *
+ * @param modules An array of {@link WebflowModule} to restart. If passed, only those modules will be restarted instead of the whole `Webflow` instance.
+ *
+ * @returns An awaitable promise that is fulfilled when the library has been correctly reinitialized.
+ */
+export const restartWebflow = async (modules) => {
+    const { Webflow } = window;
+    if (!Webflow || !('destroy' in Webflow) || !('ready' in Webflow) || !('require' in Webflow))
+        return;
+    if (modules && !modules.length)
+        return;
+    // Global
+    if (!modules) {
+        Webflow.destroy();
+        Webflow.ready();
+    }
+    // IX2
+    if (!modules || modules.includes('ix2')) {
+        const ix2 = Webflow.require('ix2');
+        if (ix2) {
+            // const { store, actions } = ix2;
+            // const { eventState } = store.getState().ixSession;
+            // const stateEntries = Object.entries(eventState);
+            // if (stateEntries?.length > 0) {
+            //   if (!modules)
+            //   await Promise.all(stateEntries.map((state) => store.dispatch(actions.eventStateChanged(...state))));
+            // }
+            ix2.destroy();
+            ix2.init();
+        }
+    }
+    // Commerce
+    if (!modules || modules.includes('commerce')) {
+        const commerce = Webflow.require('commerce');
+        const siteId = getSiteId();
+        if (commerce && siteId) {
+            commerce.destroy();
+            commerce.init({ siteId, apiUrl: 'https://render.webflow.com' });
+        }
+    }
+    // Lightbox
+    if (modules?.includes('lightbox'))
+        Webflow.require('lightbox')?.ready();
+    // Slider
+    if (modules?.includes('slider')) {
+        const slider = Webflow.require('slider');
+        if (slider) {
+            slider.redraw();
+            slider.ready();
+        }
+    }
+    // Tabs
+    if (modules?.includes('tabs'))
+        Webflow.require('tabs')?.redraw();
+    return new Promise((resolve) => Webflow.push(() => resolve(undefined)));
+};
+export const FORM_CSS_CLASSES = {
+    formBlock: 'w-form',
+    checkboxField: 'w-checkbox',
+    checkboxInput: 'w-checkbox-input',
+    radioField: 'w-radio',
+    radioInput: 'w-radio-input',
+    checkboxOrRadioLabel: 'w-form-label',
+    checkboxOrRadioFocus: 'w--redirected-focus',
+    checkboxOrRadioChecked: 'w--redirected-checked',
+    successMessage: 'w-form-done',
+    errorMessage: 'w-form-fail'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {
@@ -15,13 +15,21 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "types": "./dist/ui/index.d.ts",
+      "svelte": "./dist/ui/index.js",
+      "default": "./dist/ui/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "svelte": "./dist/ui/index.js",
+      "default": "./dist/ui/index.js"
     },
     "./index.css": "./dist/ui/index.css"
   },
@@ -50,7 +58,6 @@
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.18",
     "@types/lodash-es": "^4.17.12",
-    "@types/lodash.isequal": "^4.5.8",
     "@types/luxon": "^3.6.2",
     "@types/node": "^22",
     "@vitest/browser": "3.2.3",
@@ -79,12 +86,13 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
+    "cheerio": "^1.1.0",
     "clipboard": "^2.0.11",
+    "csv-parse": "^5.6.0",
     "js-cookie": "^3.0.5",
     "just-debounce": "^1.1.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "lodash.isequal": "^4.5.0",
     "logrocket": "^10.1.0",
     "luxon": "^3.6.1",
     "motion": "^10.18.0",