feat(settings): add JS module for localStorage preferences and panel
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
39f8738361
commit
a4e77bd8b2
1 changed files with 266 additions and 0 deletions
266
internal/views/static/js/settings.js
Normal file
266
internal/views/static/js/settings.js
Normal file
|
|
@ -0,0 +1,266 @@
|
|||
var ALL_ENGINES = [
|
||||
'wikipedia', 'arxiv', 'crossref', 'braveapi',
|
||||
'qwant', 'duckduckgo', 'github', 'reddit', 'bing'
|
||||
];
|
||||
|
||||
var DEFAULT_PREFS = {
|
||||
theme: 'system',
|
||||
engines: ALL_ENGINES.slice(),
|
||||
safeSearch: 'moderate',
|
||||
format: 'html'
|
||||
};
|
||||
|
||||
var STORAGE_KEY = 'kafka_prefs';
|
||||
|
||||
function loadPrefs() {
|
||||
var stored = localStorage.getItem(STORAGE_KEY);
|
||||
var prefs = DEFAULT_PREFS;
|
||||
if (stored) {
|
||||
try {
|
||||
var parsed = JSON.parse(stored);
|
||||
prefs = {
|
||||
theme: parsed.theme || DEFAULT_PREFS.theme,
|
||||
engines: parsed.engines || DEFAULT_PREFS.engines.slice(),
|
||||
safeSearch: parsed.safeSearch || DEFAULT_PREFS.safeSearch,
|
||||
format: parsed.format || DEFAULT_PREFS.format
|
||||
};
|
||||
} catch (e) {
|
||||
prefs = DEFAULT_PREFS;
|
||||
}
|
||||
}
|
||||
return prefs;
|
||||
}
|
||||
|
||||
function savePrefs(prefs) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
if (theme === 'system') {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
function syncEngineInput(prefs) {
|
||||
var input = document.getElementById('engines-input');
|
||||
if (input) {
|
||||
input.value = prefs.engines.join(',');
|
||||
}
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
var popover = document.getElementById('settings-popover');
|
||||
var trigger = document.getElementById('settings-trigger');
|
||||
if (popover) {
|
||||
popover.setAttribute('data-open', 'false');
|
||||
}
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
if (trigger) {
|
||||
trigger.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function openPanel() {
|
||||
var popover = document.getElementById('settings-popover');
|
||||
var trigger = document.getElementById('settings-trigger');
|
||||
if (popover) {
|
||||
popover.setAttribute('data-open', 'true');
|
||||
}
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
var firstFocusable = popover ? popover.querySelector('button, input, select, textarea, a[href], [tabindex]:not([tabindex="-1"])') : null;
|
||||
if (firstFocusable) {
|
||||
firstFocusable.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
return str
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
}
|
||||
|
||||
function renderPanel(prefs) {
|
||||
var themeIcons = { light: '☀️', dark: '🌙', system: '⌨' };
|
||||
var safeOptions = ['moderate', 'strict', 'off'];
|
||||
var formatOptions = ['html', 'json', 'csv', 'rss'];
|
||||
|
||||
var html = '<div id="settings-panel-inner">';
|
||||
html += '<h2>Settings</h2>';
|
||||
|
||||
// Theme buttons
|
||||
html += '<fieldset><legend>Theme</legend>';
|
||||
html += '<div class="theme-buttons">';
|
||||
['light', 'dark', 'system'].forEach(function(t) {
|
||||
var checked = prefs.theme === t ? ' checked' : '';
|
||||
var icon = escapeHtml(themeIcons[t]);
|
||||
html += '<label><input type="radio" name="theme" value="' + escapeHtml(t) + '"' + checked + '> ' + icon + ' ' + escapeHtml(t.charAt(0).toUpperCase() + t.slice(1)) + '</label>';
|
||||
});
|
||||
html += '</div></fieldset>';
|
||||
|
||||
// Engine checkboxes
|
||||
html += '<fieldset><legend>Engines</legend>';
|
||||
html += '<div class="engine-grid">';
|
||||
ALL_ENGINES.forEach(function(engine) {
|
||||
var checked = prefs.engines.indexOf(engine) !== -1 ? ' checked' : '';
|
||||
html += '<label><input type="checkbox" name="engine" value="' + escapeHtml(engine) + '"' + checked + '> ' + escapeHtml(engine) + '</label>';
|
||||
});
|
||||
html += '</div></fieldset>';
|
||||
|
||||
html += '<p class="notice">Engine changes apply to your next search.</p>';
|
||||
|
||||
// Safe search dropdown
|
||||
html += '<label for="safe-search-select">Safe Search</label>';
|
||||
html += '<select id="safe-search-select">';
|
||||
safeOptions.forEach(function(opt) {
|
||||
var selected = prefs.safeSearch === opt ? ' selected' : '';
|
||||
html += '<option value="' + escapeHtml(opt) + '"' + selected + '>' + escapeHtml(opt.charAt(0).toUpperCase() + opt.slice(1)) + '</option>';
|
||||
});
|
||||
html += '</select>';
|
||||
|
||||
// Format dropdown
|
||||
html += '<label for="format-select">Format</label>';
|
||||
html += '<select id="format-select">';
|
||||
formatOptions.forEach(function(opt) {
|
||||
var selected = prefs.format === opt ? ' selected' : '';
|
||||
html += '<option value="' + escapeHtml(opt) + '"' + selected + '>' + escapeHtml(opt.toUpperCase()) + '</option>';
|
||||
});
|
||||
html += '</select>';
|
||||
|
||||
html += '<button type="button" id="settings-close">Close</button>';
|
||||
html += '</div>';
|
||||
|
||||
document.body.innerHTML = html;
|
||||
|
||||
// Attach listeners to theme buttons
|
||||
var themeButtons = document.querySelectorAll('input[name="theme"]');
|
||||
themeButtons.forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var newPrefs = loadPrefs();
|
||||
newPrefs.theme = btn.value;
|
||||
savePrefs(newPrefs);
|
||||
applyTheme(newPrefs.theme);
|
||||
});
|
||||
});
|
||||
|
||||
// Attach listeners to engine checkboxes
|
||||
var engineCheckboxes = document.querySelectorAll('input[name="engine"]');
|
||||
engineCheckboxes.forEach(function(cb) {
|
||||
cb.addEventListener('change', function() {
|
||||
var newPrefs = loadPrefs();
|
||||
if (cb.checked) {
|
||||
if (newPrefs.engines.indexOf(cb.value) === -1) {
|
||||
newPrefs.engines.push(cb.value);
|
||||
}
|
||||
} else {
|
||||
newPrefs.engines = newPrefs.engines.filter(function(e) { return e !== cb.value; });
|
||||
}
|
||||
savePrefs(newPrefs);
|
||||
syncEngineInput(newPrefs);
|
||||
});
|
||||
});
|
||||
|
||||
// Attach listener to safe search dropdown
|
||||
var safeSelect = document.getElementById('safe-search-select');
|
||||
if (safeSelect) {
|
||||
safeSelect.addEventListener('change', function() {
|
||||
var newPrefs = loadPrefs();
|
||||
newPrefs.safeSearch = safeSelect.value;
|
||||
savePrefs(newPrefs);
|
||||
});
|
||||
}
|
||||
|
||||
// Attach listener to format dropdown
|
||||
var formatSelect = document.getElementById('format-select');
|
||||
if (formatSelect) {
|
||||
formatSelect.addEventListener('change', function() {
|
||||
var newPrefs = loadPrefs();
|
||||
newPrefs.format = formatSelect.value;
|
||||
savePrefs(newPrefs);
|
||||
});
|
||||
}
|
||||
|
||||
// Attach listener to close button
|
||||
var closeBtn = document.getElementById('settings-close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', closePanel);
|
||||
}
|
||||
}
|
||||
|
||||
function initSettings() {
|
||||
var prefs = loadPrefs();
|
||||
applyTheme(prefs.theme);
|
||||
syncEngineInput(prefs);
|
||||
renderPanel(prefs);
|
||||
|
||||
var trigger = document.getElementById('settings-trigger');
|
||||
var triggerMobile = document.getElementById('settings-trigger-mobile');
|
||||
|
||||
function togglePanel() {
|
||||
var popover = document.getElementById('settings-popover');
|
||||
if (popover && popover.getAttribute('data-open') === 'true') {
|
||||
closePanel();
|
||||
} else {
|
||||
openPanel();
|
||||
}
|
||||
}
|
||||
|
||||
if (trigger) {
|
||||
trigger.addEventListener('click', togglePanel);
|
||||
}
|
||||
if (triggerMobile) {
|
||||
triggerMobile.addEventListener('click', togglePanel);
|
||||
}
|
||||
}
|
||||
|
||||
// Escape key handler
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
var popover = document.getElementById('settings-popover');
|
||||
if (popover && popover.getAttribute('data-open') === 'true') {
|
||||
closePanel();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Click outside handler
|
||||
document.addEventListener('click', function(e) {
|
||||
var popover = document.getElementById('settings-popover');
|
||||
var trigger = document.getElementById('settings-trigger');
|
||||
if (popover && popover.getAttribute('data-open') === 'true') {
|
||||
if (!popover.contains(e.target) && (!trigger || !trigger.contains(e.target))) {
|
||||
closePanel();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Focus trap
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Tab') {
|
||||
var popover = document.getElementById('settings-popover');
|
||||
if (popover && popover.getAttribute('data-open') === 'true') {
|
||||
var focusableElements = popover.querySelectorAll('button, input, select, textarea, a[href], [tabindex]:not([tabindex="-1"])');
|
||||
var firstEl = focusableElements[0];
|
||||
var lastEl = focusableElements[focusableElements.length - 1];
|
||||
if (e.shiftKey && document.activeElement === firstEl) {
|
||||
e.preventDefault();
|
||||
lastEl.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === lastEl) {
|
||||
e.preventDefault();
|
||||
firstEl.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initSettings);
|
||||
} else {
|
||||
initSettings();
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue