Experimenting with JavaScript via Wix

One of my favourite website effects is an active typewriter effect. Unfortunately, Wix has no easy way to implement it through user presets. However, they do offer a way to access your website modules using JavaScript, so it is actually possible to implement.

I started with a template provided by Gramp's Workbench in order to get started. It slowly types out the entirety of a String, and provides some infrastructure to maintain the predesignated format and size that you want. I've never used JavaScript before so it was also useful to learn its syntax and its demonstration of setInterval. I expanded upon his method to include both a "typing" and "deleting" state (Boolean), and implemented a way to loop a deletion of the displayStr. I also changed it so that given an array of Strings, the program will automatically sift through this process for each of them in a loop.

A big frustration was trying to understand JavaScript's asynchronous capability. Using James Hibbard's timing functions using setTimeout, I was hoping to delay at some moments when Strings would be typed. I implemented his sleep() function and referenced it in an async function when changing the typing/deletion state, giving a wait time of roughly 2 seconds. However, even with a lot of experimentation, I was unable to use sleep() to give the entry line ( | ) a blinking effect. However, I have an idea to simplify the current loop structure and not have to mess with asynchronous functions within setInterval functions, which is a bit of a hassle.

Currently, I've come up with this effect:

I'm very satisfied with the effect and had a lot of of fun learning about JavaScript and how easily you can work with it using Wix. I'll be coming back to this code later on to see how I can add that pesky entry line blink.

Here is the code I've come up with (adding on to Gramp's). text3 is in reference to the module.

let deletion;
let isTyping = true;
let timeInterval = 140;
let typeStr = ["software engineer.", "bass player.", "hard worker.", "team player.", "good communicator."]
let typeIdx;
let deleteIdx = 0;
let htmlStr = '';
let displayStr;
let counter = 0;

$w.onReady(function () {


	// Get the original html string, and split it into two pieces.
	// In the process, remove the separator !##!
	// By saving the original html, we preserve the style of the text to display.
	if (htmlStr.length === 0) {	// just get the original html text the first time
		htmlStr = $w("#text3").html;
	}
	
	
	
	$w("#text3").html = ''; // don't show the original text

	let strPieces = htmlStr.split("!##!");
	$w("#text3").html = strPieces[0] + "I am a |" + strPieces[1];


	displayStr = ''; // init string that we will "type" to
	typeIdx = 0; // start at beginning of string we want to "type"

	
	function sleep(ms) {
  		return new Promise(resolve => setTimeout(resolve, ms));
	}

	async function stopTyping() {
		await sleep(2200)
		isTyping = false;
		}

	
		
	
		// Declare an interval function that will run in the background.
		// This function will be triggered by the defined timeInterval.
		
		setInterval(function () {

			//We are typing our given String.
			if (isTyping) {
				// Get next char from string to be typed and concatenate to the display string.
				displayStr = displayStr + typeStr[counter].charAt(typeIdx++);
			
				// Make a sandwich with the display string in between the original html pieces.
				$w("#text3").html = strPieces[0] + "I am a " + displayStr + "|" + strPieces[1];
			
				// When we get to the last character to by "typed", we stop this process
				if (typeIdx === typeStr[counter].length) {
					 stopTyping()
				}

			//We are deleting our given String.
			} else {
				
				/*
				//Deleting last char from display string.
				displayStr = displayStr.substring(0, displayStr.length - (deleteIdx+1))

				// Make a sandwich with the display string in between the original html pieces.
				$w("#text3").html = strPieces[0] + "I am a " + displayStr + "|" + strPieces[1];
				*/

				deletionLoop(deletion, 120)

				//When done deleting, type and delete next String in the typeStr list
				if (displayStr.length == 0) {
				
					//We will start typing again.
					isTyping = true;
					//We reset our typing and deletion index to 0 so we can begin at the beginnings/ends
					//of each new String correctly.
					typeIdx = 0;
					deleteIdx = 0;
					//Our counter increases according, and we move onto the next string in the list.
					counter++;
					//If our counter reaches the length of the typeStr array, we begin printing out
					//its contents from the beginning by reseting the counter.
					if (counter == typeStr.length) counter = 0;

				}
			}

		
	}, timeInterval);

	//Unique function to delete from text3
	function deletionLoop(deletion, timeInterval) {
		deletion = setInterval(function() {
				//Deleting last char from display string.
				displayStr = displayStr.substring(0, displayStr.length - (deleteIdx+1))

				// Make a sandwich with the display string in between the original html pieces.
				$w("#text3").html = strPieces[0] + "I am a " + displayStr + "|" + strPieces[1];

				if (displayStr.length == 0) clearInterval(deletion)

		}, timeInterval)
	}
	

	});