Skip to content

Instantly share code, notes, and snippets.

@fontanon

fontanon/simulated-typing.html

Created May 17, 2021 07:54
Download ZIP

Revisions

  1. fontanon created this gist May 17, 2021.
    116 changes: 116 additions & 0 deletions simulated-typing.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <html>
    <head>
    <title>Simulated typing</title>
    </head>
    <body>
    <input type="text" id="transcribe-searchbox" placeholder="Escribe Aquí">
    <input type="button" id="transcribe-button" value="Transcibir a Andaluz">
    </body>
    <script>
    // Quotes to simulate typing, then deletion
    // The animation cycles between them.
    var andaluh = [
    "La comunidad del andaluz escrito",
    "Aprende a escribir en andaluz",
    "Es tu derecho, es tu lengua 😛",
    "No ni ná 🤗"
    ];

    // Miliseconds between each letter
    // when typing/deleting. The higher, the slower.
    var writeSpeed = 80;
    var deleteSpeed = 30;

    // Global var to control animation start/stop
    var animate = true;

    // If the user clicks on the searchbox => stop animation.
    function stopAnimation(input) {
    if (animate) {
    input.value = "";
    }
    animate = false;
    }

    // Listen to click to stop animation
    var transcribeSearchbox = document.querySelector("#transcribe-searchbox");
    transcribeSearchbox.addEventListener("click", function(event) {
    stopAnimation(transcribeSearchbox);
    event.preventDefault();
    });

    // Listen to click to open transcriptor
    var transcribeButton = document.querySelector("#transcribe-button");
    transcribeButton.addEventListener("click", function(event) {
    window.open('https://andaluh.es/transcriptor/#/?text=' + encodeURIComponent(transcribeSearchbox.value))
    event.preventDefault();
    });

    // Main function
    function startAnimation(quotes, writeSpeed=100, deleteSpeed=50) {
    // Transcribe when Enter is pressed
    transcribeSearchbox.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
    window.open('https://andaluh.es/transcriptor/#/?text=' + encodeURIComponent(transcribeSearchbox.value))
    }
    });

    // Intialize
    transcribeSearchbox.select();
    transcribeSearchbox.value="";

    // Simulates text deletion
    var delete_text = function(quoteIndex, charIndex) {
    var quote = quotes[quoteIndex];
    var l = quote.length;

    if (animate) {
    transcribeSearchbox.value = transcribeSearchbox.value.slice(0, -1); // Remove last character

    if(charIndex > 0) {
    charIndex--;
    setTimeout(function() {
    delete_text(quoteIndex, charIndex)
    }, deleteSpeed);
    } else { // Cycle between quotes
    if (quoteIndex == quotes.length -1) {
    var newQuote = 0; // Start from beginning
    } else {
    var newQuote = quoteIndex + 1; // Next quote
    }
    setTimeout(function() {
    write_text(newQuote, charIndex)
    }, writeSpeed);
    }
    }
    }

    // Simulates text typing
    var write_text = function(quoteIndex, charIndex) {
    var quote = quotes[quoteIndex];
    var l = quote.length;

    if (animate) {
    transcribeSearchbox.value += quote[charIndex]; // Type next character

    if(charIndex < l-1) {
    charIndex++;
    setTimeout(function() {
    write_text(quoteIndex, charIndex)
    }, writeSpeed);
    } else { // Start text deletion simulation
    setTimeout(function() {
    delete_text(quoteIndex, charIndex)
    }, 20 * writeSpeed); // Delay before delete
    }
    }
    }

    // Start animation
    setTimeout(function() { write_text(0, 0) }, writeSpeed);
    }

    // Start!
    startAnimation(andaluh, writeSpeed, deleteSpeed);
    </script>
    </html>