summaryrefslogtreecommitdiff
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
parent1216926fbdb6b897f4cf9d4cb25d3aaef86707d1 (diff)
Display scroll fixes (#1046)
* Update focus when internal focus is changed * Update scroll layout
-rw-r--r--ext/bg/search.html4
-rw-r--r--ext/fg/float.html4
-rw-r--r--ext/mixed/css/display.css9
-rw-r--r--ext/mixed/js/display.js37
4 files changed, 39 insertions, 15 deletions
diff --git a/ext/bg/search.html b/ext/bg/search.html
index caa9106f..bffbcd82 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -16,7 +16,7 @@
</head>
<body>
-<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+<div class="content"><div class="content-scroll scrollbar" id="content-scroll"><div class="content-body" id="content-body">
<div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
<div class="content-body-inner">
@@ -60,7 +60,7 @@
</div>
</div>
-</div></div>
+</div></div></div>
<!-- Scripts -->
<script src="/mixed/lib/wanakana.min.js"></script>
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 0ee8fd7d..bee79d10 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -16,7 +16,7 @@
<body>
<div class="content-outer">
-<div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+<div class="content"><div class="content-scroll scrollbar" id="content-scroll"><div class="content-body" id="content-body">
<div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
<div class="content-body-inner">
@@ -48,7 +48,7 @@
</div>
</div>
-</div></div>
+</div></div></div>
<div class="content-sidebar scrollbar" id="content-sidebar" hidden><div class="content-sidebar-inner">
<div class="content-sidebar-top">
<button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button>
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();
+ }
+ }
}