Open egfx opened 6 months ago
Hi, thanks for your contribution!
Are you looking for something like a Web Component? Something like this?
class HumanReplay extends HTMLElement {
constructor() {
super();
this.values = [{"op":"a","v":"T","t":0},{"op":"a","v":"h","t":119},{"op":"a","v":"i","t":197},{"op":"a","v":"s","t":306},{"op":"a","v":" ","t":378},{"op":"a","v":"i","t":501},{"op":"a","v":"s","t":621},{"op":"a","v":" ","t":692},{"op":"a","v":"a","t":852},{"op":"a","v":" ","t":937},{"op":"a","v":"s","t":1098},{"op":"a","v":"i","t":1199},{"op":"a","v":"m","t":1837},{"op":"a","v":"p","t":1977},{"op":"a","v":"l","t":2066},{"op":"a","v":"e","t":2152},{"op":"a","v":" ","t":2300},{"op":"a","v":"t","t":2386},{"op":"a","v":"e","t":2475},{"op":"a","v":"s","t":2548},{"op":"a","v":"t","t":2626},{"op":"a","v":".","t":2674}];
this.interval = null;
}
connectedCallback() {
const printingStart = new Date();
this.interval = setInterval(() => {
const timePassed = new Date() - printingStart;
const value = this.values.shift();
if (!value) {
clearInterval(this.interval);
return;
}
if (value.t > timePassed) {
this.values.unshift(value);
return;
}
switch (value.op) {
case 'a':
this.textContent = this.textContent + value.v;
break;
case 'd':
this.textContent = this.textContent.slice(0, -1);
break;
default:
this.textContent = value.v;
}
}, 20);
}
disconnectedCallback() {
clearInterval(this.interval);
}
}
customElements.define('human-replay', HumanReplay);
<!-- in the HTML file: -->
<human-replay></human-replay>
This has been added to https://einenlum.github.io/human-replay/
yeah, as I mentioned this would work much better as a jQuery plugin. You should be able to attach it to an input element, text element and to a div using content editable. Right now, it's unclear how to use this as a library to get the values filled in for the way you type it out. There is still a lot of manual work involved if you want to do this.
Oooh, ok! Sorry, I misunderstood your question/request. The goal of this project had never been to provide the behaviour of the GitHub page (to show a user an input and to reproduce it on the page). The goal is to provide an easy way for a developer to type something and have a super easy way to show a text exactly how they typed it on some website. A usecase would be to show on a website a header typed exactly as you want it to be shown.
But I could indeed consider building a project so that it's easy to entirely reproduce on a website (the input + preview). I don't think I saw any request regarding this but I will think about it! Thanks for your contribution.
I reopen this and will give you an update about this. Meanwhile, the code is accessible on this repo if you need to dig into it.
This library needs an api or something like a jQuery component. When it's ready I'd be thrilled to try it out!
https://news.ycombinator.com/item?id=39574654