text_typer-ts v1.0.1

⌨️ Text Typer (Typescript ver) ⌨️

Bundled JS ~10kB

A Text typer simulation Javascript module for your webpage. Written in Typescript & bundled via webpack. Include in your web project immediately via <script> tags.

Table of Contents

Setting up

Getting started

The TextTyper

The TextTyperEventQueue

Extensions

1. Keysound Extension

2. Styling Extension

Others

Setting Up

To get started, simply put the script tag into your HTML document. Module will be loaded via CDN

<script src='https://unpkg.com/text_typer-ts@latest/dist/core/bundle.js'></script>

Then, you may begin writing Javascript to use the text typer. See the next section to get a rough idea on how to do it:

Getting Started

Here's an example on how you can use Text Typer:

// Construct a TextTyper instance, passing in the HTML element you want it to type into
const tt = new TextTyper( document.querySelector('#myTextBox') );

// By obtaining the event queue, you can chain "events" which will be executed
// sequentially by the TextTyper after start() has been invoked!
tt.getEventQueue()
    .type('Hello World!')   // Type "Hello World!" character by character
    .standby(1000)  // Idle for 1 seconds
    .delete()       // Delete character by character until the end
    .standby(500)   // Idle for 0.5 seconds
    .type('Text Typer! ✏')
    .start();       

The TextTyper ⌨️

When importing the module, a TextTyper class is exposed to the browser's window global object, which you can use to instantiate a TextTyper as seen earlier:

const tt = new TextTyper( document.querySelector("#myTextBox"));

An instance of TextTyper contains numerous methods, most of which will perform the event immediately, asynchronously (non-blocking). Usually, you would want to use EventQueue which will be explained in the next section instead.

The TextTyperEventQueue 🚶🚶

With getEventQueue() called, it will return a TextTyperEventQueue object which you can chain events and have them execute one after another.

Most of the methods mentioned above in TextTyper are also chainable for TextTyperEventQueue.

Quick Example:

const tt = new TextTyper( document.querySelector("#myTextBox"));
const eq = tt.getEventQueue();

eq
    .type("Hello World")
    .standby(1000)
    .delete(5)
    .type("Everyone")
    .standby(2000)
    .delete()
    .loop()
    .start();

Extensions 🔌

This package also comes with several extensions to enhance the functionality of the TextTyper. See below:

1 - Keysound Extension 🔊

Bundled size ~46kB

The Keysound Extension features keyboard sounds when the TextTyper either types or delete a single character.

To include this extension, simply add the script tag below the core package:

<!-- Core package -->
<script src='https://unpkg.com/text_typer-ts@latest/dist/core/bundle.js'></script>
<!-- Keysound Extension -->
<script src='https://unpkg.com/text_typer-ts@latest/dist/keysound/bundle.js'></script>

With the extension included, you may see the browser's global window object is exposed to TextTyperKeysound object, consisting of several options of keysound to select:

The available options are:

TextTyperKeysound.CHERRY_BLACK
TextTyperKeysound.CHERRY_BLUE
TextTyperKeysound.CHERRY_BROWN
TextTyperKeysound.CHERRY_CLEAR
TextTyperKeysound.CHERRY_GREEN
TextTyperKeysound.CHERRY_GREY
TextTyperKeysound.CHERRY_RED
TextTyperKeysound.CHERRY_WHITE

To configure keysound is fairly easy. In both TextTyper and TextTyperEventQueue, the configureKeysound() method is added:

where the TextTyperSoundConfig object is structered as follows:

{
    typeSound?: KEYBOARD_SOUNDS,    //Eg: TextTyperKeysound.CHERRY_GREEN
    deleteSound?: KEYBOARD_SOUNDS,
    typeVolume?: number,
    deleteVolume?: number
}

Example usage: Start without key sound, but configured after typing "Hello World", and "Everyone".

const tt = new TextTyper( document.querySelector("#myTextBox"));
const eq = tt.getEventQueue();

eq
    .type("Hello World")
    .configureKeysound({    
        typeSound: TextTyperKeysound.CHERRY_RED
    })
    .standby(1000)
    .delete(5)
    .type("Everyone")
    .configureKeysound({    
        deleteSound: TextTyperKeysound.CHERRY_BLUE
    })
    .standby(2000)
    .delete()
    .start();

2 - Styling extension 🎇

Bundled size ~10kB

The styling extension provides interfaces to change the cursor's appearance, as well as a method for you to directly modify the CSS for both the cursor and the textbox.

To get started, include the <script> tag:

<!-- Core package -->
<script src='https://unpkg.com/text_typer-ts@latest/dist/core/bundle.js'></script>
<!-- Styling Extension -->
<script src='https://unpkg.com/text_typer-ts@latest/dist/styling/bundle.js'></script>

Once included, BLINK_MODE and CURSOR_STYLE objects will be included in the browser's global window object. You will use these values in the styling extension configurations later.

// BLINK_MODE
{
    NONE = 'BLINK_NONE',            // Does not blink at all
    CONSTANT = 'BLINK_CONSTANT',    // Default. Appear and dissapears
    LINEAR = 'BLINK_LINEAR'         // Fades in and out
}
// CURSOR_STYLE
{
    VERTICAL = 'STYLE_VERT',
    I = 'STYLE_I',
    Y = 'STYLE_Y',
    _ = 'STYLE__',
    BLOCK = 'STYLE_BLOCK',
    LEFTARR = 'STYLE_LEFTARR',
    NONE = 'STYLE_NONE'
}

These are the methods added to both the TextTyper and TextTyperEventQueue which you can use:

Where the StylingOptions object is structured as follows:

{
    blinkMode?: BLINK_MODE; // Eg: BLINK_MODE.LINEAR
    cursorStyle?: CURSOR_STYLE; // Eg: CURSOR_STYLE.Y
}

Example on how you might use it:

const tt = new TextTyper( document.querySelector("#myTextBox"));
const eq = tt.getEventQueue();

eq
    .type("Type Default")
    .standby(1000)
    .delete()
    .configureStyling({
        cursorStyle: CURSOR_STYLE.Y
        blinkMode: BLINK_MODE.LINEAR
    })
    .type("Type in Y")
    .standby(1000)
    .delete()
    .configureStyling({
        cursorStyle: CURSOR_STYLE._
    })
    .type("Type in _")
    .standby(1000)
    .delete()
    .start();

Others

1. If you want a more customized styling, you can always resolve to writing the CSS yourself. The text cursor is just a <span> element. The HTML looks as follows:

Therefore, to style the textbox, you could use CSS selector .text-box. Likewise, you could style the cursor with the selector [data-is='text-cursor'].