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

Compare commits

base: ItsSkaiya:479e0126a08300409391619e4a279015e933c811
Branches Tags
ItsSkaiya:main ItsSkaiya:dev
ItsSkaiya:v1.6.4 ItsSkaiya:v1.6.3 ItsSkaiya:v1.6.2 ItsSkaiya:v1.6.1
..
compare: ItsSkaiya:1e1eaab43c6b87e63c50637f65e5b448bb3176d1
Branches Tags
ItsSkaiya:dev ItsSkaiya:main
ItsSkaiya:v1.6.4 ItsSkaiya:v1.6.3 ItsSkaiya:v1.6.2 ItsSkaiya:v1.6.1

2 Commits
479e0126a0 ... 1e1eaab43c

Author SHA1 Message Date
lenafx
1e1eaab43c made emulator.html full responsive 2025-11-25 19:22:56 +01:00
lenafx
43f74babc0 fixed UI on images when resizing the window. 2025-11-25 19:08:15 +01:00
4 changed files with 284 additions and 96 deletions
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';

130
views/emulator.html
View File

@@ -12,29 +12,14 @@
<body>
<aside class="sidebar">
<a href="index.html" class="nav-button" title="Image Boards">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
<span>Back To Home</span>
</a>
<button class="nav-button active" title="Emulator">
<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" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
<span>Emulator</span>
</button>
<button class="nav-button" title="Reset" onclick="window.location.reload()">
<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" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
<span>Reset</span>
</button>
<a href="index.html" class="nav-button" title="Image Boards"> ... </a>
<button class="nav-button active" title="Emulator"> ... </button>
<button class="nav-button" title="Reset" onclick="window.location.reload()"> ... </button>
</aside>
<div class="main-wrapper">
<header class="top-header">
<button id="hamburger-btn" class="hamburger">☰</button>
<button id="hamburger-btn" class="hamburger">Menu</button>
<h3>Extension Emulator</h3>
</header>
@@ -42,15 +27,22 @@
<div class="editor-pane">
<div class="control-bar" style="background: transparent; border: none; padding: 0;">
<h4 style="margin:0">Extension Code</h4>
<span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">Paste your .js file
here</span>
<span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">
Paste your .js file here
</span>
</div>
<textarea id="code-input" class="code-editor" spellcheck="false"
placeholder="// Paste your extension class here..."></textarea>
</div>
<div class="preview-pane">
<div class="control-bar">
<div class="control-bar" id="main-control-bar">
<button id="mobile-controls-toggle" class="btn-run mobile-only">
Options
</button>
<div id="desktop-controls" class="control-group-wrapper">
<div class="control-group">
<label>Function</label>
<select id="func-select" class="control-input">
@@ -74,8 +66,9 @@
<button class="btn-run" id="run-btn">Run</button>
</div>
</div>
<div style="display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative;">
<div style="display: flex; flex-direction: column; flex: 1; overflow:Emulator hidden; position: relative;">
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('visual')">Visual</button>
<button class="tab-btn" onclick="switchTab('json')">JSON</button>
@@ -97,8 +90,97 @@
</div>
</div>
<div id="mobile-controls-overlay"></div>
<div id="mobile-controls-drawer">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
<h4 style="margin:0; color:var(--text-primary);">Run Options</h4>
<button id="close-drawer-btn" style="background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--text-secondary);">
X
</button>
</div>
<div class="control-group-wrapper">
<div class="control-group">
<label>Function</label>
<select id="func-select-mobile" class="control-input">
<option value="fetchSearchResult">fetchSearchResult (Search)</option>
<option value="fetchInfo">fetchInfo (Image Details)</option>
<option value="findChapters">findChapters (Manga/Novel)</option>
<option value="findChapterPages">findChapterPages (Read)</option>
</select>
</div>
<div class="control-group">
<label>Query / ID / URL</label>
<input type="text" id="arg-input-mobile" class="control-input" placeholder="Search query or ID">
</div>
<div class="control-group">
<label>Page</label>
<input type="number" id="page-input-mobile" class="control-input" value="1" min="1">
</div>
<button class="btn-run" id="run-btn-mobile">Run</button>
</div>
</div>
<script src="../src/emulator/emulator.js"></script>
<script src="../src/hamburger.js"></script>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
const toggleBtn = document.getElementById('mobile-controls-toggle');
const drawer = document.getElementById('mobile-controls-drawer');
const overlay = document.getElementById('mobile-controls-overlay');
const closeBtn = document.getElementById('close-drawer-btn');
const funcSelect = document.getElementById('func-select');
const argInput = document.getElementById('arg-input');
const pageInput = document.getElementById('page-input');
const runBtn = document.getElementById('run-btn');
const funcMobile = document.getElementById('func-select-mobile');
const argMobile = document.getElementById('arg-input-mobile');
const pageMobile = document.getElementById('page-input-mobile');
const runMobile = document.getElementById('run-btn-mobile');
const syncDesktopToMobile = () => {
funcMobile.value = funcSelect.value;
argMobile.value = argInput.value;
pageMobile.value = pageInput.value;
};
const syncMobileToDesktop = () => {
funcSelect.value = funcMobile.value;
argInput.value = argMobile.value;
pageInput.value = pageMobile.value;
};
toggleBtn?.addEventListener('click', () => {
syncDesktopToMobile();
drawer.classList.add('open');
overlay.classList.add('open');
});
const closeDrawer = () => {
syncMobileToDesktop();
drawer.classList.remove('open');
overlay.classList.remove('open');
};
closeBtn?.addEventListener('click', closeDrawer);
overlay?.addEventListener('click', closeDrawer);
document.addEventListener('keydown', e => {
if (e.key === 'Escape') closeDrawer();
});
runMobile?.addEventListener('click', () => {
syncMobileToDesktop();
closeDrawer();
runBtn.click();
});
});
</script>
</body>
</html>

142
views/styles/emulator.css
View File

@@ -3,8 +3,8 @@
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
height: calc(100vh - var(--header-height));
padding: 1rem 2rem 2rem 2rem;
overflow: auto;
padding: 1rem 2rem 2rem;
overflow: hidden;
}
.editor-pane,
@@ -207,11 +207,68 @@ pre {
@media (max-width: 767px) {
.emulator-container {
grid-template-columns: 1fr;
grid-template-rows: minmax(250px, 40vh) minmax(400px, 1fr);
grid-template-rows: minmax(220px, 35vh) 1fr;
gap: 1rem;
padding: 1rem;
padding: 0.75rem;
height: auto;
overflow-y: auto;
min-height: calc(100vh - var(--header-height));
overflow: visible;
}
#mobile-controls-toggle {
display: block !important;
width: 100%;
}
#desktop-controls {
display: none;
}
.control-bar {
padding: 0.75rem;
justify-content: center;
}
.tabs {
flex-shrink: 0;
}
#visual-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0.75rem;
padding: 0.5rem 0;
}
.visual-card {
width: calc(50% - 0.375rem);
max-width: 180px;
margin: 0;
}
.visual-card img {
height: 220px;
}
.visual-card .title {
font-size: 0.8rem;
padding: 0.45rem;
}
.visual-chapter {
padding: 0.85rem 0.75rem;
font-size: 0.95rem;
}
#console-content,
#json-content pre {
font-size: 0.82rem;
line-height: 1.4;
}
.loading-state {
font-size: 1rem;
}
.editor-pane,
@@ -230,14 +287,22 @@ pre {
.preview-pane {
display: flex;
flex-direction: column;
overflow: visible;
height: auto;
min-height: 0;
}
.preview-pane > div:nth-child(2) {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.code-editor {
min-height: 200px;
max-height: 40vh;
font-size: 13px;
padding: 0.75rem;
min-height: 200px;
max-height: 35vh;
}
.control-bar {
@@ -288,9 +353,10 @@ pre {
}
.output-area {
padding: 0.75rem;
flex: 1;
overflow-y: auto !important;
min-height: 300px;
overflow: auto;
padding: 0.75rem;
}
.visual-card {
@@ -368,3 +434,59 @@ pre {
height: 180px;
}
}
.control-group-wrapper {
display: flex;
gap: 0.5rem;
align-items: end;
flex-wrap: wrap;
width: 100%;
}
#mobile-controls-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-surface);
border-top: 1px solid var(--border);
border-radius: var(--radius-md) var(--radius-md) 0 0;
padding: 1rem;
transform: translateY(100%);
transition: transform 0.25s ease;
z-index: 1000;
box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
#mobile-controls-drawer.open {
transform: translateY(0);
}
#mobile-controls-drawer .control-group-wrapper {
flex-direction: column;
gap: 1rem;
}
#mobile-controls-drawer .control-group {
min-width: 0;
}
#mobile-controls-drawer .btn-run {
width: 100%;
margin-top: 0.5rem;
}
#mobile-controls-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
z-index: 999;
}
#mobile-controls-overlay.open {
opacity: 1;
pointer-events: auto;
}