Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -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));
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user