From e5255a03e68574afecced794f8092bf76ec241a3 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 19 Nov 2020 18:37:02 -0500 Subject: Context popup improvements (#1039) * Refactor context-main.js * Simplify tags * Use flex layout * Use image masks for icons, update styles * Remove old classes * Add profile button * Add support for profile selection * Add title * Swap the options and search link order * Fix title --- ext/bg/js/context-main.js | 158 +++++++++++++++++++++++++++++++--------------- 1 file changed, 106 insertions(+), 52 deletions(-) (limited to 'ext/bg/js/context-main.js') diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js index 72abe554..e7cff04c 100644 --- a/ext/bg/js/context-main.js +++ b/ext/bg/js/context-main.js @@ -19,73 +19,127 @@ * api */ -function showExtensionInfo(manifest) { - const node = document.getElementById('extension-info'); - if (node === null) { return; } +class DisplayController { + constructor() { + this._optionsFull = null; + } - node.textContent = `${manifest.name} v${manifest.version}`; -} + async prepare() { + const manifest = chrome.runtime.getManifest(); + + this._showExtensionInfo(manifest); + this._setupEnvironment(); + this._setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html')); + this._setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page)); + this._setupButtonEvents('.action-open-help', 'help', 'https://foosoft.net/projects/yomichan/'); + + const optionsFull = await api.optionsGetFull(); + this._optionsFull = optionsFull; -function setupButtonEvents(selector, command, url) { - const nodes = document.querySelectorAll(selector); - for (const node of nodes) { - node.addEventListener('click', (e) => { - if (e.button !== 0) { return; } - api.commandExec(command, {mode: e.ctrlKey ? 'newTab' : 'existingOrNewTab'}); - e.preventDefault(); - }, false); - node.addEventListener('auxclick', (e) => { - if (e.button !== 1) { return; } - api.commandExec(command, {mode: 'newTab'}); - e.preventDefault(); - }, false); - - if (typeof url === 'string') { - node.href = url; - node.target = '_blank'; - node.rel = 'noopener'; + const {profiles, profileCurrent} = optionsFull; + const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null; + if (primaryProfile !== null) { + this._setupOptions(primaryProfile); } + + this._updateProfileSelect(profiles, profileCurrent); + + setTimeout(() => { + document.body.dataset.loaded = 'true'; + }, 10); } -} -async function setupEnvironment() { - // Firefox mobile opens this page as a full webpage. - const {browser} = await api.getEnvironmentInfo(); - document.documentElement.dataset.mode = (browser === 'firefox-mobile' ? 'full' : 'mini'); -} + // Private + + _showExtensionInfo(manifest) { + const node = document.getElementById('extension-info'); + if (node === null) { return; } + + node.textContent = `${manifest.name} v${manifest.version}`; + } + + _setupButtonEvents(selector, command, url) { + const nodes = document.querySelectorAll(selector); + for (const node of nodes) { + node.addEventListener('click', (e) => { + if (e.button !== 0) { return; } + api.commandExec(command, {mode: e.ctrlKey ? 'newTab' : 'existingOrNewTab'}); + e.preventDefault(); + }, false); + node.addEventListener('auxclick', (e) => { + if (e.button !== 1) { return; } + api.commandExec(command, {mode: 'newTab'}); + e.preventDefault(); + }, false); + + if (typeof url === 'string') { + node.href = url; + node.target = '_blank'; + node.rel = 'noopener'; + } + } + } + + async _setupEnvironment() { + // Firefox mobile opens this page as a full webpage. + const {browser} = await api.getEnvironmentInfo(); + document.documentElement.dataset.mode = (browser === 'firefox-mobile' ? 'full' : 'mini'); + } + + _setupOptions({options}) { + const extensionEnabled = options.general.enable; + const onToggleChanged = () => api.commandExec('toggle'); + for (const toggle of document.querySelectorAll('#enable-search,#enable-search2')) { + toggle.checked = extensionEnabled; + toggle.addEventListener('change', onToggleChanged, false); + } + } + + _updateProfileSelect(profiles, profileCurrent) { + const select = document.querySelector('#profile-select'); + const optionGroup = document.querySelector('#profile-select-option-group'); + const fragment = document.createDocumentFragment(); + for (let i = 0, ii = profiles.length; i < ii; ++i) { + const {name} = profiles[i]; + const option = document.createElement('option'); + option.textContent = name; + option.value = `${i}`; + fragment.appendChild(option); + } + optionGroup.textContent = ''; + optionGroup.appendChild(fragment); + select.value = `${profileCurrent}`; + + select.addEventListener('change', this._onProfileSelectChange.bind(this), false); + } -async function setupOptions() { - const optionsContext = { - depth: 0, - url: window.location.href - }; - const options = await api.optionsGet(optionsContext); - - const extensionEnabled = options.general.enable; - const onToggleChanged = () => api.commandExec('toggle'); - for (const toggle of document.querySelectorAll('#enable-search,#enable-search2')) { - toggle.checked = extensionEnabled; - toggle.addEventListener('change', onToggleChanged, false); + _onProfileSelectChange(e) { + const value = parseInt(e.currentTarget.value, 10); + if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= this._optionsFull.profiles.length) { + this._setPrimaryProfileIndex(value); + } } - setTimeout(() => { - document.body.dataset.loaded = 'true'; - }, 10); + async _setPrimaryProfileIndex(value) { + return await api.modifySettings( + [{ + action: 'set', + path: 'profileCurrent', + value, + scope: 'global' + }] + ); + } } (async () => { api.forwardLogsToBackend(); await yomichan.backendReady(); - const manifest = chrome.runtime.getManifest(); - api.logIndicatorClear(); - showExtensionInfo(manifest); - setupEnvironment(); - setupOptions(); - setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html')); - setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page)); - setupButtonEvents('.action-open-help', 'help', 'https://foosoft.net/projects/yomichan/'); + + const displayController = new DisplayController(); + displayController.prepare(); yomichan.ready(); })(); -- cgit v1.2.3