@harshankur/viewcounter 3.0.1 → 3.1.0

package/admin/js/modal.js

@@ -0,0 +1,171 @@
+/**
+ * The one blocking dialog (FRONTEND.md §1.1 and §2).
+ *
+ * Replaces alert/confirm/prompt everywhere. Rendered once into #modal-root.
+ * By construction, not by each call site remembering:
+ *  - a backdrop blocks the page and focus is trapped inside the dialog,
+ *  - Escape and a backdrop click run the SAME cancel handler, which is always
+ *    the safest option, never the destructive one,
+ *  - focus returns to whatever opened the dialog.
+ */
+
+import { byId, clear, el, focusableWithin, uniqueId } from './dom.js';
+import { KEY } from './constants.js';
+import { t } from './i18n.js';
+
+/** Visual weight of a dialog button. */
+export const VARIANT = Object.freeze({
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    DANGER: 'danger',
+});
+
+let active = null;
+
+function root() {
+    return byId('modal-root');
+}
+
+function trapFocus(event, dialog) {
+    if (event.key !== KEY.TAB) return;
+    const focusable = focusableWithin(dialog);
+    if (focusable.length === 0) {
+        event.preventDefault();
+        return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}
+
+/** Close the open dialog without running any handler. */
+export function closeModal() {
+    if (!active) return;
+    const { opener, onKeydown } = active;
+    document.removeEventListener('keydown', onKeydown, true);
+    clear(root());
+    root().hidden = true;
+    document.body.classList.remove('modal-open');
+    active = null;
+    if (opener && typeof opener.focus === 'function' && document.contains(opener)) opener.focus();
+}
+
+/**
+ * Open a dialog.
+ *
+ * @param {{ title: string, body: Node|Node[], actions: Array<{ label: string, variant?: string,
+ *   onClick?: () => (boolean|void|Promise<boolean|void>) }>, onCancel?: () => void,
+ *   role?: 'dialog'|'alertdialog', initialFocus?: HTMLElement, wide?: boolean }} options
+ *   An action's onClick may return false to keep the dialog open (for example
+ *   when a form does not validate). The first action with variant SECONDARY
+ *   labelled as cancel is not special: cancel is `onCancel`, always.
+ */
+export function openModal({ title, body, actions, onCancel = () => {}, role = 'dialog', initialFocus, wide = false }) {
+    closeModal();
+
+    const titleId = uniqueId('modal-title');
+    const cancel = () => {
+        closeModal();
+        onCancel();
+    };
+
+    const buttons = actions.map((action) => el('button', {
+        className: `btn btn-${action.variant || VARIANT.SECONDARY}`,
+        text: action.label,
+        attrs: { type: 'button' },
+        on: {
+            click: async (event) => {
+                const button = event.currentTarget;
+                button.disabled = true;
+                try {
+                    const keepOpen = action.onClick ? (await action.onClick()) === false : false;
+                    if (!keepOpen) closeModal();
+                } finally {
+                    button.disabled = false;
+                }
+            },
+        },
+    }));
+
+    const dialog = el('div', {
+        className: `modal term-window${wide ? ' modal-wide' : ''}`,
+        attrs: { role, 'aria-modal': 'true', 'aria-labelledby': titleId },
+    }, [
+        el('div', { className: 'term-titlebar' }, [
+            el('div', { className: 'term-dots', attrs: { 'aria-hidden': 'true' } }, [
+                el('span', { className: 'term-dot red' }),
+                el('span', { className: 'term-dot amber' }),
+                el('span', { className: 'term-dot green' }),
+            ]),
+            el('h2', { className: 'modal-title', text: title, attrs: { id: titleId } }),
+            el('button', {
+                className: 'icon-btn modal-close',
+                text: '×',
+                attrs: { type: 'button', 'aria-label': t('common.close') },
+                on: { click: cancel },
+            }),
+        ]),
+        el('div', { className: 'modal-body' }, Array.isArray(body) ? body : [body]),
+        el('div', { className: 'modal-actions' }, buttons),
+    ]);
+
+    const backdrop = el('div', { className: 'modal-backdrop', on: { mousedown: (event) => {
+        if (event.target === event.currentTarget) cancel();
+    } } }, [dialog]);
+
+    const onKeydown = (event) => {
+        if (event.key === KEY.ESCAPE) {
+            event.preventDefault();
+            event.stopPropagation();
+            cancel();
+            return;
+        }
+        trapFocus(event, dialog);
+    };
+
+    active = { opener: document.activeElement, onKeydown };
+    document.addEventListener('keydown', onKeydown, true);
+    root().append(backdrop);
+    root().hidden = false;
+    document.body.classList.add('modal-open');
+
+    const target = initialFocus || focusableWithin(dialog.querySelector('.modal-body'))[0] || buttons[buttons.length - 1];
+    target?.focus();
+    return dialog;
+}
+
+/**
+ * A yes/no confirmation. Resolves true only when the confirm button is used;
+ * Escape, the backdrop, the close button, and Cancel all resolve false.
+ *
+ * @param {{ title: string, message: string, confirmLabel: string, danger?: boolean,
+ *   detail?: Node }} options
+ * @returns {Promise<boolean>}
+ */
+export function confirmModal({ title, message, confirmLabel, danger = false, detail }) {
+    return new Promise((resolve) => {
+        let settled = false;
+        const settle = (value) => {
+            if (settled) return;
+            settled = true;
+            resolve(value);
+        };
+        const cancelButtonFirst = { label: t('common.cancel'), variant: VARIANT.SECONDARY, onClick: () => settle(false) };
+        openModal({
+            title,
+            role: 'alertdialog',
+            body: [el('p', { className: 'modal-message', text: message }), detail].filter(Boolean),
+            actions: [
+                cancelButtonFirst,
+                { label: confirmLabel, variant: danger ? VARIANT.DANGER : VARIANT.PRIMARY, onClick: () => settle(true) },
+            ],
+            onCancel: () => settle(false),
+        });
+    });
+}

package/admin/js/table.js

@@ -0,0 +1,134 @@
+/**
+ * Pieces shared by every data table: sortable headers, the pager, and the
+ * empty and loading states.
+ */
+
+import { clampText } from './clamp.js';
+import { el, replaceChildren } from './dom.js';
+import { formatDate, formatNumber, formatTime } from './format.js';
+import { t } from './i18n.js';
+import { SORT_ORDER } from './constants.js';
+
+/**
+ * A header cell. Sortable headers are buttons, so they are reachable and
+ * operable by keyboard, and expose the sort through aria-sort.
+ *
+ * @param {{ label: string, sortKey?: string, sort?: string, order?: string,
+ *   onSort?: (key: string) => void, className?: string }} options
+ */
+export function headerCell({ label, sortKey, sort, order, onSort, className = '' }) {
+    if (!sortKey) return el('th', { className, text: label, attrs: { scope: 'col' } });
+
+    const active = sort === sortKey;
+    const ariaSort = active ? (order === SORT_ORDER.ASC ? 'ascending' : 'descending') : 'none';
+    const indicator = active ? (order === SORT_ORDER.ASC ? '▲' : '▼') : '↕';
+
+    return el('th', { className, attrs: { scope: 'col', 'aria-sort': ariaSort } }, [
+        el('button', {
+            className: `sort-btn${active ? ' active' : ''}`,
+            attrs: { type: 'button' },
+            dataset: { sortKey },
+            on: { click: () => onSort(sortKey) },
+        }, [
+            el('span', { text: label }),
+            el('span', { className: 'sort-indicator', text: indicator, attrs: { 'aria-hidden': 'true' } }),
+        ]),
+    ]);
+}
+
+/**
+ * A timestamp cell: the date above the time of day, like every other two-line
+ * cell, so it never needs the width of both on one line.
+ *
+ * @param {string|Date} value
+ * @param {{ seconds?: boolean }} [options]
+ */
+export function timeCell(value, { seconds = false } = {}) {
+    return el('td', { className: 'col-time' }, [
+        clampText(formatDate(value), { className: 'cell-primary' }),
+        clampText(formatTime(value, { seconds }), { className: 'cell-secondary' }),
+    ]);
+}
+
+/** A full-width row for empty or loading states. */
+export function messageRow(columns, text, className = 'table-message') {
+    return el('tr', {}, [el('td', { className, text, attrs: { colspan: String(columns) } })]);
+}
+
+/**
+ * Previous / next pagination with a live summary.
+ * @param {(page: number) => void} onChange
+ */
+export function createPager(onChange) {
+    let page = 1;
+    let pages = 1;
+
+    const summary = el('span', { className: 'pager-summary', attrs: { 'aria-live': 'polite' } });
+    const prev = el('button', {
+        className: 'btn btn-secondary btn-small',
+        text: t('pager.previous'),
+        attrs: { type: 'button' },
+        on: { click: () => page > 1 && onChange(page - 1) },
+    });
+    const next = el('button', {
+        className: 'btn btn-secondary btn-small',
+        text: t('pager.next'),
+        attrs: { type: 'button' },
+        on: { click: () => page < pages && onChange(page + 1) },
+    });
+
+    const element = el('div', { className: 'pager' }, [prev, summary, next]);
+
+    return {
+        element,
+        /** @param {number} currentPage @param {number} pageSize @param {number} total */
+        update(currentPage, pageSize, total) {
+            page = currentPage;
+            pages = Math.max(1, Math.ceil(total / pageSize));
+            prev.disabled = page <= 1;
+            next.disabled = page >= pages;
+            replaceChildren(summary, [t('pager.summary', {
+                page: formatNumber(page),
+                pages: formatNumber(pages),
+                total: formatNumber(total),
+                count: total,
+            })]);
+        },
+    };
+}
+
+/** A segmented control: one pressed button among several (a single choice). */
+export function createSegmented({ label, options, value, onChange }) {
+    let current = value;
+    const buttons = new Map();
+    const group = el('div', { className: 'segmented', attrs: { role: 'group', 'aria-label': label } });
+
+    const render = () => {
+        for (const [key, button] of buttons) {
+            const active = key === current;
+            button.classList.toggle('active', active);
+            button.setAttribute('aria-pressed', String(active));
+        }
+    };
+
+    for (const option of options) {
+        const button = el('button', {
+            className: 'segmented-btn',
+            text: option.label,
+            attrs: { type: 'button' },
+            on: {
+                click: () => {
+                    if (current === option.value) return;
+                    current = option.value;
+                    render();
+                    onChange(current);
+                },
+            },
+        });
+        buttons.set(option.value, button);
+        group.append(button);
+    }
+    render();
+
+    return { element: group, getValue: () => current };
+}

package/admin/js/theme.js

@@ -0,0 +1,72 @@
+/**
+ * Light / dark / system theme (FRONTEND.md §6).
+ *
+ * All colours are tokens on :root; the theme is a class on <html>, so
+ * switching it re-themes everything without per-component branching. The
+ * choice is a per-viewer convenience kept in localStorage, which may be
+ * unavailable (private mode, blocked storage); the UI works without it.
+ */
+
+import { STORAGE_KEY, THEME } from './constants.js';
+
+const CLASS = {
+    [THEME.LIGHT]: 'theme-light',
+    [THEME.DARK]: 'theme-dark',
+};
+
+const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+let current = THEME.AUTO;
+const buttons = new Map();
+
+function readStored() {
+    try {
+        const value = localStorage.getItem(STORAGE_KEY.THEME);
+        return Object.values(THEME).includes(value) ? value : THEME.AUTO;
+    } catch {
+        return THEME.AUTO;
+    }
+}
+
+function store(value) {
+    try {
+        localStorage.setItem(STORAGE_KEY.THEME, value);
+    } catch {
+        // Storage blocked: the theme still applies for this page view.
+    }
+}
+
+function resolved() {
+    if (current !== THEME.AUTO) return current;
+    return darkQuery.matches ? THEME.DARK : THEME.LIGHT;
+}
+
+function apply() {
+    const root = document.documentElement;
+    root.classList.remove(...Object.values(CLASS));
+    root.classList.add(CLASS[resolved()]);
+    for (const [value, button] of buttons) {
+        const active = value === current;
+        button.classList.toggle('active', active);
+        button.setAttribute('aria-pressed', String(active));
+    }
+}
+
+export function setTheme(value) {
+    current = Object.values(THEME).includes(value) ? value : THEME.AUTO;
+    store(current);
+    apply();
+}
+
+/**
+ * Wire the switcher buttons and apply the stored theme.
+ * @param {Record<string, HTMLButtonElement>} themeButtons keyed by THEME value
+ */
+export function initTheme(themeButtons) {
+    for (const [value, button] of Object.entries(themeButtons)) {
+        buttons.set(value, button);
+        button.addEventListener('click', () => setTheme(value));
+    }
+    current = readStored();
+    darkQuery.addEventListener('change', apply);
+    apply();
+}

package/admin/js/toast.js

@@ -0,0 +1,47 @@
+/**
+ * Non-blocking notices (FRONTEND.md §2): the same shape as the modal, one
+ * helper and one root. Errors interrupt (role=alert); everything else is
+ * polite (role=status).
+ */
+
+import { byId, el } from './dom.js';
+import { TOAST_DURATION_MS } from './constants.js';
+import { t } from './i18n.js';
+
+export const TOAST_TYPE = Object.freeze({
+    SUCCESS: 'success',
+    ERROR: 'error',
+    INFO: 'info',
+});
+
+/**
+ * @param {string} message
+ * @param {string} [type]
+ */
+export function showToast(message, type = TOAST_TYPE.INFO) {
+    const toast = el('div', {
+        className: `toast toast-${type}`,
+        attrs: { role: type === TOAST_TYPE.ERROR ? 'alert' : 'status' },
+    }, [
+        el('span', { className: 'toast-prompt', text: '❯', attrs: { 'aria-hidden': 'true' } }),
+        el('span', { className: 'toast-message', text: message }),
+    ]);
+
+    const dismiss = () => {
+        toast.classList.add('toast-leaving');
+        toast.addEventListener('animationend', () => toast.remove(), { once: true });
+        // Reduced-motion users get no animation, so no animationend either.
+        setTimeout(() => toast.remove(), TOAST_DURATION_MS);
+    };
+
+    toast.append(el('button', {
+        className: 'icon-btn toast-close',
+        text: '×',
+        attrs: { type: 'button', 'aria-label': t('common.dismiss') },
+        on: { click: dismiss },
+    }));
+
+    byId('toast-root').append(toast);
+    setTimeout(dismiss, TOAST_DURATION_MS);
+    return toast;
+}

package/admin/js/viewDialogs.js

@@ -0,0 +1,208 @@
+/**
+ * Dialogs for one or many views: details, edit, and note.
+ */
+
+import { el, uniqueId } from './dom.js';
+import { openModal, VARIANT } from './modal.js';
+import { createListbox } from './listbox.js';
+import { formatDateTime, orNone } from './format.js';
+import { t, tOr } from './i18n.js';
+import {
+    DEVICE_SIZE_FIELD,
+    EVENT_DATA_FIELD,
+    EVENT_DATA_ROWS,
+    JSON_INDENT,
+    NOTE_ROWS,
+    TEXT_FIELDS,
+    VIEW_DETAIL_FIELDS,
+} from './constants.js';
+
+const DATE_FIELDS = new Set(['timestamp', 'adminModifiedAt', 'deletedAt']);
+
+/** Render one field of a view for reading. */
+function displayValue(field, value) {
+    if (DATE_FIELDS.has(field)) return formatDateTime(value);
+    if (field === 'isUnique') return value ? t('common.yes') : t('common.no');
+    if (field === 'sourceType' && value) return tOr(`sources.${value}`, value);
+    if (field === EVENT_DATA_FIELD) return value === null || value === undefined ? t('common.none') : JSON.stringify(value, null, JSON_INDENT);
+    return orNone(value);
+}
+
+/** Read-only view of every field. */
+export function openDetails(view) {
+    const list = el('dl', { className: 'detail-list' });
+    for (const field of VIEW_DETAIL_FIELDS) {
+        const value = displayValue(field, view[field]);
+        const valueNode = field === EVENT_DATA_FIELD
+            ? el('pre', { className: 'detail-json', text: value })
+            : el('span', { className: 'detail-value', text: value });
+        list.append(el('dt', { text: t(`fields.${field}`) }), el('dd', {}, [valueNode]));
+    }
+    openModal({
+        title: t('details.title'),
+        body: list,
+        actions: [{ label: t('common.close'), variant: VARIANT.SECONDARY }],
+        wide: true,
+    });
+}
+
+/**
+ * Edit content fields of one or many views.
+ *
+ * With one view the fields start from its values and a field is included as
+ * soon as it is changed. With several, fields start empty and the admin ticks
+ * the ones to overwrite, so a batch never touches a field by accident.
+ *
+ * @param {{ views: object[], meta: object, onSubmit: (changes: object) => Promise<boolean> }} options
+ */
+export function openEditor({ views, meta, onSubmit }) {
+    const single = views.length === 1 ? views[0] : null;
+    const rows = [];
+    const controls = new Map();
+
+    for (const field of meta.editableFields) {
+        const inputId = uniqueId(`edit-${field}`);
+        const include = el('input', {
+            className: 'field-include',
+            attrs: { type: 'checkbox', 'aria-label': t('edit.include', { field: t(`fields.${field}`) }) },
+        });
+        const markIncluded = () => { include.checked = true; };
+
+        let control;
+        let read;
+        if (field === DEVICE_SIZE_FIELD) {
+            const listbox = createListbox({
+                label: t(`fields.${field}`),
+                options: meta.deviceSizes.map((size) => ({ value: size, label: tOr(`deviceSizes.${size}`, size) })),
+                value: single?.deviceSize ?? meta.deviceSizes[0],
+                onChange: markIncluded,
+            });
+            control = listbox.element;
+            read = () => ({ ok: true, value: listbox.getValue() });
+        } else if (field === EVENT_DATA_FIELD) {
+            const initial = single?.eventData === null || single?.eventData === undefined
+                ? '' : JSON.stringify(single.eventData, null, JSON_INDENT);
+            const textarea = el('textarea', {
+                className: 'input mono',
+                text: initial,
+                attrs: { id: inputId, rows: EVENT_DATA_ROWS, spellcheck: 'false' },
+                on: { input: markIncluded },
+            });
+            control = textarea;
+            read = () => {
+                const text = textarea.value.trim();
+                if (text === '') return { ok: true, value: null };
+                try {
+                    return { ok: true, value: JSON.parse(text) };
+                } catch {
+                    return { ok: false, error: t('edit.invalidJson') };
+                }
+            };
+        } else if (TEXT_FIELDS.includes(field)) {
+            const input = el('input', {
+                className: 'input',
+                attrs: {
+                    id: inputId,
+                    type: 'text',
+                    maxlength: meta.maxLength[field],
+                    value: single ? (single[field] ?? '') : '',
+                    spellcheck: 'false',
+                },
+                on: { input: markIncluded },
+            });
+            control = input;
+            read = () => ({ ok: true, value: input.value === '' ? null : input.value });
+        } else {
+            continue;
+        }
+
+        const error = el('p', { className: 'field-error', attrs: { role: 'alert' } });
+        error.hidden = true;
+        controls.set(field, { include, read, error });
+        rows.push(el('div', { className: 'edit-row' }, [
+            include,
+            el('label', { className: 'edit-label', text: t(`fields.${field}`), attrs: { for: inputId } }),
+            el('div', { className: 'edit-control' }, [control, error]),
+        ]));
+    }
+
+    const formError = el('p', { className: 'field-error', attrs: { role: 'alert' } });
+    formError.hidden = true;
+
+    const body = [
+        el('p', { className: 'modal-message', text: single ? t('edit.introSingle') : t('edit.introBatch', { count: views.length }) }),
+        el('p', { className: 'notice', text: t('edit.lockedNotice') }),
+        el('div', { className: 'edit-grid' }, rows),
+        formError,
+    ];
+
+    openModal({
+        title: single ? t('edit.titleSingle') : t('edit.titleBatch', { count: views.length }),
+        body,
+        wide: true,
+        actions: [
+            { label: t('common.cancel'), variant: VARIANT.SECONDARY },
+            {
+                label: t('edit.save'),
+                variant: VARIANT.PRIMARY,
+                onClick: async () => {
+                    const changes = {};
+                    let valid = true;
+                    for (const [field, { include, read, error }] of controls) {
+                        error.hidden = true;
+                        if (!include.checked) continue;
+                        const result = read();
+                        if (!result.ok) {
+                            error.textContent = result.error;
+                            error.hidden = false;
+                            valid = false;
+                        } else {
+                            changes[field] = result.value;
+                        }
+                    }
+                    formError.hidden = true;
+                    if (!valid) return false;
+                    if (Object.keys(changes).length === 0) {
+                        formError.textContent = t('edit.nothingSelected');
+                        formError.hidden = false;
+                        return false;
+                    }
+                    return onSubmit(changes);
+                },
+            },
+        ],
+    });
+}
+
+/**
+ * Set or clear the note on one or many views.
+ * @param {{ views: object[], meta: object, onSubmit: (note: string|null) => Promise<boolean> }} options
+ */
+export function openNoteEditor({ views, meta, onSubmit }) {
+    const single = views.length === 1 ? views[0] : null;
+    const inputId = uniqueId('note');
+    const textarea = el('textarea', {
+        className: 'input',
+        text: single?.note ?? '',
+        attrs: { id: inputId, rows: NOTE_ROWS, maxlength: meta.maxLength.note },
+    });
+
+    openModal({
+        title: single ? t('note.titleSingle') : t('note.titleBatch', { count: views.length }),
+        body: [
+            el('p', { className: 'modal-message', text: t('note.intro') }),
+            el('label', { className: 'sr-only', text: t('fields.note'), attrs: { for: inputId } }),
+            textarea,
+        ],
+        initialFocus: textarea,
+        actions: [
+            { label: t('common.cancel'), variant: VARIANT.SECONDARY },
+            { label: t('note.clear'), variant: VARIANT.SECONDARY, onClick: () => onSubmit(null) },
+            {
+                label: t('note.save'),
+                variant: VARIANT.PRIMARY,
+                onClick: () => onSubmit(textarea.value.trim() === '' ? null : textarea.value),
+            },
+        ],
+    });
+}