createTypewriterSubscriber<T>

FUNCTION

A function that creates an TypewriterSubscriber which you can provide to an Typewriter, which maps all TypewriterEvent to methods.

You provide createTypewriterSubscriber with an object with all the events you want to handle as methods and it will call the methods for you. This way your code will not have any switch or if-statement to distinguish between events.

For example if you wanted to handle the CHANGED event, you provide a method called onChanged within the config. Whenever the CHANGED event occurs onChanged will be called.

All methods are called with two parameters: the first is the event that occurred and the second the Typewriter the event occurred on.

createTypewriterSubscriber should only be used when using Vanilla JavaScript or TypeScript and not when using a reactive framework because reactive frameworks (such as Angular or Svelte) will handle the DOM manipulation for you.

If an event is fired that you did not provide a method for, an SubscriberMissingMethodError error will be thrown.

Since 1.5.0

Signature

Parameters

Returns

A subscriber function which can be passed to an Typewriter.

Examples

A. Simple example

The example below shows what the subscriber could look like for a typewriter which only listens to the 'CHANGED' event:

import {
 Typewriter,
 createTypewriterSubscriber
} from "uiloos/core";

const subscriber = createTypewriterSubscriber({
  onChanged() {
    const typewriterEl = document.getElementById('typewriter');
    typewriterEl.textContent = typewriter.text;
  }
});

const typewriter = new Typewriter({
  repeat: true,
  repeatDelay: 1000,
  autoPlay: false,
  actions: [
    {
      type: 'keyboard',
      cursor: 0,
      text: 'H',
      delay: 150,
    },
    {
      type: 'keyboard',
      cursor: 0,
      text: 'e',
      delay: 132,
    },
    {
      type: 'keyboard',
      cursor: 0,
      text: 'y',
      delay: 84,
    },
  ],
}, subscriber);

B. All methods implemented

Here is a nice example to get started which includes stub implementations for all method:

const subscriber = createTypewriterSubscriber({
  onInitialized(event, typewriter) {
    console.log('onInitialized', event, typewriter);
  },

  onChanged(event, typewriter) {
    console.log('onChanged', event, typewriter);
  },

  onPlaying(event, typewriter) {
    console.log('onPlaying', event, typewriter);
  },

  onPaused(event, typewriter) {
    console.log('onPaused', event, typewriter);
  },

  onStopped(event, typewriter) {
    console.log('onStopped', event, typewriter);
  },

  onFinished(event, typewriter) {
    console.log('onFinished', event, typewriter);
  },

  onBlinking(event, typewriter) {
    console.log('onBlinking', event, typewriter);
  },
 
  onRepeating(event, typewriter) {
    console.log('onRepeating', event, typewriter);
  }
});