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 @@ -238,6 +238,15 @@ a { /* Main layout */ .content { + width: 100%; + 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; 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(); + } + } } -- cgit v1.2.3