createActiveListSubscriber<T>

FUNCTION

A function that creates an ActiveListSubscriber which you can provide to an ActiveList, which maps all ActiveListEvent to methods.

You provide createActiveListSubscriber 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 ACTIVATED event, you provide a method called onActivated within the config. Whenever the ACTIVATED event occurs onActivated will be called.

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

createActiveListSubscriber should only be used when using Vanilla JavaScript or TypeScript and not when using a reactive framework because reactive frameworks (such as React or Vue) 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 ActiveList.

Examples

A. Simple example

The example below shows what the subscriber could look like for a carousel component which has one slide active at a time.

import {
 ActiveList,
 createActiveListSubscriber
} from "uiloos/core";

const carouselSubscriber = createActiveListSubscriber({
  onActivated() {
    // Activate the active slide
    activeList.lastDeactivated.classList.remove('active');

    // Deactivates the last activated slide
    activeList.lastActivated.classList.add('active');
  },
});

const activeList = new ActiveList({
  // The slide div elements are the contents of the ActiveList
  contents: Array.from(document.querySelectorAll('.carousel .slide'))
}, carouselSubscriber)

B. All methods implemented

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

const subscriber = createActiveListSubscriber({
  onInitialized(event, activeList) {
    console.log('onInitialized', event, activeList);
  },
 
  onActivated(event, activeList) {
    console.log('onActivated', event, activeList);
  },

  onDeactivated(event, activeList) {
    console.log('onDeactivated', event, activeList);
  },

  onInserted(event, activeList) {
    console.log('onInserted', event, activeList);
  },

  onRemoved(event, activeList) {
    console.log('onRemoved', event, activeList);
  },

  onSwapped(event, activeList) {
    console.log('onSwapped', event, activeList);
  },
  
  onMoved(event, activeList) {
    console.log('onMoved', event, activeList);
  },

  onCooldownStarted(event, activeList) {
    console.log('onCooldownStarted', event, activeList);
  },

  onCooldownEnded(event, activeList) {
    console.log('onCooldownEnded', event, activeList);
  },

  onAutoPlayStopped(event, activeList) {
    console.log('onAutoPlayStopped', event, activeList);
  },

  onAutoPlayPlaying(event, activeList) {
    console.log('onAutoPlayPlaying', event, activeList);
  },

  onAutoPlayPaused(event, activeList) {
    console.log('onAutoPlayPaused', event, activeList);
  },

  onActivatedMultiple(event, activeList) {
    console.log('onActivatedMultiple', event, activeList);
  },
  
  onDeactivatedMultiple(event, activeList) {
    console.log('onDeactivatedMultiple', event, activeList);
  },
 
  onRemovedMultiple(event, activeList) {
    console.log('onRemovedMultiple', event, activeList);
  },
});