eligius
    Preparing search index...

    Class ConfigurationFactory

    This class offers a fluent, extensible and strongly typed DSL for creating Eligius configurations.

    To initialize a basic configuration to start off of:

    const factory = new ConfigurationFactory()
    .init("en-US")                                               // Define the default language
    .addLanguage("en-US", "English")                             // Add English as a supported language
    .addLanguage("nl-NL", "Nederlands")                          // Add Dutch as a supported language
    .setLayoutTemplate("<div class=\"main.container\"></div>")   // Add the main container for the presentation
    .setContainerSelector("#ct-container")                       // Selector for the element in the body that will contain the presentation
    .addTimeline(                                                // Add a first timeline
      'timeline-1',          // Give it a name
      "animation",           // This is RAF based timeline
      200,                   // The duration of the timeline in seconds
      false,                 // The presentation does NOT play in a loop
      ".timeline-container"  // The element within the main layout (defined by the layoutTemplate) in which the timeline will be rendered
    )
    .editTimelineProviderSettings()                          // Add a timeline provider
    .addProvider("animation")                                // One that provides timelines for type 'animation'
    .setSystemName("RequestAnimationFrameTimelineProvider")  // The system name of the provider
    .setVendor("eligius")                                    // Eligius is the vendor in this case
    .end();                                                  // This finally returns the ConfigurationFactory instance

    Then to add an init action:

    factory
     .createInitAction("GetUserName")
     .addStartOperationByType(getQueryParams, {
      defaultValues: { username: "guest" },
     })
     .addStartOperationByType(setGlobalData, { properties: ["queryParams"] });

    After that, add a timeline action:

    factory.createTimelineAction("timeline-1", "AddIntroContainer")
     .addDuration(0, 10)
     .addStartOperationByType(selectElement, { selector: ".timeline-container" })
     .addStartOperationByType(setElementContent, {
       template: '<div class="intro-text"></div>',
     })
     .addEndOperationByType(selectElement, { selector: ".intro-text" })
     .addEndOperationByType(removeElement, {});

    It also possible to extend the factory with specialized creation methods for the particular configuration you are building:

    function addImage(this: ConfigurationFactory, actionName: string, imageSrc: string, imageId: string) {
     this.createInitAction(actionName)
         .addStartOperationByType(selectElement, { selector: ".timeline-container" })
         .addStartOperationByType(createElement, { element: 'img', attributes: {src: imageSrc, imageId} })
         .addStartOperationByType(setElementContent, { insertionType: "append" })
         .addEndOperationByType(selectElement, { selector: `#${imageId}` })
         .addEndOperationByType(removeElement, {});
    }

    const customFactory = ConfigurationFactory.extend(factory, "addImage", addImage);

    customFactory.addImage("MyImageActionName", "my-image.png", "my-image-id");

    Finally, retrieve the configuration and save it:

    import fs from "node:fs";

    const configuration = customFactory.getConfiguration();

    fs.writeFileSync("/my/path/configuration.json", JSON.stringify(configuration), {encoding:'utf-8'})

    The ConfigurationFactory can also be used to edit an existing configuration. In this case, simply pass the JSON configuration to the ConfigurationFactory's constructor:

    import myConfiguration from './my-configuration.json';

    const factory = new ConfigurationFactory(myConfiguration);

    factory.editInitAction("existingActionName")
           .removeEndOperation("475fd0ab-5755-4e60-8f7c-e1988a109678");
    Index

    Constructors

    constructor

    Properties

    actionCreatorFactory configuration

    Methods

    addAction addEventAction addInitAction addLabel addLabels addLanguage addTimeline addTimelineAction createAction createEventAction createInitAction createTimelineAction editAction editEventAction editInitAction editLabel editTimelineAction editTimelineProviderSettings getConfiguration getTimeline init removeLabel removeTimeline setContainerSelector setDefaultLanguage setEngine setLayoutTemplate extend extendMultiple

    Constructors

    Properties

    actionCreatorFactory: ActionCreatorFactory
    configuration: IEngineConfiguration = ...

    Methods

    • Adds a label translation with the specified data

      Parameters

      • id: string

        The id for the label

      • languageCode: `${Lowercase<string>}-${Uppercase<string>}`

        The language code associated with the label

      • translation: string

        The label text in the language specified by the language code

      Returns ConfigurationFactory

    • Adds a language to the availableLanguages list. The label represents the name of the language.

      An error is thrown if a language with the given language code already exists

      Parameters

      • languageCode: `${Lowercase<string>}-${Uppercase<string>}`

        The given alnguage code

      • languageLabel: string

        The human readable name of the language

      Returns ConfigurationFactory

      factory.addLanguage('en-GB', 'English');

    • Add a timeline with the given data

      Parameters

      • uri: string

        identifier for the timeline

      • type: TimelineTypes

        animation or mediaplayer

      • duration: number

        the duration of the timeline in seconds

      • isLooped: boolean

        True if the timeline should automatically restart at the end

      • selector: string

        css selector for the container where the timeline will be rendered

      Returns ConfigurationFactory

    • Initialize the configuration with a minimal shape.

      It assigns an ID, sets the engine to EligiusEngine, default the containerSelector [data-ct-container=true] and initializes all of the list properties with empty arrays.

      Parameters

      • defaultLanguage: `${Lowercase<string>}-${Uppercase<string>}`

      Returns ConfigurationFactory

    • Add specialized method to a factory

      Type Parameters

      • T extends ConfigurationFactory
      • K extends PropertyKey
      • C extends (this: T & { [P in PropertyKey]: C }, ...args: any[]) => any

      Parameters

      • factory: T
      • extensionMethodName: K
      • extensionMethod: C

      Returns T & { [P in PropertyKey]: C }

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods