|
1 | 1 | // JS for options.html |
2 | 2 |
|
3 | 3 | document.addEventListener('DOMContentLoaded', initOptions) |
4 | | -document.getElementById('options-form').addEventListener('submit', saveOptions) |
5 | | -document.getElementById('submit').addEventListener('click', saveOptions) |
| 4 | + |
| 5 | +document |
| 6 | + .querySelectorAll('input') |
| 7 | + .forEach((el) => el.addEventListener('change', saveOptions)) |
| 8 | +document |
| 9 | + .getElementById('options-form') |
| 10 | + .addEventListener('submit', (e) => e.preventDefault()) |
| 11 | + |
| 12 | +chrome.runtime.onMessage.addListener(onMessage) |
6 | 13 |
|
7 | 14 | /** |
8 | 15 | * Options Init Function |
9 | 16 | * @function initOptions |
10 | 17 | */ |
11 | 18 | async function initOptions() { |
12 | | - console.log('initOptions') |
13 | | - const { auth, options } = await chrome.storage.sync.get(['auth', 'options']) |
14 | | - console.log(auth, options) |
15 | | - const url_input = document.getElementById('url') |
16 | | - if (auth?.url) { |
17 | | - url_input.value = auth.url |
18 | | - } else { |
19 | | - url_input.placeholder = 'https://example.com' |
20 | | - url_input.focus() |
21 | | - } |
| 19 | + // console.log('initOptions') |
22 | 20 | document.getElementById('version').textContent = |
23 | 21 | chrome.runtime.getManifest().version |
24 | | - document.getElementById('token').value = auth?.token || '' |
25 | | - document.getElementById('recentFiles').value = options.recentFiles || '10' |
26 | | - document.getElementById('contextMenu').checked = options.contextMenu |
27 | | - document.getElementById('showUpdate').checked = options.showUpdate |
| 22 | + |
| 23 | + const { options } = await chrome.storage.sync.get(['options']) |
| 24 | + console.log('options:', options) |
| 25 | + updateOptions(options) |
| 26 | + if (!options?.siteUrl) { |
| 27 | + const siteUrl = document.getElementById('siteUrl') |
| 28 | + siteUrl.placeholder = 'https://example.com' |
| 29 | + siteUrl.focus() |
| 30 | + } |
| 31 | + |
28 | 32 | const commands = await chrome.commands.getAll() |
29 | 33 | document.getElementById('mainKey').textContent = |
30 | 34 | commands.find((x) => x.name === '_execute_action').shortcut || 'Not Set' |
31 | 35 | } |
32 | 36 |
|
33 | 37 | /** |
34 | | - * Save Options Submit Callback |
| 38 | + * Save Options Callback |
35 | 39 | * @function saveOptions |
36 | | - * @param {SubmitEvent} event |
| 40 | + * @param {FormDataEvent} event |
37 | 41 | */ |
38 | 42 | async function saveOptions(event) { |
39 | | - console.log('saveOptions:', event) |
40 | | - event.preventDefault() |
41 | | - let auth = { |
42 | | - url: document.getElementById('url').value.replace(/\/$/, ''), |
43 | | - token: document.getElementById('token').value, |
| 43 | + // console.log('saveOptions:', event) |
| 44 | + const { options } = await chrome.storage.sync.get(['options']) |
| 45 | + if (event.target.type === 'checkbox') { |
| 46 | + options[event.target.id] = event.target.checked |
| 47 | + } else if (event.target.id === 'siteUrl') { |
| 48 | + event.target.value = event.target.value.replace(/\/+$/, '') |
| 49 | + options[event.target.id] = event.target.value |
| 50 | + } else if (event.target.id === 'recentFiles') { |
| 51 | + const number = parseFloat(event.target.value) |
| 52 | + console.log('number:', number) |
| 53 | + if (!isNaN(number) && number <= 99) { |
| 54 | + console.log('number.toString():', number.toString()) |
| 55 | + event.target.value = number.toString() |
| 56 | + options[event.target.id] = event.target.value |
| 57 | + } else { |
| 58 | + event.target.value = options[event.target.id] |
| 59 | + } |
| 60 | + } else { |
| 61 | + options[event.target.id] = event.target.value |
44 | 62 | } |
45 | | - console.log('auth:', auth) |
46 | | - let options = {} |
47 | | - options.recentFiles = document.getElementById('recentFiles').value |
48 | | - options.contextMenu = document.getElementById('contextMenu').checked |
49 | | - options.showUpdate = document.getElementById('showUpdate').checked |
| 63 | + console.log(`Set: "${event.target.id}" to target:`, event.target) |
50 | 64 | console.log('options:', options) |
51 | | - await chrome.storage.sync.set({ auth, options }) |
52 | | - document.getElementById('url').value = auth.url |
53 | | - showToast('Options Saved') |
| 65 | + await chrome.storage.sync.set({ options }) |
| 66 | +} |
| 67 | + |
| 68 | +/** |
| 69 | + * On Message Callback |
| 70 | + * @function onMessage |
| 71 | + * @param {Object} message |
| 72 | + */ |
| 73 | +async function onMessage(message) { |
| 74 | + // console.log('onMessage: message, sender:', message, sender) |
| 75 | + if (message === 'reload-options') { |
| 76 | + window.location.reload() |
| 77 | + } |
54 | 78 | } |
55 | 79 |
|
56 | 80 | /** |
57 | | - * Show Bootstrap Toast |
58 | | - * Requires: jQuery |
59 | | - * @function showToast |
60 | | - * @param {String} message |
61 | | - * @param {String} bsClass |
| 81 | + * Update Options |
| 82 | + * @function initOptions |
| 83 | + * @param {Object} options |
62 | 84 | */ |
63 | | -function showToast(message, bsClass = 'success') { |
64 | | - // TODO: Remove jQuery Dependency |
65 | | - const toastEl = $( |
66 | | - '<div class="toast align-items-center border-0 my-3" role="alert" aria-live="assertive" aria-atomic="true">\n' + |
67 | | - ' <div class="d-flex">\n' + |
68 | | - ' <div class="toast-body">Options Saved</div>\n' + |
69 | | - ' <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>\n' + |
70 | | - ' </div>\n' + |
71 | | - '</div>' |
72 | | - ) |
73 | | - toastEl.find('.toast-body').text(message) |
74 | | - toastEl.addClass('text-bg-' + bsClass) |
75 | | - $('#toast-container').append(toastEl) |
76 | | - const toast = new bootstrap.Toast(toastEl) // eslint-disable-line |
77 | | - toast.show() |
| 85 | +function updateOptions(options) { |
| 86 | + for (const [key, value] of Object.entries(options)) { |
| 87 | + // console.log(`${key}: ${value}`) |
| 88 | + const element = document.getElementById(key) |
| 89 | + if (element) { |
| 90 | + if (typeof value === 'boolean') { |
| 91 | + element.checked = value |
| 92 | + } else if (typeof value === 'string') { |
| 93 | + element.value = value |
| 94 | + } |
| 95 | + } |
| 96 | + } |
78 | 97 | } |
0 commit comments