From 703d5b6f5d474d5b68cb333c7184d52d5e23f62a Mon Sep 17 00:00:00 2001 From: moonshinegloss <118488816+moonshinegloss@users.noreply.github.com> Date: Fri, 17 Feb 2023 15:43:34 +0100 Subject: [PATCH] update v3.1 - fix new discord layout (closes #8) - fix incorrect splits of metadata (closes #9) - added modal to replace the old popout, while keeping the original reveal prompt button (hence still not addressing #5 fully, but implementing the idea of civitai inside) - make metadata automatically take more space if above 30 characters (useful for e.g. positive and negative prompts) --- discord-prompt.user.js | 142 ++++++++++++++++++++++++++++++++--------- 1 file changed, 113 insertions(+), 29 deletions(-) diff --git a/discord-prompt.user.js b/discord-prompt.user.js index 006de8e..d4ba67c 100644 --- a/discord-prompt.user.js +++ b/discord-prompt.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name png metadata discord // @author moonshine -// @version 3.0 +// @version 3.1 // @updateURL https://raw.githubusercontent.com/moonshinegloss/stable-diffusion-discord-prompts/main/discord-prompt.user.js // @match https://discord.com/channels/* // @icon https://www.google.com/s2/favicons?sz=64&domain=discord.com @@ -65,16 +65,22 @@ async function addRevealPrompt(chunks,node) { // style the image preview, while preserving discord click events for spoilers/lightbox node.classList.add("prompt-preview"); - const tag = (name,value) => `
${sanitize(name)}${sanitize(value)}
` + const tag = (name,value) => { + const sanitizedValue = sanitize(value); + return `
${sanitize(name)}${((sanitizedValue.length > 30) ? `

${sanitizedValue}

` : `${sanitizedValue}`)}
`; + } + let tags_html = tag("Prompt",params) if (params.includes("Steps:")) { let parameters = params .split("Steps:")[1] - .split(",") + .split(/, +(?=(?:(?:[^"]*"){2})*[^"]*$)/) .map((x, i) => { - const ret = x.split(":").map((y) => y.trim()); - return i == 0 ? ["Steps", ...ret] : ret; + const colonIndex = x.indexOf(":"); + return i == 0 + ? ["Steps", x.slice(colonIndex + 1)] + : [x.slice(0, colonIndex), x.slice(colonIndex + 1)]; }); // add negative prompt first so it'll be second if present @@ -108,20 +114,53 @@ async function addRevealPrompt(chunks,node) { container_selector.style.flexDirection = "column"; const revealPrompt = document.createElement("div"); - revealPrompt.innerHTML = ` -
- Reveal Prompt -
${tags_html}
-
- `; + const uniqueID = (Math.random() + 1).toString(36).substring(2); + + const promptBTN = document.createElement("div"); + promptBTN.classList.add("promptBTN"); + promptBTN.innerHTML = "Reveal Prompt" + revealPrompt.appendChild(promptBTN); + + const promptTXT = document.createElement("div"); + promptTXT.classList.add("promptTXT"); + promptTXT.id = `reveal-prompt-${uniqueID}`; + promptTXT.innerHTML = tags_html; + revealPrompt.appendChild(promptTXT); container_selector.prepend(revealPrompt); + promptBTN.onmousedown = () => + showDialog(`#reveal-prompt-${uniqueID}`); } }catch(err){ console.log(err) } } +function showDialog(selector) { + let promptDialog = document.querySelector("prompt-reveal-dialog"); + + if (promptDialog == null) { + promptDialog = document.createElement("dialog"); + promptDialog.id = "prompt-reveal-dialog"; + promptDialog.classList.add("prompt-reveal-dialog"); + + const dialogContainer = document.createElement("div"); + dialogContainer.id = "prompt-reveal-dialog-container" + promptDialog.appendChild(dialogContainer); + + document.body.appendChild(promptDialog); + } + + promptDialog.querySelector("div").innerHTML = document.querySelector(selector).innerHTML; + promptDialog.addEventListener("click", function (e) { + if (!e.target.closest("#prompt-reveal-dialog-container")) { + e.target.close(); + } + }); + + promptDialog.showModal(); +} + async function processURL(url,node) { return new Promise(async (finish) => { const chunks = await new Promise(function(resolve){ @@ -218,18 +257,30 @@ async function hook() { (async function() { 'use strict'; - const borderColor = "rgba(88, 101, 242, 0.35)"; - const loadingColor = "rgba(255,255,0,0.35)"; GM_addStyle(` - /* thanks to archon */ - details[open] + div{ - border-top: 0 !important; - border-top-right-radius: 0 !important; + :root { + --borderColor: rgba(88, 101, 242, 0.35); + --loadingColor: rgba(255,255,0,0.35); + } + + .promptTXT:target { + display: block; } .promptTXT { - border: 3px solid ${borderColor}; - padding: 20px; + border: 3px solid var(--borderColor); + display: none; + border-radius: 15px; + background: #2b2d31; + position: absolute; + color: white; + left: 50%; + transform: translateX(-50%); + border-radius: 10px; + } + + .promptTXT p { + padding: 0 20px; } .parametersTXT, .promptTXT { @@ -238,49 +289,82 @@ async function hook() { } .prompt-preview-processing { - border: 3px solid ${loadingColor}; + border: 3px solid var(--loadingColor); border-radius:7px; } .promptBTN { cursor: pointer; list-style: none; - background:${borderColor}; + background:var(--borderColor); border-top-left-radius: 5px; border-top-right-radius: 5px; padding:5px; margin-top:.25rem; + color: white; } .prompt-preview { - border: 3px solid ${borderColor}; + border: 3px solid var(--borderColor); border-radius:7px; border-top-left-radius:0; } + #prompt-reveal-dialog { + background: #313338; + color: white; + border: 3px solid var(--borderColor); + border-radius: 10px; + padding: 0; + max-width: 500px; + } + + #prompt-reveal-dialog-container { + padding: 20px; + } + + #prompt-reveal-dialog::backdrop { + background-color: rgba(0,0,0,0.7); + } + .tag { margin-bottom: 8px; } .showParametersBTN { - background: ${borderColor}; + background: var(--borderColor); cursor: pointer; display: block; padding: 10px 30px; text-align: center; margin-top: 10px; - margin-left: -20px; - margin-right: -20px; + border-radius: 10px; + } + + .promptBTN a { + color: white; + } + + .closeBTN { + margin-top: -10px; } .tag span:first-of-type { - margin-left: -20px; - background: ${borderColor}; + background: var(--borderColor); padding: 5px; display: inline-block; margin-right: 10px; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; + border-radius: 5px; + } + + .promptTXT .tag:first-of-type { + margin-top: 8px; + } + + /* thanks to archon */ + details[open] + div{ + border-top: 0 !important; + border-top-right-radius: 0 !important; } `);