Bryan Van Deusen
519 lines
17 KiB
JavaScript
519 lines
17 KiB
JavaScript
// /app/static/js/modal-pagination.js
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const modal = document.getElementById('imageModal');
|
||
const modalPrev = document.getElementById('modalPrev');
|
||
const modalNext = document.getElementById('modalNext');
|
||
const modalClose = document.getElementById('modalClose');
|
||
const modalImageWrapper = document.querySelector('.modal-image-wrapper');
|
||
|
||
// NEW: tag editor elements
|
||
const tagEditor = document.getElementById('modalTagEditor');
|
||
const tagList = document.getElementById('modalTagList');
|
||
const tagForm = document.getElementById('modalTagForm');
|
||
const tagInput = tagForm ? tagForm.querySelector('input[name="name"]') : null;
|
||
const tagAutocomplete = document.getElementById('tagAutocomplete');
|
||
|
||
// Autocomplete state
|
||
let autocompleteItems = [];
|
||
let autocompleteSelectedIndex = -1;
|
||
let autocompleteDebounce = null;
|
||
|
||
let images = Array.from(document.querySelectorAll('.img-clickable'));
|
||
let currentIndex = -1;
|
||
let isZoomed = false;
|
||
let isDragging = false;
|
||
let startX, startY, scrollLeft, scrollTop;
|
||
let dragStartX = 0;
|
||
let dragStartY = 0;
|
||
let dragMoved = false;
|
||
|
||
// Legacy pagination inputs (for non-infinite-scroll pages)
|
||
const hasNextPageInput = document.getElementById('hasNextPage');
|
||
const nextPageUrlInput = document.getElementById('nextPageUrl');
|
||
const hasPrevPageInput = document.getElementById('hasPrevPage');
|
||
const prevPageUrlInput = document.getElementById('prevPageUrl');
|
||
|
||
// Check if we're in infinite scroll mode
|
||
// Infinite scroll mode is when galleryState exists (set by gallery.html template)
|
||
const isInfiniteScrollMode = typeof window.galleryState !== 'undefined';
|
||
|
||
// ---------------------------
|
||
// Tag editor helpers
|
||
// ---------------------------
|
||
function setEditorImageId(id) {
|
||
if (tagEditor) tagEditor.dataset.imageId = id || '';
|
||
}
|
||
function getEditorImageId() {
|
||
return tagEditor ? tagEditor.dataset.imageId : '';
|
||
}
|
||
function getTagIcon(kind) {
|
||
const icons = {
|
||
artist: '🎨',
|
||
archive: '🗜️',
|
||
character: '👤',
|
||
series: '📺',
|
||
rating: '⚠️',
|
||
source: '🌐',
|
||
post: '📌'
|
||
};
|
||
return icons[kind] || '#';
|
||
}
|
||
|
||
function getTagDisplayName(name) {
|
||
// Remove prefix if present (e.g., "artist:Name" -> "Name")
|
||
return name.includes(':') ? name.split(':', 2)[1] : name;
|
||
}
|
||
|
||
function renderTags(tags) {
|
||
if (!tagList) return;
|
||
tagList.innerHTML = '';
|
||
(tags || []).forEach(t => {
|
||
const chip = document.createElement('span');
|
||
chip.className = 'tag-chip';
|
||
const icon = getTagIcon(t.kind);
|
||
const displayName = getTagDisplayName(t.name);
|
||
chip.innerHTML = `${icon} ${displayName} <button class="x" data-name="${t.name}" title="Remove">×</button>`;
|
||
tagList.appendChild(chip);
|
||
});
|
||
}
|
||
async function loadTags(imageId) {
|
||
if (!imageId) { renderTags([]); return; }
|
||
try {
|
||
const r = await fetch(`/image/${imageId}/tags`);
|
||
const j = await r.json();
|
||
if (j.ok) renderTags(j.tags);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
async function addTag(imageId, name) {
|
||
const fd = new FormData();
|
||
fd.append('name', name);
|
||
const r = await fetch(`/image/${imageId}/tags/add`, { method: 'POST', body: fd });
|
||
const j = await r.json();
|
||
if (j.ok) {
|
||
await loadTags(imageId);
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
async function removeTag(imageId, name) {
|
||
const fd = new FormData();
|
||
fd.append('name', name);
|
||
const r = await fetch(`/image/${imageId}/tags/remove`, { method: 'POST', body: fd });
|
||
const j = await r.json();
|
||
if (j.ok) {
|
||
await loadTags(imageId);
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// ---------------------------
|
||
// Autocomplete helpers
|
||
// ---------------------------
|
||
function hideAutocomplete() {
|
||
if (tagAutocomplete) {
|
||
tagAutocomplete.classList.remove('active');
|
||
tagAutocomplete.innerHTML = '';
|
||
}
|
||
autocompleteItems = [];
|
||
autocompleteSelectedIndex = -1;
|
||
}
|
||
|
||
function positionAutocomplete() {
|
||
if (!tagAutocomplete || !tagInput) return;
|
||
const rect = tagInput.getBoundingClientRect();
|
||
tagAutocomplete.style.top = `${rect.bottom + 4}px`;
|
||
tagAutocomplete.style.left = `${rect.left}px`;
|
||
tagAutocomplete.style.width = `${rect.width}px`;
|
||
}
|
||
|
||
function renderAutocomplete(tags) {
|
||
if (!tagAutocomplete) return;
|
||
autocompleteItems = tags;
|
||
autocompleteSelectedIndex = -1;
|
||
|
||
if (tags.length === 0) {
|
||
tagAutocomplete.innerHTML = '<div class="tag-autocomplete-empty">No matching tags</div>';
|
||
positionAutocomplete();
|
||
tagAutocomplete.classList.add('active');
|
||
return;
|
||
}
|
||
|
||
tagAutocomplete.innerHTML = tags.map((t, i) => {
|
||
const icon = getTagIcon(t.kind);
|
||
const displayName = getTagDisplayName(t.name);
|
||
return `<div class="tag-autocomplete-item" data-index="${i}" data-name="${t.name}">
|
||
<span>${icon} ${displayName}</span>
|
||
<span class="tag-kind">${t.kind || 'user'}</span>
|
||
</div>`;
|
||
}).join('');
|
||
positionAutocomplete();
|
||
tagAutocomplete.classList.add('active');
|
||
}
|
||
|
||
function selectAutocompleteItem(index) {
|
||
const items = tagAutocomplete?.querySelectorAll('.tag-autocomplete-item');
|
||
if (!items) return;
|
||
items.forEach((el, i) => {
|
||
el.classList.toggle('selected', i === index);
|
||
});
|
||
autocompleteSelectedIndex = index;
|
||
}
|
||
|
||
async function fetchAutocomplete(query) {
|
||
try {
|
||
// Exclude system-managed tag kinds from autocomplete (archive, post, source)
|
||
const excludeKinds = 'archive,post,source';
|
||
const url = query
|
||
? `/api/tags/search?q=${encodeURIComponent(query)}&limit=8&exclude_kind=${excludeKinds}`
|
||
: `/api/tags/search?limit=8&exclude_kind=${excludeKinds}`;
|
||
const r = await fetch(url);
|
||
const j = await r.json();
|
||
renderAutocomplete(j.tags || []);
|
||
} catch {
|
||
hideAutocomplete();
|
||
}
|
||
}
|
||
|
||
// Shared function to submit a tag (avoids page refresh issues with form dispatch)
|
||
async function submitTag() {
|
||
const id = getEditorImageId();
|
||
const name = (tagInput?.value || '').trim();
|
||
if (!id || !name) return;
|
||
hideAutocomplete();
|
||
await addTag(id, name);
|
||
if (tagInput) tagInput.value = '';
|
||
}
|
||
|
||
if (tagInput) {
|
||
// Show autocomplete on focus
|
||
tagInput.addEventListener('focus', () => {
|
||
const val = tagInput.value.trim();
|
||
fetchAutocomplete(val);
|
||
});
|
||
|
||
// Hide autocomplete on blur (with delay for click)
|
||
tagInput.addEventListener('blur', () => {
|
||
setTimeout(hideAutocomplete, 200);
|
||
});
|
||
|
||
// Search as user types
|
||
tagInput.addEventListener('input', () => {
|
||
clearTimeout(autocompleteDebounce);
|
||
autocompleteDebounce = setTimeout(() => {
|
||
fetchAutocomplete(tagInput.value.trim());
|
||
}, 150);
|
||
});
|
||
|
||
// Keyboard navigation
|
||
tagInput.addEventListener('keydown', (e) => {
|
||
if (!tagAutocomplete?.classList.contains('active')) return;
|
||
|
||
if (e.key === 'ArrowDown') {
|
||
e.preventDefault();
|
||
const nextIndex = Math.min(autocompleteSelectedIndex + 1, autocompleteItems.length - 1);
|
||
selectAutocompleteItem(nextIndex);
|
||
} else if (e.key === 'ArrowUp') {
|
||
e.preventDefault();
|
||
const prevIndex = Math.max(autocompleteSelectedIndex - 1, 0);
|
||
selectAutocompleteItem(prevIndex);
|
||
} else if (e.key === 'Enter' && autocompleteSelectedIndex >= 0) {
|
||
e.preventDefault();
|
||
const selected = autocompleteItems[autocompleteSelectedIndex];
|
||
if (selected) {
|
||
tagInput.value = selected.name;
|
||
submitTag();
|
||
}
|
||
} else if (e.key === 'Escape') {
|
||
hideAutocomplete();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Click on autocomplete item - use mousedown to fire before blur
|
||
if (tagAutocomplete) {
|
||
tagAutocomplete.addEventListener('mousedown', (e) => {
|
||
e.preventDefault(); // Prevent blur from firing
|
||
e.stopPropagation();
|
||
const item = e.target.closest('.tag-autocomplete-item');
|
||
if (!item) return;
|
||
const name = item.dataset.name;
|
||
if (tagInput && name) {
|
||
tagInput.value = name;
|
||
submitTag();
|
||
}
|
||
});
|
||
}
|
||
|
||
if (tagForm) {
|
||
tagForm.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
await submitTag();
|
||
});
|
||
}
|
||
if (tagList) {
|
||
tagList.addEventListener('click', async (e) => {
|
||
const btn = e.target.closest('button.x');
|
||
if (!btn) return;
|
||
const id = getEditorImageId();
|
||
const name = btn.dataset.name;
|
||
if (!id || !name) return;
|
||
await removeTag(id, name);
|
||
});
|
||
}
|
||
|
||
// ---------------------------
|
||
// Existing viewer logic
|
||
// ---------------------------
|
||
function updateImage(index) {
|
||
const img = images[index];
|
||
const fileType = img.dataset.type || "image";
|
||
const imageId = img.dataset.id || "";
|
||
|
||
// clear wrapper
|
||
modalImageWrapper.innerHTML = "";
|
||
|
||
if (fileType === "video") {
|
||
const video = document.createElement("video");
|
||
video.src = img.dataset.full;
|
||
video.controls = true;
|
||
video.autoplay = true;
|
||
video.style.maxWidth = "100%";
|
||
video.style.maxHeight = "100%";
|
||
modalImageWrapper.appendChild(video);
|
||
} else {
|
||
const image = document.createElement("img");
|
||
image.src = img.dataset.full;
|
||
image.alt = "Full View";
|
||
image.setAttribute("draggable", "false");
|
||
image.id = "modalImage";
|
||
modalImageWrapper.appendChild(image);
|
||
}
|
||
|
||
currentIndex = index;
|
||
resetZoom();
|
||
|
||
// NEW: load tags for this image into the modal editor
|
||
setEditorImageId(imageId);
|
||
loadTags(imageId);
|
||
}
|
||
|
||
function openModal(index) {
|
||
modal.classList.add('active');
|
||
updateImage(index);
|
||
history.replaceState({ modalIndex: index }, '', window.location.href);
|
||
// Focus the tag input after modal opens (desktop only - avoids keyboard popup on mobile)
|
||
if (tagInput && !isTouchDevice()) {
|
||
setTimeout(() => tagInput.focus(), 100);
|
||
}
|
||
}
|
||
|
||
// Detect touch devices to avoid auto-focus keyboard popup
|
||
function isTouchDevice() {
|
||
return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
|
||
}
|
||
|
||
function closeModal() {
|
||
modal.classList.remove('active');
|
||
modalImageWrapper.innerHTML = '';
|
||
currentIndex = -1;
|
||
resetZoom();
|
||
// clear tag UI
|
||
setEditorImageId('');
|
||
renderTags([]);
|
||
history.replaceState({}, '', window.location.pathname + window.location.search);
|
||
}
|
||
|
||
function showNext() {
|
||
if (currentIndex < images.length - 1) {
|
||
updateImage(currentIndex + 1);
|
||
} else if (isInfiniteScrollMode) {
|
||
// In infinite scroll mode, just stay at the last image
|
||
// User needs to scroll the gallery to load more
|
||
return;
|
||
} else if (hasNextPageInput?.value === "true") {
|
||
// Legacy pagination mode - fetch next page
|
||
fetch(nextPageUrlInput.value)
|
||
.then(res => res.text())
|
||
.then(html => {
|
||
const parser = new DOMParser();
|
||
const doc = parser.parseFromString(html, 'text/html');
|
||
const newGallery = doc.querySelector('.gallery-grid');
|
||
const newImages = doc.querySelectorAll('.img-clickable');
|
||
|
||
if (newGallery && newImages.length > 0) {
|
||
const gallery = document.querySelector('.gallery-grid');
|
||
gallery.innerHTML = newGallery.innerHTML;
|
||
|
||
images = Array.from(document.querySelectorAll('.img-clickable'));
|
||
images.forEach((img, i) => {
|
||
img.addEventListener('click', () => openModal(i));
|
||
});
|
||
|
||
hasNextPageInput.value = doc.getElementById('hasNextPage')?.value || "false";
|
||
nextPageUrlInput.value = doc.getElementById('nextPageUrl')?.value || "";
|
||
hasPrevPageInput.value = doc.getElementById('hasPrevPage')?.value || "false";
|
||
prevPageUrlInput.value = doc.getElementById('prevPageUrl')?.value || "";
|
||
|
||
history.pushState({}, '', nextPageUrlInput.value);
|
||
openModal(0);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function showPrev() {
|
||
if (currentIndex > 0) {
|
||
updateImage(currentIndex - 1);
|
||
} else if (isInfiniteScrollMode) {
|
||
// In infinite scroll mode, just stay at the first image
|
||
return;
|
||
} else if (hasPrevPageInput?.value === "true") {
|
||
// Legacy pagination mode - fetch previous page
|
||
fetch(prevPageUrlInput.value)
|
||
.then(res => res.text())
|
||
.then(html => {
|
||
const parser = new DOMParser();
|
||
const doc = parser.parseFromString(html, 'text/html');
|
||
const newGallery = doc.querySelector('.gallery-grid');
|
||
const newImages = doc.querySelectorAll('.img-clickable');
|
||
|
||
if (newGallery && newImages.length > 0) {
|
||
const gallery = document.querySelector('.gallery-grid');
|
||
gallery.innerHTML = newGallery.innerHTML;
|
||
|
||
images = Array.from(document.querySelectorAll('.img-clickable'));
|
||
images.forEach((img, i) => {
|
||
img.addEventListener('click', () => openModal(i));
|
||
});
|
||
|
||
hasNextPageInput.value = doc.getElementById('hasNextPage')?.value || "false";
|
||
nextPageUrlInput.value = doc.getElementById('nextPageUrl')?.value || "";
|
||
hasPrevPageInput.value = doc.getElementById('hasPrevPage')?.value || "false";
|
||
prevPageUrlInput.value = doc.getElementById('prevPageUrl')?.value || "";
|
||
|
||
history.pushState({}, '', prevPageUrlInput.value);
|
||
openModal(images.length - 1);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function toggleZoom() {
|
||
const isImage = modalImageWrapper.querySelector('img') !== null;
|
||
if (!isImage) return;
|
||
isZoomed = !isZoomed;
|
||
modalImageWrapper.classList.toggle('zoomed', isZoomed);
|
||
modalImageWrapper.style.cursor = isZoomed ? 'grab' : '';
|
||
if (!isZoomed) {
|
||
modalImageWrapper.scrollLeft = 0;
|
||
modalImageWrapper.scrollTop = 0;
|
||
}
|
||
}
|
||
|
||
function resetZoom() {
|
||
isZoomed = false;
|
||
modalImageWrapper.classList.remove('zoomed');
|
||
modalImageWrapper.scrollLeft = 0;
|
||
modalImageWrapper.scrollTop = 0;
|
||
modalImageWrapper.style.cursor = '';
|
||
}
|
||
|
||
modalImageWrapper.addEventListener('mousedown', (e) => {
|
||
const isImage = modalImageWrapper.querySelector('img') !== null;
|
||
if (!isZoomed || !isImage) return;
|
||
isDragging = true;
|
||
dragMoved = false;
|
||
modalImageWrapper.style.cursor = 'grabbing';
|
||
startX = e.pageX - modalImageWrapper.offsetLeft;
|
||
startY = e.pageY - modalImageWrapper.offsetTop;
|
||
scrollLeft = modalImageWrapper.scrollLeft;
|
||
scrollTop = modalImageWrapper.scrollTop;
|
||
dragStartX = e.pageX;
|
||
dragStartY = e.pageY;
|
||
});
|
||
|
||
modalImageWrapper.addEventListener('mouseleave', () => {
|
||
isDragging = false;
|
||
const isImage = modalImageWrapper.querySelector('img') !== null;
|
||
if (isZoomed && isImage) modalImageWrapper.style.cursor = 'grab';
|
||
});
|
||
|
||
modalImageWrapper.addEventListener('mouseup', () => {
|
||
isDragging = false;
|
||
const isImage = modalImageWrapper.querySelector('img') !== null;
|
||
if (isZoomed && isImage) modalImageWrapper.style.cursor = 'grab';
|
||
});
|
||
|
||
modalImageWrapper.addEventListener('mousemove', (e) => {
|
||
const isImage = modalImageWrapper.querySelector('img') !== null;
|
||
if (!isDragging || !isZoomed || !isImage) return;
|
||
e.preventDefault();
|
||
dragMoved = true;
|
||
const x = e.pageX - modalImageWrapper.offsetLeft;
|
||
const y = e.pageY - modalImageWrapper.offsetTop;
|
||
const walkX = x - startX;
|
||
const walkY = y - startY;
|
||
modalImageWrapper.scrollLeft = scrollLeft - walkX;
|
||
modalImageWrapper.scrollTop = scrollTop - walkY;
|
||
});
|
||
|
||
modalImageWrapper.addEventListener('click', (e) => {
|
||
if (dragMoved) {
|
||
dragMoved = false;
|
||
return;
|
||
}
|
||
toggleZoom();
|
||
});
|
||
|
||
modalClose?.addEventListener('click', closeModal);
|
||
modalPrev?.addEventListener('click', showPrev);
|
||
modalNext?.addEventListener('click', showNext);
|
||
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) closeModal();
|
||
});
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (!modal.classList.contains('active')) return;
|
||
if (e.key === 'ArrowRight') showNext();
|
||
if (e.key === 'ArrowLeft') showPrev();
|
||
if (e.key === 'Escape') closeModal();
|
||
});
|
||
|
||
// Use event delegation on the document for .img-clickable clicks
|
||
// This allows dynamically added elements (e.g., from shuffle) to work
|
||
document.addEventListener('click', (e) => {
|
||
const clickable = e.target.closest('.img-clickable');
|
||
if (!clickable) return;
|
||
|
||
// Re-query images to get current state (may have changed from shuffle)
|
||
images = Array.from(document.querySelectorAll('.img-clickable'));
|
||
const index = images.indexOf(clickable);
|
||
if (index !== -1) {
|
||
openModal(index);
|
||
}
|
||
});
|
||
|
||
// Listen for showcase updates to refresh the images array
|
||
document.addEventListener('showcaseUpdated', () => {
|
||
images = Array.from(document.querySelectorAll('.img-clickable'));
|
||
});
|
||
|
||
// Listen for gallery infinite scroll updates to refresh the images array
|
||
document.addEventListener('galleryUpdated', () => {
|
||
images = Array.from(document.querySelectorAll('.img-clickable'));
|
||
});
|
||
|
||
window.addEventListener('popstate', () => {
|
||
if (modal.classList.contains('active')) {
|
||
closeModal();
|
||
} else {
|
||
location.reload();
|
||
}
|
||
});
|
||
});
|