From 60c38ab83c429d9e4853dbd4ea9fa06eb8f9efa6 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 30 Jan 2021 19:47:16 -0500 Subject: [PATCH] Modal refactor (#1335) * Rename modal-container to modal * Update how modal IDs are handled * Fix invalid modal check * Update modal IDs --- ext/bg/css/settings2.css | 14 +++--- ext/bg/js/settings/dictionary-controller.js | 2 +- .../settings/dictionary-import-controller.js | 2 +- ext/bg/js/settings/modal-controller.js | 16 +++++-- .../keyboard-shortcuts-controller.js | 2 +- .../settings2/settings-display-controller.js | 6 +-- ext/bg/settings2.html | 46 +++++++++---------- ext/bg/welcome.html | 6 +-- 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 @@ -