Refactor code structure for improved readability and maintainability

This commit is contained in:
Ross
2026-05-18 12:32:36 +01:00
parent 5614961980
commit d132625419
3 changed files with 262 additions and 192 deletions
@@ -351,6 +351,7 @@
</aside>
<aside id="viewerSidebar" class="viewer-sidebar" aria-label="Viewer sidebar">
<div id="viewer-sidebar-resize-handle" class="viewer-sidebar-resize-handle" title="Drag to resize sidebar" aria-hidden="true"></div>
<div class="viewer-sidebar-header">
<span class="fw-semibold">Viewer</span>
<button type="button" class="btn btn-sm btn-outline-secondary" id="viewer-sidebar-close-btn">Close</button>
@@ -545,6 +546,18 @@
overflow: auto;
}
.viewer-sidebar-resize-handle {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 100%;
cursor: ew-resize;
z-index: 3;
background: linear-gradient(to right, rgba(100,181,246,0.28), rgba(100,181,246,0));
touch-action: none;
}
.viewer-sidebar.open {
transform: translateX(0);
}
@@ -990,6 +1003,7 @@
var sidebarBody = document.getElementById('viewerSidebarBody');
var sidebarBtn = document.getElementById('viewer-sidebar-btn');
var sidebarCloseBtn = document.getElementById('viewer-sidebar-close-btn');
var sidebarResizeHandle = document.getElementById('viewer-sidebar-resize-handle');
var popoutBtn = document.getElementById('viewer-popout-btn');
var mainViewerEl = document.getElementById('main_viewer');
var rootStyle = document.documentElement.style;
@@ -1031,6 +1045,41 @@
sidebarResizeObserver.observe(sidebarEl);
}
if (sidebarResizeHandle && sidebarEl) {
var sidebarResizing = false;
var sidebarStartX = 0;
var sidebarStartWidth = 0;
var onSidebarPointerMove = function (event) {
if (!sidebarResizing) return;
var delta = sidebarStartX - event.clientX;
var nextWidth = sidebarStartWidth + delta;
applySidebarWidth(nextWidth);
};
var stopSidebarResize = function () {
if (!sidebarResizing) return;
sidebarResizing = false;
document.body.style.cursor = '';
document.body.style.userSelect = '';
var width = Math.round(sidebarEl.getBoundingClientRect().width);
localStorage.setItem(SIDEBAR_W_KEY, width);
};
sidebarResizeHandle.addEventListener('pointerdown', function (event) {
event.preventDefault();
sidebarResizing = true;
sidebarStartX = event.clientX;
sidebarStartWidth = sidebarEl.getBoundingClientRect().width;
document.body.style.cursor = 'ew-resize';
document.body.style.userSelect = 'none';
});
window.addEventListener('pointermove', onSidebarPointerMove);
window.addEventListener('pointerup', stopSidebarResize);
window.addEventListener('pointercancel', stopSidebarResize);
}
var persistHeight = function () {
localStorage.setItem(HEIGHT_KEY, Math.round(container.getBoundingClientRect().height));
};