alex/yomichan
1
Fork 0
Code Releases Activity

Modal refactor (#1335)

Browse Source 
* Rename modal-container to modal

* Update how modal IDs are handled

* Fix invalid modal check

* Update modal IDs
This commit is contained in:
toasted-nutbread 2021-01-30 19:47:16 -05:00 committed by GitHub
parent 828c4b11c1
commit 60c38ab83c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ext/bg/css/settings2.css
View File

@ -677,7 +677,7 @@ select.short-height {
/* Modal */ /* Modal */
.modal-container { .modal {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
@ -697,14 +697,14 @@ select.short-height {
opacity var(--animation-duration2) ease-out, opacity var(--animation-duration2) ease-out,
visibility 0s linear; visibility 0s linear;
} }
.modal-container[hidden] { .modal[hidden] {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transition:
opacity var(--animation-duration2) ease-in, opacity var(--animation-duration2) ease-in,
visibility 0s linear var(--animation-duration2); visibility 0s linear var(--animation-duration2);
} }
.modal-container[hidden]:not(.hidden-animating) { .modal[hidden]:not(.hidden-animating) {
display: none; display: none;
} }
.modal-content { .modal-content {
@ -726,7 +726,7 @@ select.short-height {
flex-flow: column nowrap; flex-flow: column nowrap;
overflow: hidden; overflow: hidden;
} }
.modal-container[hidden] .modal-content { .modal[hidden] .modal-content {
pointer-events: none; pointer-events: none;
} }
.modal-content.modal-content-small { .modal-content.modal-content-small {
@ -741,7 +741,7 @@ select.short-height {
transform: translate(0, 0); transform: translate(0, 0);
border-radius: 0; border-radius: 0;
} }
.modal-container[hidden] .modal-content { .modal[hidden] .modal-content {
transform: translate(0, var(--modal-transition-offset)); transform: translate(0, var(--modal-transition-offset));
transition: transition:
transform 0s linear var(--animation-duration2), transform 0s linear var(--animation-duration2),
@ -811,7 +811,7 @@ select.short-height {
padding-bottom: var(--settings-group-inner-horizontal-padding-fourth); padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
} }
.modal-container.modal-container-left { .modal.modal-left {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
width: 100%; width: 100%;
@ -819,7 +819,7 @@ select.short-height {
background-color: transparent; background-color: transparent;
pointer-events: none; pointer-events: none;
} }
.modal-container.modal-container-left::after { .modal.modal-left::after {
content: ''; content: '';
display: block; display: block;
overflow-y: scroll; overflow-y: scroll;

2
ext/bg/js/settings/dictionary-controller.js
View File

@ -443,7 +443,7 @@ class DictionaryController {
const progressSelector = '.dictionary-delete-progress'; const progressSelector = '.dictionary-delete-progress';
const progressContainers = [ const progressContainers = [
...node.querySelectorAll('.progress-container'), ...node.querySelectorAll('.progress-container'),
...document.querySelectorAll(`#dictionaries ${progressSelector}`) ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)
]; ];
const progressBars = [ const progressBars = [
...node.querySelectorAll('.progress-bar'), ...node.querySelectorAll('.progress-bar'),

2
ext/bg/js/settings/dictionary-import-controller.js
View File

@ -128,7 +128,7 @@ class DictionaryImportController {
const progressSelector = '.dictionary-import-progress'; const progressSelector = '.dictionary-import-progress';
const progressContainers = [ const progressContainers = [
...document.querySelectorAll('#dictionary-import-progress-container'), ...document.querySelectorAll('#dictionary-import-progress-container'),
...document.querySelectorAll(`#dictionaries ${progressSelector}`) ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)
]; ];
const progressBars = [ const progressBars = [
...document.querySelectorAll('#dictionary-import-progress-container .progress-bar'), ...document.querySelectorAll('#dictionary-import-progress-container .progress-bar'),

16
ext/bg/js/settings/modal-controller.js
View File

@ -26,17 +26,25 @@ class ModalController {
} }
prepare() { prepare() {
for (const node of document.querySelectorAll('.modal,.modal-container')) { const idSuffix = '-modal';
const {id} = node; 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); const modal = new Modal(node);
modal.prepare(); modal.prepare();
this._modalMap.set(id, modal); this._modalMap.set(id, modal);
this._modalMap.set(node, modal);
this._modals.push(modal); this._modals.push(modal);
} }
} }
getModal(name) { getModal(nameOrNode) {
const modal = this._modalMap.get(name); const modal = this._modalMap.get(nameOrNode);
return (typeof modal !== 'undefined' ? modal : null); return (typeof modal !== 'undefined' ? modal : null);
} }

2
ext/bg/js/settings2/keyboard-shortcuts-controller.js
View File

@ -45,7 +45,7 @@ class KeyboardShortcutController {
this._resetButton = document.querySelector('#hotkey-list-reset'); this._resetButton = document.querySelector('#hotkey-list-reset');
this._listContainer = document.querySelector('#hotkey-list'); this._listContainer = document.querySelector('#hotkey-list');
this._emptyIndicator = document.querySelector('#hotkey-list-empty'); 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._addButton.addEventListener('click', this._onAddClick.bind(this));
this._resetButton.addEventListener('click', this._onResetClick.bind(this)); this._resetButton.addEventListener('click', this._onResetClick.bind(this));

6
ext/bg/js/settings2/settings-display-controller.js
View File

@ -162,13 +162,13 @@ class SettingsDisplayController {
let [action, target] = modalAction.split(','); let [action, target] = modalAction.split(',');
if (typeof target === 'undefined') { if (typeof target === 'undefined') {
const currentModal = node.closest('.modal-container'); const currentModal = node.closest('.modal');
if (currentModal === null) { return; } if (currentModal === null) { return; }
target = currentModal.id; target = currentModal;
} }
const modal = this._modalController.getModal(target); const modal = this._modalController.getModal(target);
if (typeof modal === 'undefined') { return; } if (modal === null) { return; }
switch (action) { switch (action) {
case 'show': case 'show':

46
ext/bg/settings2.html
View File

@ -1800,7 +1800,7 @@
<!-- Profile modals --> <!-- 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-header">
<div class="modal-title">Profiles</div> <div class="modal-title">Profiles</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1828,7 +1828,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Profile Conditions</div> <div class="modal-title">Profile Conditions</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1879,7 +1879,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Copy Profile</div> <div class="modal-title">Copy Profile</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -1899,7 +1899,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Confirm Profile Deletion</div></div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
@ -1965,7 +1965,7 @@
<!-- Dictionary modals --> <!-- 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-header">
<div class="modal-title">Dictionaries</div> <div class="modal-title">Dictionaries</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2031,7 +2031,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body"> <div class="modal-body">
<p>Are you sure you want to delete the dictionary:</p> <p>Are you sure you want to delete the dictionary:</p>
@ -2044,7 +2044,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body"> <div class="modal-body">
<p>Are you sure you want to delete <strong>all dictionaries</strong>?</p> <p>Are you sure you want to delete <strong>all dictionaries</strong>?</p>
@ -2056,7 +2056,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Secondary Search Dictionaries</div> <div class="modal-title">Secondary Search Dictionaries</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2172,7 +2172,7 @@
<!-- Custom CSS modal --> <!-- 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-content-container2 modal-content-dimmer"><div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<div class="modal-title">Custom CSS</div> <div class="modal-title">Custom CSS</div>
@ -2198,7 +2198,7 @@
<!-- Audio sources modal --> <!-- 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-header">
<div class="modal-title">Audio Sources</div> <div class="modal-title">Audio Sources</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2339,7 +2339,7 @@
<!-- Scanning inputs modal --> <!-- 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-header">
<div class="modal-title">Scanning Inputs</div> <div class="modal-title">Scanning Inputs</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2481,7 +2481,7 @@
<!-- Input action prevention modal --> <!-- 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-header"><div class="modal-title">Input Action Prevention</div></div>
<div class="modal-body"> <div class="modal-body">
<strong>Prevent middle mouse button actions on:</strong> <strong>Prevent middle mouse button actions on:</strong>
@ -2511,7 +2511,7 @@
<!-- Anki cards modal --> <!-- 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-header">
<div class="modal-title">Anki Cards</div> <div class="modal-title">Anki Cards</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2562,7 +2562,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Anki Card Information</div> <div class="modal-title">Anki Card Information</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2750,7 +2750,7 @@
<!-- Anki field template modals --> <!-- 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-header"><div class="modal-title">Anki Card Templates</div></div>
<div class="modal-body anki-card-templates-layout"> <div class="modal-body anki-card-templates-layout">
<div class="anki-card-templates-info"> <div class="anki-card-templates-info">
@ -2789,7 +2789,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Reset Anki Card Templates</div></div>
<div class="modal-body"> <div class="modal-body">
<p class="danger-text"> <p class="danger-text">
@ -2805,7 +2805,7 @@
<!-- Import/export modals --> <!-- 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-header"><div class="modal-title">Import Error</div></div>
<div class="modal-body"> <div class="modal-body">
<p>An error occurred while trying to import the settings file:</p> <p>An error occurred while trying to import the settings file:</p>
@ -2817,7 +2817,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Import Security Warning</div></div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
@ -2833,7 +2833,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Reset Settings</div></div>
<div class="modal-body"> <div class="modal-body">
<p class="danger-text"> <p class="danger-text">
@ -2858,7 +2858,7 @@
<!-- Translation modals --> <!-- 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-header">
<div class="modal-title">Custom Text Replacement Patterns</div> <div class="modal-title">Custom Text Replacement Patterns</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -2943,7 +2943,7 @@
<!-- Sentence parsing modal --> <!-- 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-header">
<div class="modal-title">Sentence Termination Characters</div> <div class="modal-title">Sentence Termination Characters</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -3023,7 +3023,7 @@
<!-- Keyboard shortcuts modal --> <!-- 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-header">
<div class="modal-title">Keyboard Shortcuts</div> <div class="modal-title">Keyboard Shortcuts</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">
@ -3046,7 +3046,7 @@
</div> </div>
</div></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-header">
<div class="modal-title">Native Keyboard Shortcuts</div> <div class="modal-title">Native Keyboard Shortcuts</div>
<div class="modal-header-button-container"> <div class="modal-header-button-container">

6
ext/bg/welcome.html
View File

@ -208,7 +208,7 @@
<!-- Dictionary modals --> <!-- 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-header"><div class="modal-title">Dictionaries</div></div>
<div class="modal-body"> <div class="modal-body">
<div class="settings-item"> <div class="settings-item">
@ -273,7 +273,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body"> <div class="modal-body">
<p>Are you sure you want to delete the dictionary:</p> <p>Are you sure you want to delete the dictionary:</p>
@ -286,7 +286,7 @@
</div> </div>
</div></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-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
<div class="modal-body"> <div class="modal-body">
<p>Are you sure you want to delete <strong>all dictionaries</strong>?</p> <p>Are you sure you want to delete <strong>all dictionaries</strong>?</p>