Display layout updates (#1032)

* Fix display scroll not always using the right position * Update display layout and scroll method * Fix border size
author: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2020-11-14 18:12:06 -0500
committer: GitHub <noreply@github.com> 2020-11-14 18:12:06 -0500
commit: 4b1c7b1e269b98eaf4906c82cb3fd09566dce7be (patch)
tree: 4348e17baf5601930971e95f55edcc7708526598 /ext
parent: 34c6d4210a3e638482c13d0f0129489e254900de (diff)
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 @@
 </head>
 <body>
 
-<div class="content"><div class="content-center">
+<div class="content" id="content"><div class="content-body" id="content-body">
+
+    <span tabindex="-1" id="content-scroll-focus"></span>
 
     <div id="intro">
         <h1>Yomichan Search</h1>
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 @@
 </head>
 <body>
 
-<div class="content"><div class="content-center">
+<div class="content" id="content"><div class="content-body" id="content-body">
+
+    <span tabindex="-1" id="content-scroll-focus"></span>
 
     <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
 
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);
+        }
+    }
 }
author	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2020-11-14 18:12:06 -0500
committer	GitHub <noreply@github.com>	2020-11-14 18:12:06 -0500
commit	4b1c7b1e269b98eaf4906c82cb3fd09566dce7be (patch)
tree	4348e17baf5601930971e95f55edcc7708526598 /ext
parent	34c6d4210a3e638482c13d0f0129489e254900de (diff)