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

Add a image modal function

Browse Source
This commit is contained in:
Olivia Godone-Maresca 2023-03-14 21:43:49 -04:00
parent a0dc82e1f9
commit ab7d74d2fa
5 changed files with 243 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@ -15,6 +15,7 @@
<link rel="stylesheet" href="/media/css/fontawesome-all.min.css">
<link rel="stylesheet" href="/media/css/image-editor.css">
<link rel="stylesheet" href="/media/css/searchable-models.css">
<link rel="stylesheet" href="/media/css/image-modal.css">
<link rel="manifest" href="/media/manifest.webmanifest">
<script src="/media/js/jquery-3.6.1.min.js"></script>
<script src="/media/js/jquery-confirm.min.js"></script>
@ -460,6 +461,7 @@
<script src="media/js/themes.js"></script>
<script src="media/js/dnd.js"></script>
<script src="media/js/image-editor.js"></script>
<script src="media/js/image-modal.js"></script>
<script>
async function init() {
await initSettings()

84
ui/media/css/image-modal.css Normal file
View File

@ -0,0 +1,84 @@
#viewFullSizeImgModal {
--popup-padding: 24px;
position: sticky;
padding: var(--popup-padding);
pointer-events: none;
width: 100vw;
height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 1001;
}
#viewFullSizeImgModal > * {
pointer-events: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#viewFullSizeImgModal .backdrop {
max-width: unset;
width: 100%;
max-height: unset;
height: 100%;
inset: 0;
position: absolute;
top: 0;
left: 0;
z-index: 1001;
opacity: .5;
border: none;
box-shadow: none;
overflow: hidden;
}
#viewFullSizeImgModal .content {
min-height: initial;
max-height: calc(100vh - (var(--popup-padding) * 2));
height: fit-content;
min-width: initial;
max-width: calc(100vw - (var(--popup-padding) * 2));
width: fit-content;
z-index: 1003;
overflow: visible;
}
#viewFullSizeImgModal .image-wrapper {
min-height: initial;
max-height: calc(100vh - (var(--popup-padding) * 2));
height: fit-content;
min-width: initial;
max-width: calc(100vw - (var(--popup-padding) * 2));
width: fit-content;
box-sizing: border-box;
pointer-events: auto;
margin: 0;
padding: 0;
overflow: auto;
}
#viewFullSizeImgModal img.natural-zoom {
max-width: calc(100vh - (var(--popup-padding) * 2) - 4px);
max-height: calc(100vh - (var(--popup-padding) * 2) - 4px);
}
#viewFullSizeImgModal .content > div::-webkit-scrollbar-track, #viewFullSizeImgModal .content > div::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, .5)
}
#viewFullSizeImgModal .menu-bar {
position: absolute;
top: 0;
right: 0;
padding-right: var(--scrollbar-width);
}
#viewFullSizeImgModal .menu-bar .tertiaryButton {
font-size: 1.5em;
margin: 12px 12px 0 0;
cursor: pointer;
}

100
ui/media/js/image-modal.js Normal file
View File

@ -0,0 +1,100 @@
"use strict"
const imageModal = (function() {
const zoomElem = createElement(
'i',
undefined,
['fa-solid', 'tertiaryButton'],
)
const closeElem = createElement(
'i',
undefined,
['fa-solid', 'fa-xmark', 'tertiaryButton'],
)
const menuBarElem = createElement('div', undefined, 'menu-bar', [zoomElem, closeElem])
const imageContainer = createElement('div', undefined, 'image-wrapper')
const backdrop = createElement('div', undefined, 'backdrop')
const modalContainer = createElement('div', undefined, 'content', [menuBarElem, imageContainer])
const modalElem = createElement(
'div',
{ id: 'viewFullSizeImgModal' },
['popup'],
[backdrop, modalContainer],
)
document.body.appendChild(modalElem)
const setZoomLevel = (value) => {
const img = imageContainer.querySelector('img')
if (value) {
zoomElem.classList.remove('fa-magnifying-glass-plus')
zoomElem.classList.add('fa-magnifying-glass-minus')
if (img) {
img.classList.remove('natural-zoom')
let zoomLevel = typeof value === 'number' ? value : img.dataset.zoomLevel
if (!zoomLevel) {
zoomLevel = 100
}
img.dataset.zoomLevel = zoomLevel
img.width = img.naturalWidth * (+zoomLevel / 100)
img.height = img.naturalHeight * (+zoomLevel / 100)
}
} else {
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')
}
}
}
zoomElem.addEventListener(
'click',
() => setZoomLevel(imageContainer.querySelector('img')?.classList?.contains('natural-zoom')),
)
const close = () => {
imageContainer.innerHTML = ''
modalElem.classList.remove('active')
document.body.style.overflow = 'initial'
}
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modalElem.classList.contains('active')) {
close()
}
})
window.addEventListener('click', (e) => {
if (modalElem.classList.contains('active')) {
if (e.target === backdrop || e.target === closeElem) {
close()
}
e.stopPropagation()
e.stopImmediatePropagation()
e.preventDefault()
}
})
return (optionsFactory) => {
const options = typeof optionsFactory === 'function' ? optionsFactory() : optionsFactory
const src = typeof options === 'string' ? options : options.src
// TODO center it if < window size
const imgElem = createElement('img', { src }, 'natural-zoom')
imageContainer.appendChild(imgElem)
modalElem.classList.add('active')
document.body.style.overflow = 'hidden'
setZoomLevel(false)
}
})()

31
ui/media/js/main.js
View File

@ -1551,3 +1551,34 @@ prettifyInputs(document);
// set the textbox as focused on start
promptField.focus()
promptField.selectionStart = promptField.value.length
/**
*
* @param {string} tag
* @param {object} attributes
* @param {string | Array<string>} classes
* @param {string | HTMLElement | Array<string | HTMLElement>}
* @returns {HTMLElement}
*/
function createElement(tagName, attributes, classes, textOrElements) {
const element = document.createElement(tagName)
if (attributes) {
Object.entries(attributes).forEach(([key, value]) => {
element.setAttribute(key, value)
});
}
if (classes) {
(Array.isArray(classes) ? classes : [classes]).forEach(className => element.classList.add(className))
}
if (textOrElements) {
const children = Array.isArray(textOrElements) ? textOrElements : [textOrElements]
children.forEach(textOrElem => {
if (textOrElem instanceof HTMLElement) {
element.appendChild(textOrElem)
} else {
element.appendChild(document.createTextNode(textOrElem))
}
})
}
return element
}

62
ui/media/js/searchable-models.js
View File

@ -481,7 +481,7 @@ class ModelDropdown
this.modelFilter.insertAdjacentElement('afterend', rootModelList)
this.modelFilter.insertAdjacentElement(
'afterend',
this.createElement(
createElement(
'i',
{ id: `${this.modelFilter.id}-model-filter-arrow` },
['model-selector-arrow', 'fa-solid', 'fa-angle-down'],
@ -518,34 +518,6 @@ class ModelDropdown
this.selectEntry(this.activeModel)
}
/**
*
* @param {string} tag
* @param {object} attributes
* @param {Array<string>} classes
* @returns {HTMLElement}
*/
createElement(tagName, attributes, classes, text, icon) {
const element = document.createElement(tagName)
if (attributes) {
Object.entries(attributes).forEach(([key, value]) => {
element.setAttribute(key, value)
})
}
if (classes) {
classes.forEach(className => element.classList.add(className))
}
if (icon) {
let iconEl = document.createElement('i')
iconEl.className = icon + ' icon'
element.appendChild(iconEl)
}
if (text) {
element.appendChild(document.createTextNode(text))
}
return element
}
/**
* @param {Array<string | object} modelTree
* @param {string} folderName
@ -553,7 +525,7 @@ class ModelDropdown
* @returns {HTMLElement}
*/
createModelNodeList(folderName, modelTree, isRootFolder) {
const listElement = this.createElement('ul')
const listElement = createElement('ul')
const foldersMap = new Map()
const modelsMap = new Map()
@ -578,7 +550,15 @@ class ModelDropdown
const fullPath = folderName ? `${folderName.substring(1)}/${model}` : model
modelsMap.set(
model,
this.createElement('li', { 'data-path': fullPath }, classes, model, 'fa-regular fa-file'),
createElement(
'li',
{ 'data-path': fullPath },
classes,
[
createElement('i', undefined, ['fa-regular', 'fa-file', 'icon']),
model,
],
),
)
}
})
@ -592,7 +572,17 @@ class ModelDropdown
const modelElements = modelNames.map(name => modelsMap.get(name))
if (modelElements.length && folderName) {
listElement.appendChild(this.createElement('li', undefined, ['model-folder'], folderName.substring(1), 'fa-solid fa-folder-open'))
listElement.appendChild(
createElement(
'li',
undefined,
['model-folder'],
[
createElement('i', undefined, ['fa-regular', 'fa-folder-open', 'icon']),
folderName.substring(1),
],
)
)
}
// const allModelElements = isRootFolder ? [...folderElements, ...modelElements] : [...modelElements, ...folderElements]
@ -606,13 +596,13 @@ class ModelDropdown
* @returns {HTMLElement}
*/
createRootModelList(modelTree) {
const rootList = this.createElement(
const rootList = createElement(
'ul',
{ id: `${this.modelFilter.id}-model-list` },
['model-list'],
)
rootList.appendChild(
this.createElement(
createElement(
'li',
{ id: `${this.modelFilter.id}-model-no-result` },
['model-no-result'],
@ -622,7 +612,7 @@ class ModelDropdown
if (this.noneEntry) {
rootList.appendChild(
this.createElement(
createElement(
'li',
{ 'data-path': '' },
['model-file', 'in-root-folder'],
@ -632,7 +622,7 @@ class ModelDropdown
}
if (modelTree.length > 0) {
const containerListItem = this.createElement(
const containerListItem = createElement(
'li',
{ id: `${this.modelFilter.id}-model-result` },
['model-result'],