diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-11-20 22:42:49 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-11-20 22:42:49 -0500 |
| commit | 181ade93d64ca54cee35415e795f42e58d556f54 (patch) | |
| tree | 2af5655b0411078ebe8416206877c73f785720ac | |
| parent | 1216926fbdb6b897f4cf9d4cb25d3aaef86707d1 (diff) | |
Display scroll fixes (#1046)
* Update focus when internal focus is changed
* Update scroll layout
| -rw-r--r-- | ext/bg/search.html | 4 | ||||
| -rw-r--r-- | ext/fg/float.html | 4 | ||||
| -rw-r--r-- | ext/mixed/css/display.css | 9 | ||||
| -rw-r--r-- | ext/mixed/js/display.js | 37 |
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(); + } + } } |