This article describes best practice when working with multiple instances of Author API concurrently. In particular it specifies the recommended events to listen to before starting the initialization of each subsequent instance.
Overview
Although it is not recommended to use multiple instances of Author API concurrently, this article outlines the best practices when certain UX/UI or Authoring workflows require doing so. The recommended approach of using a single instance along with the public method moveInstanceTo
will also be described briefly.
As Author API is a single page application which makes multiple external HTTP requests, it is possible to run into issues during the initialization phase due to the fact that a browser's connection limit can be hit if initialization of each instance is not done sequentially. See details of the current parallel request limit broken down by each browser.
The table below documents what event you should listen to before starting initialization of another instance:
Scenario |
Event |
Initialising in item_list mode |
|
Initialising in activity_list mode |
|
Initialising in item_edit mode |
|
Initialising in activity_edit mode |
|
Initialising in any mode but immediately navigating to widget edit mode on ready |
Table 1: events to monitor, before starting another instance
Example using a single instance
This code sample demonstrates how you can use a single instance of Author API with the public method moveInstanceTo
. As Author API is a complex single page application we recommend tailoring your UX/UI to allow the use of a single instance that is shown and hidden in various states. State change should be controlled using the navigate
public method and visibility should be controlled by the moveInstanceTo
public method by moving the instance to a DOM element which is visible/invisible.
var authorApp = LearnosityAuthor.init(initializationObject, callbacks);
var customButton1 = document.querySelector('button .name-1');
var customButton2 = document.querySelector('button .name-2');
var authorApiContainer1 = document.querySelector('.author-api-container-1');
var authorApiContainer2 = document.querySelector('.author-api-container-2'); // create a UI interaction event
customButton1.on('click', function () {
// hide the previous container
authorApiContainer2.style.display = 'none';
// make the container visible
authorApiContainer1.style.display = 'block';
// move Author API to the visible container
authorApp.moveInstanceTo(authorApiContainer1);
// change its state appropriately
authorApp.navigate('item/' + reference));
}); // as above but moving to another container
customButton2.on('click', function () {
authorApiContainer1.style.display = 'none';
authorApiContainer2.style.display = 'block';
authorApp.moveInstanceTo(authorApiContainer2);
authorApp.navigate('activity/' + reference));
});
Code example 1: using a single instance
Example using multiple instances
The code sample below demonstrates the sequential loading of two application instances. A common use case for this is when the user experience requires the ability to edit both a Question and Feature concurrently:
var authorApp1, authorApp2;
// Initialize the first instance
authorApp1 = LearnosityAuthor.init(initOptions, {
readyListener: init,
errorListener: {}
});
function init() {
// Navigate to Question edit view with some default Question JSON
authorApp1.navigate(“items/12345/widgets/new/{"widgetJson": {defaultQuestionJson}}”);
// Wait until the Question editor has fully loaded
authorApp1.on('widgetedit:editor:ready', function () {
// Initialize the second instance
authorApp2 = LearnosityAuthor.init(initOptions, {
readyListener: init2,
errorListener: {}
});
function init2() {
// Navigate to Question edit view with some default feature JSON
authorApp2.navigate(“items/12345/widgets/new/{"widgetJson": {defaultFeatureJson}}”);
}
});
}
Code example 2: using multiple instances