Add pink media stage and sharing modal system

packages/ui-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodedc/ui-dom",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "files": ["dist"],
   "main": "./dist/index.js",
@@ -16,6 +16,6 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@nodedc/ui-core": "0.4.0"
+    "@nodedc/ui-core": "0.5.0"
   }
 }

packages/ui-dom/src/index.ts

@@ -4,3 +4,4 @@ export * from "./floating.js";
 export * from "./mediaSource.js";
 export * from "./modal.js";
 export * from "./select.js";
+export * from "./shareLink.js";

packages/ui-dom/src/shareLink.ts

@@ -0,0 +1,59 @@
+export interface ShareLinkControllerOptions {
+  input: HTMLInputElement;
+  copyControl: HTMLButtonElement;
+  copyLabel?: string;
+  copiedLabel?: string;
+  onCopy?: (link: string) => void | Promise<void>;
+  onError?: (error: unknown) => void;
+}
+
+export interface ShareLinkController {
+  getLink: () => string;
+  setLink: (link: string) => void;
+  copy: () => Promise<void>;
+  destroy: () => void;
+}
+
+export function createShareLinkController({
+  input,
+  copyControl,
+  copyLabel = "Скопировать",
+  copiedLabel = "Скопировано",
+  onCopy,
+  onError,
+}: ShareLinkControllerOptions): ShareLinkController {
+  input.readOnly = true;
+
+  const render = (copied = false) => {
+    copyControl.disabled = !input.value;
+    copyControl.dataset.copied = copied ? "true" : "false";
+    copyControl.textContent = copied ? copiedLabel : copyLabel;
+  };
+
+  const copy = async () => {
+    const link = input.value;
+    if (!link) return;
+    try {
+      if (onCopy) await onCopy(link);
+      else await navigator.clipboard.writeText(link);
+      render(true);
+    } catch (error) {
+      render(false);
+      onError?.(error);
+    }
+  };
+
+  const handleClick = () => void copy();
+  copyControl.addEventListener("click", handleClick);
+  render();
+
+  return {
+    getLink: () => input.value,
+    setLink: (link) => {
+      input.value = link;
+      render(false);
+    },
+    copy,
+    destroy: () => copyControl.removeEventListener("click", handleClick),
+  };
+}