From ab7d74d2fa4597487816901543bf2d1d83cb4794 Mon Sep 17 00:00:00 2001
From: Olivia Godone-Maresca <oliviagodonemaresca+github@gmail.com>
Date: Tue, 14 Mar 2023 21:43:49 -0400
Subject: [PATCH] Add a image modal function

---
 ui/index.html                    |   2 +
 ui/media/css/image-modal.css     |  84 ++++++++++++++++++++++++++
 ui/media/js/image-modal.js       | 100 +++++++++++++++++++++++++++++++
 ui/media/js/main.js              |  31 ++++++++++
 ui/media/js/searchable-models.js |  62 ++++++++-----------
 5 files changed, 243 insertions(+), 36 deletions(-)
 create mode 100644 ui/media/css/image-modal.css
 create mode 100644 ui/media/js/image-modal.js

diff --git a/ui/index.html b/ui/index.html
index 45233174..c7b1b59c 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -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()
diff --git a/ui/media/css/image-modal.css b/ui/media/css/image-modal.css
new file mode 100644
index 00000000..748e3301
--- /dev/null
+++ b/ui/media/css/image-modal.css
@@ -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;
+}
diff --git a/ui/media/js/image-modal.js b/ui/media/js/image-modal.js
new file mode 100644
index 00000000..498c5f24
--- /dev/null
+++ b/ui/media/js/image-modal.js
@@ -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)
+    }
+})()
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 59d474f8..1e3442c8 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -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
+}
diff --git a/ui/media/js/searchable-models.js b/ui/media/js/searchable-models.js
index 9d80b0b1..4f311a76 100644
--- a/ui/media/js/searchable-models.js
+++ b/ui/media/js/searchable-models.js
@@ -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'],