aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/bg/css/settings2.css14
-rw-r--r--ext/bg/js/settings/dictionary-controller.js2
-rw-r--r--ext/bg/js/settings/dictionary-import-controller.js2
-rw-r--r--ext/bg/js/settings/modal-controller.js16
-rw-r--r--ext/bg/js/settings2/keyboard-shortcuts-controller.js2
-rw-r--r--ext/bg/js/settings2/settings-display-controller.js6
-rw-r--r--ext/bg/settings2.html46
-rw-r--r--ext/bg/welcome.html6
8 files changed, 51 insertions, 43 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 46e859c1..01c19af4 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -677,7 +677,7 @@ select.short-height {
/* Modal */
-.modal-container {
+.modal {
position: fixed;
left: 0;
top: 0;
@@ -697,14 +697,14 @@ select.short-height {
opacity var(--animation-duration2) ease-out,
visibility 0s linear;
}
-.modal-container[hidden] {
+.modal[hidden] {
opacity: 0;
visibility: hidden;
transition:
opacity var(--animation-duration2) ease-in,
visibility 0s linear var(--animation-duration2);
}
-.modal-container[hidden]:not(.hidden-animating) {
+.modal[hidden]:not(.hidden-animating) {
display: none;
}
.modal-content {
@@ -726,7 +726,7 @@ select.short-height {
flex-flow: column nowrap;
overflow: hidden;
}
-.modal-container[hidden] .modal-content {
+.modal[hidden] .modal-content {
pointer-events: none;
}
.modal-content.modal-content-small {
@@ -741,7 +741,7 @@ select.short-height {
transform: translate(0, 0);
border-radius: 0;
}
-.modal-container[hidden] .modal-content {
+.modal[hidden] .modal-content {
transform: translate(0, var(--modal-transition-offset));
transition:
transform 0s linear var(--animation-duration2),
@@ -811,7 +811,7 @@ select.short-height {
padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
}
-.modal-container.modal-container-left {
+.modal.modal-left {
display: flex;
flex-flow: row nowrap;
width: 100%;
@@ -819,7 +819,7 @@ select.short-height {
background-color: transparent;
pointer-events: none;
}
-.modal-container.modal-container-left::after {
+.modal.modal-left::after {
content: '';
display: block;
overflow-y: scroll;
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index 57ec5bee..ea9f7503 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -443,7 +443,7 @@ class DictionaryController {
const progressSelector = '.dictionary-delete-progress';
const progressContainers = [
...node.querySelectorAll('.progress-container'),
- ...document.querySelectorAll(`#dictionaries ${progressSelector}`)
+ ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)
];
const progressBars = [
...node.querySelectorAll('.progress-bar'),
diff --git a/ext/bg/js/settings/dictionary-import-controller.js b/ext/bg/js/settings/dictionary-import-controller.js
index 436a056c..c4ad9e59 100644
--- a/ext/bg/js/settings/dictionary-import-controller.js
+++ b/ext/bg/js/settings/dictionary-import-controller.js
@@ -128,7 +128,7 @@ class DictionaryImportController {
const progressSelector = '.dictionary-import-progress';
const progressContainers = [
...document.querySelectorAll('#dictionary-import-progress-container'),
- ...document.querySelectorAll(`#dictionaries ${progressSelector}`)
+ ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)
];
const progressBars = [
...document.querySelectorAll('#dictionary-import-progress-container .progress-bar'),
diff --git a/ext/bg/js/settings/modal-controller.js b/ext/bg/js/settings/modal-controller.js
index 832ea437..fe4f911b 100644
--- a/ext/bg/js/settings/modal-controller.js
+++ b/ext/bg/js/settings/modal-controller.js
@@ -26,17 +26,25 @@ class ModalController {
}
prepare() {
- for (const node of document.querySelectorAll('.modal,.modal-container')) {
- const {id} = node;
+ const idSuffix = '-modal';
+ for (const node of document.querySelectorAll('.modal')) {
+ let {id} = node;
+ if (typeof id !== 'string') { continue; }
+
+ if (id.endsWith(idSuffix)) {
+ id = id.substring(0, id.length - idSuffix.length);
+ }
+
const modal = new Modal(node);
modal.prepare();
this._modalMap.set(id, modal);
+ this._modalMap.set(node, modal);
this._modals.push(modal);
}
}
- getModal(name) {
- const modal = this._modalMap.get(name);
+ getModal(nameOrNode) {
+ const modal = this._modalMap.get(nameOrNode);
return (typeof modal !== 'undefined' ? modal : null);
}
diff --git a/ext/bg/js/settings2/keyboard-shortcuts-controller.js b/ext/bg/js/settings2/keyboard-shortcuts-controller.js
index 30846a62..0dcfa2ee 100644
--- a/ext/bg/js/settings2/keyboard-shortcuts-controller.js
+++ b/ext/bg/js/settings2/keyboard-shortcuts-controller.js
@@ -45,7 +45,7 @@ class KeyboardShortcutController {
this._resetButton = document.querySelector('#hotkey-list-reset');
this._listContainer = document.querySelector('#hotkey-list');
this._emptyIndicator = document.querySelector('#hotkey-list-empty');
- this._scrollContainer = document.querySelector('#keyboard-shortcuts .modal-body');
+ this._scrollContainer = document.querySelector('#keyboard-shortcuts-modal .modal-body');
this._addButton.addEventListener('click', this._onAddClick.bind(this));
this._resetButton.addEventListener('click', this._onResetClick.bind(this));
diff --git a/ext/bg/js/settings2/settings-display-controller.js b/ext/bg/js/settings2/settings-display-controller.js
index 4dee0fab..75c147f2 100644
--- a/ext/bg/js/settings2/settings-display-controller.js
+++ b/ext/bg/js/settings2/settings-display-controller.js
@@ -162,13 +162,13 @@ class SettingsDisplayController {
let [action, target] = modalAction.split(',');
if (typeof target === 'undefined') {
- const currentModal = node.closest('.modal-container');
+ const currentModal = node.closest('.modal');
if (currentModal === null) { return; }
- target = currentModal.id;
+ target = currentModal;
}
const modal = this._modalController.getModal(target);
- if (typeof modal === 'undefined') { return; }
+ if (modal === null) { return; }
switch (action) {
case 'show':
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 2f1e2f73..7409541f 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -1800,7 +1800,7 @@
<!-- Profile modals -->
-<div id="profiles" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="profiles-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Profiles</div>
<div class="modal-header-button-container">
@@ -1828,7 +1828,7 @@
</div>
</div></div>
-<div id="profile-conditions" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="profile-conditions-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Profile Conditions</div>
<div class="modal-header-button-container">
@@ -1879,7 +1879,7 @@
</div>
</div></div>
-<div id="profile-copy" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="profile-copy-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header">
<div class="modal-title">Copy Profile</div>
<div class="modal-header-button-container">
@@ -1899,7 +1899,7 @@
</div>
</div></div>
-<div id="profile-remove" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="profile-remove-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Confirm Profile Deletion</div></div>
<div class="modal-body">
<p>
@@ -1965,7 +1965,7 @@
<!-- Dictionary modals -->
-<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Dictionaries</div>
<div class="modal-header-button-container">
@@ -2031,7 +2031,7 @@
</div>
</div></div>
-<div id="dictionary-confirm-delete" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body">
<p>Are you sure you want to delete the dictionary:</p>
@@ -2044,7 +2044,7 @@
</div>
</div></div>
-<div id="dictionary-confirm-delete-all" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-all-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body">
<p>Are you sure you want to delete <strong>all dictionaries</strong>?</p>
@@ -2056,7 +2056,7 @@
</div>
</div></div>
-<div id="secondary-search-dictionaries" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="secondary-search-dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Secondary Search Dictionaries</div>
<div class="modal-header-button-container">
@@ -2172,7 +2172,7 @@
<!-- Custom CSS modal -->
-<div id="custom-css" class="modal-container modal-container-left" tabindex="-1" role="dialog" hidden><div class="modal-content-container1">
+<div id="custom-css-modal" class="modal modal-left" tabindex="-1" role="dialog" hidden><div class="modal-content-container1">
<div class="modal-content-container2 modal-content-dimmer"><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Custom CSS</div>
@@ -2198,7 +2198,7 @@
<!-- Audio sources modal -->
-<div id="audio-sources" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="audio-sources-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Audio Sources</div>
<div class="modal-header-button-container">
@@ -2339,7 +2339,7 @@
<!-- Scanning inputs modal -->
-<div id="scanning-inputs" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="scanning-inputs-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Scanning Inputs</div>
<div class="modal-header-button-container">
@@ -2481,7 +2481,7 @@
<!-- Input action prevention modal -->
-<div id="input-action-prevention" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="input-action-prevention-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Input Action Prevention</div></div>
<div class="modal-body">
<strong>Prevent middle mouse button actions on:</strong>
@@ -2511,7 +2511,7 @@
<!-- Anki cards modal -->
-<div id="anki-cards" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="anki-cards-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Anki Cards</div>
<div class="modal-header-button-container">
@@ -2562,7 +2562,7 @@
</div>
</div></div>
-<div id="anki-cards-info" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
+<div id="anki-cards-info-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
<div class="modal-header">
<div class="modal-title">Anki Card Information</div>
<div class="modal-header-button-container">
@@ -2750,7 +2750,7 @@
<!-- Anki field template modals -->
-<div id="anki-card-templates" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
+<div id="anki-card-templates-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
<div class="modal-header"><div class="modal-title">Anki Card Templates</div></div>
<div class="modal-body anki-card-templates-layout">
<div class="anki-card-templates-info">
@@ -2789,7 +2789,7 @@
</div>
</div></div>
-<div id="anki-card-templates-reset" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="anki-card-templates-reset-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Reset Anki Card Templates</div></div>
<div class="modal-body">
<p class="danger-text">
@@ -2805,7 +2805,7 @@
<!-- Import/export modals -->
-<div id="settings-import-error" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="settings-import-error-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Import Error</div></div>
<div class="modal-body">
<p>An error occurred while trying to import the settings file:</p>
@@ -2817,7 +2817,7 @@
</div>
</div></div>
-<div id="settings-import-warning" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="settings-import-warning-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Import Security Warning</div></div>
<div class="modal-body">
<p>
@@ -2833,7 +2833,7 @@
</div>
</div></div>
-<div id="settings-reset" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="settings-reset-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Reset Settings</div></div>
<div class="modal-body">
<p class="danger-text">
@@ -2858,7 +2858,7 @@
<!-- Translation modals -->
-<div id="translation-text-replacement-patterns" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="translation-text-replacement-patterns-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Custom Text Replacement Patterns</div>
<div class="modal-header-button-container">
@@ -2943,7 +2943,7 @@
<!-- Sentence parsing modal -->
-<div id="sentence-termination-characters" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="sentence-termination-characters-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Sentence Termination Characters</div>
<div class="modal-header-button-container">
@@ -3023,7 +3023,7 @@
<!-- Keyboard shortcuts modal -->
-<div id="keyboard-shortcuts" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
+<div id="keyboard-shortcuts-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-full">
<div class="modal-header">
<div class="modal-title">Keyboard Shortcuts</div>
<div class="modal-header-button-container">
@@ -3046,7 +3046,7 @@
</div>
</div></div>
-<div id="extension-keyboard-shortcuts" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="extension-keyboard-shortcuts-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
<div class="modal-title">Native Keyboard Shortcuts</div>
<div class="modal-header-button-container">
diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html
index 44db4a77..c6cc7f24 100644
--- a/ext/bg/welcome.html
+++ b/ext/bg/welcome.html
@@ -208,7 +208,7 @@
<!-- Dictionary modals -->
-<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+<div id="dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header"><div class="modal-title">Dictionaries</div></div>
<div class="modal-body">
<div class="settings-item">
@@ -273,7 +273,7 @@
</div>
</div></div>
-<div id="dictionary-confirm-delete" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body">
<p>Are you sure you want to delete the dictionary:</p>
@@ -286,7 +286,7 @@
</div>
</div></div>
-<div id="dictionary-confirm-delete-all" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+<div id="dictionary-confirm-delete-all-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body">
<p>Are you sure you want to delete <strong>all dictionaries</strong>?</p>