sjardim/simulated-typing.html

## simulated-typing.html
<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>
	<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>