mirror of
https://github.com/DevJSTAR/JSTAR-Tab.git
synced 2025-04-18 17:35:26 +00:00
343 lines
12 KiB
JavaScript
343 lines
12 KiB
JavaScript
const GridLayout = {
|
|
defaults: {
|
|
type: 'default',
|
|
columns: 6,
|
|
gap: 16,
|
|
size: 80,
|
|
resizable: false
|
|
},
|
|
|
|
layouts: {
|
|
default: {
|
|
columns: 6,
|
|
gap: 16,
|
|
size: 80
|
|
},
|
|
compact: {
|
|
columns: 5,
|
|
gap: 8,
|
|
size: 70
|
|
},
|
|
comfortable: {
|
|
columns: 3,
|
|
gap: 24,
|
|
size: 100
|
|
},
|
|
list: {
|
|
columns: 1,
|
|
gap: 12,
|
|
size: 60
|
|
},
|
|
custom: {}
|
|
},
|
|
|
|
init: function() {
|
|
const settings = this.getSettings();
|
|
this.applyLayout(settings);
|
|
this.setupEventListeners();
|
|
this.toggleCustomSettings(settings.type === 'custom');
|
|
this.updateUI(settings);
|
|
},
|
|
|
|
getSettings: function() {
|
|
const storedSettings = Storage.get('gridLayout');
|
|
return { ...this.defaults, ...storedSettings };
|
|
},
|
|
|
|
saveSettings: function(settings) {
|
|
Storage.set('gridLayout', settings);
|
|
},
|
|
|
|
updateUI: function(settings) {
|
|
const layoutTypeSelect = document.getElementById('grid-layout-type');
|
|
if (layoutTypeSelect) {
|
|
layoutTypeSelect.value = settings.type;
|
|
const event = new Event('change');
|
|
layoutTypeSelect.dispatchEvent(event);
|
|
|
|
const customSelectDiv = layoutTypeSelect.closest('.custom-select');
|
|
if (customSelectDiv) {
|
|
const selectSelected = customSelectDiv.querySelector('.select-selected');
|
|
if (selectSelected) {
|
|
const selectedOption = layoutTypeSelect.options[layoutTypeSelect.selectedIndex];
|
|
selectSelected.textContent = selectedOption.textContent;
|
|
}
|
|
}
|
|
}
|
|
|
|
const columnsInput = document.getElementById('grid-columns');
|
|
const gapInput = document.getElementById('grid-gap');
|
|
const sizeInput = document.getElementById('grid-size');
|
|
|
|
if (columnsInput) columnsInput.value = settings.columns;
|
|
if (gapInput) gapInput.value = settings.gap;
|
|
if (sizeInput) {
|
|
sizeInput.value = settings.size;
|
|
sizeInput.disabled = !settings.resizable;
|
|
if (!settings.resizable) {
|
|
sizeInput.setAttribute('title', 'Enable \'Resizable Items\' to customize item size');
|
|
sizeInput.style.cursor = 'not-allowed';
|
|
} else {
|
|
sizeInput.removeAttribute('title');
|
|
sizeInput.style.cursor = 'auto';
|
|
}
|
|
}
|
|
|
|
const resizableToggle = document.getElementById('toggle-resizable');
|
|
if (resizableToggle) resizableToggle.checked = settings.resizable;
|
|
|
|
this.toggleCustomSettings(settings.type === 'custom');
|
|
},
|
|
|
|
applyLayout: function(settings) {
|
|
const grid = document.getElementById('shortcuts-grid');
|
|
if (!grid) return;
|
|
|
|
grid.classList.remove('grid-default', 'grid-compact', 'grid-comfortable', 'grid-list', 'grid-custom');
|
|
grid.classList.add(`grid-${settings.type}`);
|
|
|
|
if (settings.type === 'custom') {
|
|
grid.style.gridTemplateColumns = `repeat(${settings.columns}, minmax(${settings.size}px, 1fr))`;
|
|
grid.style.gap = `${settings.gap}px`;
|
|
} else {
|
|
const layoutConfig = this.layouts[settings.type];
|
|
if (layoutConfig) {
|
|
grid.style.gridTemplateColumns = `repeat(${layoutConfig.columns}, minmax(${layoutConfig.size}px, 1fr))`;
|
|
grid.style.gap = `${layoutConfig.gap}px`;
|
|
|
|
if (settings.type === 'list') {
|
|
grid.style.gridTemplateColumns = '1fr';
|
|
}
|
|
} else {
|
|
grid.style.gridTemplateColumns = '';
|
|
grid.style.gap = '';
|
|
}
|
|
}
|
|
|
|
this.applyResizable(settings.resizable);
|
|
},
|
|
|
|
setupEventListeners: function() {
|
|
const layoutTypeSelect = document.getElementById('grid-layout-type');
|
|
if (layoutTypeSelect) {
|
|
layoutTypeSelect.addEventListener('change', () => {
|
|
const settings = this.getSettings();
|
|
settings.type = layoutTypeSelect.value;
|
|
this.saveSettings(settings);
|
|
this.applyLayout(settings);
|
|
this.toggleCustomSettings(settings.type === 'custom');
|
|
});
|
|
}
|
|
|
|
const columnsInput = document.getElementById('grid-columns');
|
|
const gapInput = document.getElementById('grid-gap');
|
|
const sizeInput = document.getElementById('grid-size');
|
|
|
|
const validateInputValue = (input) => {
|
|
const min = parseInt(input.getAttribute('min'), 10);
|
|
const max = parseInt(input.getAttribute('max'), 10);
|
|
let value = parseInt(input.value, 10);
|
|
|
|
if (isNaN(value)) {
|
|
value = parseInt(input.defaultValue, 10);
|
|
}
|
|
|
|
if (value < min) value = min;
|
|
if (value > max) value = max;
|
|
|
|
input.value = value;
|
|
return value;
|
|
};
|
|
|
|
[columnsInput, gapInput, sizeInput].forEach(input => {
|
|
if (input) {
|
|
input.addEventListener('input', () => {
|
|
validateInputValue(input);
|
|
});
|
|
|
|
input.addEventListener('change', () => {
|
|
const value = validateInputValue(input);
|
|
const settings = this.getSettings();
|
|
settings[input.id.split('-')[1]] = value;
|
|
this.saveSettings(settings);
|
|
this.applyLayout(settings);
|
|
});
|
|
}
|
|
});
|
|
|
|
const resizableToggle = document.getElementById('toggle-resizable');
|
|
if (resizableToggle) {
|
|
resizableToggle.addEventListener('change', () => {
|
|
const settings = this.getSettings();
|
|
settings.resizable = resizableToggle.checked;
|
|
this.saveSettings(settings);
|
|
this.applyLayout(settings);
|
|
this.toggleItemSizeInput(settings.resizable);
|
|
});
|
|
}
|
|
|
|
const resetButton = document.getElementById('reset-layout');
|
|
if (resetButton) {
|
|
resetButton.addEventListener('click', () => {
|
|
shortcuts.showConfirmDialog(
|
|
'Reset Layout',
|
|
'Are you sure you want to reset the layout settings to default?',
|
|
() => this.resetToDefaults()
|
|
);
|
|
});
|
|
}
|
|
},
|
|
|
|
toggleItemSizeInput: function(enabled) {
|
|
const sizeInput = document.getElementById('grid-size');
|
|
if (sizeInput) {
|
|
sizeInput.disabled = !enabled;
|
|
if (enabled) {
|
|
sizeInput.removeAttribute('title');
|
|
sizeInput.style.cursor = 'auto';
|
|
} else {
|
|
sizeInput.setAttribute('title', 'Enable \'Resizable Items\' to customize item size');
|
|
sizeInput.style.cursor = 'not-allowed';
|
|
}
|
|
}
|
|
},
|
|
|
|
toggleCustomSettings: function(show) {
|
|
const customSettings = document.getElementById('custom-grid-settings');
|
|
if (customSettings) {
|
|
if (show) {
|
|
customSettings.classList.remove('hidden');
|
|
} else {
|
|
customSettings.classList.add('hidden');
|
|
}
|
|
}
|
|
},
|
|
|
|
applyResizable: function(resizable) {
|
|
const shortcuts = document.querySelectorAll('.shortcut');
|
|
|
|
shortcuts.forEach(shortcut => {
|
|
const existingHandle = shortcut.querySelector('.resize-handle');
|
|
if (existingHandle) {
|
|
existingHandle.remove();
|
|
}
|
|
|
|
shortcut.classList.remove('resizable');
|
|
|
|
if (resizable) {
|
|
shortcut.classList.add('resizable');
|
|
|
|
const resizeHandle = document.createElement('div');
|
|
resizeHandle.className = 'resize-handle';
|
|
shortcut.appendChild(resizeHandle);
|
|
|
|
this.setupResizeEvents(shortcut, resizeHandle);
|
|
}
|
|
});
|
|
},
|
|
|
|
setupResizeEvents: function(shortcut, handle) {
|
|
let startX, startY, startWidth, startHeight;
|
|
|
|
const startResize = (e) => {
|
|
e.preventDefault();
|
|
shortcut.classList.add('resizing');
|
|
|
|
startX = e.clientX;
|
|
startY = e.clientY;
|
|
startWidth = shortcut.offsetWidth;
|
|
startHeight = shortcut.offsetHeight;
|
|
|
|
document.addEventListener('mousemove', resize);
|
|
document.addEventListener('mouseup', stopResize);
|
|
};
|
|
|
|
const resize = (e) => {
|
|
const newWidth = startWidth + (e.clientX - startX);
|
|
const newHeight = startHeight + (e.clientY - startY);
|
|
|
|
shortcut.style.width = `${Math.max(80, newWidth)}px`;
|
|
shortcut.style.height = `${Math.max(80, newHeight)}px`;
|
|
};
|
|
|
|
const stopResize = () => {
|
|
shortcut.classList.remove('resizing');
|
|
document.removeEventListener('mousemove', resize);
|
|
document.removeEventListener('mouseup', stopResize);
|
|
};
|
|
|
|
handle.addEventListener('mousedown', startResize);
|
|
},
|
|
|
|
resetToDefaults: function() {
|
|
this.saveSettings(this.defaults);
|
|
this.updateUI(this.defaults);
|
|
this.applyLayout(this.defaults);
|
|
this.toggleCustomSettings(false);
|
|
|
|
const visibilitySettings = {
|
|
showGreeting: true,
|
|
showSearch: true,
|
|
showShortcuts: true,
|
|
showAddButton: true,
|
|
showGrid: true
|
|
};
|
|
|
|
Storage.set('visibility', visibilitySettings);
|
|
Storage.set('show_greeting', true);
|
|
Storage.set('show_search', true);
|
|
Storage.set('show_shortcuts', true);
|
|
Storage.set('show_addShortcut', true);
|
|
|
|
const greetingToggle = document.getElementById('toggle-greeting');
|
|
const searchToggle = document.getElementById('toggle-search');
|
|
const shortcutsToggle = document.getElementById('toggle-shortcuts');
|
|
const addButtonToggle = document.getElementById('toggle-add-shortcut');
|
|
|
|
if (greetingToggle) greetingToggle.checked = true;
|
|
if (searchToggle) searchToggle.checked = true;
|
|
if (shortcutsToggle) shortcutsToggle.checked = true;
|
|
if (addButtonToggle) addButtonToggle.checked = true;
|
|
|
|
const greeting = document.getElementById('greeting');
|
|
const search = document.getElementById('search-container');
|
|
const shortcuts = document.getElementById('shortcuts-grid');
|
|
const addButton = document.getElementById('add-shortcut');
|
|
|
|
const showElement = (element) => {
|
|
if (element) {
|
|
element.style.visibility = 'visible';
|
|
element.style.opacity = '1';
|
|
element.style.position = 'relative';
|
|
element.style.pointerEvents = 'auto';
|
|
}
|
|
};
|
|
|
|
showElement(greeting);
|
|
showElement(search);
|
|
showElement(shortcuts);
|
|
showElement(addButton);
|
|
},
|
|
|
|
reset: function() {
|
|
this.resetToDefaults();
|
|
|
|
notifications.show('Layout settings reset to defaults.', 'success');
|
|
|
|
return this.defaults;
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('DOM content loaded - initializing grid layout');
|
|
GridLayout.init();
|
|
});
|
|
|
|
window.addEventListener('load', () => {
|
|
console.log('Window fully loaded - ensuring grid layout is initialized');
|
|
setTimeout(() => {
|
|
if (!window.gridLayoutInitialized) {
|
|
GridLayout.init();
|
|
}
|
|
}, 500);
|
|
}); |