Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-19 01:04:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3454 from ZeldaMaster501/dev

Browse Source 
UI Tweak
This commit is contained in:
Vladimir Mandic
2024-09-25 18:04:43 -04:00
committed by GitHub
parent c00bcde33a fb3b7fae99
commit 3198a19899
1 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/imageViewer.js
+23 -5
View File
@@ -159,6 +159,16 @@ function modalResetInstance(event) {
previewInstance = panzoom(modalImage, { zoomSpeed: 0.05, minZoom: 0.1, maxZoom: 5.0, filterKey: (/* e, dx, dy, dz */) => true });
}
function modalToggleParams(event) {
const modalExif = gradioApp().getElementById('modalExif');
if (modalExif.style.display === 'none' || modalExif.style.display === '') {
modalExif.style.display = 'block';
} else {
modalExif.style.display = 'none';
}
event.stopPropagation();
}
function galleryClickEventHandler(event) {
if (event.button !== 0) return;
if (event.target.nodeName === 'IMG' && !event.target.parentNode.classList.contains('thumbnail-item')) {
@@ -235,10 +245,17 @@ async function initImageViewer() {
modalClose.title = 'Close';
modalClose.addEventListener('click', (evt) => closeModal(evt, true), true);
// exif
const modalExif = document.createElement('div');
modalExif.id = 'modalExif';
modalExif.style = 'position: absolute; bottom: 0px; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: var(--neutral-300); padding: 1em; font-size: small; line-height: 1.2em; z-index: 1';
const modalToggleParamsBtn = document.createElement('span');
modalToggleParamsBtn.id = 'modal_toggle_params';
modalToggleParamsBtn.className = 'cursor';
modalToggleParamsBtn.innerHTML = '\uf05a';
modalToggleParamsBtn.title = 'Toggle Parameters';
modalToggleParamsBtn.addEventListener('click', modalToggleParams, true);
// exif
const modalExif = document.createElement('div');
modalExif.id = 'modalExif';
modalExif.style = 'position: absolute; bottom: 0px; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: var(--neutral-300); padding: 1em; font-size: small; line-height: 1.2em; z-index: 1; display: none;';
// handlers
modalPreviewZone.addEventListener('mousedown', () => { previewDrag = false; });
@@ -269,13 +286,14 @@ async function initImageViewer() {
modal.appendChild(modalPreviewZone);
modal.appendChild(modalNext);
modal.append(modalControls);
modal.append(modalExif);
modalControls.appendChild(modalZoom);
modalControls.appendChild(modalReset);
modalControls.appendChild(modalTile);
modalControls.appendChild(modalSave);
modalControls.appendChild(modalDownload);
modalControls.appendChild(modalToggleParamsBtn);
modalControls.appendChild(modalClose);
modal.append(modalExif);
gradioApp().appendChild(modal);
log('initImageViewer');