aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-19 18:37:02 -0500
committerGitHub <noreply@github.com>2020-11-19 18:37:02 -0500
commite5255a03e68574afecced794f8092bf76ec241a3 (patch)
tree0f27eeb7f733765823b9b99921893d998f9a1664 /ext/bg/js
parentb0a565062524f74b973071f259a2c0d7a577c372 (diff)
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
Diffstat (limited to 'ext/bg/js')
-rw-r--r--ext/bg/js/context-main.js158
1 files changed, 106 insertions, 52 deletions
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();
})();