feat: popup settings logic — load, save, presets, export/import/reset
This commit is contained in:
Joel Brock
243
popup/popup.js
Normal file
243
popup/popup.js
Normal file
@@ -0,0 +1,243 @@
|
||||
// Outlook Relook — Popup Settings Logic
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// We need access to DEFAULTS and DENSITY_PRESETS from settings-defaults.js,
|
||||
// but popup runs in its own context. Duplicate the defaults here.
|
||||
// (Content scripts and popup don't share a JS context.)
|
||||
|
||||
var DEFAULTS = {
|
||||
theme: 'swiss',
|
||||
colorScheme: 'system',
|
||||
accentColor: '',
|
||||
densityPreset: 'compact',
|
||||
compactTopBar: true,
|
||||
compactCommandBar: true,
|
||||
compactMessageList: true,
|
||||
compactReadingPane: true,
|
||||
compactFolderPane: true,
|
||||
narrowDateColumn: true,
|
||||
compressComposeToolbar: true,
|
||||
readingPaneMaxWidth: true,
|
||||
hideCopilot: true,
|
||||
hideSuggestedReplies: true,
|
||||
hidePromoBanners: true,
|
||||
hideFocusedOtherTabs: true,
|
||||
hideSidebarAppIcons: false,
|
||||
hideGroupsSection: false,
|
||||
hideMyDayButtons: true,
|
||||
hideSenderAvatars: false,
|
||||
hideFeatureDiscovery: true,
|
||||
hideVivaInsights: true,
|
||||
hideUnreadOtherBanner: true,
|
||||
hideActivityFeed: true,
|
||||
unreadDistinction: true,
|
||||
previewOwnLine: false,
|
||||
normalizeFontWeight: true,
|
||||
darkModeEmailFix: true,
|
||||
messageListFontSize: 'medium',
|
||||
autoCollapseRibbon: true,
|
||||
rememberSidebarState: true,
|
||||
suppressContactHover: true,
|
||||
autoAdvanceAfterDelete: true,
|
||||
autoDismissToasts: '5',
|
||||
toastPosition: 'top-right',
|
||||
stickyReplyBar: true,
|
||||
autoResizeCompose: true,
|
||||
throttleNotifications: false,
|
||||
keyboardMultiSelect: true,
|
||||
markAllReadButton: true,
|
||||
quickFolderJump: true,
|
||||
};
|
||||
|
||||
var DENSITY_PRESETS = {
|
||||
comfortable: {
|
||||
compactTopBar: false,
|
||||
compactCommandBar: false,
|
||||
compactMessageList: false,
|
||||
compactReadingPane: false,
|
||||
compactFolderPane: false,
|
||||
narrowDateColumn: false,
|
||||
compressComposeToolbar: false,
|
||||
readingPaneMaxWidth: true,
|
||||
},
|
||||
compact: {
|
||||
compactTopBar: true,
|
||||
compactCommandBar: true,
|
||||
compactMessageList: true,
|
||||
compactReadingPane: true,
|
||||
compactFolderPane: true,
|
||||
narrowDateColumn: true,
|
||||
compressComposeToolbar: true,
|
||||
readingPaneMaxWidth: true,
|
||||
},
|
||||
'ultra-compact': {
|
||||
compactTopBar: true,
|
||||
compactCommandBar: true,
|
||||
compactMessageList: true,
|
||||
compactReadingPane: true,
|
||||
compactFolderPane: true,
|
||||
narrowDateColumn: true,
|
||||
compressComposeToolbar: true,
|
||||
readingPaneMaxWidth: true,
|
||||
},
|
||||
};
|
||||
|
||||
// --- Load settings and populate UI ---
|
||||
function loadUI() {
|
||||
chrome.storage.sync.get(DEFAULTS, function (settings) {
|
||||
// Checkboxes
|
||||
var checkboxes = document.querySelectorAll('input[type="checkbox"][data-setting]');
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
checkboxes[i].checked = !!settings[checkboxes[i].dataset.setting];
|
||||
}
|
||||
|
||||
// Selects
|
||||
var selects = document.querySelectorAll('select[data-setting]');
|
||||
for (var j = 0; j < selects.length; j++) {
|
||||
selects[j].value = settings[selects[j].dataset.setting] || '';
|
||||
}
|
||||
|
||||
// Radio groups
|
||||
var radioGroups = document.querySelectorAll('.or-radio-group[data-setting]');
|
||||
for (var k = 0; k < radioGroups.length; k++) {
|
||||
var key = radioGroups[k].dataset.setting;
|
||||
var radio = radioGroups[k].querySelector('input[value="' + settings[key] + '"]');
|
||||
if (radio) radio.checked = true;
|
||||
}
|
||||
|
||||
// Color picker
|
||||
var colorPicker = document.querySelector('input[type="color"][data-setting]');
|
||||
if (colorPicker) {
|
||||
colorPicker.value = settings.accentColor || '#1976d2';
|
||||
}
|
||||
|
||||
// Version
|
||||
var manifest = chrome.runtime.getManifest();
|
||||
document.getElementById('version').textContent = 'v' + manifest.version;
|
||||
});
|
||||
}
|
||||
|
||||
// --- Save a single setting ---
|
||||
function saveSetting(key, value) {
|
||||
var obj = {};
|
||||
obj[key] = value;
|
||||
chrome.storage.sync.set(obj);
|
||||
}
|
||||
|
||||
// --- Section accordion ---
|
||||
var sectionHeaders = document.querySelectorAll('.or-section-header');
|
||||
for (var s = 0; s < sectionHeaders.length; s++) {
|
||||
sectionHeaders[s].addEventListener('click', function () {
|
||||
this.parentElement.classList.toggle('open');
|
||||
});
|
||||
}
|
||||
|
||||
// --- Checkbox change handlers ---
|
||||
var checkboxes = document.querySelectorAll('input[type="checkbox"][data-setting]');
|
||||
for (var c = 0; c < checkboxes.length; c++) {
|
||||
checkboxes[c].addEventListener('change', function () {
|
||||
saveSetting(this.dataset.setting, this.checked);
|
||||
});
|
||||
}
|
||||
|
||||
// --- Select change handlers ---
|
||||
var selects = document.querySelectorAll('select[data-setting]');
|
||||
for (var sl = 0; sl < selects.length; sl++) {
|
||||
selects[sl].addEventListener('change', function () {
|
||||
var settingKey = this.dataset.setting;
|
||||
var value = this.value;
|
||||
saveSetting(settingKey, value);
|
||||
|
||||
// Density preset: apply to individual toggles
|
||||
if (settingKey === 'densityPreset' && DENSITY_PRESETS[value]) {
|
||||
var preset = DENSITY_PRESETS[value];
|
||||
chrome.storage.sync.set(preset);
|
||||
// Update checkboxes in the UI
|
||||
var toggleKeys = Object.keys(preset);
|
||||
for (var p = 0; p < toggleKeys.length; p++) {
|
||||
var checkbox = document.getElementById(toggleKeys[p]);
|
||||
if (checkbox) checkbox.checked = preset[toggleKeys[p]];
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Radio group change handlers ---
|
||||
var radioGroups = document.querySelectorAll('.or-radio-group[data-setting]');
|
||||
for (var r = 0; r < radioGroups.length; r++) {
|
||||
var groupKey = radioGroups[r].dataset.setting;
|
||||
var radios = radioGroups[r].querySelectorAll('input[type="radio"]');
|
||||
for (var ri = 0; ri < radios.length; ri++) {
|
||||
(function (gk) {
|
||||
radios[ri].addEventListener('change', function () {
|
||||
if (this.checked) saveSetting(gk, this.value);
|
||||
});
|
||||
})(groupKey);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Color picker change handler ---
|
||||
var colorPickers = document.querySelectorAll('input[type="color"][data-setting]');
|
||||
for (var cp = 0; cp < colorPickers.length; cp++) {
|
||||
colorPickers[cp].addEventListener('input', function () {
|
||||
saveSetting(this.dataset.setting, this.value);
|
||||
});
|
||||
}
|
||||
|
||||
// --- Export settings ---
|
||||
document.getElementById('exportBtn').addEventListener('click', function () {
|
||||
chrome.storage.sync.get(DEFAULTS, function (settings) {
|
||||
var blob = new Blob([JSON.stringify(settings, null, 2)], { type: 'application/json' });
|
||||
var url = URL.createObjectURL(blob);
|
||||
var a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'outlook-relook-settings.json';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
});
|
||||
|
||||
// --- Import settings ---
|
||||
document.getElementById('importBtn').addEventListener('click', function () {
|
||||
document.getElementById('importFile').click();
|
||||
});
|
||||
|
||||
document.getElementById('importFile').addEventListener('change', function (e) {
|
||||
var file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
try {
|
||||
var imported = JSON.parse(event.target.result);
|
||||
// Only import known keys
|
||||
var cleaned = {};
|
||||
var defaultKeys = Object.keys(DEFAULTS);
|
||||
for (var i = 0; i < defaultKeys.length; i++) {
|
||||
if (defaultKeys[i] in imported) cleaned[defaultKeys[i]] = imported[defaultKeys[i]];
|
||||
}
|
||||
chrome.storage.sync.set(cleaned, function () {
|
||||
loadUI();
|
||||
});
|
||||
} catch (err) {
|
||||
alert('Invalid settings file.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
e.target.value = '';
|
||||
});
|
||||
|
||||
// --- Reset to defaults ---
|
||||
document.getElementById('resetBtn').addEventListener('click', function () {
|
||||
if (confirm('Reset all settings to defaults?')) {
|
||||
chrome.storage.sync.set(DEFAULTS, function () {
|
||||
loadUI();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// --- Init ---
|
||||
loadUI();
|
||||
})();
|
||||
Reference in New Issue
Block a user