summaryrefslogtreecommitdiff
path: root/ext/mixed
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-20 22:42:49 -0500
committerGitHub <noreply@github.com>2020-11-20 22:42:49 -0500
commit181ade93d64ca54cee35415e795f42e58d556f54 (patch)
tree2af5655b0411078ebe8416206877c73f785720ac /ext/mixed
parent1216926fbdb6b897f4cf9d4cb25d3aaef86707d1 (diff)
Display scroll fixes (#1046)
* Update focus when internal focus is changed * Update scroll layout
Diffstat (limited to 'ext/mixed')
-rw-r--r--ext/mixed/css/display.css9
-rw-r--r--ext/mixed/js/display.js37
2 files changed, 35 insertions, 11 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 6986696f..997aa40a 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -242,6 +242,15 @@ a {
height: 100%;
display: flex;
flex-flow: column nowrap;
+ position: relative;
+ align-items: stretch;
+ justify-content: flex-start;
+}
+.content-scroll {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 715b3f3d..299cb026 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -87,7 +87,7 @@ class Display extends EventDispatcher {
renderTemplate: this._renderTemplate.bind(this)
});
this._updateAdderButtonsPromise = Promise.resolve();
- this._contentScrollElement = document.querySelector('#content');
+ this._contentScrollElement = document.querySelector('#content-scroll');
this._contentScrollBodyElement = document.querySelector('#content-body');
this._contentScrollFocusElement = document.querySelector('#content-scroll-focus');
this._windowScroll = new WindowScroll(this._contentScrollElement);
@@ -183,6 +183,9 @@ class Display extends EventDispatcher {
['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}]
]);
window.addEventListener('focus', this._onWindowFocus.bind(this), false);
+ document.documentElement.addEventListener('focusin', this._onDocumentFocusIn.bind(this), false);
+ document.documentElement.addEventListener('focusout', this._onDocumentFocusOut.bind(this), false);
+ this._updateFocusedElement();
this._progressIndicatorVisible.on('change', this._onProgressIndicatorVisibleChanged.bind(this));
}
@@ -582,16 +585,15 @@ class Display extends EventDispatcher {
}
_onWindowFocus() {
- const target = this._contentScrollFocusElement;
- if (target === null) { return; }
- const {activeElement} = document;
- if (
- activeElement === null ||
- activeElement === document.documentElement ||
- activeElement === document.body
- ) {
- target.focus();
- }
+ this._updateFocusedElement();
+ }
+
+ _onDocumentFocusIn() {
+ this._updateFocusedElement();
+ }
+
+ _onDocumentFocusOut() {
+ this._updateFocusedElement();
}
async _onKanjiLookup(e) {
@@ -1569,4 +1571,17 @@ class Display extends EventDispatcher {
if (deepEqual(this._optionsContext, optionsContext)) { return; }
await this.setOptionsContext(optionsContext);
}
+
+ _updateFocusedElement() {
+ const target = this._contentScrollFocusElement;
+ if (target === null) { return; }
+ const {activeElement} = document;
+ if (
+ activeElement === null ||
+ activeElement === document.documentElement ||
+ activeElement === document.body
+ ) {
+ target.focus();
+ }
+ }
}