holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix pasting in Firefox.

Browse Source 
Should not display button.
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText#browser_compatibility
This commit is contained in:
Marc-Andre Ferland 2022-11-17 01:44:11 -05:00
parent cc3186a683
commit 1364fd5c45
1 changed files with 55 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
ui/media/js/dnd.js
View File

@ -326,29 +326,32 @@ function parseTaskFromText(str) {
return task
}
async function readFile(file, i) {
const fileContent = (await file.text()).trim()
// JSON File.
if (fileContent.startsWith('{') && fileContent.endsWith('}')) {
async function parseContent(text) {
text = text.trim();
if (text.startsWith('{') && text.endsWith('}')) {
try {
const task = JSON.parse(fileContent)
const task = JSON.parse(text)
restoreTaskToUI(task)
} catch (e) {
console.warn(`file[${i}]:${file.name} - File couldn't be parsed.`, e)
console.warn(`JSON text content couldn't be parsed.`, e)
}
return
}
// Normal txt file.
const task = parseTaskFromText(fileContent)
const task = parseTaskFromText(text)
if (task) {
restoreTaskToUI(task)
} else {
console.warn(`file[${i}]:${file.name} - File couldn't be parsed.`)
console.warn(`Raw text content couldn't be parsed.`)
}
}
async function readFile(file, i) {
console.log(`Event %o reading file[${i}]:${file.name}...`, e)
const fileContent = (await file.text()).trim()
return await parseContent(fileContent)
}
function dropHandler(ev) {
console.log('Content dropped...')
let items = []
@ -395,35 +398,36 @@ const TASK_REQ_NO_EXPORT = [
"use_full_precision",
"save_to_disk_path"
]
const resetSettings = document.getElementById('reset-image-settings')
// Retrieve clipboard content and try to parse it
async function pasteFromClipboard() {
//const text = await navigator.clipboard.readText()
let text = await navigator.clipboard.readText();
text=text.trim();
if (text.startsWith('{') && text.endsWith('}')) {
try {
const task = JSON.parse(text)
restoreTaskToUI(task)
} catch (e) {
console.warn(`Clipboard JSON couldn't be parsed.`, e)
}
function checkReadTextClipboardPermission (result) {
if (result.state != "granted" && result.state != "prompt") {
return
}
// Normal txt file.
const task = parseTaskFromText(text)
if (task) {
restoreTaskToUI(task)
} else {
console.warn(`Clipboard content - File couldn't be parsed.`)
}
// PASTE ICON
const pasteIcon = document.createElement('i')
pasteIcon.className = 'fa-solid fa-paste section-button'
pasteIcon.innerHTML = `<span class="simple-tooltip right">Paste Image Settings</span>`
pasteIcon.addEventListener('click', async (event) => {
event.stopPropagation()
// Add css class 'active'
pasteIcon.classList.add('active')
// In 350 ms remove the 'active' class
asyncDelay(350).then(() => pasteIcon.classList.remove('active'))
// Retrieve clipboard content and try to parse it
const text = await navigator.clipboard.readText();
await parseContent(text)
})
resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)
}
navigator.permissions.query({ name: "clipboard-read" }).then(checkReadTextClipboardPermission, (reason) => console.log('clipboard-read is not available. %o', reason))
// Adds a copy and a paste icon if the browser grants permission to write to clipboard.
function checkWriteToClipboardPermission (result) {
if (result.state == "granted" || result.state == "prompt") {
const resetSettings = document.getElementById('reset-image-settings')
if (result.state != "granted" && result.state != "prompt") {
return
}
// COPY ICON
const copyIcon = document.createElement('i')
copyIcon.className = 'fa-solid fa-clipboard section-button'
@ -443,23 +447,7 @@ function checkWriteToClipboardPermission (result) {
navigator.clipboard.writeText(JSON.stringify(uiState, undefined, 4))
})
resetSettings.parentNode.insertBefore(copyIcon, resetSettings)
// PASTE ICON
const pasteIcon = document.createElement('i')
pasteIcon.className = 'fa-solid fa-paste section-button'
pasteIcon.innerHTML = `<span class="simple-tooltip right">Paste Image Settings</span>`
pasteIcon.addEventListener('click', (event) => {
event.stopPropagation()
// Add css class 'active'
pasteIcon.classList.add('active')
// In 350 ms remove the 'active' class
asyncDelay(350).then(() => pasteIcon.classList.remove('active'))
pasteFromClipboard()
})
resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)
}
}
// Determine which access we have to the clipboard. Clipboard access is only available on localhost or via TLS.
navigator.permissions.query({ name: "clipboard-write" }).then(checkWriteToClipboardPermission, (e) => {
if (e instanceof TypeError && typeof navigator?.clipboard?.writeText === 'function') {