303 lines
11 KiB
JavaScript
303 lines
11 KiB
JavaScript
|
import { Clock } from './modules/Clock.js';
|
||
|
|
import { LinksManager } from './modules/LinksManager.js';
|
||
|
|
import { SearchEngineManager } from './modules/SearchManager.js';
|
||
|
|
import { ShortcutManager } from './modules/ShortcutManager.js';
|
||
|
|
import { SettingsManager } from './modules/SettingsManager.js';
|
||
|
|
|
||
|
|
// Make managers available globally
|
||
|
|
window.linksManager = null;
|
||
|
|
window.searchManager = null;
|
||
|
|
window.shortcutManager = null;
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
// Debug Font Awesome loading
|
||
|
|
const testIcon = document.createElement('i');
|
||
|
|
testIcon.className = 'fas fa-check';
|
||
|
|
console.log('Font Awesome test:', window.getComputedStyle(testIcon).fontFamily);
|
||
|
|
|
||
|
|
// Initialize clock
|
||
|
|
const clock = new Clock(
|
||
|
|
document.getElementById('clock'),
|
||
|
|
document.getElementById('greeting')
|
||
|
|
);
|
||
|
|
clock.start();
|
||
|
|
|
||
|
|
// Initialize settings
|
||
|
|
const settings = new SettingsManager();
|
||
|
|
|
||
|
|
// Focus search on load
|
||
|
|
document.getElementById('search-input').focus();
|
||
|
|
|
||
|
|
// Name handling
|
||
|
|
const nameInput = document.getElementById('nameInput');
|
||
|
|
const saveNameBtn = document.getElementById('saveName');
|
||
|
|
|
||
|
|
// Load saved name
|
||
|
|
const savedName = localStorage.getItem('username');
|
||
|
|
if (savedName) {
|
||
|
|
nameInput.value = savedName;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Save name
|
||
|
|
saveNameBtn.addEventListener('click', () => {
|
||
|
|
const name = nameInput.value.trim();
|
||
|
|
if (name) {
|
||
|
|
localStorage.setItem('username', name);
|
||
|
|
} else {
|
||
|
|
localStorage.removeItem('username');
|
||
|
|
nameInput.value = ''; // Clear input if empty
|
||
|
|
}
|
||
|
|
clock.updateGreeting();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Also handle Enter key in name input
|
||
|
|
nameInput.addEventListener('keypress', (e) => {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
e.preventDefault();
|
||
|
|
saveNameBtn.click();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Background handling
|
||
|
|
const fileInput = document.getElementById('bgImage');
|
||
|
|
const removeButton = document.getElementById('removeButton');
|
||
|
|
const presetOptions = document.querySelectorAll('.preset-bg-option');
|
||
|
|
|
||
|
|
function setBackground(url) {
|
||
|
|
document.body.style.backgroundImage = url ? `url(${url})` : 'none';
|
||
|
|
localStorage.setItem('background', url || '');
|
||
|
|
|
||
|
|
// Update active state of preset options
|
||
|
|
presetOptions.forEach(option => {
|
||
|
|
const optionBg = option.dataset.bg;
|
||
|
|
option.classList.toggle('active', optionBg === (url || 'none'));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load saved background
|
||
|
|
const savedBg = localStorage.getItem('background');
|
||
|
|
if (savedBg) {
|
||
|
|
setBackground(savedBg);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handle preset backgrounds
|
||
|
|
presetOptions.forEach(option => {
|
||
|
|
const bgUrl = option.dataset.bg;
|
||
|
|
|
||
|
|
// Add none class for the no-background option
|
||
|
|
if (bgUrl === 'none') {
|
||
|
|
option.classList.add('none');
|
||
|
|
} else {
|
||
|
|
// Set preview image
|
||
|
|
option.style.backgroundImage = `url(${bgUrl})`;
|
||
|
|
|
||
|
|
// Preload image
|
||
|
|
const img = new Image();
|
||
|
|
img.src = bgUrl;
|
||
|
|
}
|
||
|
|
|
||
|
|
option.addEventListener('click', () => {
|
||
|
|
setBackground(bgUrl === 'none' ? '' : bgUrl);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Handle custom upload
|
||
|
|
fileInput.addEventListener('change', (e) => {
|
||
|
|
const file = e.target.files[0];
|
||
|
|
if (file) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = (e) => {
|
||
|
|
setBackground(e.target.result);
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
removeButton.addEventListener('click', () => {
|
||
|
|
setBackground('');
|
||
|
|
fileInput.value = '';
|
||
|
|
});
|
||
|
|
|
||
|
|
// Settings popup handling
|
||
|
|
const settingsButton = document.querySelector('.settings-button');
|
||
|
|
const settingsPopup = document.getElementById('settingsPopup');
|
||
|
|
const closeSettings = document.querySelector('.close-settings');
|
||
|
|
|
||
|
|
settingsButton.addEventListener('click', () => {
|
||
|
|
settingsPopup.classList.add('show');
|
||
|
|
});
|
||
|
|
|
||
|
|
closeSettings.addEventListener('click', () => {
|
||
|
|
settingsPopup.classList.remove('show');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Close popup when clicking outside
|
||
|
|
settingsPopup.addEventListener('click', (e) => {
|
||
|
|
if (e.target === settingsPopup) {
|
||
|
|
settingsPopup.classList.remove('show');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Theme handling
|
||
|
|
const themeSelect = document.getElementById('themeSelect');
|
||
|
|
|
||
|
|
function setTheme(theme) {
|
||
|
|
const root = document.documentElement;
|
||
|
|
root.style.setProperty('--base', `var(--${theme}-base)`);
|
||
|
|
root.style.setProperty('--base-rgb', `var(--${theme}-base-rgb)`);
|
||
|
|
root.style.setProperty('--surface0', `var(--${theme}-surface0)`);
|
||
|
|
root.style.setProperty('--surface1', `var(--${theme}-surface1)`);
|
||
|
|
root.style.setProperty('--text', `var(--${theme}-text)`);
|
||
|
|
root.style.setProperty('--blue', `var(--${theme}-blue)`);
|
||
|
|
root.style.setProperty('--pink', `var(--${theme}-pink)`);
|
||
|
|
localStorage.setItem('theme', theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load saved theme
|
||
|
|
const savedTheme = localStorage.getItem('theme') || 'mocha';
|
||
|
|
themeSelect.value = savedTheme;
|
||
|
|
setTheme(savedTheme);
|
||
|
|
|
||
|
|
// Handle theme changes
|
||
|
|
themeSelect.addEventListener('change', (e) => {
|
||
|
|
setTheme(e.target.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialize managers globally
|
||
|
|
window.linksManager = new LinksManager();
|
||
|
|
window.searchManager = new SearchEngineManager();
|
||
|
|
window.shortcutManager = new ShortcutManager();
|
||
|
|
const shortcutManager = new ShortcutManager();
|
||
|
|
|
||
|
|
// Layout handling
|
||
|
|
const layoutSelect = document.getElementById('layoutSelect');
|
||
|
|
layoutSelect.addEventListener('change', (e) => {
|
||
|
|
document.body.setAttribute('data-layout', e.target.value);
|
||
|
|
localStorage.setItem('layout', e.target.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Load saved layout
|
||
|
|
const savedLayout = localStorage.getItem('layout') || 'grid';
|
||
|
|
layoutSelect.value = savedLayout;
|
||
|
|
document.body.setAttribute('data-layout', savedLayout);
|
||
|
|
|
||
|
|
// Custom CSS handling
|
||
|
|
const customCSSEditor = document.getElementById('customCSS');
|
||
|
|
customCSSEditor.value = localStorage.getItem('customCSS') || '';
|
||
|
|
customCSSEditor.addEventListener('change', () => {
|
||
|
|
localStorage.setItem('customCSS', customCSSEditor.value);
|
||
|
|
applyCustomCSS();
|
||
|
|
});
|
||
|
|
|
||
|
|
function applyCustomCSS() {
|
||
|
|
let customStyle = document.getElementById('custom-css') || document.createElement('style');
|
||
|
|
customStyle.id = 'custom-css';
|
||
|
|
customStyle.textContent = customCSSEditor.value;
|
||
|
|
document.head.appendChild(customStyle);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply custom CSS on load
|
||
|
|
applyCustomCSS();
|
||
|
|
|
||
|
|
// Font handling
|
||
|
|
const fontSelect = document.getElementById('fontSelect');
|
||
|
|
fontSelect.addEventListener('change', (e) => {
|
||
|
|
document.documentElement.style.setProperty('--font-family', e.target.value);
|
||
|
|
if (e.target.value === 'MapleMono') {
|
||
|
|
document.documentElement.style.setProperty('--font-mono', 'MapleMono');
|
||
|
|
}
|
||
|
|
localStorage.setItem('font', e.target.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Load saved font
|
||
|
|
const savedFont = localStorage.getItem('font');
|
||
|
|
if (savedFont) {
|
||
|
|
fontSelect.value = savedFont;
|
||
|
|
document.documentElement.style.setProperty('--font-family', savedFont);
|
||
|
|
if (savedFont === 'MapleMono') {
|
||
|
|
document.documentElement.style.setProperty('--font-mono', 'MapleMono');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Event delegation for settings actions
|
||
|
|
document.addEventListener('click', (e) => {
|
||
|
|
const action = e.target.dataset.action;
|
||
|
|
if (action) {
|
||
|
|
switch (action) {
|
||
|
|
case 'openSettings':
|
||
|
|
settingsPopup.classList.add('show');
|
||
|
|
break;
|
||
|
|
case 'closeSettings':
|
||
|
|
settingsPopup.classList.remove('show');
|
||
|
|
break;
|
||
|
|
case 'removeBackground':
|
||
|
|
setBackground('');
|
||
|
|
fileInput.value = '';
|
||
|
|
break;
|
||
|
|
case 'saveName':
|
||
|
|
const name = nameInput.value.trim();
|
||
|
|
if (name) {
|
||
|
|
localStorage.setItem('username', name);
|
||
|
|
} else {
|
||
|
|
localStorage.removeItem('username');
|
||
|
|
nameInput.value = ''; // Clear input if empty
|
||
|
|
}
|
||
|
|
clock.updateGreeting();
|
||
|
|
break;
|
||
|
|
case 'addCategory':
|
||
|
|
const categoryName = prompt('Enter category name:');
|
||
|
|
if (categoryName) linksManager.addCategory(categoryName);
|
||
|
|
break;
|
||
|
|
case 'addLink':
|
||
|
|
const category = prompt('Enter category:');
|
||
|
|
if (category && linksManager.links[category]) {
|
||
|
|
linksManager.addLink(category, {
|
||
|
|
name: 'New Link',
|
||
|
|
url: 'https://',
|
||
|
|
icon: 'fas fa-link'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'exportLinks':
|
||
|
|
linksManager.export();
|
||
|
|
break;
|
||
|
|
case 'importLinks':
|
||
|
|
document.getElementById('importLinks').click();
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('importLinks').addEventListener('change', (e) => {
|
||
|
|
if (e.target.files[0]) linksManager.import(e.target.files[0]);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Link size handling with reset functionality
|
||
|
|
const linkSizeControl = document.getElementById('linkSizeControl');
|
||
|
|
const linkSizeValue = document.getElementById('linkSizeValue');
|
||
|
|
const resetLinkSize = document.getElementById('resetLinkSize');
|
||
|
|
const DEFAULT_LINK_SIZE = 16;
|
||
|
|
|
||
|
|
const setLinkSize = (size) => {
|
||
|
|
document.documentElement.style.setProperty('--link-size', `${size}px`);
|
||
|
|
linkSizeValue.textContent = `${size}px`;
|
||
|
|
linkSizeControl.value = size;
|
||
|
|
localStorage.setItem('linkSize', size);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Load saved link size or set default
|
||
|
|
const savedLinkSize = localStorage.getItem('linkSize') || DEFAULT_LINK_SIZE;
|
||
|
|
setLinkSize(parseInt(savedLinkSize));
|
||
|
|
|
||
|
|
// Update on change
|
||
|
|
linkSizeControl.addEventListener('input', (e) => {
|
||
|
|
setLinkSize(parseInt(e.target.value));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Reset button handler
|
||
|
|
resetLinkSize.addEventListener('click', () => {
|
||
|
|
setLinkSize(DEFAULT_LINK_SIZE);
|
||
|
|
});
|
||
|
|
});
|