feat: add ShareDialogChooser and OpenArtShareDialog basic UI

2023-11-16 16:14:10 +08:00
parent defe95c0e8
commit f07fddcdad
3 changed files with 324 additions and 4 deletions
--- a/js/comfyui-share-openart.js
+++ b/js/comfyui-share-openart.js
@@ -0,0 +1,124 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js"
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+
+const LOCAL_STORAGE_KEY = "openart_comfy_workflow_key";
+
+export class OpenArtShareDialog extends ComfyDialog {
+	static instance = null;
+
+	constructor() {
+		super();
+		this.element = $el("div.comfy-modal", {
+			parent: document.body, style: {
+				'overflow-y': "auto",
+			}
+		},
+			[$el("div.comfy-modal-content",
+				{},
+				[...this.createButtons()]),
+			]);
+		this.selectedOutputIndex = 0;
+	}
+	readKeyFromLocalStorage() {
+		return localStorage.getItem(LOCAL_STORAGE_KEY) || '';
+	}
+	saveKeyToLocalStorage(value) {
+		localStorage.setItem(LOCAL_STORAGE_KEY, value);
+	}
+	createButtons() {
+        const sectionStyle = {
+            marginBottom: '20px',
+            padding: '15px',
+            borderRadius: '8px',
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)'
+        };
+
+        const inputStyle = {
+			display: 'block',
+			minWidth: '500px',
+            width: '100%',
+            padding: '10px',
+            margin: '10px 0',
+            borderRadius: '4px',
+            border: '1px solid #ddd',
+            boxSizing: 'border-box'
+        };
+
+		const headerLabelStyle = {
+			color: "#f8f8f8",
+			display: 'block',
+			marginBottom: '15px',
+			fontWeight: 'bold',
+			textDecoration: 'none',
+			fontSize: '20px',
+		};
+
+        const labelStyle = {
+			color: "#f8f8f8",
+            display: 'block',
+            marginBottom: '5px',
+            fontWeight: 'bold',
+			textDecoration: 'none',
+        };
+
+        const buttonStyle = {
+            padding: '10px 80px',
+            margin: '10px 5px',
+            borderRadius: '4px',
+            border: 'none',
+            cursor: 'pointer',
+            color: '#fff',
+            backgroundColor: '#007bff'
+        };
+		
+		this.keyInput = $el("input", { type: 'text', placeholder: "Share Your key", style: inputStyle })
+		// Account Section
+		const AccountSection = $el("div", { style: sectionStyle }, [
+			$el("a", { style: headerLabelStyle, href: "https://openart.ai/workflows" }, ["Check out 1000+ workflows others have uploaded."]),
+			$el("a", { style: headerLabelStyle, href: "https://openart.ai/workflows" }, ["You can get OpenArt key at https://openart.ai/"]),
+			$el("label", { style: labelStyle }, ["OpenArt API Key"]),
+			this.keyInput,
+		]);
+
+		// Additional Inputs Section
+		const additionalInputsSection = $el("div", { style: sectionStyle }, [
+			$el("label", { style: labelStyle }, ["Details"]),
+			$el("input", { type: "text", placeholder: "Title (required)", style: inputStyle }),
+			$el("textarea", { placeholder: "Description (optional)", style: {
+				...inputStyle,
+				minHeight: '100px',
+	 		} }),
+		]);
+
+		// Share and Close Buttons
+		const buttonsSection = $el("div", { style: { textAlign: 'right', marginTop: '20px', display: 'flex', justifyContent: 'space-between' } }, [
+			$el("button", { type: "button", textContent: "Close", style: {
+				...buttonStyle,
+				backgroundColor: undefined
+			}, onclick: () => { this.close(); } }),
+			$el("button", { type: "submit", textContent: "Share", style: buttonStyle, onclick: () => { this.share(); } }),
+		]);
+
+		// Final Message Section
+		const finalMessage = $el("div", { style: { color: "white", textAlign: "center", padding: "10px" } }, []);
+		// Composing the full layout
+		const layout = [
+			AccountSection,
+			additionalInputsSection,
+			buttonsSection,
+			finalMessage,
+		];
+
+		return layout;
+    }
+	async share() {
+		this.saveKeyToLocalStorage(this.keyInput.value);
+	}
+	show({ potential_outputs, potential_output_nodes }) {
+		this.element.style.display = "block";
+		// read key from local storage and set it to the input
+		const key = this.readKeyFromLocalStorage();
+		this.keyInput.value = key;
+	}
+}