alex/yomichan
1
Fork 0
Code Releases Activity

Display layout updates (#1032)

Browse Source 
* Fix display scroll not always using the right position

* Update display layout and scroll method

* Fix border size
This commit is contained in:
toasted-nutbread 2020-11-14 18:12:06 -05:00 committed by GitHub
parent 34c6d4210a
commit 4b1c7b1e26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 66 additions and 26 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,9 @@
</head> </head>
<body> <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"> <div id="intro">
<h1>Yomichan Search</h1> <h1>Yomichan Search</h1>

4
ext/fg/float.html
View File

@ -15,7 +15,9 @@
</head> </head>
<body> <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> <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>

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

@ -115,12 +115,14 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); line-height: var(--line-height);
height: 100%;
} }
body { body {
margin: 0; margin: 0;
border: 0; border: 0;
padding: 0; padding: 0;
overflow-y: scroll; /* always show scroll bar */ height: 100%;
overflow: hidden;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--default-text-color); color: var(--default-text-color);
font-size: inherit; 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 */
.navigation-header { .navigation-header {
top: 0; top: 0;

14
ext/mixed/css/search.css
View File

@ -93,7 +93,7 @@ h1 {
padding: 0.25em 0 0; padding: 0.25em 0 0;
font-weight: normal; font-weight: normal;
box-sizing: border-box; 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 */ /* Material design select */
@ -229,17 +229,7 @@ label.toggle {
} }
/* Content layout */ /* Content layout */
.content { .content-body {
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;
width: var(--main-content-size); width: var(--main-content-size);
padding: 0 var(--main-content-padding); padding: 0 var(--main-content-padding);
max-width: var(--main-content-size); max-width: var(--main-content-size);

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

@ -56,7 +56,6 @@ class Display extends EventDispatcher {
this._autoPlayAudioDelay = 0; this._autoPlayAudioDelay = 0;
this._mediaLoader = new MediaLoader(); this._mediaLoader = new MediaLoader();
this._displayGenerator = new DisplayGenerator({mediaLoader: this._mediaLoader}); this._displayGenerator = new DisplayGenerator({mediaLoader: this._mediaLoader});
this._windowScroll = new WindowScroll();
this._hotkeys = new Map(); this._hotkeys = new Map();
this._actions = new Map(); this._actions = new Map();
this._messageHandlers = new Map(); this._messageHandlers = new Map();
@ -87,6 +86,10 @@ 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._contentScrollBodyElement = document.querySelector('#content-body');
this._contentScrollFocusElement = document.querySelector('#content-scroll-focus');
this._windowScroll = new WindowScroll(this._contentScrollElement);
this.registerActions([ this.registerActions([
['close', () => { this.onEscape(); }], ['close', () => { this.onEscape(); }],
@ -174,6 +177,7 @@ class Display extends EventDispatcher {
api.crossFrame.registerHandlers([ api.crossFrame.registerHandlers([
['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}] ['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}]
]); ]);
window.addEventListener('focus', this._onWindowFocus.bind(this), false);
} }
initializeState() { initializeState() {
@ -549,6 +553,19 @@ class Display extends EventDispatcher {
this._nextTermView(); 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) { async _onKanjiLookup(e) {
try { try {
e.preventDefault(); e.preventDefault();
@ -1032,9 +1049,6 @@ class Display extends EventDispatcher {
} }
_entrySetCurrent(index) { _entrySetCurrent(index) {
index = Math.min(index, this._definitions.length - 1);
index = Math.max(index, 0);
const entryPre = this._getEntry(this._index); const entryPre = this._getEntry(this._index);
if (entryPre !== null) { if (entryPre !== null) {
entryPre.classList.remove('entry-current'); entryPre.classList.remove('entry-current');
@ -1051,6 +1065,8 @@ class Display extends EventDispatcher {
} }
_focusEntry(index, smooth) { _focusEntry(index, smooth) {
index = Math.max(Math.min(index, this._definitions.length - 1), 0);
const entry = this._entrySetCurrent(index); const entry = this._entrySetCurrent(index);
let target = index === 0 || entry === null ? 0 : this._getElementTop(entry); let target = index === 0 || entry === null ? 0 : this._getElementTop(entry);
@ -1254,7 +1270,7 @@ class Display extends EventDispatcher {
_getElementTop(element) { _getElementTop(element) {
const elementRect = element.getBoundingClientRect(); const elementRect = element.getBoundingClientRect();
const documentRect = document.documentElement.getBoundingClientRect(); const documentRect = this._contentScrollBodyElement.getBoundingClientRect();
return elementRect.top - documentRect.top; return elementRect.top - documentRect.top;
} }

22
ext/mixed/js/scroll.js
View File

@ -16,7 +16,8 @@
*/ */
class WindowScroll { class WindowScroll {
constructor() { constructor(node) {
this._node = node;
this._animationRequestId = null; this._animationRequestId = null;
this._animationStartTime = 0; this._animationStartTime = 0;
this._animationStartX = 0; this._animationStartX = 0;
@ -28,11 +29,11 @@ class WindowScroll {
} }
get x() { get x() {
return window.scrollX || window.pageXOffset; return this._node !== null ? this._node.scrollLeft : window.scrollX || window.pageXOffset;
} }
get y() { get y() {
return window.scrollY || window.pageYOffset; return this._node !== null ? this._node.scrollTop : window.scrollY || window.pageYOffset;
} }
toY(y) { toY(y) {
@ -45,7 +46,7 @@ class WindowScroll {
to(x, y) { to(x, y) {
this.stop(); this.stop();
window.scroll(x, y); this._scroll(x, y);
} }
animate(x, y, time) { animate(x, y, time) {
@ -71,13 +72,13 @@ class WindowScroll {
_onAnimationFrame(time) { _onAnimationFrame(time) {
if (time >= this._animationEndTime) { if (time >= this._animationEndTime) {
window.scroll(this._animationEndX, this._animationEndY); this._scroll(this._animationEndX, this._animationEndY);
this._animationRequestId = null; this._animationRequestId = null;
return; return;
} }
const t = this._easeInOutCubic((time - this._animationStartTime) / (this._animationEndTime - this._animationStartTime)); 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._animationStartX, this._animationEndX, t),
this._lerp(this._animationStartY, this._animationEndY, t) this._lerp(this._animationStartY, this._animationEndY, t)
); );
@ -97,4 +98,13 @@ class WindowScroll {
_lerp(start, end, percent) { _lerp(start, end, percent) {
return (end - start) * percent + start; 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);
}
}
} }