alex/yomichan
1
Fork 0
Code Releases Activity

Display scroll fixes (#1046)

Browse Source 
* Update focus when internal focus is changed

* Update scroll layout
This commit is contained in:
toasted-nutbread 2020-11-20 22:42:49 -05:00 committed by GitHub
parent 1216926fbd
commit 181ade93d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ext/bg/search.html
View File

@ -16,7 +16,7 @@
</head> </head>
<body> <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="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
<div class="content-body-inner"> <div class="content-body-inner">
@ -60,7 +60,7 @@
</div> </div>
</div> </div>
</div></div> </div></div></div>
<!-- Scripts --> <!-- Scripts -->
<script src="/mixed/lib/wanakana.min.js"></script> <script src="/mixed/lib/wanakana.min.js"></script>

4
ext/fg/float.html
View File

@ -16,7 +16,7 @@
<body> <body>
<div class="content-outer"> <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="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
<div class="content-body-inner"> <div class="content-body-inner">
@ -48,7 +48,7 @@
</div> </div>
</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 scrollbar" id="content-sidebar" hidden><div class="content-sidebar-inner">
<div class="content-sidebar-top"> <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> <button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button>

9
ext/mixed/css/display.css
View File

@ -238,6 +238,15 @@ a {
/* Main layout */ /* Main layout */
.content { .content {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
position: relative;
align-items: stretch;
justify-content: flex-start;
}
.content-scroll {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;

35
ext/mixed/js/display.js
View File

@ -87,7 +87,7 @@ class Display extends EventDispatcher {
renderTemplate: this._renderTemplate.bind(this) renderTemplate: this._renderTemplate.bind(this)
}); });
this._updateAdderButtonsPromise = Promise.resolve(); this._updateAdderButtonsPromise = Promise.resolve();
this._contentScrollElement = document.querySelector('#content'); this._contentScrollElement = document.querySelector('#content-scroll');
this._contentScrollBodyElement = document.querySelector('#content-body'); this._contentScrollBodyElement = document.querySelector('#content-body');
this._contentScrollFocusElement = document.querySelector('#content-scroll-focus'); this._contentScrollFocusElement = document.querySelector('#content-scroll-focus');
this._windowScroll = new WindowScroll(this._contentScrollElement); this._windowScroll = new WindowScroll(this._contentScrollElement);
@ -183,6 +183,9 @@ class Display extends EventDispatcher {
['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}] ['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}]
]); ]);
window.addEventListener('focus', this._onWindowFocus.bind(this), false); 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)); this._progressIndicatorVisible.on('change', this._onProgressIndicatorVisibleChanged.bind(this));
} }
@ -582,16 +585,15 @@ class Display extends EventDispatcher {
} }
_onWindowFocus() { _onWindowFocus() {
const target = this._contentScrollFocusElement; this._updateFocusedElement();
if (target === null) { return; }
const {activeElement} = document;
if (
activeElement === null ||
activeElement === document.documentElement ||
activeElement === document.body
) {
target.focus();
} }
_onDocumentFocusIn() {
this._updateFocusedElement();
}
_onDocumentFocusOut() {
this._updateFocusedElement();
} }
async _onKanjiLookup(e) { async _onKanjiLookup(e) {
@ -1569,4 +1571,17 @@ class Display extends EventDispatcher {
if (deepEqual(this._optionsContext, optionsContext)) { return; } if (deepEqual(this._optionsContext, optionsContext)) { return; }
await this.setOptionsContext(optionsContext); 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();
}
}
} }