@verbb/formie-browser 1.0.6 → 1.0.8

package/src/js/modules/fields/survey-rank.ts

@@ -0,0 +1,385 @@
+import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+import { createDebug } from '#utils/debug';
+
+const FIELD_SELECTOR = '[data-formie-survey-rank]';
+const LIST_SELECTOR = '[data-formie-survey-rank-list]';
+const ITEM_SELECTOR = '[data-formie-survey-rank-item]';
+const HANDLE_SELECTOR = '[data-formie-rank-handle]';
+const PLACEHOLDER_CLASS = 'formie-rank-placeholder';
+/** Insert before a sibling once the ghost centre crosses this fraction of its height (below 0.5 swaps earlier). */
+const PLACEHOLDER_SWAP_RATIO = 0.42;
+const MODULE_ID = 'survey-rank';
+const debug = createDebug('fields', 'survey-rank');
+
+ensureModuleStyles(MODULE_ID, [surveyPresentationsCss]);
+
+type PointerOffset = {
+    x: number;
+    y: number;
+};
+
+type GhostStyleSnapshot = {
+    position: string;
+    left: string;
+    top: string;
+    width: string;
+    zIndex: string;
+    pointerEvents: string;
+    margin: string;
+};
+
+function syncRankInputs(list: HTMLElement): void {
+    list.querySelectorAll(ITEM_SELECTOR).forEach((item, index) => {
+        if (!(item instanceof HTMLElement)) {
+            return;
+        }
+
+        item.querySelectorAll('input[data-formie-rank-input]').forEach((input) => {
+            if (input instanceof HTMLInputElement) {
+                input.dataset.formieRankOrder = String(index);
+            }
+        });
+    });
+}
+
+function getRankItems(list: HTMLElement): HTMLElement[] {
+    return Array.from(list.querySelectorAll(ITEM_SELECTOR)).filter((item): item is HTMLElement => {
+        return item instanceof HTMLElement;
+    });
+}
+
+function getPlaceholderIndex(list: HTMLElement, placeholder: HTMLElement): number {
+    return Array.from(list.children).indexOf(placeholder);
+}
+
+function getRankListSiblings(
+    list: HTMLElement,
+    placeholder: HTMLElement,
+    draggedItem: HTMLElement,
+): HTMLElement[] {
+    return Array.from(list.children).filter((child): child is HTMLElement => {
+        return child instanceof HTMLElement
+            && child !== placeholder
+            && child !== draggedItem;
+    });
+}
+
+function getVerticalOverlapHeight(ghostRect: DOMRect, targetRect: DOMRect): number {
+    return Math.max(0, Math.min(ghostRect.bottom, targetRect.bottom) - Math.max(ghostRect.top, targetRect.top));
+}
+
+function getGhostReferenceY(draggedItem: HTMLElement): number {
+    const rect = draggedItem.getBoundingClientRect();
+
+    return rect.top + (rect.height / 2);
+}
+
+function getPlaceholderTargetIndex(
+    draggedItem: HTMLElement,
+    list: HTMLElement,
+    placeholder: HTMLElement,
+    draggingDown: boolean,
+): number {
+    const ghostRect = draggedItem.getBoundingClientRect();
+    const referenceY = getGhostReferenceY(draggedItem);
+    const siblings = getRankListSiblings(list, placeholder, draggedItem);
+
+    for (let index = 0; index < siblings.length; index += 1) {
+        const rect = siblings[index].getBoundingClientRect();
+        const swapLine = rect.top + (rect.height * PLACEHOLDER_SWAP_RATIO);
+        const overlapRatio = getVerticalOverlapHeight(ghostRect, rect) / rect.height;
+
+        if (overlapRatio >= PLACEHOLDER_SWAP_RATIO) {
+            if (draggingDown) {
+                return Math.min(index + 1, siblings.length);
+            }
+
+            return index;
+        }
+
+        if (referenceY < swapLine) {
+            return index;
+        }
+    }
+
+    return siblings.length;
+}
+
+function movePlaceholderToIndex(
+    list: HTMLElement,
+    placeholder: HTMLElement,
+    draggedItem: HTMLElement,
+    targetIndex: number,
+): void {
+    const siblings = getRankListSiblings(list, placeholder, draggedItem);
+    const reference = siblings[targetIndex] ?? null;
+
+    if (reference) {
+        list.insertBefore(placeholder, reference);
+        return;
+    }
+
+    list.appendChild(placeholder);
+}
+
+function createPlaceholder(list: HTMLElement, item: HTMLElement): HTMLElement {
+    const placeholder = document.createElement('li');
+
+    placeholder.className = PLACEHOLDER_CLASS;
+    placeholder.setAttribute('data-formie-rank-placeholder', 'true');
+    placeholder.setAttribute('aria-hidden', 'true');
+    placeholder.style.height = `${item.offsetHeight}px`;
+    list.insertBefore(placeholder, item);
+
+    return placeholder;
+}
+
+function captureGhostStyles(item: HTMLElement): GhostStyleSnapshot {
+    return {
+        position: item.style.position,
+        left: item.style.left,
+        top: item.style.top,
+        width: item.style.width,
+        zIndex: item.style.zIndex,
+        pointerEvents: item.style.pointerEvents,
+        margin: item.style.margin,
+    };
+}
+
+function applyGhostStyles(item: HTMLElement, rect: DOMRect): void {
+    item.style.position = 'fixed';
+    item.style.left = `${rect.left}px`;
+    item.style.top = `${rect.top}px`;
+    item.style.width = `${rect.width}px`;
+    item.style.zIndex = '1000';
+    item.style.pointerEvents = 'none';
+    item.style.margin = '0';
+}
+
+function updateGhostPosition(item: HTMLElement, event: PointerEvent, offset: PointerOffset): void {
+    item.style.left = `${event.clientX - offset.x}px`;
+    item.style.top = `${event.clientY - offset.y}px`;
+}
+
+function restoreGhostStyles(item: HTMLElement, snapshot: GhostStyleSnapshot): void {
+    item.style.position = snapshot.position;
+    item.style.left = snapshot.left;
+    item.style.top = snapshot.top;
+    item.style.width = snapshot.width;
+    item.style.zIndex = snapshot.zIndex;
+    item.style.pointerEvents = snapshot.pointerEvents;
+    item.style.margin = snapshot.margin;
+}
+
+function bindRankField(field: HTMLElement): () => void {
+    const list = field.querySelector(LIST_SELECTOR);
+
+    if (!(list instanceof HTMLElement)) {
+        debug.warn('Missing rank list; skipping field.');
+        return () => {};
+    }
+
+    let draggedItem: HTMLElement | null = null;
+    let placeholder: HTMLElement | null = null;
+    let ghostStyleSnapshot: GhostStyleSnapshot | null = null;
+    let pointerOffset: PointerOffset | null = null;
+    let activeCaptureTarget: HTMLElement | null = null;
+    let activePointerId: number | null = null;
+    let lastTargetIndex: number | null = null;
+    let startPlaceholderIndex: number | null = null;
+    let lastGhostReferenceY: number | null = null;
+    let didReorder = false;
+    const cleanups: Array<() => void> = [];
+
+    const finishDrag = () => {
+        if (draggedItem && placeholder) {
+            list.insertBefore(draggedItem, placeholder);
+            placeholder.remove();
+        } else if (placeholder) {
+            placeholder.remove();
+        }
+
+        if (draggedItem && ghostStyleSnapshot) {
+            restoreGhostStyles(draggedItem, ghostStyleSnapshot);
+            draggedItem.removeAttribute('data-formie-rank-dragging');
+        }
+
+        if (activeCaptureTarget && activePointerId !== null) {
+            try {
+                activeCaptureTarget.releasePointerCapture(activePointerId);
+            } catch {
+                // Pointer capture may already be released.
+            }
+        }
+
+        draggedItem = null;
+        placeholder = null;
+        ghostStyleSnapshot = null;
+        pointerOffset = null;
+        activeCaptureTarget = null;
+        activePointerId = null;
+        lastTargetIndex = null;
+        startPlaceholderIndex = null;
+        lastGhostReferenceY = null;
+        list.removeAttribute('data-formie-rank-sorting');
+
+        if (didReorder) {
+            syncRankInputs(list);
+            dispatchFieldEvent(field, MODULE_ID, 'reorder', {
+                rankField: field,
+            });
+        }
+
+        didReorder = false;
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+        if (!draggedItem || !placeholder || !pointerOffset || event.pointerId !== activePointerId) {
+            return;
+        }
+
+        event.preventDefault();
+
+        updateGhostPosition(draggedItem, event, pointerOffset);
+
+        const referenceY = getGhostReferenceY(draggedItem);
+        const draggingDown = lastGhostReferenceY === null || referenceY >= lastGhostReferenceY;
+
+        lastGhostReferenceY = referenceY;
+
+        const targetIndex = getPlaceholderTargetIndex(draggedItem, list, placeholder, draggingDown);
+
+        if (targetIndex === lastTargetIndex) {
+            return;
+        }
+
+        lastTargetIndex = targetIndex;
+        movePlaceholderToIndex(list, placeholder, draggedItem, targetIndex);
+    };
+
+    const onPointerUp = (event: PointerEvent) => {
+        if (event.pointerId !== activePointerId) {
+            return;
+        }
+
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+        document.removeEventListener('pointercancel', onPointerUp);
+
+        if (placeholder && startPlaceholderIndex !== null) {
+            didReorder = getPlaceholderIndex(list, placeholder) !== startPlaceholderIndex;
+        }
+
+        finishDrag();
+    };
+
+    getRankItems(list).forEach((item) => {
+        if (!item.querySelector(HANDLE_SELECTOR)) {
+            return;
+        }
+
+        const onPointerDown = (event: PointerEvent) => {
+            if (event.button !== 0) {
+                return;
+            }
+
+            if (event.target instanceof HTMLInputElement) {
+                return;
+            }
+
+            event.preventDefault();
+
+            const rect = item.getBoundingClientRect();
+
+            draggedItem = item;
+            activeCaptureTarget = item;
+            activePointerId = event.pointerId;
+            pointerOffset = {
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            };
+            ghostStyleSnapshot = captureGhostStyles(item);
+            placeholder = createPlaceholder(list, item);
+            startPlaceholderIndex = getPlaceholderIndex(list, placeholder);
+            didReorder = false;
+
+            applyGhostStyles(item, rect);
+            item.setAttribute('data-formie-rank-dragging', 'true');
+            list.setAttribute('data-formie-rank-sorting', 'true');
+            item.setPointerCapture(event.pointerId);
+            lastGhostReferenceY = getGhostReferenceY(item);
+            lastTargetIndex = getPlaceholderTargetIndex(item, list, placeholder, true);
+
+            document.addEventListener('pointermove', onPointerMove);
+            document.addEventListener('pointerup', onPointerUp);
+            document.addEventListener('pointercancel', onPointerUp);
+        };
+
+        item.addEventListener('pointerdown', onPointerDown);
+        cleanups.push(() => {
+            item.removeEventListener('pointerdown', onPointerDown);
+        });
+    });
+
+    syncRankInputs(list);
+
+    return () => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+        document.removeEventListener('pointercancel', onPointerUp);
+        cleanups.forEach((cleanup) => {
+            cleanup();
+        });
+        finishDrag();
+    };
+}
+
+export const surveyRankModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && (
+            ctx.target.matches(FIELD_SELECTOR) ||
+            !!ctx.target.querySelector(FIELD_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        if (!(ctx.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const fields = ctx.target.matches(FIELD_SELECTOR)
+            ? [ctx.target]
+            : Array.from(ctx.target.querySelectorAll(FIELD_SELECTOR)).filter((field): field is HTMLElement => {
+                return field instanceof HTMLElement;
+            });
+
+        debug.log('Module setup.', {
+            fieldCount: fields.length,
+        });
+
+        const destroyBindings = fields.map((field) => {
+            return bindRankField(field);
+        });
+
+        await ctx.emit('formie:module:survey-rank:init', {
+            count: fields.length,
+        });
+
+        return {
+            destroy: () => {
+                destroyBindings.forEach((destroyBinding) => {
+                    destroyBinding();
+                });
+                debug.log('Module destroy.', {
+                    fieldCount: fields.length,
+                });
+                void ctx.emit('formie:module:survey-rank:destroy', {});
+            },
+        };
+    },
+};

package/src/js/modules/fields/survey-rating.ts

@@ -0,0 +1,182 @@
+import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+import { createDebug } from '#utils/debug';
+
+const FIELD_SELECTOR = '[data-formie-survey-rating]';
+const STARS_SELECTOR = '[data-formie-survey-rating-stars]';
+const OPTION_SELECTOR = '[data-formie-rating-option]';
+const INPUT_SELECTOR = 'input[data-formie-rating-input]';
+const PRESSED_WHILE_CHECKED = 'data-formie-rating-pressed-while-checked';
+const MODULE_ID = 'survey-rating';
+const debug = createDebug('fields', 'survey-rating');
+
+ensureModuleStyles(MODULE_ID, [surveyPresentationsCss]);
+
+function getRatingInputs(stars: HTMLElement): HTMLInputElement[] {
+    return Array.from(stars.querySelectorAll(INPUT_SELECTOR)).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement;
+    });
+}
+
+function updateRatingValue(stars: HTMLElement): void {
+    const selectedIndex = getRatingInputs(stars).findIndex((input) => {
+        return input.checked;
+    });
+
+    if (selectedIndex >= 0) {
+        stars.setAttribute('data-formie-rating-value', String(selectedIndex + 1));
+        return;
+    }
+
+    stars.removeAttribute('data-formie-rating-value');
+}
+
+function bindRatingField(field: HTMLElement): () => void {
+    const stars = field.querySelector(STARS_SELECTOR);
+
+    if (!(stars instanceof HTMLElement)) {
+        debug.warn('Missing rating stars container; skipping field.');
+        return () => {};
+    }
+
+    const cleanups: Array<() => void> = [];
+
+    const clearHover = () => {
+        stars.removeAttribute('data-formie-rating-hover');
+    };
+
+    const setHoverFromOption = (option: HTMLElement) => {
+        const options = Array.from(stars.querySelectorAll(OPTION_SELECTOR));
+        const index = options.indexOf(option);
+
+        if (index >= 0) {
+            stars.setAttribute('data-formie-rating-hover', String(index + 1));
+        }
+    };
+
+    stars.querySelectorAll(OPTION_SELECTOR).forEach((option) => {
+        if (!(option instanceof HTMLElement)) {
+            return;
+        }
+
+        const input = option.querySelector(INPUT_SELECTOR);
+
+        const onPointerDown = () => {
+            if (!(input instanceof HTMLInputElement)) {
+                return;
+            }
+
+            if (input.checked) {
+                input.setAttribute(PRESSED_WHILE_CHECKED, 'true');
+                return;
+            }
+
+            input.removeAttribute(PRESSED_WHILE_CHECKED);
+        };
+
+        const onMouseEnter = () => {
+            setHoverFromOption(option);
+        };
+
+        option.addEventListener('pointerdown', onPointerDown);
+        option.addEventListener('mouseenter', onMouseEnter);
+        cleanups.push(() => {
+            option.removeEventListener('pointerdown', onPointerDown);
+            option.removeEventListener('mouseenter', onMouseEnter);
+        });
+    });
+
+    stars.addEventListener('mouseleave', clearHover);
+    cleanups.push(() => {
+        stars.removeEventListener('mouseleave', clearHover);
+    });
+
+    getRatingInputs(stars).forEach((input) => {
+        const onClick = (event: MouseEvent) => {
+            if (input.getAttribute(PRESSED_WHILE_CHECKED) !== 'true') {
+                updateRatingValue(stars);
+                dispatchFieldEvent(field, MODULE_ID, 'change', {
+                    ratingField: field,
+                    value: input.checked ? input.value : '',
+                });
+                return;
+            }
+
+            event.preventDefault();
+            getRatingInputs(stars).forEach((candidate) => {
+                candidate.checked = false;
+                candidate.removeAttribute(PRESSED_WHILE_CHECKED);
+            });
+            updateRatingValue(stars);
+            dispatchFieldEvent(field, MODULE_ID, 'change', {
+                ratingField: field,
+                value: '',
+            });
+        };
+
+        input.addEventListener('click', onClick);
+        cleanups.push(() => {
+            input.removeEventListener('click', onClick);
+            input.removeAttribute(PRESSED_WHILE_CHECKED);
+        });
+    });
+
+    updateRatingValue(stars);
+
+    return () => {
+        cleanups.forEach((cleanup) => {
+            cleanup();
+        });
+        clearHover();
+        stars.removeAttribute('data-formie-rating-value');
+    };
+}
+
+export const surveyRatingModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && (
+            ctx.target.matches(FIELD_SELECTOR) ||
+            !!ctx.target.querySelector(FIELD_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        if (!(ctx.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const fields = ctx.target.matches(FIELD_SELECTOR)
+            ? [ctx.target]
+            : Array.from(ctx.target.querySelectorAll(FIELD_SELECTOR)).filter((field): field is HTMLElement => {
+                return field instanceof HTMLElement;
+            });
+
+        debug.log('Module setup.', {
+            fieldCount: fields.length,
+        });
+
+        const destroyBindings = fields.map((field) => {
+            return bindRatingField(field);
+        });
+
+        await ctx.emit('formie:module:survey-rating:init', {
+            count: fields.length,
+        });
+
+        return {
+            destroy: () => {
+                destroyBindings.forEach((destroyBinding) => {
+                    destroyBinding();
+                });
+                debug.log('Module destroy.', {
+                    fieldCount: fields.length,
+                });
+                void ctx.emit('formie:module:survey-rating:destroy', {});
+            },
+        };
+    },
+};

package/src/js/transport/forms-api.ts

@@ -107,6 +107,7 @@ function normalizePayload(payload: Record<string, unknown>, fallbackFormError?:
             }
             : null,
         submitData: Array.isArray(payload.submitData) ? payload.submitData : undefined,
+        clientEvents: Array.isArray(payload.clientEvents) ? payload.clientEvents as FormSubmitResult['clientEvents'] : undefined,
         meta: payload,
     };
 

package/src/js/utils/form-started-at.ts

@@ -0,0 +1,25 @@
+const FORM_STARTED_AT_STORAGE_PREFIX = 'formie:formStartedAt:';
+
+export function ensureFormStartedAt(form: HTMLFormElement): void {
+    const startedAtInput = form.querySelector('input[name="formStartedAt"]') as HTMLInputElement | null;
+
+    if (!startedAtInput) {
+        return;
+    }
+
+    const renderIdInput = form.querySelector('input[name="renderId"]') as HTMLInputElement | null;
+    const renderId = renderIdInput?.value?.trim() ?? '';
+    const storageKey = renderId ? `${FORM_STARTED_AT_STORAGE_PREFIX}${renderId}` : null;
+
+    let startedAt = storageKey ? sessionStorage.getItem(storageKey) : null;
+
+    if (!startedAt) {
+        startedAt = String(Date.now());
+
+        if (storageKey) {
+            sessionStorage.setItem(storageKey, startedAt);
+        }
+    }
+
+    startedAtInput.value = startedAt;
+}

package/src/js/utils/scripts.ts

@@ -11,6 +11,16 @@ type LoadExternalScriptOptions = {
 
 const scriptLoadCache = new Map<string, Promise<HTMLScriptElement>>();
 
+function getDocumentCspNonce(): string | null {
+    const nonceMeta = document.querySelector('meta[property="csp-nonce"], meta[name="csp-nonce"]') as HTMLMetaElement | null;
+
+    if (!nonceMeta) {
+        return null;
+    }
+
+    return nonceMeta.nonce || nonceMeta.getAttribute('nonce') || nonceMeta.getAttribute('content') || null;
+}
+
 export async function ensureGlobal<T = unknown>(globalName: string, timeoutMs = 5000): Promise<T> {
     // Third-party SDKs often attach themselves to `window` after their script tag
     // loads, so callers wait on the global rather than assuming load == ready.
@@ -49,6 +59,12 @@ export async function loadExternalScript({
             script.src = src;
             script.async = async;
             script.defer = defer;
+            const nonce = getDocumentCspNonce();
+
+            if (nonce) {
+                script.setAttribute('nonce', nonce);
+            }
+
             script.onload = () => {
                 resolve(script);
             };

package/src/js/utils/unload-warning.ts

@@ -4,6 +4,7 @@ const DIRTY_TRACKING_IGNORED_FIELD_NAMES = new Set([
     'redirect',
     'requestToken',
     'renderId',
+    'formStartedAt',
     'submitAction',
     'pageId',
     'draftContextToken',

package/src/js/validation/enter-key-guard.ts

@@ -0,0 +1,63 @@
+import type { FormAction } from '#contracts/common';
+import { getValidationScope } from '#validation/scope';
+
+function isConditionallyInactive(element: Element): boolean {
+    return element.hasAttribute('data-formie-conditionally-hidden')
+        || !!element.closest('[data-formie-conditionally-hidden]')
+        || element.hasAttribute('data-formie-page-hidden')
+        || !!element.closest('[data-formie-page-hidden]');
+}
+
+function isActionControlVisible(form: HTMLFormElement, action: FormAction): boolean {
+    const controls = form.querySelectorAll(`[data-formie-action="${action}"]`);
+
+    return Array.from(controls).some((control) => {
+        return !isConditionallyInactive(control);
+    });
+}
+
+function resolveEnterKeyAction(form: HTMLFormElement): FormAction {
+    const { final } = getValidationScope(form);
+
+    return final ? 'submit' : 'submit';
+}
+
+function shouldBlockEnterSubmit(form: HTMLFormElement): boolean {
+    const action = resolveEnterKeyAction(form);
+
+    return !isActionControlVisible(form, action);
+}
+
+export function bindEnterKeyGuard(form: HTMLFormElement): () => void {
+    const handler = (event: KeyboardEvent) => {
+        if (event.key !== 'Enter' || event.defaultPrevented) {
+            return;
+        }
+
+        const target = event.target;
+
+        if (!(target instanceof HTMLInputElement || target instanceof HTMLSelectElement)) {
+            return;
+        }
+
+        if (target instanceof HTMLInputElement) {
+            if (target.type === 'button' || target.type === 'submit' || target.type === 'reset' || target.type === 'file') {
+                return;
+            }
+        }
+
+        if (!shouldBlockEnterSubmit(form)) {
+            return;
+        }
+
+        // Browsers can still implicit-submit through hidden/disabled submit
+        // controls; block that path when conditions hide the primary action.
+        event.preventDefault();
+    };
+
+    form.addEventListener('keydown', handler, true);
+
+    return () => {
+        form.removeEventListener('keydown', handler, true);
+    };
+}