Spaces:
Running
Running
File size: 3,212 Bytes
1d0beb6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
document.addEventListener('DOMContentLoaded', () => {
// Elements
const leftSidebar = document.getElementById('sidebar-left');
const rightSidebar = document.getElementById('sidebar-right');
const resizerLeft = document.getElementById('resizer-left');
const resizerRight = document.getElementById('resizer-right');
const STORAGE_KEY_LEFT = 'lovelive_layout_left_width';
const STORAGE_KEY_RIGHT = 'lovelive_layout_right_width';
// Min/Max constraints
const MIN_WIDTH = 150;
const MAX_WIDTH_PCT = 0.45; // 45% of screen width
// Restore Preferences
const savedLeftObj = localStorage.getItem(STORAGE_KEY_LEFT);
const savedRightObj = localStorage.getItem(STORAGE_KEY_RIGHT);
if (savedLeftObj) leftSidebar.style.width = savedLeftObj + 'px';
if (savedRightObj) rightSidebar.style.width = savedRightObj + 'px';
// Drag State
let isResizingLeft = false;
let isResizingRight = false;
// --- Left Resizer Logic ---
resizerLeft.addEventListener('mousedown', (e) => {
isResizingLeft = true;
resizerLeft.classList.add('resizing');
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none'; // Prevent text selection
});
// --- Right Resizer Logic ---
resizerRight.addEventListener('mousedown', (e) => {
isResizingRight = true;
resizerRight.classList.add('resizing');
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
});
// --- Global Mouse Move ---
document.addEventListener('mousemove', (e) => {
if (!isResizingLeft && !isResizingRight) return;
const containerWidth = window.innerWidth;
if (isResizingLeft) {
// New Width = Mouse X position
let newWidth = e.clientX;
// Constrain
if (newWidth < MIN_WIDTH) newWidth = MIN_WIDTH;
if (newWidth > containerWidth * MAX_WIDTH_PCT) newWidth = containerWidth * MAX_WIDTH_PCT;
leftSidebar.style.width = newWidth + 'px';
}
if (isResizingRight) {
// New Width = Container Width - Mouse X position
let newWidth = containerWidth - e.clientX;
// Constrain
if (newWidth < MIN_WIDTH) newWidth = MIN_WIDTH;
if (newWidth > containerWidth * MAX_WIDTH_PCT) newWidth = containerWidth * MAX_WIDTH_PCT;
rightSidebar.style.width = newWidth + 'px';
}
});
// --- Global Mouse Up ---
document.addEventListener('mouseup', () => {
if (isResizingLeft) {
isResizingLeft = false;
resizerLeft.classList.remove('resizing');
localStorage.setItem(STORAGE_KEY_LEFT, parseInt(leftSidebar.style.width));
}
if (isResizingRight) {
isResizingRight = false;
resizerRight.classList.remove('resizing');
localStorage.setItem(STORAGE_KEY_RIGHT, parseInt(rightSidebar.style.width));
}
document.body.style.cursor = '';
document.body.style.userSelect = '';
});
});
|