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 Name | Description |
|---|---|
| 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 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.