JavaScript Plugins

Last Updated: 22 Feb 2018

The interface of Edit+ for Squiz Matrix can be customised through the use of JavaScript plugins. These user-created snippets of code are referenced in the Design of a Site via a nested Standard Page and loaded at the time Edit+ is initialised.

Plugins can be created in JSON using the namespace EasyEdit.plugins.<pluginName> - anything within this namespace will be processed as a plugin. Please also note that the method init is required within the format of a plugin to properly initialise within Edit+ for Squiz Matrix.

The Edit+ event manager can be used to trigger custom JavaScript when an event occurs within the system. For example, you could configure your function to run when the save button is clicked by using the EasyEditSaveClick event.

A list of supported events is shown in the table below:

Event NameDescription
EasyEditBeforeLoad Before the interface is loaded, or any Edit+ code is executed.
EasyEditAfterLoad After the Edit+ interface initial loading is completed.
EasyEditAssetStatusChange After Edit+ updates the status of an asset (Edit+ code). 
EasyEditScreenLoad After Edit+ loads an editing screen.
EasyEditModeChange After an Edit+ mode is changed (eg. Preview to Edit).
EasyEditSaveButtonEnable   When Edit+ enables the Save button for the editor.
EasyEditSaveButtonDisable When Edit+ disables the Save button for the editor.
EasyEditSaveClick When the Save button is clicked.
EasyEditSaveComplete After a Save has been completed on a screen.
EasyEditUnsavedChanges After the user has been warned they have unsaved changes (transitioning between editing screens).
EasyEditUrlChange After the URL of Edit+ for Squiz Matrix has changed (eg. URL/_edit#mode=edit to URL/_edit#mode=edit&screen=details).
AssetFinderBeforeInit When the Asset Finder is invoked, but before any asset finder code is executed.
AssetFinderAfterInit After the Asset Finder has finished loading.
AssetFinderAssetSelected When the user has used the select button on an asset in the Asset Finder.
CreationWizardBeforeInit When the Asset Creation Wizard is invoked, but before any Asset Creation Wizard code is executed.
CreationWizardAfterInit After the Asset Creation Wizard has finished loading.
CreationWizardAssetTypeSelected When an asset type has been selected on the Asset Creation Wizard.
CreationWizardValidationSuccess When the Asset Creation Wizard successfully validates the user input, before and asset is created.
CreationWizardValidationFailed When the Asset Creation Wizard reports validation errors to the user.
CreationWizardComplete After the Asset Creation Wizard completes the steps to create an asset.

Once authored, plugins should be created as a separate JS File asset in your system and referenced in your Edit+ design code.

Example

The following plugin (lastUpdatedBy) has been created to display the username of the user who last updated an asset. This information will be displayed in the Asset Information pop-down section of an asset in Edit+.

The JS code of the plugin is as follows:

// Sample plugin - Adds 'Last updated by' to the info box

EasyEdit.plugins.lastUpdatedBy = {

// Initialise the plugin
  init: function(){
var self = this;
// Add a function to the after ees load event
EasyEditEventManager.bind('EasyEditAfterLoad',self.addLastUpdatedBy);
  },
    
  // Add last updated element to the information box
  addLastUpdatedBy: function(){
// Get the current asset
    EasyEditAssetManager.getCurrentAsset(function(asset){
      // Append some HTML before the 'trash' button in the information box jQuery('#ees_assetInfoInner').append('<div class="row clearfix updatedby"><span class="label">Updated by</span><span class="data" id="ees_assetLastUpdatedBy">' + asset.attribute('updated_username') + '</span></div>');
});
  }
};

The JS File of the plugin
The lastUpdatedBy plugin

The plugin has been configured to bind to the EasyEditAfterLoad event. This means that the addLastUpdatedBy function will run after the Edit+ has finished loading.

The plugin is uploaded to the system as a JS File, shown in the figure to the right, and referenced in the Edit+ design code, as shown in the example below:

<script type="text/javascript" src="path/to/EasyEditpluginslastUpdatedBy.js"></script>   

When Edit+ for Squiz Matrix is initialised, the plugin will be loaded. After Edit+ loads an editing screen, the addLastUpdatedBy function will run and the user update information will be displayed in the Asset Details section, as shown in the figure below.


Previous Chapter

The Latest

Let Us Know What You Think

Let us know if you spot any errors or if you have any ideas on how we can improve the Matrix Community Website.

Contact Squiz for Demo

Let us show you the true power of Squiz Matrix by giving you a personalised demonstration.