Use passive scrolling and add main element

And update package lock while I'm at it.
This commit is contained in:
Florine W. Dekker 2019-11-02 13:10:49 +01:00
parent d97d793b1e
commit 4ec4f6d0f7
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
4 changed files with 13 additions and 10 deletions

BIN
package-lock.json generated

Binary file not shown.

View File

@ -18,13 +18,16 @@
<link href="css/main.css" rel="stylesheet" /> <link href="css/main.css" rel="stylesheet" />
</head> </head>
<body> <body>
<div id="terminal"> <main>
<div id="terminalOutput"></div> <div id="terminal">
<div id="terminalCurrent"> <div id="terminalOutput"></div>
<span id="terminalCurrentPrefix"></span> <div id="terminalCurrent">
<span id="terminalCurrentFocusInput" contenteditable="true" autocapitalize="none" spellcheck="false"></span> <span id="terminalCurrentPrefix"></span>
<span id="terminalCurrentFocusInput" contenteditable="true" autocapitalize="none"
spellcheck="false"></span>
</div>
</div> </div>
</div> </main>
<script type="module" src="bundle.js"></script> <script type="module" src="bundle.js"></script>

View File

@ -1,5 +1,5 @@
import * as Cookies from "js-cookie"; import * as Cookies from "js-cookie";
import "./extensions" import "./Extensions"
import {File, FileSystem} from "./FileSystem" import {File, FileSystem} from "./FileSystem"
import {IllegalStateError, stripHtmlTags} from "./Shared"; import {IllegalStateError, stripHtmlTags} from "./Shared";
import {OutputAction} from "./Terminal"; import {OutputAction} from "./Terminal";

View File

@ -62,10 +62,10 @@ export class Terminal {
let scrollStartPosition: number = 0; let scrollStartPosition: number = 0;
this.terminal.addEventListener("wheel", (event: WheelEvent) => { this.terminal.addEventListener("wheel", (event: WheelEvent) => {
this.scroll += -event.deltaY / 100; this.scroll += -event.deltaY / 100;
}); }, {passive: true});
this.terminal.addEventListener("touchstart", (event: TouchEvent) => { this.terminal.addEventListener("touchstart", (event: TouchEvent) => {
scrollStartPosition = event.changedTouches[0].clientY; scrollStartPosition = event.changedTouches[0].clientY;
}); }, {passive: true});
this.terminal.addEventListener("touchmove", (event: TouchEvent) => { this.terminal.addEventListener("touchmove", (event: TouchEvent) => {
event.preventDefault(); event.preventDefault();
@ -76,7 +76,7 @@ export class Terminal {
this.scroll -= Math.floor(diff / this.lineHeight); // -= because swipe down => increase scroll this.scroll -= Math.floor(diff / this.lineHeight); // -= because swipe down => increase scroll
scrollStartPosition = newPosition - (newPosition % this.lineHeight); scrollStartPosition = newPosition - (newPosition % this.lineHeight);
}); }, {passive: true});
this.outputText = this.shell.generateHeader(); this.outputText = this.shell.generateHeader();
this.prefixText = this.shell.generatePrefix(); this.prefixText = this.shell.generatePrefix();