@fieldia/viewer 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldia/viewer",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Mount a Fieldia page in any web page: plain DOM, no framework.",
   "license": "MIT",
   "homepage": "https://fieldia.dev",
@@ -27,8 +27,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@fieldia/core": "0.10.0",
-    "@fieldia/widgets": "0.10.0",
+    "@fieldia/core": "0.12.0",
+    "@fieldia/widgets": "0.12.0",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/src/lib/attachment-preview.d.mts

@@ -0,0 +1,27 @@
+import type { AttachmentPreview, DataSource, Form, FormState, Page } from '@fieldia/core';
+import { type El } from './dom.mjs';
+import type { ViewerLabels } from './labels.mjs';
+/** What the preview beside a sheet needs of the viewer that draws it. */
+export interface PreviewContext {
+    doc: Document;
+    el: El;
+    form: Form;
+    page: Page;
+    node: AttachmentPreview;
+    dataSource: DataSource | undefined;
+    labels: ViewerLabels;
+    fill(template: string, values: Record<string, string | number>): string;
+}
+/**
+ * The record's main attachment beside its sheet, as Flectra's
+ * o_attachment_preview: a PDF in the browser's own viewer or a picture, with
+ * Previous and Next when it has several, and a link that opens it on its own.
+ * From a file field of the page, or the data source's `attachments` of the
+ * record — asked again when the form shows another record, and after a save.
+ * Hidden while there is nothing to show.
+ */
+export declare function attachmentPreview(context: PreviewContext): {
+    element: HTMLElement;
+    update(state: FormState): void;
+    destroy(): void;
+};

package/src/lib/attachment-preview.d.ts

@@ -0,0 +1,27 @@
+import type { AttachmentPreview, DataSource, Form, FormState, Page } from '@fieldia/core';
+import { type El } from './dom';
+import type { ViewerLabels } from './labels';
+/** What the preview beside a sheet needs of the viewer that draws it. */
+export interface PreviewContext {
+    doc: Document;
+    el: El;
+    form: Form;
+    page: Page;
+    node: AttachmentPreview;
+    dataSource: DataSource | undefined;
+    labels: ViewerLabels;
+    fill(template: string, values: Record<string, string | number>): string;
+}
+/**
+ * The record's main attachment beside its sheet, as Flectra's
+ * o_attachment_preview: a PDF in the browser's own viewer or a picture, with
+ * Previous and Next when it has several, and a link that opens it on its own.
+ * From a file field of the page, or the data source's `attachments` of the
+ * record — asked again when the form shows another record, and after a save.
+ * Hidden while there is nothing to show.
+ */
+export declare function attachmentPreview(context: PreviewContext): {
+    element: HTMLElement;
+    update(state: FormState): void;
+    destroy(): void;
+};

package/src/lib/attachment-preview.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.attachmentPreview = attachmentPreview;
+const widgets_1 = require("@fieldia/widgets");
+const dom_1 = require("./dom");
+/** A file the browser shows itself: a picture or a PDF. */
+const showable = (file) => /^image\//.test(file.type) || /pdf/i.test(file.type) || /\.pdf$/i.test(file.name);
+const filesOf = (value) => (Array.isArray(value) ? value : value ? [value] : []).filter((file) => file && typeof file === 'object' && 'name' in file);
+/**
+ * The record's main attachment beside its sheet, as Flectra's
+ * o_attachment_preview: a PDF in the browser's own viewer or a picture, with
+ * Previous and Next when it has several, and a link that opens it on its own.
+ * From a file field of the page, or the data source's `attachments` of the
+ * record — asked again when the form shows another record, and after a save.
+ * Hidden while there is nothing to show.
+ */
+function attachmentPreview(context) {
+    const { el, form, labels, node } = context;
+    const name = el('span', { class: 'fd-attachment-name', dir: 'auto' });
+    const count = el('span', { class: 'fd-attachment-count', dir: 'ltr' });
+    const previous = el('button', { type: 'button', class: 'fd-button fd-record-step', 'aria-label': labels.previousAttachment }, el('span', { 'aria-hidden': 'true', class: 'fd-record-arrow' }, '‹'));
+    const next = el('button', { type: 'button', class: 'fd-button fd-record-step', 'aria-label': labels.nextAttachment }, el('span', { 'aria-hidden': 'true', class: 'fd-record-arrow' }, '›'));
+    const open = el('a', { class: 'fd-button fd-button-link fd-attachment-open', target: '_blank', rel: 'noopener' }, labels.openAttachment);
+    const body = el('div', { class: 'fd-attachment-body' });
+    const element = el('aside', { class: 'fd-attachment-preview', hidden: '' }, el('div', { class: 'fd-attachment-head' }, name, count, previous, next, open), body);
+    let files = [];
+    let at = 0;
+    let shown = null;
+    /** The record the attachments were asked for, and the latest ask: an older answer is let go. */
+    let askedFor;
+    let asks = 0;
+    let status;
+    let held;
+    function draw() {
+        shown?.free();
+        shown = null;
+        const file = files[at];
+        if (!file)
+            return body.replaceChildren();
+        const made = (0, widgets_1.fileShown)(context.doc, file);
+        shown = made;
+        body.replaceChildren(...(made ? [made.element] : []));
+        (0, dom_1.setText)(name, file.name);
+        (0, dom_1.setText)(count, files.length > 1 ? context.fill(labels.recordAt, { n: at + 1, total: files.length }) : '');
+        (0, dom_1.setHidden)(previous, files.length < 2);
+        (0, dom_1.setHidden)(next, files.length < 2);
+        (0, dom_1.setAttr)(open, 'href', made?.url ?? null);
+        (0, dom_1.setAttr)(element, 'aria-label', context.fill(labels.attachment, { name: file.name }));
+    }
+    const step = (by) => {
+        at = (at + by + files.length) % files.length;
+        draw();
+    };
+    previous.addEventListener('click', () => step(-1));
+    next.addEventListener('click', () => step(1));
+    const take = (found) => {
+        files = found.filter(showable);
+        at = 0;
+        draw();
+        show();
+    };
+    const show = () => (0, dom_1.setHidden)(element, form.node('#preview').invisible || !files.length);
+    function ask(state) {
+        const source = context.dataSource;
+        const ask = ++asks;
+        askedFor = state.recordId;
+        if (state.recordId == null || !source?.attachments || context.page.data.kind !== 'record')
+            return take([]);
+        source.attachments({ model: context.page.data.model, id: state.recordId, fields: context.page.fields }).then((found) => ask === asks && take(found), () => ask === asks && take([]));
+    }
+    return {
+        element,
+        update(state) {
+            if (node.field) {
+                const value = state.values[node.field];
+                if (value !== held) {
+                    held = value;
+                    take(filesOf(value));
+                }
+            }
+            else if (state.status !== 'loading' && state.status !== 'idle' && (state.recordId !== askedFor || (state.status === 'saved' && status !== 'saved')))
+                ask(state);
+            status = state.status;
+            show();
+        },
+        destroy: () => shown?.free(),
+    };
+}
+//# sourceMappingURL=attachment-preview.js.map

package/src/lib/attachment-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-preview.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/attachment-preview.ts"],"names":[],"mappings":"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"}

package/src/lib/attachment-preview.mjs

@@ -0,0 +1,86 @@
+import { fileShown } from '@fieldia/widgets';
+import { setAttr, setHidden, setText } from './dom.mjs';
+/** A file the browser shows itself: a picture or a PDF. */
+const showable = (file) => /^image\//.test(file.type) || /pdf/i.test(file.type) || /\.pdf$/i.test(file.name);
+const filesOf = (value) => (Array.isArray(value) ? value : value ? [value] : []).filter((file) => file && typeof file === 'object' && 'name' in file);
+/**
+ * The record's main attachment beside its sheet, as Flectra's
+ * o_attachment_preview: a PDF in the browser's own viewer or a picture, with
+ * Previous and Next when it has several, and a link that opens it on its own.
+ * From a file field of the page, or the data source's `attachments` of the
+ * record — asked again when the form shows another record, and after a save.
+ * Hidden while there is nothing to show.
+ */
+export function attachmentPreview(context) {
+    const { el, form, labels, node } = context;
+    const name = el('span', { class: 'fd-attachment-name', dir: 'auto' });
+    const count = el('span', { class: 'fd-attachment-count', dir: 'ltr' });
+    const previous = el('button', { type: 'button', class: 'fd-button fd-record-step', 'aria-label': labels.previousAttachment }, el('span', { 'aria-hidden': 'true', class: 'fd-record-arrow' }, '‹'));
+    const next = el('button', { type: 'button', class: 'fd-button fd-record-step', 'aria-label': labels.nextAttachment }, el('span', { 'aria-hidden': 'true', class: 'fd-record-arrow' }, '›'));
+    const open = el('a', { class: 'fd-button fd-button-link fd-attachment-open', target: '_blank', rel: 'noopener' }, labels.openAttachment);
+    const body = el('div', { class: 'fd-attachment-body' });
+    const element = el('aside', { class: 'fd-attachment-preview', hidden: '' }, el('div', { class: 'fd-attachment-head' }, name, count, previous, next, open), body);
+    let files = [];
+    let at = 0;
+    let shown = null;
+    /** The record the attachments were asked for, and the latest ask: an older answer is let go. */
+    let askedFor;
+    let asks = 0;
+    let status;
+    let held;
+    function draw() {
+        shown?.free();
+        shown = null;
+        const file = files[at];
+        if (!file)
+            return body.replaceChildren();
+        const made = fileShown(context.doc, file);
+        shown = made;
+        body.replaceChildren(...(made ? [made.element] : []));
+        setText(name, file.name);
+        setText(count, files.length > 1 ? context.fill(labels.recordAt, { n: at + 1, total: files.length }) : '');
+        setHidden(previous, files.length < 2);
+        setHidden(next, files.length < 2);
+        setAttr(open, 'href', made?.url ?? null);
+        setAttr(element, 'aria-label', context.fill(labels.attachment, { name: file.name }));
+    }
+    const step = (by) => {
+        at = (at + by + files.length) % files.length;
+        draw();
+    };
+    previous.addEventListener('click', () => step(-1));
+    next.addEventListener('click', () => step(1));
+    const take = (found) => {
+        files = found.filter(showable);
+        at = 0;
+        draw();
+        show();
+    };
+    const show = () => setHidden(element, form.node('#preview').invisible || !files.length);
+    function ask(state) {
+        const source = context.dataSource;
+        const ask = ++asks;
+        askedFor = state.recordId;
+        if (state.recordId == null || !source?.attachments || context.page.data.kind !== 'record')
+            return take([]);
+        source.attachments({ model: context.page.data.model, id: state.recordId, fields: context.page.fields }).then((found) => ask === asks && take(found), () => ask === asks && take([]));
+    }
+    return {
+        element,
+        update(state) {
+            if (node.field) {
+                const value = state.values[node.field];
+                if (value !== held) {
+                    held = value;
+                    take(filesOf(value));
+                }
+            }
+            else if (state.status !== 'loading' && state.status !== 'idle' && (state.recordId !== askedFor || (state.status === 'saved' && status !== 'saved')))
+                ask(state);
+            status = state.status;
+            show();
+        },
+        destroy: () => shown?.free(),
+    };
+}
+//# sourceMappingURL=attachment-preview.mjs.map

package/src/lib/attachment-preview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-preview.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/attachment-preview.ts"],"names":[],"mappings":"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"}

package/src/lib/dialog.d.mts

@@ -1,10 +1,11 @@
-import type { PageLook, RecordId, RelatedRecord, Values } from '@fieldia/core';
+import type { PageLook, PanelSide, RecordId, RelatedRecord, Values } from '@fieldia/core';
 import { type Skin, type ViewerOptions } from './viewer.mjs';
 /**
  * A page in a dialog: a new related record, a line to edit, a quick task. The
  * dialog saves (Save & Close) or closes without saving (Discard, ×, Escape);
  * the page's own Save and Discard stay hidden. The focus moves into the dialog,
  * Tab stays inside it, and the focus goes back where it was when it closes.
+ * A side panel (`openFormPanel`) is the same box at the edge of the screen.
  */
 export interface FormDialogOptions extends ViewerOptions {
     title: string;
@@ -26,12 +27,40 @@ export interface FormDialogOptions extends ViewerOptions {
     look?: PageLook;
 }
 export interface FormDialogResult {
-    /** True when Save & Close was pressed and the form accepted. */
+    /** True when Save & Close (Done, in a panel in "values" mode) was pressed and the form accepted. */
     saved: boolean;
     recordId: RecordId | null;
     values: Values;
 }
+/** A page in a side panel: the dialog's options, with the edge it comes from and its depth in place of a size. */
+export interface FormPanelOptions extends Omit<FormDialogOptions, 'size'> {
+    /**
+     * The edge it comes from: `end` (the default: the end of the line, the right,
+     * or the left right to left) or `start`, as the page reads; or `left`,
+     * `right`, `top` or `bottom` of the screen, whatever the page's direction.
+     */
+    side?: PanelSide;
+    /** A panel at the end, start, left or right: about 420, 560 (the default) or 720 pixels wide on a wide screen; the whole screen on a phone. */
+    width?: 'narrow' | 'medium' | 'wide';
+    /** A panel at the top or bottom, the whole width: about 40, 60 (the default) or 85 in a hundred of the screen's height; the whole screen on a phone. */
+    height?: 'short' | 'medium' | 'tall';
+}
+/** The first box to type or choose in, where a page opened takes the focus. */
+export declare const FIRST_FIELD = "input:not([type=\"hidden\"]), select, textarea, [contenteditable=\"true\"]";
+/** The box of the first field shown that takes the focus as the record opens (a node's `focus`), if there is one. */
+export declare function focusField(scope: Element): HTMLElement | null;
 export declare function openFormDialog(options: FormDialogOptions): Promise<FormDialogResult>;
+/**
+ * A page in a side panel: the dialog's twin, at full height along the
+ * inline-end edge (the left, right to left) unless it names another `side` —
+ * the whole width along the top or the bottom — the page behind dimmed but in
+ * sight; a full-screen sheet on a phone, from above for the top, from below
+ * for the rest. It saves, or in "values" mode hands back its values with
+ * Done, as the dialog does; Escape and × ask first when there are changes to
+ * lose. A dialog opened from it sits above it, and a panel opened from it
+ * stacks over it, this one stepped back from its own edge.
+ */
+export declare function openFormPanel(options: FormPanelOptions): Promise<FormDialogResult>;
 export interface SearchDialogOptions {
     title: string;
     /** Finds records for what is typed: the field's own search, filter and all. */

package/src/lib/dialog.d.ts

@@ -1,10 +1,11 @@
-import type { PageLook, RecordId, RelatedRecord, Values } from '@fieldia/core';
+import type { PageLook, PanelSide, RecordId, RelatedRecord, Values } from '@fieldia/core';
 import { type Skin, type ViewerOptions } from './viewer';
 /**
  * A page in a dialog: a new related record, a line to edit, a quick task. The
  * dialog saves (Save & Close) or closes without saving (Discard, ×, Escape);
  * the page's own Save and Discard stay hidden. The focus moves into the dialog,
  * Tab stays inside it, and the focus goes back where it was when it closes.
+ * A side panel (`openFormPanel`) is the same box at the edge of the screen.
  */
 export interface FormDialogOptions extends ViewerOptions {
     title: string;
@@ -26,12 +27,40 @@ export interface FormDialogOptions extends ViewerOptions {
     look?: PageLook;
 }
 export interface FormDialogResult {
-    /** True when Save & Close was pressed and the form accepted. */
+    /** True when Save & Close (Done, in a panel in "values" mode) was pressed and the form accepted. */
     saved: boolean;
     recordId: RecordId | null;
     values: Values;
 }
+/** A page in a side panel: the dialog's options, with the edge it comes from and its depth in place of a size. */
+export interface FormPanelOptions extends Omit<FormDialogOptions, 'size'> {
+    /**
+     * The edge it comes from: `end` (the default: the end of the line, the right,
+     * or the left right to left) or `start`, as the page reads; or `left`,
+     * `right`, `top` or `bottom` of the screen, whatever the page's direction.
+     */
+    side?: PanelSide;
+    /** A panel at the end, start, left or right: about 420, 560 (the default) or 720 pixels wide on a wide screen; the whole screen on a phone. */
+    width?: 'narrow' | 'medium' | 'wide';
+    /** A panel at the top or bottom, the whole width: about 40, 60 (the default) or 85 in a hundred of the screen's height; the whole screen on a phone. */
+    height?: 'short' | 'medium' | 'tall';
+}
+/** The first box to type or choose in, where a page opened takes the focus. */
+export declare const FIRST_FIELD = "input:not([type=\"hidden\"]), select, textarea, [contenteditable=\"true\"]";
+/** The box of the first field shown that takes the focus as the record opens (a node's `focus`), if there is one. */
+export declare function focusField(scope: Element): HTMLElement | null;
 export declare function openFormDialog(options: FormDialogOptions): Promise<FormDialogResult>;
+/**
+ * A page in a side panel: the dialog's twin, at full height along the
+ * inline-end edge (the left, right to left) unless it names another `side` —
+ * the whole width along the top or the bottom — the page behind dimmed but in
+ * sight; a full-screen sheet on a phone, from above for the top, from below
+ * for the rest. It saves, or in "values" mode hands back its values with
+ * Done, as the dialog does; Escape and × ask first when there are changes to
+ * lose. A dialog opened from it sits above it, and a panel opened from it
+ * stacks over it, this one stepped back from its own edge.
+ */
+export declare function openFormPanel(options: FormPanelOptions): Promise<FormDialogResult>;
 export interface SearchDialogOptions {
     title: string;
     /** Finds records for what is typed: the field's own search, filter and all. */