ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

fixed UI on images when resizing the window.

Browse Source
This commit is contained in:
lenafx
2025-11-25 19:08:15 +01:00
parent 479e0126a0
commit 43f74babc0
2 changed files with 14 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/content/image-handler.js
View File

@@ -1,3 +1,14 @@
const gallery = document.getElementById('content-gallery');
if (gallery) {
const ro = new ResizeObserver(() => {
const items = gallery.querySelectorAll('.image-entry[data-type="image"]');
items.forEach(item => resizeMasonryItem(item));
relayoutMasonry(gallery);
});
ro.observe(gallery);
}
let masonryFrameRunning = false; let masonryFrameRunning = false;
function scheduleMasonryRelayout(grid) { function scheduleMasonryRelayout(grid) {
if (masonryFrameRunning) return; if (masonryFrameRunning) return;
@@ -9,11 +20,6 @@ function scheduleMasonryRelayout(grid) {
}); });
} }
export function triggerMasonryRelayout(gallery) {
if (!gallery) return;
setTimeout(() => relayoutMasonry(gallery), 350);
}
export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {}) { export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {}) {
const { const {
showMessage, showMessage,
@@ -175,17 +181,6 @@ function updateHeartIcon(btn, isFavorited) {
btn.title = isFavorited ? "Remove from Favorites" : "Add to Favorites"; btn.title = isFavorited ? "Remove from Favorites" : "Add to Favorites";
} }
function getSidebarClosedWidth() {
const s = document.querySelector('.sidebar');
if (!s) return 0;
return parseFloat(
getComputedStyle(document.documentElement)
.getPropertyValue('--sidebar-width-collapsed')
);
}
function resizeMasonryItem(item) { function resizeMasonryItem(item) {
if (item.dataset.type === 'book') return; if (item.dataset.type === 'book') return;
@@ -194,30 +189,19 @@ function resizeMasonryItem(item) {
const img = item.querySelector("img"); const img = item.querySelector("img");
if (!img || !img.complete || img.naturalWidth === 0) return; if (!img || !img.complete || img.naturalWidth === 0) return;
const gridCurrent = grid.getBoundingClientRect().width; const simulatedWidth = item.getBoundingClientRect().width;
const sidebar = document.querySelector(".sidebar");
const sidebarExpanded = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width-expanded"));
const sidebarCollapsed = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width-collapsed"));
const gridClosedWidth = gridCurrent - (sidebarExpanded - sidebarCollapsed);
const currentItemWidth = item.getBoundingClientRect().width;
const simulatedWidth = (currentItemWidth / gridCurrent) * gridClosedWidth;
const gridStyles = getComputedStyle(grid); const gridStyles = getComputedStyle(grid);
const rowHeight = parseInt(gridStyles.gridAutoRows); const rowHeight = parseInt(gridStyles.gridAutoRows);
const rowGap = parseInt(gridStyles.gap); const rowGap = parseInt(gridStyles.gap);
const imageHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth; const totalHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
const totalHeight = imageHeight;
const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap)); const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
item.style.gridRowEnd = `span ${rowSpan}`; item.style.gridRowEnd = `span ${rowSpan}`;
item.style.height = "auto"; item.style.height = "auto";
} }
function relayoutMasonry(grid) { function relayoutMasonry(grid) {
if (!grid) return; if (!grid) return;
const items = grid.querySelectorAll('.image-entry[data-type="image"]'); const items = grid.querySelectorAll('.image-entry[data-type="image"]');

2
src/renderer.js
View File

@@ -2,7 +2,7 @@ import { populateSources } from './extensions/load-extensions.js';
import { setupGlobalKeybinds } from './utils/keybinds.js'; import { setupGlobalKeybinds } from './utils/keybinds.js';
import { getDomElements } from './utils/dom-loader.js'; import { getDomElements } from './utils/dom-loader.js';
import { performSearch, loadMoreResults } from './modules/search-handler.js'; import { performSearch, loadMoreResults } from './modules/search-handler.js';
import { createImageCard, createBookCard, populateTagModal, triggerMasonryRelayout } from './content/image-handler.js'; import { createImageCard, createBookCard, populateTagModal } from './content/image-handler.js';
import { showMessage as uiShowMessage } from './modules/ui-utils.js'; import { showMessage as uiShowMessage } from './modules/ui-utils.js';
import { applyLayoutToGallery } from './modules/layout-manager.js'; import { applyLayoutToGallery } from './modules/layout-manager.js';