Login Register

Documentation

Addon Presenter

Presenter

Minimal presenter code:

function AddonDemo_create(){

    var presenter = function(){}

    presenter.run = function(view, model){
    }

    return presenter;
}

Required functions:

Function Description
run(view, model) Initialize the addon when a module is loaded.
  • view - DOM reference with addon view code loaded
  • model - Array with property values

Editor functions:

Function Description
createPreview(view, model) Used by the presentation editor to create preview in the editor's mode.
  • view - DOM reference with addon's view code loaded
  • model - Array with property values

Optional functions:

Function Description
executeCommand(commandName, params) Execute command with given *name* and *params*
setShowErrorsMode() Addon should mark all errors and disable all interaction
setWorkMode() Return to normal mode.
reset() Return module to initial state
getErrorCount() Return current number of errors
getMaxScore() Get maximum score for this module
getScore() Get current score
getState() Return state (as String) which should be preserved while switching between pages.
setState(state) Return to previously saved state.

Restricted functions

Function Description
getView() Implementation provided by the player. Returns this module's DOM element that can be wrapped in a jQuery object. Overriding this function may cause critical errors.

Media addons

While creating a media addon, it's necessary to implement the function dedicated to listening to the dropdownClicked event needed for proper communication between Text module (dropdown gap) and media addons (such as audio, video) on mobile devices.
Therefore, after clicking (onClick event) on a dropdown gap, you can play a media addon by selecting (onChange event) the applicable option from a dropdown gap (onChange not triggering playing).
For example, in MultiAudio addon such function is presented below: 
presenter.onEventReceived = function(eventData){

    if(eventData.value == 'dropdownClicked') {

        this.audio.load();

    }

}

Player Controller

If you want to access player functions from the addon, you have to implement the following function:

presenter.setPlayerController = function(controller){}

The object controller is type Player Controller

Performance optimization

Some custom addons may require adding an additional method to clear event listeners or timeouts when the custom addon is removed from the DOM (e.g. when changing the page in a lesson). This is done in order to clean browser memory for performance optimization reasons.

This can be done by adding the following code to the presenter.run method:

MutationObserverService.createDestroyObserver(presenter.destroy);
MutationObserverService.setObserver();

Then it is necessary to make sure that the custom addon has a presenter.destroy() method defined:

presenter.destroy = function (event) {
    /* Code erasing event listeners and timeouts */ 
};

If an addon contains a timeout that is assigned to e.g. a presenter.timeOut property, the code to delete the timeout would look as follows:

presenter.destroy = function (event) {
    clearTimeout(presenter.timeOut); 
};

Important note:
Previously these optimizations were performed with the use of 'DOMNodeRemoved' browser event which is now deprecated in browsers – it is necessary to replace all the code referring to that event to prevent breakdowns.