tlaternet/tlaternet-templates
Archived
1
0
Fork 0
Code Issues4 Pull requests Releases Wiki Activity

Start using typescript

Browse source
This commit is contained in:
Tristan Daniël Maat 2020-02-29 15:51:28 +00:00 • committed by Tristan Daniël Maat
parent 8b1fcf7379
commit a357728358
Signed by: tlater
GPG key ID: 49670FD774E43268
7 changed files with 275 additions and 112 deletions

109
src/index.js
View file

@ -1,109 +0,0 @@
import $ from "jquery";
// Helpers
/**
* "Types" out a DOM element, emulating the way a human might.
*/
class Typer {
/**
* Create the typer.
* @param {HTMLElement} element - The element to type.
* @param {number} blink - The time between cursor blinks.
* @param {number} blink_timeout - How long the cursor should keep
* blinking for after the text
* finishes typing.
*/
constructor(element, blink, blink_timeout) {
// Retrieve the current content and wipe it. We also make the
// element visible if it was hidden.
this._element = $(element);
this._text = this._element.html();
this._element.html("");
this._element.css("visibility", "visible");
this._cursor = false;
this._typed = 0;
this._min = 20;
this._max = 70;
this._blink_tick = blink;
this._blink_timeout = blink_timeout;
this._end = null;
}
/**
* Start typing.
*/
type() {
this._type();
this._blink();
}
/**
* Draw the current text line, i.e., anything that has been typed
* so far, and a cursor if it is currently supposed to be on.
* @private
*/
_draw() {
let text = this._text.slice(0, this._typed);
if (this._cursor) {
text += "\u2588";
}
window.requestAnimationFrame(() => this._element.html(text));
}
/**
* Type the next character, and prepare to draw the next one. If
* no new characters are to be drawn, set the end timestamp.
* @private
*/
_type() {
this._typed += 1;
this._draw();
if (this._typed != this._text.length)
setTimeout(this._type.bind(this), this._type_tick());
else {
this._end = Date.now();
}
}
/**
* Make the cursor change blink status, and prepare for the next
* blink.
* @private
*/
_blink() {
this._cursor = !this._cursor;
this._draw();
// As long as we are typing, keep blinking
if (this._typed != this._text.length)
setTimeout(this._blink.bind(this), this._blink_tick);
// Once typing ends, keep going for a little bit
else if (Date.now() - this._end < this._blink_timeout)
setTimeout(this._blink.bind(this), this._blink_tick);
// Make sure we get rid of the cursor in the end
else {
this._cursor = true;
setTimeout(this._blink.bind(this), this._blink_tick);
}
}
/**
* Calculate a "human" time for the next character to type.
* @private
*/
_type_tick() {
return Math.round(Math.random() * this._max) + this._min;
}
}
$(document).ready(() => {
let typer = new Typer($(".head-line .typed").get(0), 500, 3000);
typer.type();
});

2
src/index.pug
View file

@ -76,4 +76,4 @@ block content
[GitHub](https://github.com/tlater) pages.
block footer
script(type="text/javascript" src="./index.js" defer)
script(type="text/javascript" src="./index.ts" defer)

119
src/index.ts Normal file
View file

@ -0,0 +1,119 @@
import $ from "jquery";
// Helpers
/**
* "Types" out a DOM element, emulating the way a human might.
*/
class Typer {
private element: JQuery;
private text: string;
private cursor: boolean;
private typed: number;
private min: number;
private max: number;
private blink_tick: number;
private blink_timeout: number;
private end?: number;
/**
* Create the typer.
* @param {HTMLElement} element - The element to type.
* @param {number} blink - The time between cursor blinks.
* @param {number} blink_timeout - How long the cursor should keep
* blinking for after the text
* finishes typing.
*/
constructor(element: HTMLElement, blink: number, blink_timeout: number) {
// Retrieve the current content and wipe it. We also make the
// element visible if it was hidden.
this.element = $(element);
this.text = this.element.html();
this.element.html("");
this.element.css("visibility", "visible");
this.cursor = false;
this.typed = 0;
this.min = 20;
this.max = 70;
this.blink_tick = blink;
this.blink_timeout = blink_timeout;
this.end = null;
}
/**
* Start typing.
*/
type() {
this._type();
this._blink();
}
/**
* Draw the current text line, i.e., anything that has been typed
* so far, and a cursor if it is currently supposed to be on.
* @private
*/
_draw() {
let text = this.text.slice(0, this.typed);
if (this.cursor) {
text += "\u2588";
}
window.requestAnimationFrame(() => this.element.html(text));
}
/**
* Type the next character, and prepare to draw the next one. If
* no new characters are to be drawn, set the end timestamp.
* @private
*/
_type() {
this.typed += 1;
this._draw();
if (this.typed != this.text.length)
setTimeout(this._type.bind(this), this._type_tick());
else {
this.end = Date.now();
}
}
/**
* Make the cursor change blink status, and prepare for the next
* blink.
* @private
*/
_blink() {
this.cursor = !this.cursor;
this._draw();
// As long as we are typing, keep blinking
if (this.typed != this.text.length)
setTimeout(this._blink.bind(this), this.blink_tick);
// Once typing ends, keep going for a little bit
else if (Date.now() - this.end < this.blink_timeout)
setTimeout(this._blink.bind(this), this.blink_tick);
// Make sure we get rid of the cursor in the end
else {
this.cursor = true;
setTimeout(this._blink.bind(this), this.blink_tick);
}
}
/**
* Calculate a "human" time for the next character to type.
* @private
*/
_type_tick() {
return Math.round(Math.random() * this.max) + this.min;
}
}
$(document).ready(() => {
let typer = new Typer($(".head-line .typed").get(0), 500, 3000);
typer.type();
});

0
src/lib/js/main.js → src/lib/js/main.ts
View file

2
src/lib/pug/base.pug
View file

@ -18,5 +18,5 @@ html.no-js(lang="en")
script(type="text/javascript", src="~/node_modules/jquery/dist/jquery.min.js" defer)
script(type="text/javascript", src="~/node_modules/bootstrap/dist/js/bootstrap.min.js" defer)
script(type="text/javascript", src="~/src/lib/js/main.js" defer)
script(type="text/javascript", src="~/src/lib/js/main.ts" defer)
block footer