@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/canvas-size.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MIN_WIDTH = void 0;
+exports.sizeAt = sizeAt;
+exports.readSize = readSize;
+exports.writeSize = writeSize;
+exports.readWidth = readWidth;
+exports.writeWidth = writeWidth;
+exports.columnsAt = columnsAt;
+exports.sizeSwitch = sizeSwitch;
+const widgets_1 = require("@fieldia/widgets");
+const icons_1 = require("./icons");
+const writes_1 = require("./writes");
+const en_1 = require("./locales/en");
+const KEY = 'fieldia.designer.size';
+const WIDTH_KEY = 'fieldia.designer.width';
+const SIZES = ['desktop', 'tablet', 'phone'];
+/** The narrowest the canvas is dragged to: a small phone's screen. */
+exports.MIN_WIDTH = 320;
+/**
+ * The size a form this wide is, by the form's own widths (FORM_WIDTHS, the
+ * ones its stylesheet lays its groups out by): a phone up to the narrow one,
+ * a tablet up to the medium one, a desktop beyond.
+ */
+function sizeAt(formWidth) {
+    if (formWidth <= widgets_1.FORM_WIDTHS.narrow)
+        return 'phone';
+    if (formWidth <= widgets_1.FORM_WIDTHS.medium)
+        return 'tablet';
+    return 'desktop';
+}
+function readSize(view) {
+    try {
+        const kept = view?.localStorage.getItem(KEY);
+        return SIZES.includes(kept) ? kept : 'desktop';
+    }
+    catch {
+        return 'desktop';
+    }
+}
+function writeSize(view, size) {
+    try {
+        view?.localStorage.setItem(KEY, size);
+    }
+    catch {
+        // A browser that keeps nothing: the size lasts as long as the page.
+    }
+}
+/** The canvas's own width, dragged to: whole pixels, no narrower than a phone; or none, the size's own. */
+function readWidth(view) {
+    try {
+        const kept = view?.localStorage.getItem(WIDTH_KEY) ?? '';
+        const width = /^\d+$/.test(kept) ? Number(kept) : NaN;
+        return width >= exports.MIN_WIDTH ? width : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeWidth(view, width) {
+    try {
+        if (width === null)
+            view?.localStorage.removeItem(WIDTH_KEY);
+        else
+            view?.localStorage.setItem(WIDTH_KEY, String(width));
+    }
+    catch {
+        // A browser that keeps nothing: the width lasts as long as the page.
+    }
+}
+/**
+ * A group's columns on a size of screen, as the form lays them out there: a
+ * tablet's own count, or what the skin does by itself — the outlined skin
+ * keeps its columns, the underline skin stacks them; a phone's own, or one.
+ */
+function columnsAt(columns, size, skin) {
+    const wide = typeof columns === 'object' ? columns.wide : (columns ?? 1);
+    const own = typeof columns === 'object' ? columns : null;
+    if (size === 'desktop')
+        return wide;
+    if (size === 'tablet')
+        return own?.medium ?? (skin === 'underline' ? 1 : wide);
+    return own?.narrow ?? 1;
+}
+/** Three buttons — a picture each, and its name where there is room — the one shown pressed; a note of the width dragged to. */
+function sizeSwitch(el, doc, size, change, width = null, words = en_1.en) {
+    const w = words.canvas;
+    const icons = { desktop: 'desktop', tablet: 'tablet', phone: 'device' };
+    const buttons = SIZES.map((s) => {
+        const b = el('button', { type: 'button', class: 'fd-canvas-size', 'data-size': s, title: w.sizes[s] }, (0, icons_1.designerIcon)(doc, icons[s]), el('span', { class: 'fd-canvas-size-name' }, w.sizes[s]));
+        b.addEventListener('click', () => change(s));
+        return b;
+    });
+    const element = el('div', { class: 'fd-canvas-sizes', role: 'group', 'aria-label': w.screenSize }, ...buttons);
+    const note = el('span', { class: 'fd-canvas-size-px', hidden: '' });
+    const set = (now, own = null) => {
+        buttons.forEach((b, i) => {
+            const pressed = String(SIZES[i] === now);
+            if (b.getAttribute('aria-pressed') !== pressed)
+                b.setAttribute('aria-pressed', pressed);
+        });
+        (0, writes_1.setHidden)(note, own === null);
+        (0, writes_1.setText)(note, own === null ? '' : w.px(own));
+    };
+    set(size, width);
+    return { element, note, set };
+}
+//# sourceMappingURL=canvas-size.js.map

package/src/lib/canvas-size.js.map

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

package/src/lib/canvas-size.mjs

@@ -0,0 +1,98 @@
+import { FORM_WIDTHS } from '@fieldia/widgets';
+import { designerIcon } from './icons.mjs';
+import { setHidden, setText } from './writes.mjs';
+import { en } from './locales/en/index.mjs';
+const KEY = 'fieldia.designer.size';
+const WIDTH_KEY = 'fieldia.designer.width';
+const SIZES = ['desktop', 'tablet', 'phone'];
+/** The narrowest the canvas is dragged to: a small phone's screen. */
+export const MIN_WIDTH = 320;
+/**
+ * The size a form this wide is, by the form's own widths (FORM_WIDTHS, the
+ * ones its stylesheet lays its groups out by): a phone up to the narrow one,
+ * a tablet up to the medium one, a desktop beyond.
+ */
+export function sizeAt(formWidth) {
+    if (formWidth <= FORM_WIDTHS.narrow)
+        return 'phone';
+    if (formWidth <= FORM_WIDTHS.medium)
+        return 'tablet';
+    return 'desktop';
+}
+export function readSize(view) {
+    try {
+        const kept = view?.localStorage.getItem(KEY);
+        return SIZES.includes(kept) ? kept : 'desktop';
+    }
+    catch {
+        return 'desktop';
+    }
+}
+export function writeSize(view, size) {
+    try {
+        view?.localStorage.setItem(KEY, size);
+    }
+    catch {
+        // A browser that keeps nothing: the size lasts as long as the page.
+    }
+}
+/** The canvas's own width, dragged to: whole pixels, no narrower than a phone; or none, the size's own. */
+export function readWidth(view) {
+    try {
+        const kept = view?.localStorage.getItem(WIDTH_KEY) ?? '';
+        const width = /^\d+$/.test(kept) ? Number(kept) : NaN;
+        return width >= MIN_WIDTH ? width : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function writeWidth(view, width) {
+    try {
+        if (width === null)
+            view?.localStorage.removeItem(WIDTH_KEY);
+        else
+            view?.localStorage.setItem(WIDTH_KEY, String(width));
+    }
+    catch {
+        // A browser that keeps nothing: the width lasts as long as the page.
+    }
+}
+/**
+ * A group's columns on a size of screen, as the form lays them out there: a
+ * tablet's own count, or what the skin does by itself — the outlined skin
+ * keeps its columns, the underline skin stacks them; a phone's own, or one.
+ */
+export function columnsAt(columns, size, skin) {
+    const wide = typeof columns === 'object' ? columns.wide : (columns ?? 1);
+    const own = typeof columns === 'object' ? columns : null;
+    if (size === 'desktop')
+        return wide;
+    if (size === 'tablet')
+        return own?.medium ?? (skin === 'underline' ? 1 : wide);
+    return own?.narrow ?? 1;
+}
+/** Three buttons — a picture each, and its name where there is room — the one shown pressed; a note of the width dragged to. */
+export function sizeSwitch(el, doc, size, change, width = null, words = en) {
+    const w = words.canvas;
+    const icons = { desktop: 'desktop', tablet: 'tablet', phone: 'device' };
+    const buttons = SIZES.map((s) => {
+        const b = el('button', { type: 'button', class: 'fd-canvas-size', 'data-size': s, title: w.sizes[s] }, designerIcon(doc, icons[s]), el('span', { class: 'fd-canvas-size-name' }, w.sizes[s]));
+        b.addEventListener('click', () => change(s));
+        return b;
+    });
+    const element = el('div', { class: 'fd-canvas-sizes', role: 'group', 'aria-label': w.screenSize }, ...buttons);
+    const note = el('span', { class: 'fd-canvas-size-px', hidden: '' });
+    const set = (now, own = null) => {
+        buttons.forEach((b, i) => {
+            const pressed = String(SIZES[i] === now);
+            if (b.getAttribute('aria-pressed') !== pressed)
+                b.setAttribute('aria-pressed', pressed);
+        });
+        setHidden(note, own === null);
+        setText(note, own === null ? '' : w.px(own));
+    };
+    set(size, width);
+    return { element, note, set };
+}
+//# sourceMappingURL=canvas-size.mjs.map

package/src/lib/canvas-size.mjs.map

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

package/src/lib/canvas-width.d.mts

@@ -0,0 +1,55 @@
+import type { Designer, DesignerState } from './designer.mjs';
+/**
+ * Widths on the Advanced canvas, dragged where they are seen. A picked part's
+ * end edge (its start edge right to left) carries a handle: dragged, it snaps
+ * to the columns of the grid the part sits in, a chip saying "2 of 4 columns",
+ * and lets go as one edit. Where another part follows in the same row, the
+ * edge between them is a gutter instead: dragged, or moved with the arrow
+ * keys, it trades columns between the two, together keeping what they had.
+ *
+ * In a group (see layout-twelfths.ts) widths are twelfths of the row, said as
+ * percentages — "58% · 42%" — and a group of one to four columns is shown in
+ * twelfths as the drag starts, and divided so in the edit it lets go as. A
+ * group that keeps its rows full has no room at a row's end, so no handle:
+ * the last part of a row has the gutter before it. One that allows gaps has
+ * the handle, widening a part into the room its row has left.
+ */
+/** The columns a part starting at `start` covers when its edge is dragged to `x`: the nearest, one at least, the grid's at most. */
+export declare function spanAt(at: {
+    start: number;
+    x: number;
+    colW: number;
+    gap: number;
+    cols: number;
+    rtl: boolean;
+}): number;
+/** The columns the first of two parts keeps when the gutter between them is dragged to `x`: one each at least. */
+export declare function tradeAt(at: {
+    start: number;
+    x: number;
+    colW: number;
+    gap: number;
+    total: number;
+    rtl: boolean;
+}): number;
+/** How many columns a grid's computed `grid-template-columns` lays out: a track each, or — a subgrid — its lines less one. */
+export declare function columnsIn(tracks: string): number;
+export interface WidthMarksOptions {
+    canvas: HTMLElement;
+    /** What holds the page's own parts. */
+    root: HTMLElement;
+    designer: Designer;
+    rtl(): boolean;
+    rectOf?(element: Element): DOMRect;
+    /** How many columns a grid has at the width it has now, and the gap between them; read off the grid by default. */
+    columnsOf?(grid: HTMLElement): {
+        cols: number;
+        gap: number;
+    };
+}
+export interface WidthMarks {
+    /** Put the handle or the gutter on the part picked; none in Simple. */
+    update(state: DesignerState, advanced: boolean): void;
+    destroy(): void;
+}
+export declare function widthMarks(options: WidthMarksOptions): WidthMarks;

package/src/lib/canvas-width.d.ts

@@ -0,0 +1,55 @@
+import type { Designer, DesignerState } from './designer';
+/**
+ * Widths on the Advanced canvas, dragged where they are seen. A picked part's
+ * end edge (its start edge right to left) carries a handle: dragged, it snaps
+ * to the columns of the grid the part sits in, a chip saying "2 of 4 columns",
+ * and lets go as one edit. Where another part follows in the same row, the
+ * edge between them is a gutter instead: dragged, or moved with the arrow
+ * keys, it trades columns between the two, together keeping what they had.
+ *
+ * In a group (see layout-twelfths.ts) widths are twelfths of the row, said as
+ * percentages — "58% · 42%" — and a group of one to four columns is shown in
+ * twelfths as the drag starts, and divided so in the edit it lets go as. A
+ * group that keeps its rows full has no room at a row's end, so no handle:
+ * the last part of a row has the gutter before it. One that allows gaps has
+ * the handle, widening a part into the room its row has left.
+ */
+/** The columns a part starting at `start` covers when its edge is dragged to `x`: the nearest, one at least, the grid's at most. */
+export declare function spanAt(at: {
+    start: number;
+    x: number;
+    colW: number;
+    gap: number;
+    cols: number;
+    rtl: boolean;
+}): number;
+/** The columns the first of two parts keeps when the gutter between them is dragged to `x`: one each at least. */
+export declare function tradeAt(at: {
+    start: number;
+    x: number;
+    colW: number;
+    gap: number;
+    total: number;
+    rtl: boolean;
+}): number;
+/** How many columns a grid's computed `grid-template-columns` lays out: a track each, or — a subgrid — its lines less one. */
+export declare function columnsIn(tracks: string): number;
+export interface WidthMarksOptions {
+    canvas: HTMLElement;
+    /** What holds the page's own parts. */
+    root: HTMLElement;
+    designer: Designer;
+    rtl(): boolean;
+    rectOf?(element: Element): DOMRect;
+    /** How many columns a grid has at the width it has now, and the gap between them; read off the grid by default. */
+    columnsOf?(grid: HTMLElement): {
+        cols: number;
+        gap: number;
+    };
+}
+export interface WidthMarks {
+    /** Put the handle or the gutter on the part picked; none in Simple. */
+    update(state: DesignerState, advanced: boolean): void;
+    destroy(): void;
+}
+export declare function widthMarks(options: WidthMarksOptions): WidthMarks;