Class ConfigurationFactory

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

Example

Building a configuration using the factory 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
Copy

Then to add an init action:

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

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, {});
Copy

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");
Copy

Finally, retrieve the configuration and save it:

import fs from "fs";

const configuration = customFactory.getConfiguration();

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

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");
Copy