components/media/media-inspector.ts

Functions

Imports

It imports components/media/media-autosave.ts, components/media/media-record.ts, components/media/media-tile.ts. Imported by components/media/media.ts.

Source

1// The media inspector's fields: reading them, writing a record into them, the tags and the save status.
2// Plain functions of the inspector element; the controller in media.ts owns when they run.
3
4import { byteSize, copySnippets, parseTags, type MediaFields, type MediaRecord } from "./media-record.ts";
5import type { SaveState } from "./media-autosave.ts";
6import { glyph, part } from "./media-tile.ts";
7
8const SAVE_TEXT: Record<SaveState, string> = {
9  idle: "Changes save by themselves.",
10  dirty: "Unsaved changes",
11  saving: "Saving…",
12  saved: "Saved",
13  failed: "Could not save",
14};
15
16export function readFields(inspector: ParentNode | null): MediaFields {
17  const ins = <T extends HTMLElement = HTMLElement>(name: string) => (inspector ? part<T>(inspector, name) : null);
18  const decorative = ins<HTMLInputElement>("decorative")?.checked ?? false;
19  return {
20    alt: decorative ? "" : (ins<HTMLTextAreaElement>("alt")?.value ?? "").trim(),
21    decorative,
22    title: (ins<HTMLInputElement>("title-field")?.value ?? "").trim(),
23    caption: (ins<HTMLTextAreaElement>("caption")?.value ?? "").trim(),
24    tags: parseTags(ins<HTMLInputElement>("tags-value")?.value ?? ""),
25  };
26}
27
28export function renderSave(inspector: ParentNode | null, state: SaveState, error?: string): void {
29  const ins = <T extends HTMLElement = HTMLElement>(name: string) => (inspector ? part<T>(inspector, name) : null);
30  const wrap = ins("save");
31  const status = ins("save-status");
32  const alert = ins("save-error");
33  const retry = ins("retry-save");
34  const form = ins("form");
35  if (wrap) wrap.dataset.state = state;
36  if (form) {
37    if (state === "saving") form.setAttribute("aria-busy", "true");
38    else form.removeAttribute("aria-busy");
39  }
40  if (status) {
41    if (state === "failed") status.replaceChildren();
42    else {
43      const kids: Node[] = [];
44      if (state === "saving") kids.push(glyph("running"));
45      else if (state === "saved") kids.push(glyph("ok"));
46      else if (state === "dirty") kids.push(glyph("info"));
47      kids.push(document.createTextNode(SAVE_TEXT[state]));
48      status.replaceChildren(...kids);
49    }
50  }
51  if (alert) {
52    if (state === "failed") alert.replaceChildren(glyph("crit"), document.createTextNode(`Could not save${error ? `: ${error.replace(/\.$/, "")}` : ""}. What you typed is still here.`));
53    else alert.replaceChildren();
54  }
55  if (retry) retry.hidden = state !== "failed";
56}
57
58// Writes a record into the inspector's fields and lists. Idempotent: the server's own markup
59// for the first file is what this would write.
60export function fillInspector(inspector: ParentNode, r: MediaRecord, draft: MediaFields | undefined): void {
61  const ins = <T extends HTMLElement = HTMLElement>(name: string) => (inspector ? part<T>(inspector, name) : null);
62  const set = <T extends HTMLElement>(name: string, fn: (el: T) => void) => {
63    const el = ins<T>(name);
64    if (el) fn(el);
65  };
66  set("title", (el) => (el.textContent = r.name));
67  set("subtitle", (el) => (el.textContent = [r.type.split("/").pop()?.toUpperCase(), byteSize(r.bytes), r.width && r.height ? `${r.width} by ${r.height}` : ""].filter(Boolean).join(" · ")));
68  set<HTMLImageElement>("preview", (img) => {
69    const frame = img.closest<HTMLElement>(".cap-media-preview");
70    if (r.kind === "image" && r.thumb) {
71      img.hidden = false;
72      img.src = r.thumb;
73      frame?.querySelector(".cap-media-doc")?.remove();
74    } else {
75      img.hidden = true;
76      if (frame && !frame.querySelector(".cap-media-doc")) {
77        const doc = document.createElement("span");
78        doc.className = "cap-media-doc";
79        doc.setAttribute("aria-hidden", "true");
80        doc.textContent = (r.name.split(".").pop() ?? "file").slice(0, 5).toUpperCase();
81        frame.append(doc);
82      }
83    }
84  });
85  set<HTMLInputElement>("key", (el) => (el.value = r.key));
86  const values: MediaFields = draft ?? { alt: r.alt, decorative: r.altState === "decorative", title: r.title, caption: r.caption, tags: r.tags };
87  const alt = ins<HTMLTextAreaElement>("alt");
88  const deco = ins<HTMLInputElement>("decorative");
89  if (alt && deco) {
90    deco.checked = values.decorative;
91    alt.value = values.decorative ? "" : values.alt;
92    alt.disabled = values.decorative;
93    alt.dataset.prev = "";
94  }
95  const imageOnly = r.kind === "image";
96  for (const name of ["alt-field", "decorative-field"]) set(name, (el) => (el.hidden = !imageOnly));
97  set("alt-document", (el) => (el.hidden = imageOnly));
98  set<HTMLInputElement>("title-field", (el) => (el.value = values.title));
99  set<HTMLTextAreaElement>("caption", (el) => (el.value = values.caption));
100  renderTags(inspector, values.tags, r.suggestedTags ?? []);
101  set<HTMLInputElement>("address", (el) => (el.value = r.url));
102  for (const b of inspector.querySelectorAll<HTMLElement>("[data-cap-copy-kind]")) {
103    const snippet = copySnippets({ url: r.url, kind: r.kind, alt: values.alt, name: r.name }).find((s) => s.id === b.dataset.capCopyKind);
104    if (snippet) {
105      b.dataset.capCopy = snippet.value;
106      b.setAttribute("aria-label", snippet.name);
107      const label = b.querySelector<HTMLElement>("[data-cap-part='copy-label']");
108      if (label) label.textContent = snippet.label;
109    }
110  }
111  set("copied", (el) => el.replaceChildren());
112  set("facts", (dl) => {
113    const rows: Array<[string, string]> = [
114      ["Key", r.key],
115      ["Type", r.type || "unknown"],
116      ["Size", byteSize(r.bytes)],
117      ["Dimensions", r.width && r.height ? `${r.width} by ${r.height}` : "not measured"],
118      ["Uploaded", r.uploaded ?? "ships with the site"],
119    ];
120    dl.replaceChildren(
121      ...rows.flatMap(([k, v]) => {
122        const dt = document.createElement("dt");
123        dt.textContent = k;
124        const dd = document.createElement("dd");
125        dd.textContent = v;
126        return [dt, dd];
127      }),
128    );
129  });
130  set("used", (box) => {
131    box.replaceChildren();
132    if (r.used.length > 0) {
133      const ul = document.createElement("ul");
134      ul.className = "cap-media-used";
135      for (const u of r.used) {
136        const li = document.createElement("li");
137        const a = document.createElement("a");
138        a.href = u.href;
139        a.textContent = u.title;
140        li.append(a);
141        if (u.how) {
142          const how = document.createElement("span");
143          how.className = "cap-media-used-how";
144          how.textContent = u.how;
145          li.append(how);
146        }
147        ul.append(li);
148      }
149      box.append(ul);
150    } else {
151      const p = document.createElement("p");
152      p.className = "cap-media-used-empty";
153      p.textContent = "Not used anywhere.";
154      const note = document.createElement("p");
155      note.className = "cap-media-note";
156      note.append("No post cites this file. That is not proof it is unused: a page built in code can still use it, so check before you delete it. The Unattached filter lists every file like this. ");
157      const show = document.createElement("button");
158      show.type = "button";
159      show.className = "cap-btn";
160      show.dataset.variant = "link";
161      show.dataset.capPart = "show-unattached";
162      show.textContent = "Show unattached files";
163      note.append(show);
164      box.append(p, note);
165    }
166  });
167  const binned = r.state === "binned";
168  set("bin", (el) => (el.hidden = binned));
169  set("restore", (el) => (el.hidden = !binned));
170  renderSave(inspector, draft ? "failed" : "idle", draft ? "the last save did not go through" : undefined);
171}
172
173export function renderTags(inspector: ParentNode | null, tags: string[], suggested: string[]): void {
174  const ins = <T extends HTMLElement = HTMLElement>(name: string) => (inspector ? part<T>(inspector, name) : null);
175  const list = ins("tags");
176  const hidden = ins<HTMLInputElement>("tags-value");
177  if (hidden) hidden.value = tags.join(", ");
178  if (list) {
179    list.replaceChildren(
180      ...tags.map((t) => {
181        const li = document.createElement("li");
182        const b = document.createElement("button");
183        b.type = "button";
184        b.className = "cap-chip";
185        b.dataset.capTag = t;
186        b.setAttribute("aria-label", `Remove tag ${t}`);
187        b.append(t, " ");
188        const x = document.createElement("span");
189        x.setAttribute("aria-hidden", "true");
190        x.textContent = "×";
191        b.append(x);
192        li.append(b);
193        return li;
194      }),
195    );
196  }
197  const sug = ins("suggestions");
198  if (sug) {
199    sug.replaceChildren(
200      ...suggested
201        .filter((t) => !tags.includes(t))
202        .map((t) => {
203          const li = document.createElement("li");
204          const b = document.createElement("button");
205          b.type = "button";
206          b.className = "cap-chip";
207          b.dataset.capSuggest = t;
208          b.setAttribute("aria-label", `Add suggested tag ${t}`);
209          b.textContent = `+ ${t}`;
210          li.append(b);
211          return li;
212        }),
213    );
214  }
215}