extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-08-08 23:44:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

add prettier for JS style

Browse Source
This commit is contained in:
Lucas Marcelli
2023-04-27 13:56:56 -04:00
parent dc43eb29e1
commit aad1afb70e
30 changed files with 13142 additions and 13604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
ui/media/js/image-modal.js
View File

@ -11,56 +11,35 @@
* @type {(() => (string | ImageModalRequest) | string | ImageModalRequest) => {}}
*/
const imageModal = (function() {
const backElem = createElement(
'i',
undefined,
['fa-solid', 'fa-arrow-left', 'tertiaryButton'],
)
const backElem = createElement("i", undefined, ["fa-solid", "fa-arrow-left", "tertiaryButton"])
const forwardElem = createElement(
'i',
undefined,
['fa-solid', 'fa-arrow-right', 'tertiaryButton'],
)
const forwardElem = createElement("i", undefined, ["fa-solid", "fa-arrow-right", "tertiaryButton"])
const zoomElem = createElement(
'i',
undefined,
['fa-solid', 'tertiaryButton'],
)
const zoomElem = createElement("i", undefined, ["fa-solid", "tertiaryButton"])
const closeElem = createElement(
'i',
undefined,
['fa-solid', 'fa-xmark', 'tertiaryButton'],
)
const closeElem = createElement("i", undefined, ["fa-solid", "fa-xmark", "tertiaryButton"])
const menuBarElem = createElement('div', undefined, 'menu-bar', [backElem, forwardElem, zoomElem, closeElem])
const menuBarElem = createElement("div", undefined, "menu-bar", [backElem, forwardElem, zoomElem, closeElem])
const imageContainer = createElement('div', undefined, 'image-wrapper')
const imageContainer = createElement("div", undefined, "image-wrapper")
const backdrop = createElement('div', undefined, 'backdrop')
const backdrop = createElement("div", undefined, "backdrop")
const modalContainer = createElement('div', undefined, 'content', [menuBarElem, imageContainer])
const modalContainer = createElement("div", undefined, "content", [menuBarElem, imageContainer])
const modalElem = createElement(
'div',
{ id: 'viewFullSizeImgModal' },
['popup'],
[backdrop, modalContainer],
)
const modalElem = createElement("div", { id: "viewFullSizeImgModal" }, ["popup"], [backdrop, modalContainer])
document.body.appendChild(modalElem)
const setZoomLevel = (value) => {
const img = imageContainer.querySelector('img')
const img = imageContainer.querySelector("img")
if (value) {
zoomElem.classList.remove('fa-magnifying-glass-plus')
zoomElem.classList.add('fa-magnifying-glass-minus')
zoomElem.classList.remove("fa-magnifying-glass-plus")
zoomElem.classList.add("fa-magnifying-glass-minus")
if (img) {
img.classList.remove('natural-zoom')
img.classList.remove("natural-zoom")
let zoomLevel = typeof value === 'number' ? value : img.dataset.zoomLevel
let zoomLevel = typeof value === "number" ? value : img.dataset.zoomLevel
if (!zoomLevel) {
zoomLevel = 100
}
@ -70,36 +49,35 @@ const imageModal = (function() {
img.height = img.naturalHeight * (+zoomLevel / 100)
}
} else {
zoomElem.classList.remove('fa-magnifying-glass-minus')
zoomElem.classList.add('fa-magnifying-glass-plus')
zoomElem.classList.remove("fa-magnifying-glass-minus")
zoomElem.classList.add("fa-magnifying-glass-plus")
if (img) {
img.classList.add('natural-zoom')
img.removeAttribute('width')
img.removeAttribute('height')
img.classList.add("natural-zoom")
img.removeAttribute("width")
img.removeAttribute("height")
}
}
}
zoomElem.addEventListener(
'click',
() => setZoomLevel(imageContainer.querySelector('img')?.classList?.contains('natural-zoom')),
zoomElem.addEventListener("click", () =>
setZoomLevel(imageContainer.querySelector("img")?.classList?.contains("natural-zoom"))
)
const state = {
previous: undefined,
next: undefined,
next: undefined
}
const clear = () => {
imageContainer.innerHTML = ''
imageContainer.innerHTML = ""
Object.keys(state).forEach(key => delete state[key])
Object.keys(state).forEach((key) => delete state[key])
}
const close = () => {
clear()
modalElem.classList.remove('active')
document.body.style.overflow = 'initial'
modalElem.classList.remove("active")
document.body.style.overflow = "initial"
}
/**
@ -113,27 +91,27 @@ const imageModal = (function() {
clear()
const options = typeof optionsFactory === 'function' ? optionsFactory() : optionsFactory
const src = typeof options === 'string' ? options : options.src
const options = typeof optionsFactory === "function" ? optionsFactory() : optionsFactory
const src = typeof options === "string" ? options : options.src
const imgElem = createElement('img', { src }, 'natural-zoom')
const imgElem = createElement("img", { src }, "natural-zoom")
imageContainer.appendChild(imgElem)
modalElem.classList.add('active')
document.body.style.overflow = 'hidden'
modalElem.classList.add("active")
document.body.style.overflow = "hidden"
setZoomLevel(false)
if (typeof options === 'object' && options.previous) {
if (typeof options === "object" && options.previous) {
state.previous = options.previous
backElem.style.display = 'unset'
backElem.style.display = "unset"
} else {
backElem.style.display = 'none'
backElem.style.display = "none"
}
if (typeof options === 'object' && options.next) {
if (typeof options === "object" && options.next) {
state.next = options.next
forwardElem.style.display = 'unset'
forwardElem.style.display = "unset"
} else {
forwardElem.style.display = 'none'
forwardElem.style.display = "none"
}
}
@ -141,7 +119,7 @@ const imageModal = (function() {
if (state.previous) {
init(state.previous)
} else {
backElem.style.display = 'none'
backElem.style.display = "none"
}
}
@ -149,27 +127,27 @@ const imageModal = (function() {
if (state.next) {
init(state.next)
} else {
forwardElem.style.display = 'none'
forwardElem.style.display = "none"
}
}
window.addEventListener('keydown', (e) => {
if (modalElem.classList.contains('active')) {
window.addEventListener("keydown", (e) => {
if (modalElem.classList.contains("active")) {
switch (e.key) {
case 'Escape':
case "Escape":
close()
break
case 'ArrowLeft':
case "ArrowLeft":
back()
break
case 'ArrowRight':
case "ArrowRight":
forward()
break
}
}
})
window.addEventListener('click', (e) => {
if (modalElem.classList.contains('active')) {
window.addEventListener("click", (e) => {
if (modalElem.classList.contains("active")) {
if (e.target === backdrop || e.target === closeElem) {
close()
}
@ -180,9 +158,9 @@ const imageModal = (function() {
}
})
backElem.addEventListener('click', back)
backElem.addEventListener("click", back)
forwardElem.addEventListener('click', forward)
forwardElem.addEventListener("click", forward)
/**
* @param {() => (string | ImageModalRequest) | string | ImageModalRequest} optionsFactory