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;
function scheduleMasonryRelayout(grid) {
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 = {}) {
const {
showMessage,
@@ -175,17 +181,6 @@ function updateHeartIcon(btn, isFavorited) {
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) {
if (item.dataset.type === 'book') return;
@@ -194,30 +189,19 @@ function resizeMasonryItem(item) {
const img = item.querySelector("img");
if (!img || !img.complete || img.naturalWidth === 0) return;
const gridCurrent = grid.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 simulatedWidth = item.getBoundingClientRect().width;
const gridStyles = getComputedStyle(grid);
const rowHeight = parseInt(gridStyles.gridAutoRows);
const rowGap = parseInt(gridStyles.gap);
const imageHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
const totalHeight = imageHeight;
const totalHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
item.style.gridRowEnd = `span ${rowSpan}`;
item.style.height = "auto";
}
function relayoutMasonry(grid) {
if (!grid) return;
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 { getDomElements } from './utils/dom-loader.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 { applyLayoutToGallery } from './modules/layout-manager.js';