102 lines
3.7 KiB
JavaScript
102 lines
3.7 KiB
JavaScript
/**
|
|
* Column Resizer Module
|
|
* Handles draggable column dividers
|
|
*/
|
|
|
|
class ColumnResizer {
|
|
constructor() {
|
|
this.resizer1 = document.getElementById('resizer1');
|
|
this.resizer2 = document.getElementById('resizer2');
|
|
this.sidebarPane = document.getElementById('sidebarPane');
|
|
this.editorPane = document.getElementById('editorPane');
|
|
this.previewPane = document.getElementById('previewPane');
|
|
|
|
// Load saved dimensions
|
|
this.loadDimensions();
|
|
|
|
// Setup listeners
|
|
this.setupResizers();
|
|
}
|
|
|
|
setupResizers() {
|
|
this.resizer1.addEventListener('mousedown', (e) => this.startResize(e, 1));
|
|
this.resizer2.addEventListener('mousedown', (e) => this.startResize(e, 2));
|
|
}
|
|
|
|
startResize(e, resizerId) {
|
|
e.preventDefault();
|
|
|
|
const startX = e.clientX;
|
|
const startWidth1 = this.sidebarPane.offsetWidth;
|
|
const startWidth2 = this.editorPane.offsetWidth;
|
|
const containerWidth = this.sidebarPane.parentElement.offsetWidth;
|
|
|
|
const resizer = resizerId === 1 ? this.resizer1 : this.resizer2;
|
|
resizer.classList.add('dragging');
|
|
|
|
const handleMouseMove = (moveEvent) => {
|
|
const deltaX = moveEvent.clientX - startX;
|
|
|
|
if (resizerId === 1) {
|
|
// Resize sidebar and editor
|
|
const newWidth1 = Math.max(150, Math.min(40 * containerWidth / 100, startWidth1 + deltaX));
|
|
const newWidth2 = startWidth2 - (newWidth1 - startWidth1);
|
|
|
|
this.sidebarPane.style.flex = `0 0 ${newWidth1}px`;
|
|
this.editorPane.style.flex = `1 1 ${newWidth2}px`;
|
|
} else if (resizerId === 2) {
|
|
// Resize editor and preview
|
|
const newWidth2 = Math.max(250, Math.min(70 * containerWidth / 100, startWidth2 + deltaX));
|
|
const containerFlex = this.sidebarPane.offsetWidth;
|
|
|
|
this.editorPane.style.flex = `0 0 ${newWidth2}px`;
|
|
this.previewPane.style.flex = `1 1 auto`;
|
|
}
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
resizer.classList.remove('dragging');
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
|
|
// Save dimensions
|
|
this.saveDimensions();
|
|
|
|
// Trigger editor resize
|
|
if (window.editor && window.editor.editor) {
|
|
window.editor.editor.refresh();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
}
|
|
|
|
saveDimensions() {
|
|
const dimensions = {
|
|
sidebar: this.sidebarPane.offsetWidth,
|
|
editor: this.editorPane.offsetWidth,
|
|
preview: this.previewPane.offsetWidth
|
|
};
|
|
localStorage.setItem('columnDimensions', JSON.stringify(dimensions));
|
|
}
|
|
|
|
loadDimensions() {
|
|
const saved = localStorage.getItem('columnDimensions');
|
|
if (!saved) return;
|
|
|
|
try {
|
|
const { sidebar, editor, preview } = JSON.parse(saved);
|
|
this.sidebarPane.style.flex = `0 0 ${sidebar}px`;
|
|
this.editorPane.style.flex = `0 0 ${editor}px`;
|
|
this.previewPane.style.flex = `1 1 auto`;
|
|
} catch (error) {
|
|
console.error('Failed to load column dimensions:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize on DOM ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.columnResizer = new ColumnResizer();
|
|
}); |