From 4b1c7b1e269b98eaf4906c82cb3fd09566dce7be Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 14 Nov 2020 18:12:06 -0500 Subject: [PATCH] Display layout updates (#1032) * Fix display scroll not always using the right position * Update display layout and scroll method * Fix border size --- ext/bg/search.html | 4 +++- ext/fg/float.html | 4 +++- ext/mixed/css/display.css | 22 +++++++++++++++++++++- ext/mixed/css/search.css | 14 ++------------ ext/mixed/js/display.js | 26 +++++++++++++++++++++----- ext/mixed/js/scroll.js | 22 ++++++++++++++++------ 6 files changed, 66 insertions(+), 26 deletions(-) diff --git a/ext/bg/search.html b/ext/bg/search.html index a9140f40..063aae1e 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -16,7 +16,9 @@ -
+
+ +

Yomichan Search

diff --git a/ext/fg/float.html b/ext/fg/float.html index db10c159..dc3e159a 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -15,7 +15,9 @@ -
+
+ + diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index f08125f5..f6317d54 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -115,12 +115,14 @@ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--font-size); line-height: var(--line-height); + height: 100%; } body { margin: 0; border: 0; padding: 0; - overflow-y: scroll; /* always show scroll bar */ + height: 100%; + overflow: hidden; background-color: var(--background-color); color: var(--default-text-color); font-size: inherit; @@ -152,6 +154,24 @@ a { } +/* Main layout */ +.content { + width: 100%; + height: 100%; + display: flex; + flex-flow: row nowrap; + overflow-x: hidden; + overflow-y: scroll; + position: relative; + align-items: stretch; + justify-content: center; +} +.content-body { + flex: 1 1 auto; + height: 100%; +} + + /* Navigation */ .navigation-header { top: 0; diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css index 7ef32fb4..456add33 100644 --- a/ext/mixed/css/search.css +++ b/ext/mixed/css/search.css @@ -93,7 +93,7 @@ h1 { padding: 0.25em 0 0; font-weight: normal; box-sizing: border-box; - border-bottom: var(--thin-border-size) solid var(--separator-color1); + border-bottom: calc(1em / (var(--font-size-no-units) * 2)) solid var(--separator-color1); } /* Material design select */ @@ -229,17 +229,7 @@ label.toggle { } /* Content layout */ -.content { - flex: 1 0 auto; - flex-flow: row nowrap; - width: 100%; - display: flex; - position: relative; - align-items: stretch; - justify-content: center; -} -.content-center { - flex: 1 1 auto; +.content-body { width: var(--main-content-size); padding: 0 var(--main-content-padding); max-width: var(--main-content-size); 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); + } + } }