Display layout updates (#1032)
* 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
GitHub
parent
34c6d4210a
commit
4b1c7b1e26
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user