aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-14 18:12:06 -0500
committerGitHub <noreply@github.com>2020-11-14 18:12:06 -0500
commit4b1c7b1e269b98eaf4906c82cb3fd09566dce7be (patch)
tree4348e17baf5601930971e95f55edcc7708526598 /ext/mixed/js
parent34c6d4210a3e638482c13d0f0129489e254900de (diff)
Display layout updates (#1032)
* Fix display scroll not always using the right position * Update display layout and scroll method * Fix border size
Diffstat (limited to 'ext/mixed/js')
-rw-r--r--ext/mixed/js/display.js26
-rw-r--r--ext/mixed/js/scroll.js22
2 files changed, 37 insertions, 11 deletions
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index d52fe576..c0102379 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -56,7 +56,6 @@ class Display extends EventDispatcher {
this._autoPlayAudioDelay = 0;
this._mediaLoader = new MediaLoader();
this._displayGenerator = new DisplayGenerator({mediaLoader: this._mediaLoader});
- this._windowScroll = new WindowScroll();
this._hotkeys = new Map();
this._actions = new Map();
this._messageHandlers = new Map();
@@ -87,6 +86,10 @@ class Display extends EventDispatcher {
renderTemplate: this._renderTemplate.bind(this)
});
this._updateAdderButtonsPromise = Promise.resolve();
+ this._contentScrollElement = document.querySelector('#content');
+ this._contentScrollBodyElement = document.querySelector('#content-body');
+ this._contentScrollFocusElement = document.querySelector('#content-scroll-focus');
+ this._windowScroll = new WindowScroll(this._contentScrollElement);
this.registerActions([
['close', () => { this.onEscape(); }],
@@ -174,6 +177,7 @@ class Display extends EventDispatcher {
api.crossFrame.registerHandlers([
['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}]
]);
+ window.addEventListener('focus', this._onWindowFocus.bind(this), false);
}
initializeState() {
@@ -549,6 +553,19 @@ class Display extends EventDispatcher {
this._nextTermView();
}
+ _onWindowFocus() {
+ const target = this._contentScrollFocusElement;
+ if (target === null) { return; }
+ const {activeElement} = document;
+ if (
+ activeElement === null ||
+ activeElement === document.documentElement ||
+ activeElement === document.body
+ ) {
+ target.focus();
+ }
+ }
+
async _onKanjiLookup(e) {
try {
e.preventDefault();
@@ -1032,9 +1049,6 @@ class Display extends EventDispatcher {
}
_entrySetCurrent(index) {
- index = Math.min(index, this._definitions.length - 1);
- index = Math.max(index, 0);
-
const entryPre = this._getEntry(this._index);
if (entryPre !== null) {
entryPre.classList.remove('entry-current');
@@ -1051,6 +1065,8 @@ class Display extends EventDispatcher {
}
_focusEntry(index, smooth) {
+ index = Math.max(Math.min(index, this._definitions.length - 1), 0);
+
const entry = this._entrySetCurrent(index);
let target = index === 0 || entry === null ? 0 : this._getElementTop(entry);
@@ -1254,7 +1270,7 @@ class Display extends EventDispatcher {
_getElementTop(element) {
const elementRect = element.getBoundingClientRect();
- const documentRect = document.documentElement.getBoundingClientRect();
+ const documentRect = this._contentScrollBodyElement.getBoundingClientRect();
return elementRect.top - documentRect.top;
}
diff --git a/ext/mixed/js/scroll.js b/ext/mixed/js/scroll.js
index 1cad87ef..a57bedf4 100644
--- a/ext/mixed/js/scroll.js
+++ b/ext/mixed/js/scroll.js
@@ -16,7 +16,8 @@
*/
class WindowScroll {
- constructor() {
+ constructor(node) {
+ this._node = node;
this._animationRequestId = null;
this._animationStartTime = 0;
this._animationStartX = 0;
@@ -28,11 +29,11 @@ class WindowScroll {
}
get x() {
- return window.scrollX || window.pageXOffset;
+ return this._node !== null ? this._node.scrollLeft : window.scrollX || window.pageXOffset;
}
get y() {
- return window.scrollY || window.pageYOffset;
+ return this._node !== null ? this._node.scrollTop : window.scrollY || window.pageYOffset;
}
toY(y) {
@@ -45,7 +46,7 @@ class WindowScroll {
to(x, y) {
this.stop();
- window.scroll(x, y);
+ this._scroll(x, y);
}
animate(x, y, time) {
@@ -71,13 +72,13 @@ class WindowScroll {
_onAnimationFrame(time) {
if (time >= this._animationEndTime) {
- window.scroll(this._animationEndX, this._animationEndY);
+ this._scroll(this._animationEndX, this._animationEndY);
this._animationRequestId = null;
return;
}
const t = this._easeInOutCubic((time - this._animationStartTime) / (this._animationEndTime - this._animationStartTime));
- window.scroll(
+ this._scroll(
this._lerp(this._animationStartX, this._animationEndX, t),
this._lerp(this._animationStartY, this._animationEndY, t)
);
@@ -97,4 +98,13 @@ class WindowScroll {
_lerp(start, end, percent) {
return (end - start) * percent + start;
}
+
+ _scroll(x, y) {
+ if (this._node !== null) {
+ this._node.scrollLeft = x;
+ this._node.scrollTop = y;
+ } else {
+ window.scroll(x, y);
+ }
+ }
}