fix(settings): rewrite renderPanel to use panel body innerHTML, not document.body
- Replace document.body.innerHTML with panel.querySelector('.settings-popover-body').innerHTML
- Use theme buttons (.theme-btn) with icons instead of radio buttons
- Use .engine-toggle class for engine checkboxes in 2-column grid
- Include settings-notice paragraph for engine changes
- Use dropdowns for safe search and format with proper ids
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d67975a8c5
commit
48179ee4b3
1 changed files with 101 additions and 100 deletions
|
|
@ -80,121 +80,122 @@ function openPanel() {
|
|||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
return str
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
return String(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 panel = document.getElementById('settings-popover');
|
||||
if (!panel) return;
|
||||
var body = panel.querySelector('.settings-popover-body');
|
||||
if (!body) return;
|
||||
|
||||
var html = '<div id="settings-panel-inner">';
|
||||
html += '<h2>Settings</h2>';
|
||||
var themeBtns = '';
|
||||
['light', 'dark', 'system'].forEach(function(t) {
|
||||
var icons = { light: '\u2600', dark: '\u263D', system: '\u2318' };
|
||||
var labels = { light: 'Light', dark: 'Dark', system: 'System' };
|
||||
var active = prefs.theme === t ? ' active' : '';
|
||||
themeBtns += '<button class="theme-btn' + active + '" data-theme="' + t + '">' + icons[t] + ' ' + labels[t] + '</button>';
|
||||
});
|
||||
|
||||
var engineToggles = '';
|
||||
ALL_ENGINES.forEach(function(name) {
|
||||
var checked = prefs.engines.indexOf(name) !== -1 ? ' checked' : '';
|
||||
engineToggles += '<label class="engine-toggle"><input type="checkbox" value="' + escapeHtml(name) + '"' + checked + '><span>' + escapeHtml(name) + '</span></label>';
|
||||
});
|
||||
|
||||
var ssOptions = [
|
||||
{ val: 'moderate', label: 'Moderate' },
|
||||
{ val: 'strict', label: 'Strict' },
|
||||
{ val: 'off', label: 'Off' }
|
||||
];
|
||||
var fmtOptions = [
|
||||
{ val: 'html', label: 'HTML' },
|
||||
{ val: 'json', label: 'JSON' },
|
||||
{ val: 'csv', label: 'CSV' },
|
||||
{ val: 'rss', label: 'RSS' }
|
||||
];
|
||||
var ssOptionsHtml = '';
|
||||
var fmtOptionsHtml = '';
|
||||
ssOptions.forEach(function(o) {
|
||||
var sel = prefs.safeSearch === o.val ? ' selected' : '';
|
||||
ssOptionsHtml += '<option value="' + o.val + '"' + sel + '>' + o.label + '</option>';
|
||||
});
|
||||
fmtOptions.forEach(function(o) {
|
||||
var sel = prefs.format === o.val ? ' selected' : '';
|
||||
fmtOptionsHtml += '<option value="' + o.val + '"' + sel + '>' + o.label + '</option>';
|
||||
});
|
||||
|
||||
body.innerHTML =
|
||||
'<div class="settings-section">' +
|
||||
'<div class="settings-section-title">Appearance</div>' +
|
||||
'<div class="theme-buttons">' + themeBtns + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="settings-section">' +
|
||||
'<div class="settings-section-title">Engines</div>' +
|
||||
'<div class="engine-grid">' + engineToggles + '</div>' +
|
||||
'<p class="settings-notice">Engine changes apply to your next search.</p>' +
|
||||
'</div>' +
|
||||
'<div class="settings-section">' +
|
||||
'<div class="settings-section-title">Search Defaults</div>' +
|
||||
'<div class="setting-row">' +
|
||||
'<label for="pref-safesearch">Safe search</label>' +
|
||||
'<select id="pref-safesearch">' + ssOptionsHtml + '</select>' +
|
||||
'</div>' +
|
||||
'<div class="setting-row">' +
|
||||
'<label for="pref-format">Default format</label>' +
|
||||
'<select id="pref-format">' + fmtOptionsHtml + '</select>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
// 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>';
|
||||
var themeBtnEls = panel.querySelectorAll('.theme-btn');
|
||||
for (var i = 0; i < themeBtnEls.length; i++) {
|
||||
themeBtnEls[i].addEventListener('click', (function(btn) {
|
||||
return function() {
|
||||
prefs.theme = btn.getAttribute('data-theme');
|
||||
savePrefs(prefs);
|
||||
applyTheme(prefs.theme);
|
||||
syncEngineInput(prefs);
|
||||
renderPanel(prefs);
|
||||
};
|
||||
})(themeBtnEls[i]));
|
||||
}
|
||||
|
||||
// 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);
|
||||
var checkboxes = panel.querySelectorAll('.engine-toggle input[type="checkbox"]');
|
||||
for (var j = 0; j < checkboxes.length; j++) {
|
||||
checkboxes[j].addEventListener('change', (function(cb) {
|
||||
return function() {
|
||||
var checked = Array.prototype.slice.call(panel.querySelectorAll('.engine-toggle input[type="checkbox"]:checked')).map(function(el) { return el.value; });
|
||||
if (checked.length === 0) { renderPanel(prefs); return; }
|
||||
prefs.engines = checked;
|
||||
savePrefs(prefs);
|
||||
syncEngineInput(prefs);
|
||||
};
|
||||
})(checkboxes[j]));
|
||||
}
|
||||
} else {
|
||||
newPrefs.engines = newPrefs.engines.filter(function(e) { return e !== cb.value; });
|
||||
}
|
||||
if (newPrefs.engines.length === 0) {
|
||||
renderPanel(loadPrefs());
|
||||
return;
|
||||
}
|
||||
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);
|
||||
// Safe search
|
||||
var ssEl = panel.querySelector('#pref-safesearch');
|
||||
if (ssEl) {
|
||||
ssEl.addEventListener('change', function() {
|
||||
prefs.safeSearch = ssEl.value;
|
||||
savePrefs(prefs);
|
||||
});
|
||||
}
|
||||
|
||||
// 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);
|
||||
// Format
|
||||
var fmtEl = panel.querySelector('#pref-format');
|
||||
if (fmtEl) {
|
||||
fmtEl.addEventListener('change', function() {
|
||||
prefs.format = fmtEl.value;
|
||||
savePrefs(prefs);
|
||||
});
|
||||
}
|
||||
|
||||
// Attach listener to close button
|
||||
var closeBtn = document.getElementById('settings-close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', closePanel);
|
||||
}
|
||||
// Close button
|
||||
var closeBtn = panel.querySelector('.settings-popover-close');
|
||||
if (closeBtn) closeBtn.addEventListener('click', closePanel);
|
||||
}
|
||||
|
||||
function initSettings() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue