Modern image gallery with highly efficient background zipping, video playback, browsing, fullscreen, and download features. Optimized, cleaned, and added Pawchive support.
// ==UserScript== // @name Ultra Galleries // @namespace https://sleazyfork.org/en/users/1477603-%E3%83%A1%E3%83%AA%E3%83%BC // @version 3.6.5 // @description Modern image gallery with highly efficient background zipping, video playback, browsing, fullscreen, and download features. Optimized, cleaned, and added Pawchive support. // @author ntf (original), Meri/TearTyr (maintained) // @match *://kemono.su/* // @match *://*.kemono.su/* // @match *://coomer.su/* // @match *://*.coomer.su/* // @match *://kemono.cr/* // @match *://*.kemono.cr/* // @match *://coomer.cr/* // @match *://*.coomer.cr/* // @match *://coomer.st/* // @match *://*.coomer.st/* // @match *://nekohouse.su/* // @match *://*.nekohouse.su/* // @match *://pawchive.st/* // @match *://*.pawchive.st/* // @match *://pawchive.pw/* // @match *://*.pawchive.pw/* // @icon https://pawchive.pw/static/menu/recent.svg // @connect * // @connect kemono.su // @connect coomer.su // @connect pawchive.pw // @grant GM_download // @grant GM.xmlHttpRequest // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @grant GM_getResourceText // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js // @require https://unpkg.com/[email protected]/dist/jszip.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js // @require https://cdn.jsdelivr.net/npm/sweetalert2@11 // @require https://unpkg.com/[email protected]/dist/dexie.min.js // @resource mainCSS https://raw.githubusercontent.com/TearTyr/Ultra-Galleries/refs/heads/TestingBranch/Ultra-Galleries.css // @noframes // ==/UserScript== (() => { 'use strict'; // ==================================================== // Core Configuration // ==================================================== const CONFIG = { MAX_CONCURRENT_FETCHES: 3, MAX_RETRIES: 5, RETRY_DELAY: 2000, MIN_SCALE: 0.05, MAX_SCALE: 5, ZOOM_STEP: 0.2, DEBOUNCE_DELAY: 250, PAN_RESISTANCE: 0.8, DOUBLE_TAP_THRESHOLD: 300, CACHE_EVICTION_COUNT: 20, PRELOAD_COUNT: 2, SCROLL_SIMULATION_BASE_TIMEOUT: 3000, SLIDESHOW_DELAY: 3000, CONTROLS_HIDE_DELAY: 3000, CONTEXT_MENU_HIDE_DELAY: 200, PRELOAD_WINDOW_BUFFER: 4, PROGRESS_NOTIFY_INTERVAL: 250 }; const BUTTONS = { DOWNLOAD: '【DOWNLOAD】', DOWNLOAD_ALL: '【DL ALL】', FULL: '【FULL】', HEIGHT: '【FILL HEIGHT】', WIDTH: '【FILL WIDTH】', GALLERY: '【GALLERY】', SETTINGS: '⚙️', FULLSCREEN: '⛶', CLOSE: '✕' }; const CSS = { BTN: 'ug-button', BTN_CONTAINER: 'ug-button-container', NOTIF_AREA: 'ug-notification-area', NOTIF_CONTAINER: 'ug-notification-container', NOTIF_TEXT: 'ug-notification-text', NOTIF_CLOSE: 'ug-notification-close', NOTIF_REPORT: 'ug-notification-report', SETTINGS_BTN: 'settings-button', LONG_PRESS: 'ug-long-press', GALLERY: { OVERLAY: 'ug-gallery-overlay', CONTAINER: 'ug-gallery-container', EXPANDED_VIEW: 'ug-gallery-expanded-view', HIDE: 'ug-gallery-hide', TOOLBAR: 'ug-gallery-toolbar', ZOOM_CONTAINER: 'ug-gallery-zoom-container', MAIN_IMG_CONTAINER: 'ug-main-image-container', MAIN_IMG: 'ug-main-image', MAIN_VIDEO: 'ug-main-video', THUMBNAIL: 'ug-thumbnail', THUMBNAIL_WRAPPER: 'ug-thumbnail-container', THUMBNAIL_STRIP: 'ug-thumbnail-strip', NAV: 'ug-gallery-nav', NAV_CONTAINER: 'ug-gallery-nav-container', PREV: 'ug-gallery-prev', NEXT: 'ug-gallery-next', COUNTER: 'ug-gallery-counter', FULLSCREEN: 'ug-gallery-fullscreen', FULLSCREEN_OVERLAY: 'ug-fullscreen-overlay', STRIP_CONTAINER: 'ug-gallery-thumbnail-strip-container', TOOLBAR_BTN: 'ug-toolbar-button', CONTROLS_HIDDEN: 'ug-controls-hidden', GRABBING: 'ug-grabbing', ZOOMED: 'zoomed', IS_TRANSITIONING: 'is-transitioning', IMAGE_ERROR_MSG: 'ug-image-error-message' } }; const isNekohouse = window.location.hostname.includes('nekohouse'); const SELECTORS = { IMAGE_LINK: isNekohouse ? 'a.image-link:not(.scrape__user-profile)' : 'a.fileThumb.image-link', GENERIC_IMAGE_LINK: 'a[href*=".jpg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"], a[href*=".jpeg"]', ATTACHMENT_LINK: isNekohouse ? '.scrape__attachment-link' : '.post__attachment-link', POST_TITLE: isNekohouse ? '.scrape__title' : '.post__title', POST_USER_NAME: isNekohouse ? '.scrape__user-name' : '.post__user-name', MAIN_THUMBNAIL: isNekohouse ? '.scrape__thumbnail:not(.scrape__thumbnail--attachment)' : '.post__thumbnail:not(.post__thumbnail--attachment)', POST_ACTIONS: isNekohouse ? '.scrape__actions' : '.post__actions', FILE_DIVS: isNekohouse ? '.scrape__thumbnail' : '.post__thumbnail', VIDEO_LINK: 'a.fileThumb[href$=".mp4"], a.fileThumb[href$=".webm"], a.fileThumb[href$=".mov"], a[href$=".mp4"], a[href$=".webm"], a[href$=".mov"]', VIDEO_THUMBNAIL: isNekohouse ? '.scrape__video-thumbnail' : '.post__video-thumbnail' }; // ==================================================== // Shared mutable references // Declared early so state callbacks never hit TDZ issues. // ==================================================== let db = null; let galleryOverlay = null; let loadedBlobUrls = new Map(); let elements = { galleryButton: null, settingsButton: null }; let lastFocusedElement = null; let focusTrapListener = null; let uiObserver = null; let lastProcessedUrl = null; // ==================================================== // High-Frequency View State // Decoupled from reactive Proxy for performance. // ==================================================== const viewState = { zoomScale: 1, imageOffset: { x: 0, y: 0 }, zoomOrigin: { x: 0, y: 0 }, initialScale: 1, pinchZoomActive: false, initialTouchDistance: 0, dragStartPosition: { x: 0, y: 0 }, dragStartOffset: { x: 0, y: 0 } }; // ==================================================== // Utility Functions // ==================================================== const Utils = { sanitizeFileName: name => String(name || '').replace(/[/\\:*?"<>|]/g, '-'), getPostDate: (type = 'published') => { let selector; if (type === 'edited') selector = '.post__edited, .scrape__edited'; else if (type === 'added' || type === 'imported') selector = '.post__added, .scrape__added'; else selector = '.post__published, .scrape__published, time[datetime]'; const timeEl = document.querySelector(selector); if (timeEl) { const dateStr = timeEl.getAttribute('datetime') || timeEl.textContent; if (dateStr) { const match = dateStr.match(/\d{4}-\d{2}-\d{2}(?:[ T]\d{2}:\d{2}(?::\d{2})?)?|\d{4}-\d{2}/); if (match && match[0]) { return Utils.sanitizeFileName(match[0].replace(/[ T]/g, '_').replace(/:/g, '-')); } return Utils.sanitizeFileName(dateStr.replace(/.*?:\s*/, '').trim()); } } return 'UnknownDate'; }, setImageStyle: (img, styles) => { if (!img) return; for (const key in styles) { const kebabKey = key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`); img.style.setProperty(kebabKey, styles[key], 'important'); } }, isPostPage: () => { const hasImages = document.querySelector(SELECTORS.IMAGE_LINK) || document.querySelector(SELECTORS.GENERIC_IMAGE_LINK) || document.querySelector('div.post__files'); if (hasImages) return true; const path = window.location.pathname; const patterns = [ /\/user\/.*\/post\//, /\/server\/.*\/channel\//, /\/post\// ]; return patterns.some(pattern => pattern.test(path)); }, delay: ms => new Promise(resolve => setTimeout(resolve, ms)), debounce: (func, wait) => { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; }, throttle: (func, limit) => { let lastRan; let lastFunc; return function (...args) { if (!lastRan) { func.apply(this, args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(() => { if ((Date.now() - lastRan) >= limit) { func.apply(this, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; }, handleMediaSrc: mediaLink => { let href = mediaLink.getAttribute('href') || mediaLink.querySelector('.fileThumb')?.getAttribute('href'); if (!href && mediaLink.href) href = mediaLink.href; if (href) { href = href.split('?')[0]; if (href.includes('/thumbnail/')) { href = href.replace(/\/thumbnail\//, '/data/'); } return href; } const directImg = mediaLink.querySelector('img'); if (directImg) { const rawSrc = directImg.getAttribute('data-src') || directImg.src; if (!rawSrc) return null; const imgSrc = rawSrc.split('?')[0]; if (imgSrc.includes('/data/')) return imgSrc; if (imgSrc.includes('/thumbnail/')) { return imgSrc.replace(/\/thumbnail\//, '/data/'); } return imgSrc; } return null; }, createTooltip: (text, duration = 3000) => { const tooltip = document.createElement('div'); tooltip.className = 'zoom-tooltip'; tooltip.textContent = text; setTimeout(() => { tooltip.style.opacity = '0'; setTimeout(() => tooltip.remove(), 500); }, duration); return tooltip; }, getDistance: (touch1, touch2) => Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY), getMidpoint: (touch1, touch2) => ({ x: (touch1.clientX + touch2.clientX) / 2, y: (touch1.clientY + touch2.clientY) / 2 }), ensureThumbnailsExist: () => { try { const videoLinks = document.querySelectorAll(SELECTORS.VIDEO_LINK); videoLinks.forEach(videoLink => { const videoThumb = videoLink.closest(SELECTORS.VIDEO_THUMBNAIL); if (!videoThumb) { const video = videoLink.querySelector('video'); if (video && video.hasAttribute('poster')) { const posterUrl = video.getAttribute('poster'); if (videoLink.parentNode) { const thumbnailContainer = document.createElement('div'); thumbnailContainer.className = isNekohouse ? 'scrape__video-thumbnail' : 'post__video-thumbnail'; const thumbnailImg = document.createElement('img'); thumbnailImg.src = posterUrl; thumbnailImg.className = isNekohouse ? 'scrape__thumbnail-img' : 'post__thumbnail-img'; thumbnailContainer.appendChild(thumbnailImg); videoLink.parentNode.insertBefore(thumbnailContainer, videoLink); } } } }); } catch (error) { console.warn('Minor error ensuring thumbnails:', error); } } }; // ==================================================== // Throttled load-progress notifier // ==================================================== const notifyLoadProgress = Utils.throttle((message, type = 'info') => { state.notificationType = type; state.notification = message; }, CONFIG.PROGRESS_NOTIFY_INTERVAL); // ==================================================== // Gallery Image Sizing Module // ==================================================== const ImageSizing = { applyBestFit: (el) => { if (!el) return; Utils.setImageStyle(el, { maxWidth: '100%', maxHeight: '100%', width: 'auto', height: 'auto', objectFit: 'contain', margin: '0' }); }, applyFillHeight: (el) => { if (!el) return; Utils.setImageStyle(el, { maxHeight: '90vh', maxWidth: '100%', width: 'auto', height: '90vh', objectFit: 'contain' }); }, applyFillWidth: (el) => { if (!el) return; Utils.setImageStyle(el, { maxHeight: 'none', maxWidth: '100vw', width: '100%', height: 'auto', objectFit: 'contain' }); }, applyFullSize: (el) => { if (!el) return; Utils.setImageStyle(el, { maxHeight: 'none', maxWidth: 'none', height: 'auto', width: 'auto', objectFit: 'none' }); } }; // ==================================================== // Zoom Boundary Helpers // ==================================================== const ZoomHelper = { calculateBoundaryOffsets: (offsetX, offsetY, scale, containerRect, imageDOM) => { if (!imageDOM || !containerRect) return { x: offsetX, y: offsetY }; const natW = imageDOM.naturalWidth || imageDOM.videoWidth || 0; const natH = imageDOM.naturalHeight || imageDOM.videoHeight || 0; const imgWidth = natW * scale; const imgHeight = natH * scale; const containerWidth = containerRect.width; const containerHeight = containerRect.height; if (imgWidth > containerWidth) { const minX = containerWidth - imgWidth; const maxX = 0; if (offsetX > maxX) offsetX = maxX + ((offsetX - maxX) * CONFIG.PAN_RESISTANCE / scale); else if (offsetX < minX) offsetX = minX - ((minX - offsetX) * CONFIG.PAN_RESISTANCE / scale); } if (imgHeight > containerHeight) { const minY = containerHeight - imgHeight; const maxY = 0; if (offsetY > maxY) offsetY = maxY + ((offsetY - maxY) * CONFIG.PAN_RESISTANCE / scale); else if (offsetY < minY) offsetY = minY - ((minY - offsetY) * CONFIG.PAN_RESISTANCE / scale); } return { x: offsetX, y: offsetY }; }, calculateHardBoundaryOffsets: (offsetX, offsetY, scale, containerRect, imageDOM) => { if (!imageDOM || !containerRect) return { x: offsetX, y: offsetY }; const natW = imageDOM.naturalWidth || imageDOM.videoWidth || 0; const natH = imageDOM.naturalHeight || imageDOM.videoHeight || 0; const imgWidth = natW * scale; const imgHeight = natH * scale; let x = offsetX; let y = offsetY; if (imgWidth > containerRect.width) { const minX = containerRect.width - imgWidth; x = Math.max(minX, Math.min(x, 0)); } else { x = 0; } if (imgHeight > containerRect.height) { const minY = containerRect.height - imgHeight; y = Math.max(minY, Math.min(y, 0)); } else { y = 0; } return { x, y }; } }; // ==================================================== // Drag Handler Module // ==================================================== const DragHandler = { isDragging: false, dragStartTime: 0, lastUpdateTime: 0, velocity: { x: 0, y: 0 }, lastPosition: { x: 0, y: 0 }, animationFrame: null, inertiaAnimation: null, cachedImgEl: null, cachedZoomEl: null, startDrag: (event) => { if (!galleryOverlay || !galleryOverlay.length) return; if (event.button === 2 && event.type === 'mousedown') return; if (event.preventDefault) event.preventDefault(); DragHandler.isDragging = true; DragHandler.dragStartTime = performance.now(); DragHandler.lastUpdateTime = DragHandler.dragStartTime; const clientX = event.clientX || (event.touches && event.touches[0].clientX); const clientY = event.clientY || (event.touches && event.touches[0].clientY); viewState.dragStartPosition = { x: clientX, y: clientY }; viewState.dragStartOffset = { x: viewState.imageOffset.x, y: viewState.imageOffset.y }; DragHandler.lastPosition = { x: clientX, y: clientY }; DragHandler.velocity = { x: 0, y: 0 }; if (DragHandler.inertiaAnimation) { cancelAnimationFrame(DragHandler.inertiaAnimation); DragHandler.inertiaAnimation = null; } const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if ($container.length) { $container.addClass(CSS.GALLERY.GRABBING); $container.css('will-change', 'transform'); } }, dragImage: (event) => { if (!DragHandler.isDragging || !galleryOverlay || !galleryOverlay.length) return; const clientX = event.clientX || (event.touches && event.touches[0].clientX); const clientY = event.clientY || (event.touches && event.touches[0].clientY); if (clientX === undefined || clientY === undefined) return; const currentTime = performance.now(); const deltaTime = currentTime - DragHandler.lastUpdateTime; if (deltaTime > 0) { DragHandler.velocity.x = (clientX - DragHandler.lastPosition.x) / deltaTime * 16; DragHandler.velocity.y = (clientY - DragHandler.lastPosition.y) / deltaTime * 16; } DragHandler.lastPosition = { x: clientX, y: clientY }; DragHandler.lastUpdateTime = currentTime; const deltaX = clientX - viewState.dragStartPosition.x; const deltaY = clientY - viewState.dragStartPosition.y; viewState.imageOffset.x = viewState.dragStartOffset.x + deltaX; viewState.imageOffset.y = viewState.dragStartOffset.y + deltaY; if (!DragHandler.animationFrame) { DragHandler.animationFrame = requestAnimationFrame(DragHandler.updateTransform); } }, updateTransform: () => { if (!DragHandler.cachedImgEl) { const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); DragHandler.cachedImgEl = $container.find('img, video')[0]; DragHandler.cachedZoomEl = document.getElementById('zoom-level'); } if (DragHandler.cachedImgEl) { if (!DragHandler.cachedImgEl.style.transformOrigin) { DragHandler.cachedImgEl.style.transformOrigin = '0 0'; } DragHandler.cachedImgEl.style.transform = `translate(${viewState.imageOffset.x}px, ${viewState.imageOffset.y}px) scale(${viewState.zoomScale})`; } if (DragHandler.cachedZoomEl) { DragHandler.cachedZoomEl.textContent = `${Math.round(viewState.zoomScale * 100)}%`; } DragHandler.animationFrame = null; }, endDrag: () => { if (!DragHandler.isDragging || !galleryOverlay || !galleryOverlay.length) return; DragHandler.isDragging = false; const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if ($container.length) { $container.removeClass(CSS.GALLERY.GRABBING); setTimeout(() => $container.css('will-change', ''), 1000); } if ( state.inertiaEnabled && (Math.abs(DragHandler.velocity.x) > 0.5 || Math.abs(DragHandler.velocity.y) > 0.5) ) { DragHandler.applyInertia(); } else { DragHandler.enforceBoundaries(); } }, applyInertia: () => { const friction = 0.95; const minVelocity = 0.5; const animate = () => { DragHandler.velocity.x *= friction; DragHandler.velocity.y *= friction; viewState.imageOffset.x += DragHandler.velocity.x; viewState.imageOffset.y += DragHandler.velocity.y; if ( Math.abs(DragHandler.velocity.x) < minVelocity && Math.abs(DragHandler.velocity.y) < minVelocity ) { DragHandler.inertiaAnimation = null; DragHandler.enforceBoundaries(); return; } DragHandler.updateTransform(); DragHandler.inertiaAnimation = requestAnimationFrame(animate); }; DragHandler.inertiaAnimation = requestAnimationFrame(animate); }, enforceBoundaries: () => { if (!galleryOverlay || !galleryOverlay.length) return; const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if (!$container.length) return; const containerDOM = $container[0]; const $mainImage = $container.find(`.${CSS.GALLERY.MAIN_IMG}`); if (!$mainImage.length) return; const imageDOM = $mainImage[0]; const containerRect = containerDOM.getBoundingClientRect(); const boundedOffset = ZoomHelper.calculateHardBoundaryOffsets( viewState.imageOffset.x, viewState.imageOffset.y, viewState.zoomScale, containerRect, imageDOM ); if (boundedOffset.x !== viewState.imageOffset.x || boundedOffset.y !== viewState.imageOffset.y) { const duration = 300; const startX = viewState.imageOffset.x; const startY = viewState.imageOffset.y; const deltaX = boundedOffset.x - startX; const deltaY = boundedOffset.y - startY; const startTime = performance.now(); const animateToBoundary = (currentTime) => { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const easeProgress = 1 - Math.pow(1 - progress, 3); viewState.imageOffset.x = startX + deltaX * easeProgress; viewState.imageOffset.y = startY + deltaY * easeProgress; DragHandler.updateTransform(); if (progress < 1) { requestAnimationFrame(animateToBoundary); } }; requestAnimationFrame(animateToBoundary); } }, handleDoubleTap: (e) => { e.preventDefault(); if (!galleryOverlay || !galleryOverlay.length) return; const touch = e.touches[0]; const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if (!$container.length) return; const containerDOM = $container[0]; const rect = containerDOM.getBoundingClientRect(); const touchX = touch.clientX - rect.left; const touchY = touch.clientY - rect.top; if (viewState.zoomScale > 1) { Zoom.resetZoom(); } else { const newScale = 2.5; const imageX = (touchX - viewState.imageOffset.x) / viewState.zoomScale; const imageY = (touchY - viewState.imageOffset.y) / viewState.zoomScale; const newOffsetX = touchX - (imageX * newScale); const newOffsetY = touchY - (imageY * newScale); Zoom._applyTransition($container, () => { viewState.imageOffset.x = newOffsetX; viewState.imageOffset.y = newOffsetY; viewState.zoomScale = newScale; DragHandler.updateTransform(); }); } state.lastTapTime = 0; }, handlePinchStart: (e) => { e.preventDefault(); viewState.pinchZoomActive = true; viewState.initialTouchDistance = Utils.getDistance(e.touches[0], e.touches[1]); viewState.initialScale = viewState.zoomScale; const containerDOM = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`)[0]; const rect = containerDOM.getBoundingClientRect(); const midPoint = Utils.getMidpoint(e.touches[0], e.touches[1]); viewState.zoomOrigin = { x: midPoint.x - rect.left, y: midPoint.y - rect.top }; }, handlePinchMove: (e) => { e.preventDefault(); const currentDistance = Utils.getDistance(e.touches[0], e.touches[1]); if (viewState.initialTouchDistance === 0) return; const scaleFactor = currentDistance / viewState.initialTouchDistance; const newScale = Math.max(CONFIG.MIN_SCALE, Math.min(viewState.initialScale * scaleFactor, CONFIG.MAX_SCALE)); const imageX = (viewState.zoomOrigin.x - viewState.imageOffset.x) / viewState.zoomScale; const imageY = (viewState.zoomOrigin.y - viewState.imageOffset.y) / viewState.zoomScale; viewState.imageOffset.x = viewState.zoomOrigin.x - (imageX * newScale); viewState.imageOffset.y = viewState.zoomOrigin.y - (imageY * newScale); viewState.zoomScale = newScale; DragHandler.updateTransform(); } }; // ==================================================== // Gallery Display Module // ==================================================== const ImageActionHandler = { imageActions: { height: ImageSizing.applyFillHeight, width: ImageSizing.applyFillWidth, full: ImageSizing.applyFullSize }, applyDefaultSizingToLoadedImages: () => { document.querySelectorAll('img.post__image.ug-image-loaded').forEach(img => { ImageLoader.imageActions[state.currentResizeMode](img); }); } }; const Slideshow = { interval: null, isActive: false, delay: CONFIG.SLIDESHOW_DELAY, pauseOnHover: true, init: () => { Slideshow.delay = SettingsManager.loadSetting('slideshowDelay', CONFIG.SLIDESHOW_DELAY); Slideshow.pauseOnHover = SettingsManager.loadSetting('slideshowPauseOnHover', true); }, start: () => { if (Slideshow.isActive) return; Slideshow.isActive = true; state.isSlideshowActive = true; Slideshow.interval = setInterval(() => Gallery.nextImage(), Slideshow.delay); Slideshow.showIndicator(); if (Slideshow.pauseOnHover && galleryOverlay && galleryOverlay.length) { galleryOverlay.on('mouseenter.slideshow', () => Slideshow.pause()); galleryOverlay.on('mouseleave.slideshow', () => Slideshow.resume()); } Accessibility.announce('Slideshow started'); state.notificationType = 'info'; state.notification = 'Slideshow started'; }, stop: () => { if (!Slideshow.isActive) return; Slideshow.isActive = false; state.isSlideshowActive = false; if (Slideshow.interval) { clearInterval(Slideshow.interval); Slideshow.interval = null; } if (galleryOverlay && galleryOverlay.length) { Slideshow.hideIndicator(); galleryOverlay.off('.slideshow'); } Accessibility.announce('Slideshow stopped'); state.notificationType = 'info'; state.notification = 'Slideshow stopped'; }, pause: () => { if (Slideshow.interval && Slideshow.isActive) { clearInterval(Slideshow.interval); Slideshow.interval = null; Slideshow.updateIndicator(true); } }, resume: () => { if (!Slideshow.interval && Slideshow.isActive) { Slideshow.interval = setInterval(() => Gallery.nextImage(), Slideshow.delay); Slideshow.updateIndicator(false); } }, toggle: () => Slideshow.isActive ? Slideshow.stop() : Slideshow.start(), showIndicator: () => { if (!galleryOverlay || !galleryOverlay.length) return; if (galleryOverlay.find('.ug-slideshow-indicator').length) return; const $indicator = $('<div>').addClass('ug-slideshow-indicator'); $('<span>').addClass('ug-slideshow-icon').text('▶').appendTo($indicator); $('<span>').addClass('ug-slideshow-text').text('Slideshow').appendTo($indicator); $('<button>') .addClass('ug-slideshow-stop') .attr('title', 'Stop slideshow') .text('✕') .on('click', (e) => { e.stopPropagation(); Slideshow.stop(); }) .appendTo($indicator); galleryOverlay.find('.ug-gallery-toolbar').append($indicator); }, hideIndicator: () => { if (galleryOverlay && galleryOverlay.length) { galleryOverlay.find('.ug-slideshow-indicator').remove(); } }, updateIndicator: (isPaused) => { if (!galleryOverlay || !galleryOverlay.length) return; const $indicator = galleryOverlay.find('.ug-slideshow-indicator'); const $icon = $indicator.find('.ug-slideshow-icon'); if (isPaused) { $icon.text('❚❚'); $indicator.addClass('paused'); } else { $icon.text('▶'); $indicator.removeClass('paused'); } }, setDelay: (delay) => { Slideshow.delay = delay; SettingsManager.saveSetting('slideshowDelay', delay); if (Slideshow.isActive) { Slideshow.stop(); Slideshow.start(); } } }; const ErrorHandler = { retryAttempts: new Map(), handleImageError: async (error, url, element = null, context = {}) => { const retryCount = ErrorHandler.retryAttempts.get(url) || 0; console.error(`Image load error (${retryCount + 1}/${CONFIG.MAX_RETRIES}):`, error, url); if (retryCount < CONFIG.MAX_RETRIES) { ErrorHandler.retryAttempts.set(url, retryCount + 1); const delay = Math.pow(2, retryCount) * 1000; if (retryCount === 0) { state.notificationType = 'warning'; state.notification = `Retrying failed image... (${retryCount + 1}/${CONFIG.MAX_RETRIES})`; } setTimeout(async () => { try { if (element) element.classList.add('retrying'); const blob = await ImageLoader.fetchWithRetry(url, state.currentLoadSessionId); if (blob && element) { const blobUrl = BlobManager.createUrl(blob); element.src = blobUrl; element.classList.remove('error', 'retrying'); ErrorHandler.retryAttempts.delete(url); state.notificationType = 'success'; state.notification = 'Image loaded successfully'; } } catch (retryError) { ErrorHandler.handleImageError(retryError, url, element, context); } }, delay); } else { ErrorHandler.showErrorPlaceholder(element, url, context); ErrorHandler.retryAttempts.delete(url); state.notificationType = 'error'; state.notification = `Failed to load image after ${CONFIG.MAX_RETRIES} attempts`; } }, showErrorPlaceholder: (element, url, context) => { if (!element) return; const errorSvg = ` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <circle cx="8.5" cy="8.5" r="1.5"></circle> <polyline points="21 15 16 10 5 21"></polyline> </svg> `; const errorContainer = document.createElement('div'); errorContainer.className = 'ug-error-container'; const errorIcon = document.createElement('div'); errorIcon.className = 'ug-error-icon'; errorIcon.innerHTML = errorSvg; const errorMsg = document.createElement('div'); errorMsg.className = 'ug-error-message'; errorMsg.textContent = 'Failed to load image'; const retryBtn = document.createElement('button'); retryBtn.className = 'ug-error-retry'; retryBtn.textContent = 'Retry'; retryBtn.title = 'Retry loading'; errorContainer.append(errorIcon, errorMsg, retryBtn); if (element.parentNode) { element.parentNode.replaceChild(errorContainer, element); } retryBtn.addEventListener('click', () => { if (element.parentNode) { errorContainer.parentNode.replaceChild(element, errorContainer); } element.classList.add('loading'); ErrorHandler.retryAttempts.delete(url); ImageLoader.loadImageAndApplyToPage( context.linkElement, context.galleryIndex, context.posterHref, context.isUniqueForGallery, state.currentLoadSessionId, context.itemData ); }); }, clearRetries: () => ErrorHandler.retryAttempts.clear() }; const SettingsManager = { defaultSettings: { galleryKey: 'g', prevImageKey: 'k', nextImageKey: 'l', zoomEnabled: true, animationsEnabled: true, notificationsEnabled: true, notificationPosition: 'bottom', bottomStripeVisible: true, hideNavArrows: false, hideFullButton: false, hideDownloadButton: false, hideHeightButton: false, hideWidthButton: false, enablePersistentCaching: true, slideshowDelay: CONFIG.SLIDESHOW_DELAY, slideshowPauseOnHover: true, inertiaEnabled: true, maxZoomScale: 5, zipFileNameFormat: '{date_published}-{title}-{artistName}.zip', imageFileNameFormat: '{date_published}-{title}-{artistName}-{fileName}-{index}', autoLoadOriginals: true, downloadBtnText: '【DOWNLOAD】', downloadAllBtnText: '【DL ALL】', fullBtnText: '【FULL】', heightBtnText: '【FILL HEIGHT】', widthBtnText: '【FILL WIDTH】', galleryBtnText: '【GALLERY】', currentResizeMode: 'height' }, saveSetting: (key, value) => { try { GM_setValue(key, JSON.stringify(value)); return true; } catch (error) { console.error('Failed to save setting:', key, error); return false; } }, loadSetting: (key, defaultValue = null) => { try { const value = GM_getValue(key); if (value === undefined) return defaultValue; try { return JSON.parse(value); } catch (e) { return value; } } catch (error) { console.error('Failed to load setting:', key, error); return defaultValue; } }, loadAllSettings: () => { const settings = {}; Object.keys(SettingsManager.defaultSettings).forEach(key => { settings[key] = SettingsManager.loadSetting(key, SettingsManager.defaultSettings[key]); }); return settings; }, saveAllSettings: (settings) => { let success = true; Object.keys(settings).forEach(key => { if (!SettingsManager.saveSetting(key, settings[key])) success = false; }); return success; }, resetToDefaults: () => SettingsManager.saveAllSettings(SettingsManager.defaultSettings), exportSettings: () => JSON.stringify(SettingsManager.loadAllSettings(), null, 2), sanitizeSetting: (key, value) => { const def = SettingsManager.defaultSettings[key]; switch (key) { case 'slideshowDelay': { const n = parseInt(value, 10); return (Number.isFinite(n) && n >= 500) ? n : CONFIG.SLIDESHOW_DELAY; } case 'maxZoomScale': { const n = parseFloat(value); return (Number.isFinite(n) && n >= 1) ? n : 5; } case 'galleryKey': case 'prevImageKey': case 'nextImageKey': return (typeof value === 'string' && value.length === 1) ? value : def; case 'notificationPosition': return ['top', 'bottom'].includes(value) ? value : 'bottom'; case 'zipFileNameFormat': case 'imageFileNameFormat': return (typeof value === 'string' && value.trim()) ? value : def; default: if (typeof def === 'boolean') return Boolean(value); if (typeof def === 'string') return (typeof value === 'string') ? value : def; return value; } }, importSettings: (settingsJson) => { try { const settings = JSON.parse(settingsJson); const validatedSettings = {}; Object.keys(SettingsManager.defaultSettings).forEach(key => { const incoming = Object.prototype.hasOwnProperty.call(settings, key) ? settings[key] : SettingsManager.defaultSettings[key]; validatedSettings[key] = SettingsManager.sanitizeSetting(key, incoming); }); if (SettingsManager.saveAllSettings(validatedSettings)) { Object.assign(state, validatedSettings); state.notificationType = 'success'; state.notification = 'Settings imported successfully'; return true; } } catch (error) { console.error('Failed to import settings:', error); state.notificationType = 'error'; state.notification = 'Failed to import settings: Invalid format'; } return false; } }; const Accessibility = { init: () => { if (galleryOverlay && galleryOverlay.length) { galleryOverlay.attr({ role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Image Gallery' }); } if (!$('.ug-sr-only').length) { const $liveRegion = $('<div>').attr({ 'aria-live': 'polite', 'aria-atomic': 'true', 'class': 'ug-sr-only' }); $('body').append($liveRegion); } }, announce: (message) => $('.ug-sr-only').text(message) }; const BlobManager = { blobUrls: new Set(), createUrl: (blob) => { if (!blob) return ''; const url = URL.createObjectURL(blob); BlobManager.blobUrls.add(url); return url; }, revokeUrl: (url) => { if (typeof url === 'string' && url.startsWith('blob:')) { try { URL.revokeObjectURL(url); BlobManager.blobUrls.delete(url); } catch (e) { // Ignore revoke errors. } } }, revokeAll: () => { BlobManager.blobUrls.forEach(url => { try { URL.revokeObjectURL(url); } catch (e) { // Ignore revoke errors. } }); BlobManager.blobUrls.clear(); } }; const StateManager = { generateSessionId: () => crypto.randomUUID?.() || Date.now().toString(36) + Math.random().toString(36).slice(2), withSessionCheck: (callback) => { return (value, oldValue) => { if (state.currentLoadSessionId === null) return; callback(value, oldValue); }; }, createReactiveState: (initialState, updateCallbacks = {}) => { return new Proxy(initialState, { set(target, key, value) { const oldValue = target[key]; target[key] = value; if (updateCallbacks[key]) { try { updateCallbacks[key](value, oldValue); } catch (e) { console.error(`Error in state callback for key "${key}":`, e); } } return true; } }); } }; // ==================================================== // Reactive State // ==================================================== const state = StateManager.createReactiveState({ zipFileNameFormat: SettingsManager.loadSetting('zipFileNameFormat', '{date_published}-{title}-{artistName}.zip'), imageFileNameFormat: SettingsManager.loadSetting('imageFileNameFormat', '{date_published}-{title}-{artistName}-{fileName}-{index}'), galleryKey: SettingsManager.loadSetting('galleryKey', 'g'), galleryReady: false, currentGalleryIndex: 0, currentResizeMode: SettingsManager.loadSetting('currentResizeMode', 'height'), isFullscreen: SettingsManager.loadSetting('isFullscreen', false), originalImageSrcs: [], fullSizeImageSrcs: [], totalImages: 0, loadedImages: 0, isLoading: false, isGalleryMode: false, isDownloading: false, errorCount: 0, currentLoadSessionId: null, notificationsEnabled: SettingsManager.loadSetting('notificationsEnabled', true), notificationPosition: SettingsManager.loadSetting('notificationPosition', 'bottom'), animationsEnabled: SettingsManager.loadSetting('animationsEnabled', true), enablePersistentCaching: SettingsManager.loadSetting('enablePersistentCaching', true), notification: null, notificationType: 'info', hideNavArrows: SettingsManager.loadSetting('hideNavArrows', false), hideFullButton: SettingsManager.loadSetting('hideFullButton', false), hideDownloadButton: SettingsManager.loadSetting('hideDownloadButton', false), hideHeightButton: SettingsManager.loadSetting('hideHeightButton', false), hideWidthButton: SettingsManager.loadSetting('hideWidthButton', false), settingsOpen: false, prevImageKey: SettingsManager.loadSetting('prevImageKey', 'k'), nextImageKey: SettingsManager.loadSetting('nextImageKey', 'l'), bottomStripeVisible: SettingsManager.loadSetting('bottomStripeVisible', true), zoomEnabled: SettingsManager.loadSetting('zoomEnabled', true), controlsVisible: true, isDragging: false, lastTapTime: 0, zoomIndicatorVisible: true, inertiaEnabled: SettingsManager.loadSetting('inertiaEnabled', true), isSlideshowActive: false, autoLoadOriginals: SettingsManager.loadSetting('autoLoadOriginals', true), downloadBtnText: SettingsManager.loadSetting('downloadBtnText', '【DOWNLOAD】'), downloadAllBtnText: SettingsManager.loadSetting('downloadAllBtnText', '【DL ALL】'), fullBtnText: SettingsManager.loadSetting('fullBtnText', '【FULL】'), heightBtnText: SettingsManager.loadSetting('heightBtnText', '【FILL HEIGHT】'), widthBtnText: SettingsManager.loadSetting('widthBtnText', '【FILL WIDTH】'), galleryBtnText: SettingsManager.loadSetting('galleryBtnText', '【GALLERY】'), slideshowDelay: SettingsManager.loadSetting('slideshowDelay', CONFIG.SLIDESHOW_DELAY), slideshowPauseOnHover: SettingsManager.loadSetting('slideshowPauseOnHover', true) }, { controlsVisible: (value) => { if (galleryOverlay && galleryOverlay.length) { const $toolbar = galleryOverlay.find(`.${CSS.GALLERY.TOOLBAR}`); const $expandedView = galleryOverlay.find(`.${CSS.GALLERY.EXPANDED_VIEW}`); if ($toolbar.length) { $toolbar.toggleClass(CSS.GALLERY.CONTROLS_HIDDEN, !value); } if ($expandedView.length) { $expandedView.toggleClass(CSS.GALLERY.CONTROLS_HIDDEN, !value); } } }, galleryReady: (value) => updateGalleryButton(value), loadedImages: StateManager.withSessionCheck((value) => { if (value === state.totalImages && state.totalImages > 0) { state.notificationType = 'success'; state.notification = `Media Done Loading! Total: ${state.totalImages}`; } else if (state.totalImages > 0) { notifyLoadProgress(`Loading media (${value}/${state.totalImages})...`, 'info'); } }), totalImages: StateManager.withSessionCheck((value) => { if (value > 0) { notifyLoadProgress(`Loading media (${state.loadedImages}/${value})...`, 'info'); } }), notification: (value) => { if (value) UI.showNotification(value, state.notificationType); else UI.hideNotification(); }, notificationType: (value) => { const container = document.getElementById(CSS.NOTIF_CONTAINER); if (container && state.notification && container.style.display === 'flex') { container.classList.remove('info', 'success', 'error', 'warning'); container.classList.add(value); } }, settingsOpen: (value) => value ? UI.showSettings() : UI.closeSettings(), isFullscreen: (value) => { SettingsManager.saveSetting('isFullscreen', value); if (value) { if (galleryOverlay && galleryOverlay.length) { document.body.classList.add('ug-fullscreen'); galleryOverlay.addClass(CSS.GALLERY.FULLSCREEN_OVERLAY); } } else { document.body.classList.remove('ug-fullscreen'); if (galleryOverlay && galleryOverlay.length) { galleryOverlay.removeClass(CSS.GALLERY.FULLSCREEN_OVERLAY); } } }, zoomEnabled: (value) => SettingsManager.saveSetting('zoomEnabled', value), animationsEnabled: (value) => { SettingsManager.saveSetting('animationsEnabled', value); document.body.classList.toggle('ug-animations-disabled', !value); }, bottomStripeVisible: (value) => { SettingsManager.saveSetting('bottomStripeVisible', value); const overlayEl = galleryOverlay ? galleryOverlay[0] : null; if (overlayEl) { const stripContainer = overlayEl.querySelector(`.${CSS.GALLERY.STRIP_CONTAINER}`); if (stripContainer) stripContainer.style.display = value ? 'flex' : 'none'; } }, isDragging: (value) => { if (galleryOverlay && galleryOverlay.length) { const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if ($container.length) $container.toggleClass(CSS.GALLERY.GRABBING, value); } }, notificationPosition: (value) => { SettingsManager.saveSetting('notificationPosition', value); const notifArea = document.getElementById(CSS.NOTIF_AREA); if (notifArea) { notifArea.style.top = value === 'top' ? '10px' : 'auto'; notifArea.style.bottom = value === 'bottom' ? '10px' : 'auto'; } }, enablePersistentCaching: (value) => { SettingsManager.saveSetting('enablePersistentCaching', value); if (value && !db) initDexie(); }, currentResizeMode: (value) => SettingsManager.saveSetting('currentResizeMode', value) }); function updateButtonLabels() { BUTTONS.DOWNLOAD = state.downloadBtnText || '【DOWNLOAD】'; BUTTONS.DOWNLOAD_ALL = state.downloadAllBtnText || '【DL ALL】'; BUTTONS.FULL = state.fullBtnText || '【FULL】'; BUTTONS.HEIGHT = state.heightBtnText || '【FILL HEIGHT】'; BUTTONS.WIDTH = state.widthBtnText || '【FILL WIDTH】'; BUTTONS.GALLERY = state.galleryBtnText || '【GALLERY】'; const labels = { DOWNLOAD: BUTTONS.DOWNLOAD, DOWNLOAD_ALL: BUTTONS.DOWNLOAD_ALL, FULL: BUTTONS.FULL, HEIGHT: BUTTONS.HEIGHT, WIDTH: BUTTONS.WIDTH, GALLERY: BUTTONS.GALLERY }; document.querySelectorAll(`.${CSS.BTN}[data-action]`).forEach(btn => { const label = labels[btn.dataset.action]; if (label) btn.textContent = label; }); updateGalleryButton(state.galleryReady); PostActions.updateButtonVisibilityLight(); } // ==================================================== // Dexie Database (IndexedDB) // ==================================================== function initDexie() { if (typeof Dexie === 'undefined') return false; db = new Dexie('UltraGalleriesCache'); db.version(1).stores({ imageCache: 'url, cachedAt, blob' }); return true; } async function evictOldestCacheItems(count) { if (!db) return 0; try { const oldestItemKeys = await db.imageCache .orderBy('cachedAt') .limit(count) .primaryKeys(); if (oldestItemKeys && oldestItemKeys.length > 0) { await db.imageCache.bulkDelete(oldestItemKeys); return oldestItemKeys.length; } return 0; } catch (e) { return 0; } } async function storeImageInDexie(url, blob) { if (!db) return; try { await db.imageCache.put({ url, blob, cachedAt: Date.now() }); } catch (e) { if (e.name === 'QuotaExceededError') { const evictedCount = await evictOldestCacheItems(CONFIG.CACHE_EVICTION_COUNT); if (evictedCount > 0) { try { await db.imageCache.put({ url, blob, cachedAt: Date.now() }); } catch (retryError) { // Ignore retry failure. } } } } } async function getImageFromDexie(url) { if (!db) return null; try { const record = await db.imageCache.get(url); if (record && record.blob) { db.imageCache.update(url, { cachedAt: Date.now() }).catch(() => { }); return record.blob; } return null; } catch (e) { return null; } } async function clearDexieCache() { if (!db) return; try { await db.imageCache.clear(); state.notificationType = 'success'; state.notification = 'Persistent image cache cleared.'; } catch (e) { state.notificationType = 'error'; state.notification = 'Error clearing cache.'; } } const Zoom = { _applyTransition: function ($element, action) { $element.addClass(CSS.GALLERY.IS_TRANSITIONING); action(); let cleared = false; const clear = () => { if (!cleared) { cleared = true; $element.removeClass(CSS.GALLERY.IS_TRANSITIONING); } }; $element.one('transitionend', clear); setTimeout(clear, 600); }, applyZoom: () => { if (!galleryOverlay || !galleryOverlay.length) return; const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if (!$container.length) return; DragHandler.updateTransform(); const $zoomDisplay = galleryOverlay.find('#zoom-level'); if ($zoomDisplay.length) { $zoomDisplay.text(`${Math.round(viewState.zoomScale * 100)}%`); } $container.toggleClass(CSS.GALLERY.ZOOMED, viewState.zoomScale !== 1); }, handleWheelZoom: (event) => { if (!state.zoomEnabled || !galleryOverlay || !galleryOverlay.length) return; event.preventDefault(); event.stopPropagation(); const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if (!$container.length) return; const containerDOM = $container[0]; $container.css('transform-origin', '0 0'); const mediaEl = $container.find('img, video')[0]; if (mediaEl) mediaEl.style.transformOrigin = '0 0'; const rect = containerDOM.getBoundingClientRect(); if (rect.width === 0 || rect.height === 0) return; const originalEvent = event.originalEvent || event; const mouseX = originalEvent.clientX - rect.left; const mouseY = originalEvent.clientY - rect.top; const delta = originalEvent.deltaY; const zoomFactor = delta > 0 ? (1 - CONFIG.ZOOM_STEP) : (1 + CONFIG.ZOOM_STEP); const newScale = Math.max(CONFIG.MIN_SCALE, Math.min(viewState.zoomScale * zoomFactor, CONFIG.MAX_SCALE)); if (newScale === viewState.zoomScale) return; const imageXUnderPointer = (mouseX - viewState.imageOffset.x) / viewState.zoomScale; const imageYUnderPointer = (mouseY - viewState.imageOffset.y) / viewState.zoomScale; viewState.imageOffset.x = mouseX - (imageXUnderPointer * newScale); viewState.imageOffset.y = mouseY - (imageYUnderPointer * newScale); viewState.zoomScale = newScale; Zoom.applyZoom(); }, resetZoom: () => { if (!galleryOverlay || !galleryOverlay.length) return; const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if ($container.length) { Zoom._applyTransition($container, () => { viewState.zoomScale = 1; viewState.imageOffset = { x: 0, y: 0 }; Zoom.applyZoom(); }); } }, zoom: (step) => { if (!galleryOverlay || !galleryOverlay.length) return; const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if (!$container.length) return; const containerDOM = $container[0]; const rect = containerDOM.getBoundingClientRect(); const centerX = rect.width / 2; const centerY = rect.height / 2; const newScale = Math.max(CONFIG.MIN_SCALE, Math.min(viewState.zoomScale + step, CONFIG.MAX_SCALE)); if (viewState.zoomScale !== newScale) { const imageX = (centerX - viewState.imageOffset.x) / viewState.zoomScale; const imageY = (centerY - viewState.imageOffset.y) / viewState.zoomScale; const newOffsetX = centerX - (imageX * newScale); const newOffsetY = centerY - (imageY * newScale); Zoom._applyTransition($container, () => { viewState.imageOffset.x = newOffsetX; viewState.imageOffset.y = newOffsetY; viewState.zoomScale = newScale; Zoom.applyZoom(); }); } }, setupTouchEvents: () => { if (!galleryOverlay || !galleryOverlay.length) return; const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); if (!$container.length) return; const containerDOM = $container[0]; let longPressTimer = null; const handleTouchStart = (e) => { const currentItem = state.fullSizeImageSrcs[state.currentGalleryIndex]; if (!currentItem || currentItem.type !== 'image') return; clearTimeout(longPressTimer); if (e.touches.length === 1) { const now = Date.now(); if (now - state.lastTapTime < CONFIG.DOUBLE_TAP_THRESHOLD) { DragHandler.handleDoubleTap(e); return; } state.lastTapTime = now; longPressTimer = setTimeout(() => $(e.target).addClass(CSS.LONG_PRESS), 500); DragHandler.startDrag(e.touches[0]); } else if (e.touches.length === 2) { if (DragHandler.isDragging) DragHandler.endDrag(); DragHandler.handlePinchStart(e); } }; const handleTouchMove = (e) => { const currentItem = state.fullSizeImageSrcs[state.currentGalleryIndex]; if (!currentItem || currentItem.type !== 'image') return; clearTimeout(longPressTimer); if (viewState.pinchZoomActive && e.touches.length === 2) { DragHandler.handlePinchMove(e); } else if (DragHandler.isDragging && e.touches.length === 1) { if (!DragHandler.touchMoveThrottled) { DragHandler.touchMoveThrottled = true; DragHandler.dragImage(e.touches[0]); requestAnimationFrame(() => { DragHandler.touchMoveThrottled = false; }); } } }; const handleTouchEnd = (e) => { clearTimeout(longPressTimer); $container.find(`.${CSS.LONG_PRESS}`).removeClass(CSS.LONG_PRESS); if (viewState.pinchZoomActive && e.touches.length < 2) { viewState.pinchZoomActive = false; } if (DragHandler.isDragging) DragHandler.endDrag(); }; const eventOptions = { passive: false }; containerDOM.addEventListener('touchstart', handleTouchStart, eventOptions); containerDOM.addEventListener('touchmove', handleTouchMove, eventOptions); containerDOM.addEventListener('touchend', handleTouchEnd, eventOptions); containerDOM.addEventListener('touchcancel', handleTouchEnd, eventOptions); } }; const ThumbnailStrip = { _contextMenuTimeout: null, init: () => { $(document).off('.thumbnailstrip'); if (!galleryOverlay) return; const $strip = galleryOverlay.find('.ug-thumbnail-strip'); ThumbnailStrip.updateScrollIndicators(); ThumbnailStrip.setupKeyboardNavigation(); ThumbnailStrip.setupDragNavigation(); ThumbnailStrip.setupHoverPreview(); ThumbnailStrip.setupContextMenu(); $strip.on('scroll', Utils.throttle(() => ThumbnailStrip.updateScrollIndicators(), 100)); }, cleanup: () => { $(document).off('.thumbnailstrip'); ThumbnailStrip.hideContextMenu(); $('.ug-thumbnail-zoom-preview').remove(); if (galleryOverlay && galleryOverlay.length) { galleryOverlay.find('.ug-slideshow-indicator').remove(); } }, updateScrollIndicators: () => { if (!galleryOverlay) return; const $strip = galleryOverlay.find('.ug-thumbnail-strip'); if (!$strip.length) return; const hasScroll = $strip[0].scrollWidth > $strip[0].clientWidth; $strip.toggleClass('no-scroll', !hasScroll); }, setupKeyboardNavigation: () => { const $strip = galleryOverlay.find('.ug-thumbnail-strip'); $strip.on('keydown', function (e) { const $focused = $(e.target).closest(`.${CSS.GALLERY.THUMBNAIL_WRAPPER}`); if (!$focused.length) return; switch (e.key) { case 'ArrowLeft': e.preventDefault(); ThumbnailStrip.navigateThumbnails('prev'); break; case 'ArrowRight': e.preventDefault(); ThumbnailStrip.navigateThumbnails('next'); break; case 'Enter': case ' ': e.preventDefault(); Gallery.showExpandedView(parseInt($focused.data('index'))); break; } }); }, navigateThumbnails: (direction) => { const $strip = galleryOverlay.find('.ug-thumbnail-strip'); const $current = $strip.find(`.${CSS.GALLERY.THUMBNAIL_WRAPPER}.selected`); const $target = direction === 'next' ? $current.next() : $current.prev(); if ($target.length) { $target[0].focus(); $target[0].scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' }); } }, setupDragNavigation: () => { const $strip = galleryOverlay.find('.ug-thumbnail-strip'); let isDragging = false; let startX = 0; let scrollLeft = 0; $strip.on('mousedown', (e) => { if (e.button !== 0) return; if ($(e.target).closest(`.${CSS.GALLERY.THUMBNAIL_WRAPPER}`).length) return; isDragging = true; startX = e.pageX - $strip.offset().left; scrollLeft = $strip.scrollLeft(); $strip.css('cursor', 'grabbing').addClass('ug-dragging'); }); $(document).on('mousemove.thumbnailstrip', (e) => { if (!isDragging) return; e.preventDefault(); const x = e.pageX - $strip.offset().left; $strip.scrollLeft(scrollLeft - (x - startX) * 2); }); $(document).on('mouseup.thumbnailstrip', () => { isDragging = false; $strip.css('cursor', '').removeClass('ug-dragging'); }); }, setupHoverPreview: () => { const $strip = galleryOverlay.find('.ug-thumbnail-strip'); let previewTimeout; $strip.on('mouseenter', `.${CSS.GALLERY.THUMBNAIL_WRAPPER}`, function () { const $thumb = $(this); const index = parseInt($thumb.data('index')); clearTimeout(previewTimeout); previewTimeout = setTimeout(() => ThumbnailStrip.showZoomPreview($thumb, index), 500); }); $strip.on('mouseleave', `.${CSS.GALLERY.THUMBNAIL_WRAPPER}`, function () { clearTimeout(previewTimeout); ThumbnailStrip.hideZoomPreview(); }); }, showZoomPreview: ($thumb, index) => { const mediaItem = state.fullSizeImageSrcs[index]; if (!mediaItem) return; $('.ug-thumbnail-zoom-preview').remove(); const thumbImgSrc = $thumb.find('img').attr('src'); const src = mediaItem.type === 'video' ? (mediaItem.poster || thumbImgSrc) : (thumbImgSrc || mediaItem.src); if (!src) return; const $preview = $('<div>').addClass('ug-thumbnail-zoom-preview'); $('<img>').attr('src', src).appendTo($preview); $('body').append($preview); const rect = $thumb[0].getBoundingClientRect(); const previewWidth = 220; const left = Math.min( Math.max(rect.left + rect.width / 2, previewWidth / 2 + 8), window.innerWidth - previewWidth / 2 - 8 ); let top; let transform; if (rect.top > 240) { top = rect.top - 10; transform = 'translate(-50%, -100%)'; } else { top = rect.bottom + 10; transform = 'translate(-50%, 0)'; } $preview.css({ position: 'fixed', left: `${left}px`, top: `${top}px`, bottom: 'auto', transform, zIndex: 10000 }); setTimeout(() => $preview.addClass('show'), 10); }, hideZoomPreview: () => { const $preview = $('.ug-thumbnail-zoom-preview'); if (!$preview.length) return; $preview.removeClass('show'); setTimeout(() => { $preview.remove(); }, 300); }, setupContextMenu: () => { const $strip = galleryOverlay.find('.ug-thumbnail-strip'); $strip.on('contextmenu', `.${CSS.GALLERY.THUMBNAIL_WRAPPER}`, function (e) { e.preventDefault(); ThumbnailStrip.showContextMenu($(this), parseInt($(this).data('index')), e.pageX, e.pageY); }); $(document).on('click.thumbnailstrip', () => ThumbnailStrip.hideContextMenu()); }, showContextMenu: ($thumb, index, x, y) => { if (ThumbnailStrip._contextMenuTimeout) { clearTimeout(ThumbnailStrip._contextMenuTimeout); ThumbnailStrip._contextMenuTimeout = null; } $('.ug-thumbnail-context-menu').remove(); const $menu = $('<div>').addClass('ug-thumbnail-context-menu'); const menuItems = [ { text: 'Open Image', action: () => Gallery.showExpandedView(index) }, { text: 'Download Image', action: () => DownloadManager.downloadImageByIndex(index) }, { text: 'Copy URL', action: () => ThumbnailStrip.copyImageUrl(index) }, { text: 'Remove from Gallery', action: () => ThumbnailStrip.removeFromGallery(index), danger: true } ]; menuItems.forEach(item => { $('<button>') .addClass('ug-thumbnail-context-menu-item') .text(item.text) .toggleClass('danger', item.danger) .on('click', (e) => { e.stopPropagation(); item.action(); ThumbnailStrip.hideContextMenu(); }) .appendTo($menu); }); $menu.css({ left: Math.min(x, window.innerWidth - 170) + 'px', top: Math.min(y - 10, window.innerHeight - 200) + 'px' }); $('body').append($menu); setTimeout(() => $menu.addClass('show'), 10); }, hideContextMenu: () => { const $menu = $('.ug-thumbnail-context-menu'); $menu.removeClass('show'); if (ThumbnailStrip._contextMenuTimeout) clearTimeout(ThumbnailStrip._contextMenuTimeout); ThumbnailStrip._contextMenuTimeout = setTimeout(() => { $menu.remove(); }, CONFIG.CONTEXT_MENU_HIDE_DELAY); }, copyImageUrl: (index) => { const mediaItem = state.fullSizeImageSrcs[index]; if (!mediaItem) return; navigator.clipboard.writeText(mediaItem.src).then(() => { state.notificationType = 'success'; state.notification = 'Image URL copied to clipboard'; }).catch(err => { console.error('Failed to copy URL:', err); state.notificationType = 'error'; state.notification = 'Failed to copy URL'; }); }, removeFromGallery: (index) => { const doRemove = () => { state.fullSizeImageSrcs.splice(index, 1); state.originalImageSrcs.splice(index, 1); Gallery._clearPreloadCache(); if (state.fullSizeImageSrcs.length === 0) { Gallery.closeGallery(); return; } if (index < state.currentGalleryIndex) state.currentGalleryIndex--; if (state.currentGalleryIndex >= state.fullSizeImageSrcs.length) { state.currentGalleryIndex = state.fullSizeImageSrcs.length - 1; } if (state.currentGalleryIndex < 0) state.currentGalleryIndex = 0; Gallery._populateAllThumbnails(galleryOverlay.find(`.${CSS.GALLERY.THUMBNAIL_STRIP}`)); Gallery.showExpandedView(state.currentGalleryIndex); ThumbnailStrip.updateThumbnailNumbers(); ThumbnailStrip.updateScrollIndicators(); state.notificationType = 'info'; state.notification = 'Image removed from gallery'; }; if (typeof Swal !== 'undefined') { Swal.fire({ title: 'Remove from gallery?', text: 'This only affects the current gallery view.', icon: 'question', showCancelButton: true, confirmButtonText: 'Remove' }).then(({ isConfirmed }) => { if (isConfirmed) doRemove(); }); } else if (confirm('Are you sure you want to remove this image from the gallery?')) { doRemove(); } }, updateThumbnailNumbers: () => { if (!galleryOverlay) return; galleryOverlay.find(`.${CSS.GALLERY.THUMBNAIL_WRAPPER}`).each(function (index) { const $number = $(this).find('.ug-thumbnail-number'); if ($number.length === 0) { $(this).append(`<span class="ug-thumbnail-number">${index + 1}</span>`); } else { $number.text(index + 1); } }); } }; const UI = { _notificationTimeoutId: null, _notificationHideTimeoutId: null, createToggleButton: (name, action, disabled = false, actionName = null) => { const btn = document.createElement('button'); btn.type = 'button'; btn.textContent = name; btn.style.cursor = 'pointer'; btn.classList.add(CSS.BTN); if (actionName) btn.dataset.action = actionName; btn.addEventListener('click', (e) => { if (btn.classList.contains('disabled')) { e.preventDefault(); return; } action(e); }); if (disabled) btn.classList.add('disabled'); return btn; }, createButtonGroup: (buttonsConfig) => { const div = document.createElement('div'); div.classList.add(CSS.BTN_CONTAINER); buttonsConfig.forEach(config => { let createThisButton = true; switch (config.name) { case 'FULL': if (state.hideFullButton) createThisButton = false; break; case 'DOWNLOAD': if (state.hideDownloadButton) createThisButton = false; break; case 'HEIGHT': if (state.hideHeightButton) createThisButton = false; break; case 'WIDTH': if (state.hideWidthButton) createThisButton = false; break; } if (!createThisButton) return; const button = UI.createToggleButton(config.text, config.action, false, config.name); div.append(button); }); return div; }, createNavigationButton: (direction) => { const btn = document.createElement('button'); btn.textContent = direction === 'prev' ? '←' : '→'; btn.className = `${CSS.GALLERY.NAV} ${direction === 'prev' ? CSS.GALLERY.PREV : CSS.GALLERY.NEXT}`; btn.addEventListener('click', direction === 'prev' ? Gallery.prevImage : Gallery.nextImage); btn.setAttribute('aria-label', direction === 'prev' ? 'Previous Image' : 'Next Image'); return btn; }, createNotificationArea: () => { const area = document.createElement('div'); area.id = CSS.NOTIF_AREA; area.classList.add(CSS.NOTIF_AREA); area.style.top = state.notificationPosition === 'top' ? '10px' : 'auto'; area.style.bottom = state.notificationPosition === 'bottom' ? '10px' : 'auto'; document.body.appendChild(area); return area; }, createNotification: () => { let area = document.getElementById(CSS.NOTIF_AREA); if (!area) area = UI.createNotificationArea(); const container = document.createElement('div'); container.id = CSS.NOTIF_CONTAINER; container.classList.add(CSS.NOTIF_CONTAINER); const text = document.createElement('div'); text.id = CSS.NOTIF_TEXT; container.appendChild(text); const closeBtn = document.createElement('button'); closeBtn.id = CSS.NOTIF_CLOSE; closeBtn.textContent = '×'; closeBtn.addEventListener('click', () => state.notification = null); container.appendChild(closeBtn); const reportBtn = document.createElement('a'); reportBtn.id = CSS.NOTIF_REPORT; reportBtn.textContent = 'Report Issue'; reportBtn.href = 'https://github.com/TearTyr/Ultra-Galleries/issues'; reportBtn.target = '_blank'; container.appendChild(reportBtn); area.appendChild(container); return container; }, showNotification: (message, type = 'info') => { if (!state.notificationsEnabled && !['error', 'warning'].includes(type)) return; let area = document.getElementById(CSS.NOTIF_AREA); if (!area) area = UI.createNotificationArea(); let container = area.querySelector(`.${CSS.NOTIF_CONTAINER}`); if (!container) container = UI.createNotification(); const isAlreadyVisible = container.style.display === 'flex' && !container.classList.contains('ug-slide-out'); if (UI._notificationTimeoutId) { clearTimeout(UI._notificationTimeoutId); UI._notificationTimeoutId = null; } if (UI._notificationHideTimeoutId) { clearTimeout(UI._notificationHideTimeoutId); UI._notificationHideTimeoutId = null; } container.classList.remove('ug-update', 'ug-slide-in', 'ug-slide-out'); container.querySelector(`#${CSS.NOTIF_TEXT}`).textContent = message; container.className = `${CSS.NOTIF_CONTAINER} ${type}`; if (state.animationsEnabled) { if (isAlreadyVisible) { container.classList.add('ug-update'); container.addEventListener('animationend', () => container.classList.remove('ug-update'), { once: true }); } else { container.classList.add('ug-slide-in'); } } container.style.display = 'flex'; if (['info', 'success'].includes(type)) { UI._notificationTimeoutId = setTimeout(() => { state.notification = null; }, 5000); } }, hideNotification: () => { const container = document.getElementById(CSS.NOTIF_CONTAINER); if (!container) return; if (UI._notificationTimeoutId) { clearTimeout(UI._notificationTimeoutId); UI._notificationTimeoutId = null; } if (UI._notificationHideTimeoutId) { clearTimeout(UI._notificationHideTimeoutId); UI._notificationHideTimeoutId = null; } if (state.animationsEnabled) { container.classList.add('ug-slide-out'); container.classList.remove('ug-slide-in'); UI._notificationHideTimeoutId = setTimeout(() => { container.style.display = 'none'; container.classList.remove('ug-slide-out'); UI._notificationHideTimeoutId = null; }, 500); } else { container.classList.remove('ug-slide-in', 'ug-slide-out'); container.style.display = 'none'; } }, forceHideNotification: () => { if (UI._notificationTimeoutId) { clearTimeout(UI._notificationTimeoutId); UI._notificationTimeoutId = null; } if (UI._notificationHideTimeoutId) { clearTimeout(UI._notificationHideTimeoutId); UI._notificationHideTimeoutId = null; } const container = document.getElementById(CSS.NOTIF_CONTAINER); if (container) container.remove(); }, _createSettingElement: (setting) => { const $div = $('<div>').addClass('ug-setting-item'); const $label = $('<label>').attr('for', setting.id).text(setting.label); const handleChange = (value) => { if (setting.stateKey) state[setting.stateKey] = value; if (setting.gmKey) SettingsManager.saveSetting(setting.gmKey, value); if (setting.onChange) setting.onChange(value); }; switch (setting.type) { case 'checkbox': $div.addClass('ug-settings-checkbox-label'); $div.append( $('<input type="checkbox">') .attr('id', setting.id) .prop('checked', state[setting.stateKey]) .on('change', e => handleChange($(e.target).prop('checked'))), $label ); break; case 'text': $div.append($label); $div.append( $('<input type="text">') .attr({ id: setting.id, value: state[setting.stateKey], maxlength: setting.maxLength || 50 }) .addClass('ug-settings-input') .on('change', e => handleChange($(e.target).val())) ); break; case 'select': { $div.append($label); const $select = $('<select>') .attr('id', setting.id) .addClass('ug-settings-input') .on('change', e => handleChange(e.target.value)); setting.options.forEach(opt => { $select.append($('<option>').val(opt.value).text(opt.text)); }); $select.val(state[setting.stateKey]); $div.append($select); break; } case 'button': return $('<button>') .addClass('ug-button ug-settings-input') .text(setting.label) .on('click', setting.action); } return $div; }, createSettingsUI: () => { const settingsConfig = [ { title: 'General', key: 'general', settings: [ { id: 'animationsToggle', label: 'Enable Animations', type: 'checkbox', stateKey: 'animationsEnabled', gmKey: 'animationsEnabled' }, { id: 'bottomStripeToggle', label: 'Show Thumbnail Strip', type: 'checkbox', stateKey: 'bottomStripeVisible', gmKey: 'bottomStripeVisible' }, { id: 'autoLoadOriginalsToggle', label: 'Auto-load Original Images', type: 'checkbox', stateKey: 'autoLoadOriginals', gmKey: 'autoLoadOriginals' } ] }, { title: 'Pan & Zoom', key: 'panZoom', settings: [ { id: 'zoomEnabledToggle', label: 'Enable Zoom & Pan', type: 'checkbox', stateKey: 'zoomEnabled', gmKey: 'zoomEnabled' }, { id: 'inertiaEnabledToggle', label: 'Enable Smooth Pan Inertia', type: 'checkbox', stateKey: 'inertiaEnabled', gmKey: 'inertiaEnabled' } ] }, { title: 'Slideshow', key: 'slideshow', settings: [ { id: 'slideshowDelay', label: 'Slideshow Delay (ms):', type: 'text', stateKey: 'slideshowDelay', gmKey: 'slideshowDelay', maxLength: 5, onChange: (value) => { const validDelay = parseInt(value) || CONFIG.SLIDESHOW_DELAY; state.slideshowDelay = validDelay; Slideshow.setDelay(validDelay); } }, { id: 'slideshowPauseOnHover', label: 'Pause on Hover', type: 'checkbox', stateKey: 'slideshowPauseOnHover', gmKey: 'slideshowPauseOnHover' } ] }, { title: 'Button Labels', key: 'buttonLabels', settings: [ { id: 'downloadBtnTextInput', label: 'Download Button:', type: 'text', stateKey: 'downloadBtnText', gmKey: 'downloadBtnText', onChange: updateButtonLabels }, { id: 'downloadAllBtnTextInput', label: 'Download All Button:', type: 'text', stateKey: 'downloadAllBtnText', gmKey: 'downloadAllBtnText', onChange: updateButtonLabels }, { id: 'fullBtnTextInput', label: 'Full Size Button:', type: 'text', stateKey: 'fullBtnText', gmKey: 'fullBtnText', onChange: updateButtonLabels }, { id: 'heightBtnTextInput', label: 'Fill Height Button:', type: 'text', stateKey: 'heightBtnText', gmKey: 'heightBtnText', onChange: updateButtonLabels }, { id: 'widthBtnTextInput', label: 'Fill Width Button:', type: 'text', stateKey: 'widthBtnText', gmKey: 'widthBtnText', onChange: updateButtonLabels }, { id: 'galleryBtnTextInput', label: 'Gallery Button:', type: 'text', stateKey: 'galleryBtnText', gmKey: 'galleryBtnText', onChange: updateButtonLabels } ] }, { title: 'Buttons', key: 'buttonVisibility', settings: [ { id: 'hideNavArrows', label: 'Hide Navigation Arrows', type: 'checkbox', stateKey: 'hideNavArrows', gmKey: 'hideNavArrows', onChange: () => PostActions.updateButtonVisibilityLight() }, { id: 'hideFullBtn', label: 'Hide Full Size Button', type: 'checkbox', stateKey: 'hideFullButton', gmKey: 'hideFullButton', onChange: () => PostActions.updateButtonVisibilityLight() }, { id: 'hideDownloadBtn', label: 'Hide Download Button', type: 'checkbox', stateKey: 'hideDownloadButton', gmKey: 'hideDownloadButton', onChange: () => PostActions.updateButtonVisibilityLight() }, { id: 'hideHeightBtn', label: 'Hide Fill Height Button', type: 'checkbox', stateKey: 'hideHeightButton', gmKey: 'hideHeightButton', onChange: () => PostActions.updateButtonVisibilityLight() }, { id: 'hideWidthBtn', label: 'Hide Fill Width Button', type: 'checkbox', stateKey: 'hideWidthButton', gmKey: 'hideWidthButton', onChange: () => PostActions.updateButtonVisibilityLight() } ] }, { title: 'Keyboard', key: 'keys', settings: [ { id: 'galleryKeyInput', label: 'Gallery Key:', type: 'text', stateKey: 'galleryKey', gmKey: 'galleryKey', maxLength: 1 }, { id: 'prevImageKeyInput', label: 'Previous Image Key:', type: 'text', stateKey: 'prevImageKey', gmKey: 'prevImageKey', maxLength: 1 }, { id: 'nextImageKeyInput', label: 'Next Image Key:', type: 'text', stateKey: 'nextImageKey', gmKey: 'nextImageKey', maxLength: 1 } ] }, { title: 'Notifications', key: 'notifications', settings: [ { id: 'notificationsEnabledToggle', label: 'Enable Notifications', type: 'checkbox', stateKey: 'notificationsEnabled', gmKey: 'notificationsEnabled' }, { id: 'notificationPosition', label: 'Notification Position:', type: 'select', stateKey: 'notificationPosition', gmKey: 'notificationPosition', options: [ { value: 'top', text: 'Top' }, { value: 'bottom', text: 'Bottom' } ] } ] }, { title: 'Downloads', key: 'optimizations', settings: [ { id: 'persistentCachingToggle', label: 'Enable Persistent Image Caching', type: 'checkbox', stateKey: 'enablePersistentCaching', gmKey: 'enablePersistentCaching' }, { id: 'clearCacheButton', label: 'Clear Persistent Cache', type: 'button', action: clearDexieCache }, { id: 'exportSettingsButton', label: 'Export Settings', type: 'button', action: () => { const blob = new Blob([SettingsManager.exportSettings()], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'ultra-galleries-settings.json'; a.click(); URL.revokeObjectURL(url); state.notificationType = 'success'; state.notification = 'Settings exported'; } }, { id: 'importSettingsButton', label: 'Import Settings', type: 'button', action: () => { const input = document.createElement('input'); input.type = 'file'; input.accept = '.json'; input.onchange = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (ev) => SettingsManager.importSettings(ev.target.result); reader.readAsText(file); } }; input.click(); } }, { id: 'resetSettingsButton', label: 'Reset to Defaults', type: 'button', action: () => { const doReset = () => { SettingsManager.resetToDefaults(); location.reload(); }; if (typeof Swal !== 'undefined') { Swal.fire({ title: 'Reset settings?', text: 'All settings will return to defaults.', icon: 'warning', showCancelButton: true, confirmButtonText: 'Reset' }).then(({ isConfirmed }) => { if (isConfirmed) doReset(); }); } else if (confirm('Are you sure you want to reset all settings to defaults?')) { doReset(); } } } ] }, { title: 'File Formatting', key: 'formatting', settings: [ { id: 'zipFileNameFormatInput', label: 'Zip File Name Format:', type: 'text', stateKey: 'zipFileNameFormat', gmKey: 'zipFileNameFormat' }, { id: 'imageFileNameFormatInput', label: 'Image File Name Format:', type: 'text', stateKey: 'imageFileNameFormat', gmKey: 'imageFileNameFormat' } ] } ]; const $overlay = $('<div>') .attr({ id: 'ug-settings-overlay', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'ug-settings-main-header' }) .addClass('ug-settings-overlay'); const $container = $('<div>').addClass('ug-settings-container').appendTo($overlay); const $sidebar = $('<div>').addClass('ug-settings-sidebar').appendTo($container); const $content = $('<div>').addClass('ug-settings-content').appendTo($container); const $header = $('<div>').addClass('ug-settings-header').appendTo($content); const $headerText = $('<h2>').attr('id', 'ug-settings-main-header').appendTo($header); $('<button>') .addClass('ug-settings-close-btn') .text(BUTTONS.CLOSE) .on('click', () => state.settingsOpen = false) .appendTo($header); const $body = $('<div>').addClass('ug-settings-body').appendTo($content); $('<div>').addClass('ug-sidebar-header').text('Settings').appendTo($sidebar); settingsConfig.forEach(section => { const $sectionEl = $('<div>') .addClass('ug-settings-section') .attr('data-section-key', section.key) .hide() .appendTo($body); section.settings.forEach(setting => { $sectionEl.append(UI._createSettingElement(setting)); }); $('<button>') .addClass('ug-sidebar-button') .text(section.title) .data('section-key', section.key) .on('click', function () { const key = $(this).data('section-key'); $('.ug-sidebar-button').removeClass('active'); $(this).addClass('active'); $('.ug-settings-section').hide(); $(`.ug-settings-section[data-section-key="${key}"]`).show(); $headerText.text(section.title); }) .appendTo($sidebar); }); $sidebar.find('.ug-sidebar-button').first().trigger('click'); $('body').append($overlay); }, showSettings: () => { lastFocusedElement = document.activeElement; const existingOverlay = document.getElementById('ug-settings-overlay'); if (existingOverlay) existingOverlay.remove(); UI.createSettingsUI(); const overlay = document.getElementById('ug-settings-overlay'); if (!overlay) return; overlay.classList.add('opening'); const focusable = Array.from(overlay.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' )); const firstFocusable = focusable[0]; const lastFocusable = focusable[focusable.length - 1]; firstFocusable?.focus(); focusTrapListener = (e) => { if (e.key !== 'Tab') return; if (e.shiftKey) { if (document.activeElement === firstFocusable) { lastFocusable.focus(); e.preventDefault(); } } else { if (document.activeElement === lastFocusable) { firstFocusable.focus(); e.preventDefault(); } } }; document.addEventListener('keydown', focusTrapListener); }, closeSettings: () => { if (focusTrapListener) { document.removeEventListener('keydown', focusTrapListener); focusTrapListener = null; } const overlay = document.getElementById('ug-settings-overlay'); if (overlay) { overlay.classList.remove('opening'); setTimeout(() => { overlay.remove(); lastFocusedElement?.focus(); }, 300); } } }; const Gallery = { _preloadedImageCache: {}, _preloadingInProgress: {}, _clearPreloadCache: function () { for (const index in Gallery._preloadedImageCache) { const cachedItem = Gallery._preloadedImageCache[index]; if (typeof cachedItem === 'string' && cachedItem.startsWith('blob:')) { BlobManager.revokeUrl(cachedItem); } } Gallery._preloadedImageCache = {}; Gallery._preloadingInProgress = {}; }, _fetchAndCacheImage: async function (indexToPreload, sessionId = null) { if (indexToPreload < 0 || indexToPreload >= state.originalImageSrcs.length) return; if (Gallery._preloadedImageCache[indexToPreload] || Gallery._preloadingInProgress[indexToPreload]) return; const mediaItem = state.originalImageSrcs[indexToPreload]; if (!mediaItem || mediaItem.type !== 'image') return; if (sessionId !== null && state.currentLoadSessionId !== sessionId) return; const originalImageUrl = mediaItem.src; if (!originalImageUrl) return; Gallery._preloadingInProgress[indexToPreload] = true; try { const blob = await ImageLoader.fetchWithRetry(originalImageUrl, sessionId); if (blob) { Gallery._preloadedImageCache[indexToPreload] = BlobManager.createUrl(blob); } } catch (error) { console.error(`Preload failed for ${indexToPreload}`, error); } finally { delete Gallery._preloadingInProgress[indexToPreload]; } }, _preloadAdjacentImages: function (currentIndex) { const sessionId = state.currentLoadSessionId; const maxKeep = CONFIG.PRELOAD_COUNT + CONFIG.PRELOAD_WINDOW_BUFFER; for (const indexStr in Gallery._preloadedImageCache) { const index = parseInt(indexStr); if (Math.abs(index - currentIndex) > maxKeep) { if (typeof Gallery._preloadedImageCache[indexStr] === 'string') { BlobManager.revokeUrl(Gallery._preloadedImageCache[indexStr]); } delete Gallery._preloadedImageCache[indexStr]; } } for (let i = 1; i <= CONFIG.PRELOAD_COUNT; i++) { Gallery._fetchAndCacheImage(currentIndex + i, sessionId); } Gallery._fetchAndCacheImage(currentIndex - 1, sessionId); }, _createGalleryOverlayAndContainer: function () { galleryOverlay = $('<div>') .attr('id', 'gallery-overlay') .addClass(CSS.GALLERY.OVERLAY); return $('<div>') .addClass(CSS.GALLERY.CONTAINER) .appendTo(galleryOverlay); }, _createExpandedViewToolbar: function ($expandedViewElement) { const $toolbar = $('<div>') .addClass(CSS.GALLERY.TOOLBAR) .on('mousedown', e => e.stopPropagation()); $('<button>') .attr({ id: 'reset-btn', title: 'Reset Zoom & Position' }) .addClass(CSS.GALLERY.TOOLBAR_BTN) .text('Reset') .on('click', Zoom.resetZoom) .appendTo($toolbar); const $zoomControls = $('<div>').addClass('zoom-controls').appendTo($toolbar); $('<button>') .attr({ id: 'zoom-out-btn', title: 'Zoom Out' }) .addClass(CSS.GALLERY.TOOLBAR_BTN) .html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="8" y1="11" x2="14" y2="11"></line><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') .on('click', () => Zoom.zoom(-CONFIG.ZOOM_STEP)) .appendTo($zoomControls); $('<span>') .attr('id', 'zoom-level') .addClass('zoom-level') .text('100%') .appendTo($zoomControls); $('<button>') .attr({ id: 'zoom-in-btn', title: 'Zoom In' }) .addClass(CSS.GALLERY.TOOLBAR_BTN) .html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') .on('click', () => Zoom.zoom(CONFIG.ZOOM_STEP)) .appendTo($zoomControls); $('<button>') .attr({ id: 'slideshow-btn', title: 'Start Slideshow' }) .addClass(CSS.GALLERY.TOOLBAR_BTN) .html('▶') .on('click', Slideshow.toggle) .appendTo($toolbar); $('<button>') .attr({ id: 'ug-fill-height-btn', 'aria-label': 'Fill Height' }) .text(BUTTONS.HEIGHT) .addClass(CSS.GALLERY.TOOLBAR_BTN) .on('click', () => { const $container = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); const $media = $container.find('img, video'); if ($media.length) ImageSizing.applyFillHeight($media[0]); }) .appendTo($toolbar); $('<button>') .text(BUTTONS.FULLSCREEN) .addClass(CSS.GALLERY.FULLSCREEN) .addClass(CSS.GALLERY.TOOLBAR_BTN) .attr('aria-label', 'Toggle Fullscreen') .on('click', Gallery.toggleFullscreen) .appendTo($toolbar); $expandedViewElement.append($toolbar); $expandedViewElement.append( $('<button>') .addClass('ug-gallery-close-button') .attr('aria-label', 'Close Gallery') .html(BUTTONS.CLOSE) .on('click', Gallery.closeGallery) ); }, _createExpandedViewMainImageArea: function ($expandedViewElement) { const $zoomContainer = $('<div>') .addClass(CSS.GALLERY.ZOOM_CONTAINER) .appendTo($expandedViewElement); $('<div>') .addClass('ug-ambient-background') .appendTo($zoomContainer); const $mainImageContainer = $('<div>') .addClass(CSS.GALLERY.MAIN_IMG_CONTAINER) .addClass('image-container') .appendTo($zoomContainer); const $panIndicator = $('<div>') .addClass('pan-indicator') .appendTo($mainImageContainer); $panIndicator.append( $('<svg>').attr({ xmlns: 'http://www.w3.org/2000/svg', width: '30', height: '30', viewBox: '0 0 24 24', fill: 'white', opacity: '0.7' }).html('<path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>') ); return { $mainImageContainer }; }, _createExpandedViewNavigationAndCounter: function ($expandedViewElement) { const $navContainer = $('<div>') .addClass(CSS.GALLERY.NAV_CONTAINER) .on('mousedown', e => e.stopPropagation()); if (!state.hideNavArrows) { $navContainer.append( UI.createNavigationButton('prev'), UI.createNavigationButton('next') ); } $expandedViewElement.append($navContainer); $('<div>') .addClass(CSS.GALLERY.COUNTER) .addClass(CSS.GALLERY.HIDE) .appendTo($expandedViewElement); }, _createExpandedViewThumbnailStrip: function ($expandedViewElement) { const $thumbnailStripContainer = $('<div>') .addClass(CSS.GALLERY.STRIP_CONTAINER) .css('display', state.bottomStripeVisible ? 'flex' : 'none') .on('mousedown', e => e.stopPropagation()) .appendTo($expandedViewElement); return $('<div>') .addClass(CSS.GALLERY.THUMBNAIL_STRIP) .appendTo($thumbnailStripContainer); }, _populateAllThumbnails: function ($stripThumbnailsContainer) { $stripThumbnailsContainer.empty(); const stripFragment = document.createDocumentFragment(); state.fullSizeImageSrcs.forEach((mediaItem, index) => { if (!mediaItem) return; const thumbSrc = mediaItem.type === 'video' ? mediaItem.poster : mediaItem.src; const $stripContainer = $('<div>') .addClass(CSS.GALLERY.THUMBNAIL_WRAPPER); if (mediaItem.type === 'video') { $stripContainer.append( $('<div>') .addClass('ug-play-icon') .html('<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>') ); } $stripContainer.append( $('<img>') .attr({ src: thumbSrc, loading: 'lazy' }) .addClass(CSS.GALLERY.THUMBNAIL) ); $stripContainer .data('index', index) .on('click', () => Gallery.showExpandedView(index)) .attr({ 'aria-label': `Thumbnail ${index + 1}`, tabindex: 0, role: 'button' }); stripFragment.appendChild($stripContainer[0]); }); $stripThumbnailsContainer[0].appendChild(stripFragment); }, _setupGalleryInteractions: function ($expandedViewElement, $mainImageContainerElement) { $mainImageContainerElement.on('wheel', e => { const currentItem = state.fullSizeImageSrcs[state.currentGalleryIndex]; if (currentItem && currentItem.type === 'image') Zoom.handleWheelZoom(e); }); $expandedViewElement.on('mousedown', e => { const currentItem = state.fullSizeImageSrcs[state.currentGalleryIndex]; if (currentItem && currentItem.type === 'image') { if ( $(e.target).closest( `.${CSS.GALLERY.TOOLBAR}, .${CSS.GALLERY.NAV_CONTAINER}, .${CSS.GALLERY.STRIP_CONTAINER}` ).length || e.button === 2 ) { return; } DragHandler.startDrag(e); } }); $mainImageContainerElement.on('dblclick', e => { const currentItem = state.fullSizeImageSrcs[state.currentGalleryIndex]; if (currentItem && currentItem.type === 'image' && e.button === 0) { if (viewState.zoomScale > 1) { Zoom.resetZoom(); } else { const rect = $mainImageContainerElement[0].getBoundingClientRect(); const clickX = e.clientX - rect.left; const clickY = e.clientY - rect.top; viewState.zoomOrigin = { x: clickX, y: clickY }; const newScale = 2.5; const imageX = (clickX - viewState.imageOffset.x) / viewState.zoomScale; const imageY = (clickY - viewState.imageOffset.y) / viewState.zoomScale; const newOffsetX = clickX - (imageX * newScale); const newOffsetY = clickY - (imageY * newScale); const mainImageDOM = $mainImageContainerElement.find(`.${CSS.GALLERY.MAIN_IMG}`)[0]; if (!mainImageDOM) return; const boundedOffset = ZoomHelper.calculateHardBoundaryOffsets( newOffsetX, newOffsetY, newScale, rect, mainImageDOM ); Zoom._applyTransition($mainImageContainerElement, () => { viewState.imageOffset.x = boundedOffset.x; viewState.imageOffset.y = boundedOffset.y; viewState.zoomScale = newScale; Zoom.applyZoom(); }); } } }); let controlsTimeout; $expandedViewElement.on('mousemove', () => { state.controlsVisible = true; clearTimeout(controlsTimeout); controlsTimeout = setTimeout(() => { if (!state.isDragging && !viewState.pinchZoomActive) { state.controlsVisible = false; } }, CONFIG.CONTROLS_HIDE_DELAY); }); state.controlsVisible = true; clearTimeout(controlsTimeout); controlsTimeout = setTimeout(() => { if (!state.isDragging && !viewState.pinchZoomActive) { state.controlsVisible = false; } }, CONFIG.CONTROLS_HIDE_DELAY); Zoom.setupTouchEvents(); $(document).on('mousemove.galleryDrag', DragHandler.dragImage); $(document).on('mouseup.galleryDrag', DragHandler.endDrag); }, createGallery: function () { if (galleryOverlay && galleryOverlay.length) { Gallery.showExpandedView(0); state.isGalleryMode = true; return; } const fragment = document.createDocumentFragment(); const $galleryContentContainer = Gallery._createGalleryOverlayAndContainer(); const $expandedView = $('<div>') .addClass(CSS.GALLERY.EXPANDED_VIEW) .addClass(CSS.GALLERY.HIDE) .appendTo($galleryContentContainer); Gallery._createExpandedViewToolbar($expandedView); const { $mainImageContainer } = Gallery._createExpandedViewMainImageArea($expandedView); Gallery._createExpandedViewNavigationAndCounter($expandedView); const $stripThumbnailsContainer = Gallery._createExpandedViewThumbnailStrip($expandedView); fragment.appendChild(galleryOverlay[0]); document.body.appendChild(fragment); if (state.isFullscreen) { document.body.classList.add('ug-fullscreen'); galleryOverlay.addClass(CSS.GALLERY.FULLSCREEN_OVERLAY); } Gallery._populateAllThumbnails($stripThumbnailsContainer); Gallery._setupGalleryInteractions($expandedView, $mainImageContainer); Gallery.showExpandedView(0); state.isGalleryMode = true; Accessibility.init(); }, showExpandedView: function (index) { if (!galleryOverlay || !galleryOverlay.length || index < 0) return; let mediaItem = state.fullSizeImageSrcs[index]; if (!mediaItem && state.originalImageSrcs[index]) { mediaItem = state.originalImageSrcs[index]; } const $mainMediaContainer = galleryOverlay.find(`.${CSS.GALLERY.MAIN_IMG_CONTAINER}`); const $ambientBackground = galleryOverlay.find('.ug-ambient-background'); const $counter = galleryOverlay.find(`.${CSS.GALLERY.COUNTER}`); const $zoomControls = galleryOverlay.find('.zoom-controls'); const $resetBtn = galleryOverlay.find('#reset-btn'); const $fillHeightBtn = galleryOverlay.find('#ug-fill-height-btn'); if (!$mainMediaContainer.length) return; state.currentGalleryIndex = index; if (!mediaItem || !mediaItem.src) { $mainMediaContainer.empty().append( $('<div>').addClass(CSS.GALLERY.IMAGE_ERROR_MSG).text('Loading media data...') ); galleryOverlay.find(`.${CSS.GALLERY.EXPANDED_VIEW}`).removeClass(CSS.GALLERY.HIDE); return; } $mainMediaContainer.empty().removeClass(CSS.GALLERY.ZOOMED); DragHandler.cachedImgEl = null; DragHandler.cachedZoomEl = null; Zoom.resetZoom(); if (mediaItem.type === 'image' || !mediaItem.type) { $zoomControls.show(); $resetBtn.show(); $fillHeightBtn.hide(); const imageUrlToLoad = Gallery._preloadedImageCache[index] || mediaItem.src; if ($ambientBackground.length) { $ambientBackground.css('background-image', `url("${imageUrlToLoad}")`); } const $mainImage = $('<img>') .addClass(CSS.GALLERY.MAIN_IMG) .on('dragstart', e => e.preventDefault()) .appendTo($mainMediaContainer); $mainImage.on('load', function () { $(this).css('opacity', 1); this.style.transformOrigin = '0 0'; ImageSizing.applyBestFit(this); DragHandler.cachedImgEl = this; DragHandler.cachedZoomEl = document.getElementById('zoom-level'); viewState.zoomScale = 1; viewState.imageOffset = { x: 0, y: 0 }; Zoom.applyZoom(); Gallery._preloadAdjacentImages(index); }).on('error', function () { if (imageUrlToLoad !== mediaItem.src && !this.dataset.ugRetried) { this.dataset.ugRetried = 'true'; this.src = mediaItem.src; return; } $mainMediaContainer.append( $('<div>').addClass(CSS.GALLERY.IMAGE_ERROR_MSG).text('Failed to load image') ); }); $mainImage.attr('src', imageUrlToLoad); } else if (mediaItem.type === 'video') { $zoomControls.hide(); $resetBtn.hide(); $fillHeightBtn.show(); const $mainVideo = $('<video>') .addClass(CSS.GALLERY.MAIN_VIDEO) .attr({ src: mediaItem.src, poster: mediaItem.poster, controls: true, loop: true }) .on('dragstart', e => e.preventDefault()) .appendTo($mainMediaContainer); $mainVideo.on('loadedmetadata', function () { this.style.transformOrigin = '0 0'; ImageSizing.applyBestFit(this); DragHandler.cachedImgEl = this; DragHandler.cachedZoomEl = document.getElementById('zoom-level'); }); } $counter .text(`${index + 1} / ${state.fullSizeImageSrcs.length}`) .removeClass(CSS.GALLERY.HIDE); galleryOverlay.find(`.${CSS.GALLERY.EXPANDED_VIEW}`).removeClass(CSS.GALLERY.HIDE); const $strip = galleryOverlay.find(`.${CSS.GALLERY.THUMBNAIL_STRIP}`); $strip.find('.selected').removeClass('selected'); const $activeThumb = $strip.find(`[data-index="${index}"]`).addClass('selected'); if ($activeThumb.length) { $strip.animate({ scrollLeft: $activeThumb.position().left + $strip.scrollLeft() - ($strip.width() / 2) }, 200); } setTimeout(() => { ThumbnailStrip.init(); ThumbnailStrip.updateThumbnailNumbers(); ThumbnailStrip.updateScrollIndicators(); }, 100); }, closeGallery: function () { if (!galleryOverlay || !galleryOverlay.length) { state.isGalleryMode = false; state.isFullscreen = false; Slideshow.stop(); $(document).off('.galleryDrag'); ThumbnailStrip.cleanup(); return; } state.isGalleryMode = false; state.isFullscreen = false; Slideshow.stop(); Gallery._clearPreloadCache(); ThumbnailStrip.cleanup(); if (DragHandler.inertiaAnimation) { cancelAnimationFrame(DragHandler.inertiaAnimation); DragHandler.inertiaAnimation = null; } if (DragHandler.animationFrame) { cancelAnimationFrame(DragHandler.animationFrame); DragHandler.animationFrame = null; } galleryOverlay.remove(); galleryOverlay = null; DragHandler.cachedImgEl = null; DragHandler.cachedZoomEl = null; $(document).off('.galleryDrag'); }, toggleGallery: function () { if (state.isGalleryMode) { Gallery.closeGallery(); } else { if (state.galleryReady && state.fullSizeImageSrcs.length > 0) { Gallery.createGallery(); } else { if (Utils.isPostPage()) { ImageLoader.loadImages(); state.notificationType = 'info'; state.notification = 'Refreshing gallery list...'; } else { state.notificationType = 'warning'; state.notification = 'No post page detected.'; } } } }, toggleFullscreen: function () { state.isFullscreen = !state.isFullscreen; }, nextImage: function () { if (state.fullSizeImageSrcs.length === 0) return; Gallery.showExpandedView((state.currentGalleryIndex + 1) % state.fullSizeImageSrcs.length); }, prevImage: function () { if (state.fullSizeImageSrcs.length === 0) return; Gallery.showExpandedView( (state.currentGalleryIndex - 1 + state.fullSizeImageSrcs.length) % state.fullSizeImageSrcs.length ); } }; const ImageLoader = { imageActions: ImageActionHandler.imageActions, simulateScrollDown: async () => { return new Promise(resolve => { const selectors = [ SELECTORS.IMAGE_LINK + ' img', SELECTORS.MAIN_THUMBNAIL + ' img', '.post__content img', '.post__body img' ]; const images = document.querySelectorAll(selectors.join(', ')); if (images.length === 0) { resolve(); return; } let loadedCount = 0; const checkAllLoaded = () => { loadedCount++; if (loadedCount >= images.length) { clearTimeout(timeout); observer.disconnect(); resolve(); } }; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { observer.unobserve(entry.target); checkAllLoaded(); } }); }); images.forEach(img => observer.observe(img)); const dynamicTimeout = Math.max(CONFIG.SCROLL_SIMULATION_BASE_TIMEOUT, images.length * 200); const timeout = setTimeout(() => { observer.disconnect(); resolve(); }, dynamicTimeout); }); }, fetchWithRetry: async (url, sessionId, retries = CONFIG.MAX_RETRIES, delay = CONFIG.RETRY_DELAY) => { if (state.currentLoadSessionId !== sessionId) return null; try { if (state.enablePersistentCaching && db) { const cachedBlob = await getImageFromDexie(url); if (cachedBlob) return cachedBlob; } return await new Promise((resolve, reject) => { if (state.currentLoadSessionId !== sessionId) { reject(new Error('Stale session')); } GM.xmlHttpRequest({ method: 'GET', url: url, responseType: 'blob', timeout: 120000, onload: async (response) => { if (response.status === 200 || response.status === 206) { const blob = response.response; if (state.enablePersistentCaching && db) { await storeImageInDexie(url, blob); } resolve(blob); } else { const err = new Error(`HTTP ${response.status}`); err.status = response.status; reject(err); } }, onerror: (error) => reject(error), ontimeout: () => reject(new Error('Request timeout')) }); }); } catch (err) { if (err.message === 'Stale session') throw err; if (err.status && err.status >= 400 && err.status < 500 && err.status !== 429) throw err; if (retries <= 0) throw err; await Utils.delay(delay); return ImageLoader.fetchWithRetry(url, sessionId, retries - 1, delay * 1.5); } }, fetchBlobDirect: async (url, retries = CONFIG.MAX_RETRIES, delay = CONFIG.RETRY_DELAY) => { try { if (state.enablePersistentCaching && db) { const cachedBlob = await getImageFromDexie(url); if (cachedBlob) return cachedBlob; } return await new Promise((resolve, reject) => { GM.xmlHttpRequest({ method: 'GET', url: url, responseType: 'blob', timeout: 120000, onload: async (response) => { if (response.status === 200 || response.status === 206) { const blob = response.response; if (state.enablePersistentCaching && db) { await storeImageInDexie(url, blob); } resolve(blob); } else { const err = new Error(`HTTP ${response.status}`); err.status = response.status; reject(err); } }, onerror: (error) => reject(error), ontimeout: () => reject(new Error('Request timeout')) }); }); } catch (err) { if (err.status && err.status >= 400 && err.status < 500 && err.status !== 429) throw err; if (retries <= 0) throw err; await Utils.delay(delay); return ImageLoader.fetchBlobDirect(url, retries - 1, delay * 1.5); } }, loadImageAndApplyToPage: async (linkElement, galleryIndex, posterHref, isUniqueForGallery, sessionId, itemData) => { const imgElement = linkElement.querySelector('img') || linkElement; if (!imgElement) { if (state.currentLoadSessionId === sessionId) state.loadedImages++; return; } if (imgElement.tagName === 'IMG' && !imgElement.classList.contains('post__image')) { imgElement.classList.add('post__image'); } const cacheKey = itemData.originalUrl; let blobUrlToUse = loadedBlobUrls.get(posterHref); try { if (!blobUrlToUse) { if (itemData.type === 'video') { const posterBlob = await ImageLoader.fetchWithRetry(posterHref, sessionId); if (state.currentLoadSessionId !== sessionId) return; if (!posterBlob) throw new Error('Failed to fetch poster blob'); blobUrlToUse = BlobManager.createUrl(posterBlob); } else { let blob = await ImageLoader.fetchWithRetry(cacheKey, sessionId); if (state.currentLoadSessionId !== sessionId) return; if (!blob) throw new Error('Failed to fetch blob'); blobUrlToUse = BlobManager.createUrl(blob); } loadedBlobUrls.set(posterHref, blobUrlToUse); } if (state.currentLoadSessionId !== sessionId) return; if (imgElement.tagName === 'IMG') { imgElement.src = blobUrlToUse; imgElement.dataset.originalSrc = cacheKey; imgElement.classList.add('ug-image-loaded'); imgElement.style.cursor = 'default'; const parentLink = imgElement.closest('a'); if (parentLink) parentLink.style.cursor = 'default'; ImageLoader.imageActions[state.currentResizeMode](imgElement); } if (isUniqueForGallery) { state.fullSizeImageSrcs[galleryIndex] = itemData.type === 'video' ? { type: 'video', src: cacheKey, poster: blobUrlToUse } : { type: 'image', src: cacheKey, originalSrc: cacheKey }; state.originalImageSrcs[galleryIndex] = { src: cacheKey, type: itemData.type, fileName: linkElement.getAttribute('download') || cacheKey.split('/').pop() }; } state.loadedImages++; } catch (error) { ErrorHandler.handleImageError( error, cacheKey, imgElement.tagName === 'IMG' ? imgElement : null, { linkElement, galleryIndex, posterHref, isUniqueForGallery, itemData } ); if (state.currentLoadSessionId === sessionId) { state.loadedImages++; state.errorCount++; } } }, collectUniqueMediaItems: (postContainer) => { const uniqueGalleryItems = new Map(); const targets = postContainer.querySelectorAll( `${SELECTORS.IMAGE_LINK}, ${SELECTORS.ATTACHMENT_LINK}, ${SELECTORS.VIDEO_LINK}, ${SELECTORS.GENERIC_IMAGE_LINK}` ); targets.forEach(linkElement => { if ( linkElement.closest('.post__user-profile') || linkElement.closest('.scrape__user-profile') ) { return; } if (linkElement.classList.contains('user-header__avatar')) return; const isVideo = linkElement.matches(SELECTORS.VIDEO_LINK) || linkElement.href?.match(/\.(mp4|webm|mov)$/i); let url; let poster; let type = 'image'; if (isVideo) { type = 'video'; url = linkElement.getAttribute('href')?.split('?')[0]; poster = linkElement.querySelector('img, video')?.getAttribute('poster') || (linkElement.querySelector('img')?.getAttribute('data-src') || linkElement.querySelector('img')?.src); if (!url) return; if (!poster) poster = 'https://pawchive.pw/static/menu/recent.svg'; if (!uniqueGalleryItems.has(url)) { uniqueGalleryItems.set(url, { linkElement, originalUrl: url, posterUrl: poster, type: 'video', fileName: linkElement.getAttribute('download') || url.split('/').pop() }); } } else { url = Utils.handleMediaSrc(linkElement); if (!url && linkElement.href) { url = linkElement.href.split('?')[0]; } if (!url || !/\.(jpe?g|png|gif|webp|bmp)$/i.test(url)) return; if (!uniqueGalleryItems.has(url)) { uniqueGalleryItems.set(url, { linkElement, originalUrl: url, posterUrl: url, type: 'image', fileName: linkElement.getAttribute('download') || url.split('/').pop() }); } } }); postContainer.querySelectorAll('video').forEach(videoEl => { let url = videoEl.getAttribute('src') || videoEl.querySelector('source')?.getAttribute('src'); if (url) { url = url.split('?')[0]; if (!uniqueGalleryItems.has(url)) { let poster = videoEl.getAttribute('poster') || 'https://pawchive.pw/static/menu/recent.svg'; uniqueGalleryItems.set(url, { linkElement: videoEl, originalUrl: url, posterUrl: poster, type: 'video', fileName: url.split('/').pop() }); } } }); return uniqueGalleryItems; }, _concurrentRunner: (items, sessionId) => { const concurrencyLimit = CONFIG.MAX_CONCURRENT_FETCHES; const tasks = items.map((item, index) => () => ImageLoader.loadImageAndApplyToPage( item.linkElement, index, item.posterUrl, true, sessionId, item )); return new Promise((resolve) => { let running = 0; let index = 0; const total = tasks.length; if (total === 0) { resolve(); return; } const next = () => { if (state.currentLoadSessionId !== sessionId) { resolve(); return; } if (index >= total) { if (running === 0) resolve(); return; } const task = tasks[index++]; running++; task() .then(() => { running--; next(); }) .catch(() => { running--; next(); }); }; for (let i = 0; i < concurrencyLimit && i < total; i++) { next(); } }); }, loadImages: async () => { const postContainer = document.querySelector('section.site-section--post') || document.querySelector('section.site-section--scrape') || document.querySelector('.post__body') || document.querySelector('.post__content') || document; if (!Utils.isPostPage() || state.isLoading) return; const sessionId = StateManager.generateSessionId(); state.currentLoadSessionId = sessionId; try { state.isLoading = true; await Utils.delay(16); if (state.currentLoadSessionId !== sessionId) return; const previousBlobUrls = new Map(loadedBlobUrls); loadedBlobUrls.clear(); Object.assign(state, { fullSizeImageSrcs: [], originalImageSrcs: [], loadedImages: 0, errorCount: 0 }); const uniqueGalleryItems = ImageLoader.collectUniqueMediaItems(postContainer); if (state.currentLoadSessionId !== sessionId) return; const uniqueItems = Array.from(uniqueGalleryItems.values()); state.totalImages = uniqueItems.length; state.fullSizeImageSrcs = Array(uniqueItems.length).fill(null); state.originalImageSrcs = Array(uniqueItems.length).fill(null); uniqueItems.forEach((item, index) => { if (item.type === 'video') { state.fullSizeImageSrcs[index] = { type: 'video', src: item.originalUrl, poster: item.posterUrl }; } else { state.fullSizeImageSrcs[index] = { type: 'image', src: item.originalUrl, originalSrc: item.originalUrl }; } state.originalImageSrcs[index] = { src: item.originalUrl, type: item.type, fileName: item.fileName }; }); state.galleryReady = true; updateGalleryButton(true); if (state.autoLoadOriginals) { await ImageLoader.simulateScrollDown(); Utils.ensureThumbnailsExist(); await ImageLoader._concurrentRunner(uniqueItems, sessionId); if (state.currentLoadSessionId !== sessionId) return; previousBlobUrls.forEach((url, key) => { if (loadedBlobUrls.has(key)) BlobManager.revokeUrl(url); }); ImageLoader.updateFinalStatus(); ImageActionHandler.applyDefaultSizingToLoadedImages(); } else { state.notificationType = 'success'; state.notification = `Gallery Ready (${state.totalImages} items).`; } state.isLoading = false; } catch (error) { console.error('Critical Error in ImageLoader.loadImages:', error); state.isLoading = false; state.galleryReady = true; updateGalleryButton(true); } }, updateFinalStatus: () => { if (state.loadedImages >= state.totalImages && state.totalImages > 0) { if (state.errorCount === 0) { state.notificationType = 'success'; state.notification = `Media Done Loading! Total: ${state.totalImages}`; } else { state.notificationType = 'warning'; state.notification = `Gallery: Loaded with ${state.errorCount} error(s).`; } } else if (state.totalImages === 0) { state.notificationType = 'info'; state.notification = 'No gallery images found.'; } } }; const DownloadManager = { _worker: null, _workerUrl: null, _pendingVideoPromises: [], _getPostMeta: () => ({ title: document.querySelector(SELECTORS.POST_TITLE)?.textContent?.trim() || 'Untitled', artistName: document.querySelector(SELECTORS.POST_USER_NAME)?.textContent?.trim() || 'Unknown Artist', datePublished: Utils.getPostDate('published'), dateEdited: Utils.getPostDate('edited'), dateImported: Utils.getPostDate('imported') }), _buildFileName: (item, index) => { const meta = DownloadManager._getPostMeta(); const extMatch = item.fileName.match(/\.([a-z0-9]+)$/i); const correctExt = extMatch ? extMatch[1].toLowerCase() : (item.type === 'video' ? 'mp4' : 'jpg'); const fileNameWithoutExt = item.fileName.replace(/\.[^/.]+$/, ''); let formattedName = state.imageFileNameFormat .replace(/{date_published}/gi, meta.datePublished) .replace(/{date_edited}/gi, meta.dateEdited) .replace(/{date_imported}/gi, meta.dateImported) .replace(/{date}/gi, meta.datePublished) .replace('{title}', Utils.sanitizeFileName(meta.title)) .replace('{artistName}', Utils.sanitizeFileName(meta.artistName)) .replace('{fileName}', Utils.sanitizeFileName(fileNameWithoutExt)) .replace('{index}', index + 1); if (!formattedName.toLowerCase().endsWith(`.${correctExt}`)) { formattedName += `.${correctExt}`; } return Utils.sanitizeFileName(formattedName); }, downloadVideo: (url, name) => new Promise(resolve => { if (typeof GM_download !== 'function') { resolve(false); return; } try { GM_download({ url, name, onload: () => resolve(true), onerror: () => resolve(false), ontimeout: () => resolve(false) }); } catch (e) { console.error('GM_download failed:', e); resolve(false); } }), downloadAllImages: async () => { if (state.isDownloading) { if (typeof Swal !== 'undefined') { Swal.fire('Download in Progress', 'A download is already running.', 'info'); } else { alert('A download is already running.'); } return; } const meta = DownloadManager._getPostMeta(); const indexedItems = state.originalImageSrcs .map((item, index) => ({ item, index })) .filter(x => x.item && x.item.src); const imageEntries = indexedItems.filter(x => x.item.type !== 'video'); const videoEntries = indexedItems.filter(x => x.item.type === 'video'); if (indexedItems.length === 0) { state.notificationType = 'warning'; state.notification = 'No media found to download.'; return; } let confirmed = true; if (typeof Swal !== 'undefined') { const result = await Swal.fire({ title: 'Download All?', text: `Create ZIP from ${imageEntries.length} image(s)? (${videoEntries.length} video(s) will be downloaded individually)`, icon: 'question', showCancelButton: true, confirmButtonText: 'Create ZIP', cancelButtonText: 'Cancel' }); confirmed = result.isConfirmed; } else { confirmed = confirm( `Create ZIP from ${imageEntries.length} image(s)? (${videoEntries.length} video(s) will be downloaded individually)` ); } if (!confirmed) return; state.isDownloading = true; state.notificationType = 'info'; state.notification = 'Starting download...'; if (imageEntries.length === 0) { state.notification = `Downloading ${videoEntries.length} video(s)...`; const results = await Promise.allSettled( videoEntries.map(x => DownloadManager.downloadVideo( x.item.src, DownloadManager._buildFileName(x.item, x.index) )) ); const ok = results.filter(r => r.status === 'fulfilled' && r.value === true).length; state.notification = `Video downloads finished (${ok}/${videoEntries.length} succeeded).`; state.notificationType = ok > 0 ? 'success' : 'warning'; state.isDownloading = false; return; } DownloadManager._pendingVideoPromises = videoEntries.map(x => DownloadManager.downloadVideo( x.item.src, DownloadManager._buildFileName(x.item, x.index) ) ); const notifyProgress = Utils.throttle((message) => { state.notificationType = 'info'; state.notification = message; }, CONFIG.PROGRESS_NOTIFY_INTERVAL); const workerCode = ` self.usedNames = new Set(); self.onmessage = async (e) => { const { type, data } = e.data; if (type === 'init') { importScripts(data.jszipUrl); self.zip = new self.JSZip(); self.filesAdded = 0; self.totalFiles = data.totalFiles; self.usedNames = new Set(); } else if (type === 'addFile') { let { blob, name } = data; let finalName = name; let counter = 1; const dotIndex = name.lastIndexOf('.'); const baseName = dotIndex > -1 ? name.substring(0, dotIndex) : name; const ext = dotIndex > -1 ? name.substring(dotIndex) : ''; while (self.usedNames.has(finalName)) { finalName = \`\${baseName}_\${counter}\${ext}\`; counter++; } self.usedNames.add(finalName); self.zip.file(finalName, blob); self.filesAdded++; self.postMessage({ type: 'progress', message: \`Added \${self.filesAdded}/\${self.totalFiles}\` }); } else if (type === 'generate') { self.postMessage({ type: 'progress', message: 'Bundling files... this may take a moment.' }); try { const zipBlob = await self.zip.generateAsync( { type: 'blob', compression: "STORE" }, (meta) => { self.postMessage({ type: 'progress', message: \`Bundling... \${Math.round(meta.percent)}%\` }); } ); self.postMessage({ type: 'complete', zipBlob: zipBlob }); } catch (err) { self.postMessage({ type: 'error', message: err.message }); } } }; `; const workerBlob = new Blob([workerCode], { type: 'application/javascript' }); DownloadManager._workerUrl = URL.createObjectURL(workerBlob); DownloadManager._worker = new Worker(DownloadManager._workerUrl); DownloadManager._worker.onmessage = (e) => { const { type, message, zipBlob } = e.data; if (type === 'progress') { notifyProgress(message); } else if (type === 'complete') { const sanitizedTitle = Utils.sanitizeFileName(meta.title); const sanitizedArtistName = Utils.sanitizeFileName(meta.artistName); let zipFileName = state.zipFileNameFormat .replace(/{date_published}/gi, meta.datePublished) .replace(/{date_edited}/gi, meta.dateEdited) .replace(/{date_imported}/gi, meta.dateImported) .replace(/{date}/gi, meta.datePublished) .replace('{artistName}', sanitizedArtistName) .replace('{title}', sanitizedTitle); if (!zipFileName.toLowerCase().endsWith('.zip')) { zipFileName += '.zip'; } saveAs(zipBlob, zipFileName); const videoPromises = DownloadManager._pendingVideoPromises || []; Promise.allSettled(videoPromises).then(results => { const ok = results.filter(r => r.status === 'fulfilled' && r.value === true).length; if (videoPromises.length > 0) { state.notification = `ZIP complete! Videos: ${ok}/${videoPromises.length} downloaded.`; } else { state.notification = 'Download complete!'; } state.notificationType = 'success'; DownloadManager.cleanupWorker(); }); } else if (type === 'error') { state.notificationType = 'error'; state.notification = `Download failed: ${message}`; DownloadManager.cleanupWorker(); } }; DownloadManager._worker.postMessage({ type: 'init', data: { jszipUrl: 'https://unpkg.com/[email protected]/dist/jszip.min.js', totalFiles: imageEntries.length } }); const streamFiles = async () => { let index = 0; let running = 0; const concurrencyLimit = CONFIG.MAX_CONCURRENT_FETCHES; return new Promise((resolve) => { const next = () => { if (!state.isDownloading || index >= imageEntries.length) { if (running === 0) resolve(); return; } while (running < concurrencyLimit && index < imageEntries.length) { const entry = imageEntries[index++]; running++; (async () => { try { const pathInZip = DownloadManager._buildFileName(entry.item, entry.index); let blob = await getImageFromDexie(entry.item.src); if (!blob) blob = await ImageLoader.fetchBlobDirect(entry.item.src); if (blob && state.isDownloading && DownloadManager._worker) { DownloadManager._worker.postMessage({ type: 'addFile', data: { blob, name: pathInZip } }); } } catch (e) { console.warn(`Skipping ${entry.item.src}`, e); } finally { running--; next(); } })(); } }; next(); }).then(() => { if (state.isDownloading && DownloadManager._worker) { DownloadManager._worker.postMessage({ type: 'generate' }); } }); }; streamFiles(); }, downloadImageByIndex: async (index) => { const item = state.originalImageSrcs[index]; if (!item || !item.src) { state.notificationType = 'warning'; state.notification = 'No media found at this index.'; return; } const formattedName = DownloadManager._buildFileName(item, index); if (item.type === 'video') { state.notificationType = 'info'; state.notification = 'Starting video download...'; const ok = await DownloadManager.downloadVideo(item.src, formattedName); state.notification = ok ? 'Video download complete' : 'Video download failed'; state.notificationType = ok ? 'success' : 'error'; } else { try { let blob = await getImageFromDexie(item.src); if (!blob) blob = await ImageLoader.fetchBlobDirect(item.src); if (blob) { saveAs(blob, formattedName); state.notificationType = 'success'; state.notification = 'Download started'; } else { state.notificationType = 'error'; state.notification = 'Download failed: Blob is null'; } } catch (e) { state.notificationType = 'error'; state.notification = 'Download failed'; console.error(e); } } }, cleanupWorker: () => { if (DownloadManager._worker) { DownloadManager._worker.terminate(); DownloadManager._worker = null; } if (DownloadManager._workerUrl) { URL.revokeObjectURL(DownloadManager._workerUrl); DownloadManager._workerUrl = null; } DownloadManager._pendingVideoPromises = []; state.isDownloading = false; } }; const PostActions = { imageLinkClickHandler: event => { if (event.button !== 0) return; const clickedImageLink = event.target.closest(SELECTORS.IMAGE_LINK) || event.target.closest(SELECTORS.VIDEO_LINK); if (clickedImageLink) { event.preventDefault(); event.stopPropagation(); } }, initPostActions: () => { try { let postActionsContainer = document.querySelector(SELECTORS.POST_ACTIONS); if (!postActionsContainer) { const fallbackContainer = document.querySelector('.post__body') || document.querySelector('.post__files'); if (fallbackContainer) { postActionsContainer = document.createElement('div'); postActionsContainer.className = 'post__actions ug-injected-ui'; fallbackContainer.prepend(postActionsContainer); } } if (!postActionsContainer) return; const globalButtons = document.createElement('div'); globalButtons.className = 'ug-injected-ui'; elements.galleryButton = UI.createToggleButton( 'Loading Gallery...', Gallery.toggleGallery, true, 'GALLERY' ); globalButtons.append( UI.createToggleButton(BUTTONS.HEIGHT, () => PostActions.resizeAllImages('height'), false, 'HEIGHT'), UI.createToggleButton(BUTTONS.WIDTH, () => PostActions.resizeAllImages('width'), false, 'WIDTH'), UI.createToggleButton(BUTTONS.FULL, () => PostActions.resizeAllImages('full'), false, 'FULL'), UI.createToggleButton(BUTTONS.DOWNLOAD_ALL, DownloadManager.downloadAllImages, false, 'DOWNLOAD_ALL'), elements.galleryButton ); postActionsContainer.append(globalButtons); if (!document.querySelector('.settings-button-wrapper')) { const settingsButton = document.createElement('button'); settingsButton.type = 'button'; settingsButton.textContent = BUTTONS.SETTINGS; settingsButton.className = 'settings-button'; settingsButton.addEventListener('click', () => state.settingsOpen = !state.settingsOpen); const wrapper = document.createElement('div'); wrapper.className = 'settings-button-wrapper ug-injected-ui'; wrapper.appendChild(settingsButton); document.body.appendChild(wrapper); elements.settingsButton = settingsButton; } const filesArea = document.querySelector('div.post__files'); if (filesArea) { filesArea.querySelectorAll(SELECTORS.FILE_DIVS).forEach(thumbnailDiv => { const imgElement = thumbnailDiv.querySelector('img'); if (!imgElement) return; imgElement.classList.add('post__image'); const buttonGroupConfig = [ { text: BUTTONS.HEIGHT, action: (evt) => PostActions.resizeImage('height', evt), name: 'HEIGHT' }, { text: BUTTONS.WIDTH, action: (evt) => PostActions.resizeImage('width', evt), name: 'WIDTH' }, { text: BUTTONS.FULL, action: () => ImageLoader.imageActions.full(imgElement), name: 'FULL' }, { text: BUTTONS.DOWNLOAD, action: () => { const link = imgElement.closest('a'); const originalSrc = link ? (link.href.split('?')[0]) : imgElement.dataset.originalSrc; const downloadIndex = state.originalImageSrcs.findIndex( item => item && item.src === originalSrc ); if (downloadIndex > -1) { DownloadManager.downloadImageByIndex(downloadIndex); } }, name: 'DOWNLOAD' } ]; const buttonGroupElement = UI.createButtonGroup(buttonGroupConfig); if (buttonGroupElement.childElementCount > 0) { buttonGroupElement.classList.add('ug-injected-ui'); thumbnailDiv.parentNode.insertBefore(buttonGroupElement, thumbnailDiv); } }); if (!filesArea.dataset.ugLeftClickHandlerAttached) { filesArea.addEventListener('click', PostActions.imageLinkClickHandler); filesArea.dataset.ugLeftClickHandlerAttached = 'true'; } } ImageLoader.loadImages(); state.currentPostUrl = window.location.href; } catch (error) { console.error('Error initializing post actions:', error); } }, cleanupPostActions: () => { state.currentLoadSessionId = null; ErrorHandler.clearRetries(); UI.forceHideNotification(); document.querySelectorAll('img.post__image.ug-image-loaded').forEach(img => { img.classList.remove('ug-image-loaded'); }); document.querySelectorAll('.ug-injected-ui').forEach(el => el.remove()); const notifArea = document.getElementById(CSS.NOTIF_AREA); if (notifArea) notifArea.remove(); const filesArea = document.querySelector('div.post__files'); if (filesArea) { filesArea.removeEventListener('click', PostActions.imageLinkClickHandler); filesArea.removeAttribute('data-ug-left-click-handler-attached'); } if (state.isGalleryMode) { Gallery.closeGallery(); } else if (galleryOverlay && galleryOverlay.length) { galleryOverlay.remove(); galleryOverlay = null; $(document).off('.galleryDrag'); } if (state.settingsOpen) { state.settingsOpen = false; } else { const settingsOverlay = document.getElementById('ug-settings-overlay'); if (settingsOverlay) settingsOverlay.remove(); } BlobManager.revokeAll(); loadedBlobUrls.clear(); state.notification = null; Object.assign(state, { fullSizeImageSrcs: [], originalImageSrcs: [], galleryReady: false, loadedImages: 0, totalImages: 0, errorCount: 0, isLoading: false }); elements = { galleryButton: null, settingsButton: null }; }, updateButtonVisibilityLight: () => { const hideMap = { FULL: state.hideFullButton, DOWNLOAD: state.hideDownloadButton, HEIGHT: state.hideHeightButton, WIDTH: state.hideWidthButton }; document.querySelectorAll(`.${CSS.BTN}[data-action]`).forEach(btn => { const action = btn.dataset.action; if (Object.prototype.hasOwnProperty.call(hideMap, action)) { btn.style.display = hideMap[action] ? 'none' : ''; } }); if (galleryOverlay && galleryOverlay.length) { galleryOverlay.find(`.${CSS.GALLERY.NAV}`).toggle(!state.hideNavArrows); } }, updateButtonVisibility: () => PostActions.updateButtonVisibilityLight(), resizeAllImages: action => { if (!ImageLoader.imageActions[action]) return; state.currentResizeMode = action; document.querySelectorAll('img.post__image').forEach(img => { ImageLoader.imageActions[action](img); }); }, resizeImage: (action, evt) => { if (!ImageLoader.imageActions[action]) return; state.currentResizeMode = action; const button = evt.currentTarget; let thumbContainer = button.closest('.post__thumbnail, .scrape__thumbnail'); if (!thumbContainer) { const buttonContainer = button.closest(`.${CSS.BTN_CONTAINER}`); thumbContainer = buttonContainer?.nextElementSibling; } const displayedImage = thumbContainer?.querySelector('img.post__image'); if (displayedImage) ImageLoader.imageActions[action](displayedImage); } }; const EventHandlers = { keyMatchesSetting: (eventKey, settingValue) => { return Boolean(settingValue) && String(eventKey).toLowerCase() === String(settingValue).toLowerCase(); }, handleGlobalKeyDown: event => { const activeEl = document.activeElement; if ( activeEl && ( activeEl.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(activeEl.tagName) ) ) { return; } const keyLower = event.key.toLowerCase(); if ( Utils.isPostPage() && EventHandlers.keyMatchesSetting(event.key, state.galleryKey) ) { if (!event.altKey && !event.ctrlKey && !event.metaKey) { event.preventDefault(); if (state.galleryReady) { Gallery.toggleGallery(); } else { state.notificationType = 'info'; state.notification = 'Gallery content is still loading.'; } } return; } if (state.settingsOpen && event.key === 'Escape') { event.preventDefault(); state.settingsOpen = false; return; } if (state.isGalleryMode && galleryOverlay && galleryOverlay.length) { const $expandedView = galleryOverlay.find(`.${CSS.GALLERY.EXPANDED_VIEW}`); if (event.key === 'Escape') { event.preventDefault(); Gallery.closeGallery(); return; } if (!$expandedView.hasClass(CSS.GALLERY.HIDE)) { if ( EventHandlers.keyMatchesSetting(event.key, state.nextImageKey) || keyLower === 'arrowright' ) { event.preventDefault(); Gallery.nextImage(); } else if ( EventHandlers.keyMatchesSetting(event.key, state.prevImageKey) || keyLower === 'arrowleft' ) { event.preventDefault(); Gallery.prevImage(); } else if (event.key === 'Home') { event.preventDefault(); Gallery.showExpandedView(0); } else if (event.key === 'End') { event.preventDefault(); Gallery.showExpandedView(state.fullSizeImageSrcs.length - 1); } if (keyLower === '+' || keyLower === '=') { event.preventDefault(); Zoom.zoom(CONFIG.ZOOM_STEP); } else if (keyLower === '-') { event.preventDefault(); Zoom.zoom(-CONFIG.ZOOM_STEP); } else if (keyLower === '0') { event.preventDefault(); Zoom.resetZoom(); } else if (keyLower === ' ') { event.preventDefault(); Slideshow.toggle(); } } } } }; const updateGalleryButton = enabled => { if (elements.galleryButton) { elements.galleryButton.textContent = enabled ? BUTTONS.GALLERY : 'Loading Gallery...'; elements.galleryButton.disabled = !enabled; elements.galleryButton.classList.toggle('disabled', !enabled); } }; // ==================================================== // SPA-safe UI injection // ==================================================== const injectUI = () => { try { const onPostPage = Utils.isPostPage(); const postContainer = document.querySelector('section.site-section--post') || document.querySelector('section.site-section--scrape') || document.querySelector('.post__body') || document.querySelector('.post__content'); const currentUrl = window.location.href; if (onPostPage && postContainer) { if (currentUrl !== lastProcessedUrl) { if ( document.querySelector(SELECTORS.POST_ACTIONS) || document.querySelector('.post__files') || document.querySelector('.post__body') ) { PostActions.cleanupPostActions(); PostActions.initPostActions(); lastProcessedUrl = currentUrl; } } } else { if (lastProcessedUrl !== null) { PostActions.cleanupPostActions(); lastProcessedUrl = null; } } } catch (error) { console.error('Error in injectUI:', error); } }; const fullCleanup = () => { if (uiObserver) { uiObserver.disconnect(); uiObserver = null; } PostActions.cleanupPostActions(); Gallery._clearPreloadCache(); DownloadManager.cleanupWorker(); UI.forceHideNotification(); ErrorHandler.clearRetries(); ThumbnailStrip.cleanup(); document.removeEventListener('keydown', EventHandlers.handleGlobalKeyDown); }; // ==================================================== // Initialization // ==================================================== const init = async () => { try { const cssText = GM_getResourceText('mainCSS'); if (cssText) { const styleNode = GM_addStyle(cssText); // Pawchive's htmx swap script strips any <style> in <head> without 'data-keep'. if (styleNode && styleNode.setAttribute) { styleNode.setAttribute('data-keep', ''); } else { // Fallback for script managers that don't return the node const lastStyle = document.head.querySelector('style:last-of-type'); if (lastStyle) lastStyle.setAttribute('data-keep', ''); } } else { console.warn('Ultra Galleries: Failed to load main CSS resource.'); } Slideshow.init(); const allSettings = SettingsManager.loadAllSettings(); Object.assign(state, allSettings); document.body.classList.toggle('ug-animations-disabled', !state.animationsEnabled); updateButtonLabels(); state.notification = null; if (state.enablePersistentCaching) { initDexie(); } CONFIG.MAX_SCALE = SettingsManager.loadSetting('maxZoomScale', CONFIG.MAX_SCALE); document.addEventListener('keydown', EventHandlers.handleGlobalKeyDown); window.addEventListener('beforeunload', fullCleanup); // SPA Navigation Handling const originalPushState = history.pushState; history.pushState = function () { originalPushState.apply(this, arguments); window.dispatchEvent(new Event('ug-locationchange')); }; const originalReplaceState = history.replaceState; history.replaceState = function () { originalReplaceState.apply(this, arguments); window.dispatchEvent(new Event('ug-locationchange')); }; window.addEventListener('popstate', () => { window.dispatchEvent(new Event('ug-locationchange')); }); window.addEventListener('ug-locationchange', Utils.debounce(injectUI, 150)); const debouncedInject = Utils.debounce(injectUI, 150); uiObserver = new MutationObserver(debouncedInject); uiObserver.observe(document.body, { childList: true, subtree: true }); injectUI(); setTimeout(() => ThumbnailStrip.updateThumbnailNumbers(), 50); } catch (error) { console.error('Error in init:', error); } }; init(); })();
