type-tester-tdf 2.0.0

package/dist/index.cjs

@@ -0,0 +1,609 @@
+'use strict';
+
+// src/core/dom.ts
+function el(tag, props = {}) {
+  const node = document.createElement(tag);
+  if (props.class) node.className = props.class;
+  if (props.text != null) node.textContent = props.text;
+  if (props.attrs) {
+    for (const [name, value] of Object.entries(props.attrs)) {
+      if (value == null || value === false) continue;
+      node.setAttribute(name, value === true ? "" : String(value));
+    }
+  }
+  if (props.children) {
+    for (const child of props.children) node.appendChild(child);
+  }
+  return node;
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function toNumber(value, fallback) {
+  if (value == null || value === "") return fallback;
+  const n = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+// src/core/fit.ts
+var REFERENCE_SIZE = 100;
+var MIRROR_PROPS = [
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "fontStretch",
+  "letterSpacing",
+  "fontFeatureSettings",
+  "fontVariationSettings",
+  "textTransform"
+];
+var Fitter = class {
+  /**
+   * @param target Element whose text is being fitted.
+   * @param min Minimum font-size in px.
+   * @param max Maximum font-size in px.
+   */
+  constructor(target, min, max) {
+    this.mirror = null;
+    this.observer = null;
+    this.frame = 0;
+    this.onFit = null;
+    this.destroyed = false;
+    // Last container width fitted against. Used to ignore ResizeObserver
+    // notifications caused purely by height changes (a fit grows the line
+    // height, which would otherwise re-trigger the observer in a loop).
+    this.lastWidth = -1;
+    this.target = target;
+    this.min = min;
+    this.max = max;
+  }
+  /**
+   * Starts observing the target's container and reports the fitted size via
+   * `onFit` whenever it should change. Re-fits once fonts have loaded.
+   */
+  start(onFit) {
+    this.onFit = onFit;
+    if (typeof ResizeObserver !== "undefined") {
+      const container = this.target.parentElement ?? this.target;
+      this.observer = new ResizeObserver(() => {
+        if (container.clientWidth !== this.lastWidth) this.schedule();
+      });
+      this.observer.observe(container);
+    }
+    const fonts = document.fonts;
+    if (fonts?.ready) {
+      fonts.ready.then(() => this.schedule()).catch(() => {
+      });
+    }
+    this.schedule();
+  }
+  /** Requests a fit on the next animation frame, coalescing rapid calls. */
+  schedule() {
+    if (this.destroyed) return;
+    if (typeof requestAnimationFrame === "undefined") {
+      this.fit();
+      return;
+    }
+    if (this.frame) return;
+    this.frame = requestAnimationFrame(() => {
+      this.frame = 0;
+      this.fit();
+    });
+  }
+  /** Measures the text and reports the fitted size. */
+  fit() {
+    if (this.destroyed || !this.onFit) return;
+    const container = this.target.parentElement ?? this.target;
+    const width = container.clientWidth;
+    if (width <= 0) return;
+    const mirror = this.ensureMirror();
+    const computed = getComputedStyle(this.target);
+    for (const prop of MIRROR_PROPS) {
+      mirror.style[prop] = computed[prop];
+    }
+    mirror.style.fontSize = `${REFERENCE_SIZE}px`;
+    mirror.textContent = this.target.textContent ?? "";
+    const measured = mirror.getBoundingClientRect().width;
+    if (measured <= 0) return;
+    this.lastWidth = width;
+    const size = clamp(REFERENCE_SIZE * width / measured, this.min, this.max);
+    this.onFit(Math.round(size * 100) / 100);
+  }
+  /** Lazily creates the shared offscreen measurement mirror. */
+  ensureMirror() {
+    if (this.mirror) return this.mirror;
+    const mirror = document.createElement("span");
+    mirror.setAttribute("aria-hidden", "true");
+    Object.assign(mirror.style, {
+      position: "absolute",
+      left: "-9999px",
+      top: "0",
+      visibility: "hidden",
+      whiteSpace: "nowrap",
+      pointerEvents: "none"
+    });
+    document.body.appendChild(mirror);
+    this.mirror = mirror;
+    return mirror;
+  }
+  /** Stops observing and removes the mirror. */
+  destroy() {
+    this.destroyed = true;
+    if (this.frame) cancelAnimationFrame(this.frame);
+    this.observer?.disconnect();
+    this.observer = null;
+    this.mirror?.remove();
+    this.mirror = null;
+    this.onFit = null;
+  }
+};
+
+// src/core/opentype.ts
+var FEATURES = [
+  // Ligatures
+  { tag: "liga", label: "Standard Ligatures", group: "Ligatures" },
+  { tag: "dlig", label: "Discretionary Ligatures", group: "Ligatures" },
+  { tag: "hlig", label: "Historical Ligatures", group: "Ligatures" },
+  { tag: "clig", label: "Contextual Ligatures", group: "Ligatures" },
+  // Letter Case
+  { tag: "smcp", label: "Small Capitals", group: "Letter Case" },
+  { tag: "c2sc", label: "Capitals to Small Capitals", group: "Letter Case" },
+  { tag: "case", label: "Case-Sensitive Forms", group: "Letter Case" },
+  { tag: "cpsp", label: "Capital Spacing", group: "Letter Case" },
+  // Figures
+  { tag: "lnum", label: "Lining Figures", group: "Figures" },
+  { tag: "onum", label: "Oldstyle Figures", group: "Figures" },
+  { tag: "pnum", label: "Proportional Figures", group: "Figures" },
+  { tag: "tnum", label: "Tabular Figures", group: "Figures" },
+  { tag: "zero", label: "Slashed Zero", group: "Figures" },
+  { tag: "ordn", label: "Ordinals", group: "Figures" },
+  // Fractions
+  { tag: "frac", label: "Fractions", group: "Fractions" },
+  { tag: "afrc", label: "Alternative Fractions", group: "Fractions" },
+  // Alternates
+  { tag: "swsh", label: "Swash", group: "Alternates" },
+  { tag: "calt", label: "Contextual Alternates", group: "Alternates" },
+  { tag: "salt", label: "Stylistic Alternates", group: "Alternates" },
+  { tag: "hist", label: "Historical Forms", group: "Alternates" },
+  { tag: "nalt", label: "Alternate Annotation Forms", group: "Alternates" },
+  // Position
+  { tag: "sups", label: "Superscript", group: "Position" },
+  { tag: "subs", label: "Subscript", group: "Position" },
+  // Stylistic Sets ss01–ss20
+  ...Array.from({ length: 20 }, (_, i) => {
+    const n = i + 1;
+    const tag = `ss${String(n).padStart(2, "0")}`;
+    return { tag, label: `Stylistic Set ${n}`, group: "Stylistic Sets" };
+  })
+];
+var FEATURE_BY_TAG = new Map(
+  FEATURES.map((f) => [f.tag, f])
+);
+function featureLabel(tag) {
+  return FEATURE_BY_TAG.get(tag)?.label ?? tag.toUpperCase();
+}
+function isKnownFeature(tag) {
+  return FEATURE_BY_TAG.has(tag);
+}
+function featureSettings(active) {
+  const tags = Array.from(active).filter(isKnownFeature);
+  if (tags.length === 0) return "normal";
+  return tags.map((tag) => `"${tag}" 1`).join(", ");
+}
+
+// src/core/typeTester.ts
+var DEFAULT_RANGES = {
+  size: { min: 8, max: 300, step: 1 },
+  tracking: { min: -0.1, max: 0.5, step: 5e-3 },
+  weight: { min: 100, max: 900, step: 100 }
+};
+var ALIGNS = ["left", "center", "right"];
+var idCounter = 0;
+function nextId() {
+  return ++idCounter;
+}
+function resolveRange(value, fallback) {
+  if (!value) return null;
+  if (value === true) return { ...fallback };
+  return { min: value.min, max: value.max, step: value.step ?? fallback.step };
+}
+var TypeTester = class {
+  /**
+   * @param host Element to render the tester into.
+   * @param options Configuration; all fields optional.
+   */
+  constructor(host, options = {}) {
+    this.activeFeatures = /* @__PURE__ */ new Set();
+    this.cleanups = [];
+    this.sizeOutput = null;
+    this.fitter = null;
+    this.host = host;
+    this.options = options;
+    this.controls = options.controls ?? {};
+    const fit = options.size === "fit";
+    for (const tag of options.features ?? []) {
+      if (isKnownFeature(tag)) this.activeFeatures.add(tag);
+    }
+    this.state = {
+      text: options.text ?? "",
+      size: fit ? 0 : toNumber(options.size, 80),
+      fit,
+      tracking: toNumber(options.tracking, 0),
+      weight: toNumber(options.weight, 400),
+      italic: options.italic ?? false,
+      align: options.align ?? "left",
+      wrap: options.wrap ?? true,
+      features: Array.from(this.activeFeatures)
+    };
+    this.render();
+  }
+  /** Returns a snapshot of the current state. */
+  getState() {
+    return { ...this.state, features: Array.from(this.activeFeatures) };
+  }
+  /** Removes all DOM, listeners and observers created by this instance. */
+  destroy() {
+    this.fitter?.destroy();
+    this.fitter = null;
+    for (const off of this.cleanups.splice(0)) off();
+    this.host.replaceChildren();
+  }
+  // ---- rendering -------------------------------------------------------
+  render() {
+    this.host.classList.add("tt");
+    this.textEl = el("div", {
+      class: "tt__text",
+      text: this.state.text,
+      attrs: {
+        role: "textbox",
+        "aria-label": this.options.ariaLabel ?? "Sample text",
+        "aria-multiline": String(this.state.wrap),
+        contenteditable: this.options.editable !== false ? "true" : null,
+        spellcheck: "true",
+        "data-placeholder": this.options.placeholder ?? "Type to test\u2026"
+      }
+    });
+    this.typeEl = el("div", { class: "tt__type", children: [this.textEl] });
+    const stage = el("div", { class: "tt__stage", children: [this.typeEl] });
+    this.liveEl = el("div", {
+      class: "tt__sr-only",
+      attrs: { "aria-live": "polite", "aria-atomic": "true" }
+    });
+    const controls = this.buildControls();
+    const children = [stage];
+    if (controls) children.push(controls);
+    children.push(this.liveEl);
+    this.host.replaceChildren(...children);
+    if (this.options.editable !== false) this.wireEditable();
+    this.applyStyles();
+    this.setupFit();
+  }
+  buildControls() {
+    const items = [];
+    const sizeRange = resolveRange(this.controls.size, DEFAULT_RANGES.size);
+    if (sizeRange && !this.state.fit) items.push(this.buildSize(sizeRange));
+    const trackingRange = resolveRange(this.controls.tracking, DEFAULT_RANGES.tracking);
+    if (trackingRange) items.push(this.buildTracking(trackingRange));
+    const weightRange = resolveRange(
+      this.controls.weight,
+      this.options.variable?.wght ?? DEFAULT_RANGES.weight
+    );
+    if (weightRange) items.push(this.buildWeight(weightRange));
+    if (this.controls.italic) items.push(this.buildItalic());
+    if (this.controls.align) items.push(this.buildAlign());
+    if (this.controls.wrap) items.push(this.buildWrap());
+    if (this.controls.features) items.push(this.buildFeatures());
+    if (items.length === 0) return null;
+    return el("div", {
+      class: "tt__controls",
+      attrs: { role: "group", "aria-label": "Typography controls" },
+      children: items
+    });
+  }
+  // ---- generic control builders (no per-control copy-paste) -------------
+  buildSlider(key, label, range, value, unit, onInput) {
+    const output = el("output", { class: "tt__value", text: `${value}${unit}` });
+    const input = el("input", {
+      class: `tt__slider tt__slider--${key}`,
+      attrs: {
+        type: "range",
+        min: range.min,
+        max: range.max,
+        step: range.step ?? 1,
+        value,
+        "aria-label": label
+      }
+    });
+    const handler = () => {
+      const v = Number(input.value);
+      output.textContent = `${v}${unit}`;
+      onInput(v);
+      this.announce(`${label} ${v}${unit}`);
+    };
+    input.addEventListener("input", handler);
+    this.cleanups.push(() => input.removeEventListener("input", handler));
+    if (key === "size") this.sizeOutput = output;
+    return el("label", {
+      class: `tt__control tt__control--${key}`,
+      children: [el("span", { class: "tt__label", text: label }), input, output]
+    });
+  }
+  buildSize(range) {
+    this.state.size = clamp(this.state.size, range.min, range.max);
+    return this.buildSlider("size", "Size", range, this.state.size, "px", (v) => {
+      this.state.size = v;
+      this.applyStyles();
+      this.emitChange();
+    });
+  }
+  buildTracking(range) {
+    this.state.tracking = clamp(this.state.tracking, range.min, range.max);
+    return this.buildSlider(
+      "tracking",
+      "Tracking",
+      range,
+      this.state.tracking,
+      "em",
+      (v) => {
+        this.state.tracking = v;
+        this.applyStyles();
+        this.emitChange();
+      }
+    );
+  }
+  buildWeight(range) {
+    this.state.weight = clamp(this.state.weight, range.min, range.max);
+    return this.buildSlider("weight", "Weight", range, this.state.weight, "", (v) => {
+      this.state.weight = v;
+      this.applyStyles();
+      this.emitChange();
+    });
+  }
+  buildToggle(key, label, pressed, onToggle) {
+    const button = el("button", {
+      class: `tt__toggle tt__toggle--${key}`,
+      text: label,
+      // aria-pressed is a string-valued ARIA state and must always be present
+      // ("false"), unlike boolean HTML attributes which are omitted when off.
+      attrs: { type: "button", "aria-pressed": String(pressed) }
+    });
+    const handler = () => {
+      const next = button.getAttribute("aria-pressed") !== "true";
+      button.setAttribute("aria-pressed", String(next));
+      onToggle(next);
+      this.announce(`${label} ${next ? "on" : "off"}`);
+    };
+    button.addEventListener("click", handler);
+    this.cleanups.push(() => button.removeEventListener("click", handler));
+    return button;
+  }
+  buildItalic() {
+    const button = this.buildToggle("italic", "Italic", this.state.italic, (on) => {
+      this.state.italic = on;
+      this.applyStyles();
+      this.emitChange();
+    });
+    return el("div", { class: "tt__control", children: [button] });
+  }
+  buildWrap() {
+    const button = this.buildToggle("wrap", "Wrap", this.state.wrap, (on) => {
+      this.state.wrap = on;
+      this.textEl.setAttribute("aria-multiline", String(on));
+      this.applyStyles();
+      this.emitChange();
+    });
+    return el("div", { class: "tt__control", children: [button] });
+  }
+  buildAlign() {
+    const select = el("select", {
+      class: "tt__select tt__select--align",
+      attrs: { "aria-label": "Alignment" },
+      children: ALIGNS.map(
+        (a) => el("option", {
+          text: a.charAt(0).toUpperCase() + a.slice(1),
+          attrs: { value: a, selected: a === this.state.align }
+        })
+      )
+    });
+    const handler = () => {
+      const value = select.value;
+      if (ALIGNS.includes(value)) {
+        this.state.align = value;
+        this.applyStyles();
+        this.emitChange();
+        this.announce(`Alignment ${value}`);
+      }
+    };
+    select.addEventListener("change", handler);
+    this.cleanups.push(() => select.removeEventListener("change", handler));
+    return el("label", {
+      class: "tt__control tt__control--align",
+      children: [el("span", { class: "tt__label", text: "Align" }), select]
+    });
+  }
+  buildFeatures() {
+    const offered = Array.isArray(this.controls.features) ? this.controls.features.filter(isKnownFeature).map((tag) => FEATURE_BY_TAG.get(tag) ?? { tag, label: featureLabel(tag), group: "Alternates" }) : FEATURES;
+    const panelId = `tt-feat-${nextId()}`;
+    const toggle = el("button", {
+      class: "tt__toggle tt__toggle--features",
+      text: "Features",
+      attrs: {
+        type: "button",
+        "aria-haspopup": "true",
+        "aria-expanded": "false",
+        "aria-controls": panelId
+      }
+    });
+    const checks = offered.map((f) => {
+      const input = el("input", {
+        attrs: { type: "checkbox", value: f.tag, checked: this.activeFeatures.has(f.tag) }
+      });
+      const onChange = () => this.toggleFeature(f.tag, input.checked);
+      input.addEventListener("change", onChange);
+      this.cleanups.push(() => input.removeEventListener("change", onChange));
+      return el("label", {
+        class: "tt__feature",
+        children: [input, el("span", { text: f.label })]
+      });
+    });
+    const panel = el("div", {
+      class: "tt__panel",
+      attrs: { id: panelId, role: "group", "aria-label": "OpenType features", hidden: true },
+      children: checks
+    });
+    const wrapper = el("div", {
+      class: "tt__control tt__control--features",
+      children: [toggle, panel]
+    });
+    const setOpen = (open) => {
+      toggle.setAttribute("aria-expanded", String(open));
+      panel.toggleAttribute("hidden", !open);
+      if (open) {
+        const first = panel.querySelector("input");
+        first?.focus();
+      }
+    };
+    const onToggleClick = () => setOpen(toggle.getAttribute("aria-expanded") !== "true");
+    const onKeydown = (e) => {
+      if (e.key === "Escape" && toggle.getAttribute("aria-expanded") === "true") {
+        setOpen(false);
+        toggle.focus();
+      }
+    };
+    const onOutside = (e) => {
+      if (toggle.getAttribute("aria-expanded") !== "true") return;
+      if (!wrapper.contains(e.target)) setOpen(false);
+    };
+    toggle.addEventListener("click", onToggleClick);
+    document.addEventListener("keydown", onKeydown);
+    document.addEventListener("click", onOutside);
+    this.cleanups.push(() => {
+      toggle.removeEventListener("click", onToggleClick);
+      document.removeEventListener("keydown", onKeydown);
+      document.removeEventListener("click", onOutside);
+    });
+    return wrapper;
+  }
+  toggleFeature(tag, on) {
+    if (on) this.activeFeatures.add(tag);
+    else this.activeFeatures.delete(tag);
+    this.state.features = Array.from(this.activeFeatures);
+    this.applyStyles();
+    this.emitChange();
+    this.announce(`${featureLabel(tag)} ${on ? "on" : "off"}`);
+  }
+  // ---- behaviour -------------------------------------------------------
+  wireEditable() {
+    const handler = () => {
+      this.state.text = this.textEl.textContent ?? "";
+      if (this.state.fit) this.fitter?.schedule();
+      this.emitChange();
+    };
+    this.textEl.addEventListener("input", handler);
+    this.cleanups.push(() => this.textEl.removeEventListener("input", handler));
+  }
+  setupFit() {
+    if (!this.state.fit) return;
+    const range = resolveRange(this.controls.size, DEFAULT_RANGES.size) ?? DEFAULT_RANGES.size;
+    this.fitter = new Fitter(this.textEl, range.min, range.max);
+    this.fitter.start((size) => {
+      this.state.size = size;
+      this.typeEl.style.fontSize = `${size}px`;
+      if (this.sizeOutput) this.sizeOutput.textContent = `${size}px`;
+    });
+  }
+  /** Applies the full typographic state to the type element via element.style. */
+  applyStyles() {
+    const s = this.typeEl.style;
+    const family = this.options.fontFamily ? `"${this.options.fontFamily}"${this.options.fallback ? `, ${this.options.fallback}` : ", sans-serif"}` : this.options.fallback ?? "sans-serif";
+    s.fontFamily = family;
+    if (!this.state.fit) s.fontSize = `${this.state.size}px`;
+    s.letterSpacing = `${this.state.tracking}em`;
+    s.fontStyle = this.state.italic ? "italic" : "normal";
+    s.textAlign = this.state.align;
+    this.textEl.style.whiteSpace = this.state.wrap ? "normal" : "nowrap";
+    if (this.options.variable?.wght) {
+      s.fontVariationSettings = `"wght" ${this.state.weight}`;
+    }
+    s.fontWeight = String(this.state.weight);
+    const settings = featureSettings(this.activeFeatures);
+    s.fontFeatureSettings = settings;
+    s.setProperty("-webkit-font-feature-settings", settings);
+  }
+  announce(message) {
+    this.liveEl.textContent = message;
+  }
+  emitChange() {
+    this.options.onChange?.(this.getState());
+  }
+};
+
+// src/index.ts
+function parseList(value) {
+  if (!value) return [];
+  return value.split(/[\s,]+/).map((s) => s.trim()).filter(Boolean);
+}
+function parseControls(value) {
+  const keys = parseList(value);
+  const config = {};
+  for (const key of keys) {
+    if (key === "size") config.size = true;
+    else if (key === "tracking") config.tracking = true;
+    else if (key === "weight") config.weight = true;
+    else if (key === "italic") config.italic = true;
+    else if (key === "align") config.align = true;
+    else if (key === "wrap") config.wrap = true;
+    else if (key === "features") config.features = true;
+  }
+  return config;
+}
+function optionsFromDataset(host) {
+  const d = host.dataset;
+  const sizeAttr = d.size;
+  let size;
+  if (sizeAttr === "fit") size = "fit";
+  else if (sizeAttr != null && sizeAttr !== "") size = Number(sizeAttr);
+  const align = d.align;
+  const features = parseList(d.features ?? null).filter(
+    (t) => isKnownFeature(t)
+  );
+  return {
+    text: d.text ?? host.textContent?.trim() ?? "",
+    fontFamily: d.font,
+    fallback: d.fallback,
+    size,
+    tracking: d.tracking != null ? Number(d.tracking) : void 0,
+    weight: d.weight != null ? Number(d.weight) : void 0,
+    italic: d.italic != null ? d.italic !== "false" : void 0,
+    align: align && ["left", "center", "right"].includes(align) ? align : void 0,
+    wrap: d.wrap != null ? d.wrap !== "false" : void 0,
+    features: features.length ? features : void 0,
+    editable: d.editable !== "false",
+    placeholder: d.placeholder,
+    ariaLabel: d.ariaLabel,
+    controls: parseControls(d.controls ?? null)
+  };
+}
+function createFromElement(host) {
+  return new TypeTester(host, optionsFromDataset(host));
+}
+function autoInit(root = document) {
+  const hosts = Array.from(
+    root.querySelectorAll("[data-type-tester]")
+  ).filter((host) => host.dataset.ttReady !== "true");
+  return hosts.map((host) => {
+    host.dataset.ttReady = "true";
+    return createFromElement(host);
+  });
+}
+
+exports.FEATURES = FEATURES;
+exports.FEATURE_BY_TAG = FEATURE_BY_TAG;
+exports.TypeTester = TypeTester;
+exports.autoInit = autoInit;
+exports.createFromElement = createFromElement;
+exports.featureLabel = featureLabel;
+exports.featureSettings = featureSettings;
+exports.isKnownFeature = isKnownFeature;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map