MySource Matrix jQuery Plugin

matrixMap();

» jQuery Asset Map Demo

This plugin is a jQuery version of the MySource Matrix asset map. NOTE: This is not a replacement for the java asset map. Currently, matrixMap() can only browse the tree and nothing else, it is extremely early in development.

The following code will create the matrix asset map within an element with the ID of map_hold.

$('#map_hold').matrixMap();

You can also choose to specify the root node where you would like the map to begin.

$('#map_hold').matrixMap({
    root: 50
});

Options:

root (number) | Default: 1
This is the root node for where you would like the asset map to start.

matrixForm();

» Custom Form Demo
» Asset Builder Demo

This plugin is used for making Asset Builders create assets using ajax. So, you can submit the form, and the page won't refresh, but the asset will still be created.

The following code is an example of the plugin without any options, using the ID of the asset builder form is required here.

$('#page_asset_builder_3945').matrixForm();

Some extra options can be used, such as a loading image, and bringing in data from the created screen. This example will pull an element with the ID of "created" from the Asset Builders created screen, and insert it into an element with the ID of target on the current page.

$('#page_asset_builder_3945').matrixForm({
    findCreated: '#created',
    findTarget: '#target',
    loading: 'loading.gif'
});

If you would like to return form errors in an array, and have those be shown in an alert dialog, wrap the error keyword in a div.
E.g. <div id="errors">%form_errors%</div>

$('#form_email_473').matrixForm({
    errorArray: true,
    errorSource: '#errors',
    errorMessage: 'Please correct the following errors:',
    onComplete: function () {
    	alert('Your form has been submitted!');
    }
});

Options:

findCreated (jQuery) | Default: none
This is the element from the Asset Builders created screen that you want to pull into the current page. This can be any supported jQuery selector.

findTarget (jQuery) | Default: none
This is the element that is the target for the data that is being pulled from the Asset Builder created page. This can be any supported jQuery selector.

loading (string) | Default: none
URL to your loading image that you want to show when the form is submitted. This image will be added next to the submit button and has the ID of "loadingImage".

errorArray (boolean) | Default: false
Setting this option to true allows you to capture any form error messages into an array, which is then used to populate a javascript alert dialog, letting you know which errors your form currently has.

errorSource (jQuery) | Default: none
This is the element, most likely a div that is wrapped around the forms error keyword. This must be used if errorArray is set to true, as it is used to gather the errors for the array.

errorMessage (string) | Default: none
This allows you to customize the message that appears on the alert dialog.

noFade (boolean) | Default: false
Option to prevent the fading of the findCreated selector.

onComplete (function) | Default: empty function
This is a callback that is used when errorArray is set to true. It will fire when there are no longer any items in the errorArray. Basically it fires when the form has finally been submitted. Since this is a callback you can use any normal jquery within the function.

matrixFilter();

» Asset Filtering Demo

This plugin lets you filter a list of assets, giving you a real-time iTunes like search capability.

The following code would look for all anchor tags on the page to filter/search. It will be best to narrow down the search by being more specific in the jQuery selector.

$('a').matrixFilter();

The following code would add the filter field within an element with the ID of filter-box and only filter links that have the class of filter.

$('a.filter').matrixFilter({
    target: '#filter-box'
});

Options:

target (jQuery) | Default: body
This is the element where the filter field is appended. This can be any supported jQuery selector.

count (boolean) | Default: true
This option will determine if counting is turned on. If it is set to true, you will get a count of matched assets, and total assets. E.g. 10 of 200.

matrixFrame();

This plugin works in simple edit and lets you open assets in an iframe, allowing for quick and easy editing of assets. The plugin will create an iframe and then allow the specified links to open within the iframe.

The following code would make a list of links open within the created iframe.

$('a').matrixFrame();

The following code would allow the links to open in simple edit within the iframe.

$('a').matrixFrame({
    urlSuffix: '/_edit?SQ_DESIGN_NAME=blank&asset_ei_screen=details'
});

Options:

target (jQuery) | Default: body
This is the element where the iframe is appended. This can be any supported jQuery selector.

urlSuffix (string) | Default: none
This is the extra data that can be added to the end of a link, for example, the you could add /_edit?asset_ei_screen=details to open the details screen of an asset in simple edit.

matrixDelete();

» Delete Asset Demo

This plugin will allow you to delete single or multiple assets. The plugin posts to a trigger using ajax.

For example, you could use the following code to bind a click event to all A tags, which would then allow you to click that link, and delete the asset.

$('a').matrixDelete();

With this plugin, you might want to specify a class, so that you can have a "delete" link next to your normal link.

$('a.deleteLink').matrixDelete();

The following example shows how you can use the optional onComplete function. This will fire after the plugin has completed so that you can add extra functionality. In this example I want to hide the parent element which is a few levels up so that it will remove an entire content block. Using the $(this) selector will target the jQuery object.

$('a.deletePosting').matrixDelete({
	urlSuffix: '?action=delete_posting',

	onComplete: function () {
		$(this).parent().parent().parent().hide();
	}
});

To set up a link for deleting, you will need to set up your asset like the following. Note, this example will work for the type format of an asset listing. If you want to form links manually just be sure to set the href attribute with the asset URL of the asset that you would like to delete.

<a id="a%asset_assetid%" href="%asset_url%" class="deletePosting">Delete Asset</a>

This example shows how you can set up matrixDelete to delete assets from Matrix without using a trigger. By setting the trigger default to false, the plugin will then use ajax to delete the asset by running a hippo job. Also, the additional HTML example shows how the asset ID needs to be passed to the plugin through the elements ID attribute. Note: This option requires that you have access to the admin interface, otherwise you will not have access to running the hippo, and the function will fail.

$('a.deleteAsset').matrixDelete({
	urlSuffix: '?action=delete_posting',
	trigger: false,
	ajaxStatus: true,
	onComplete: function () {
		$(this).fadeOut('slow');
	}
});

<a id="a%asset_assetid%" href="#" class="deleteAsset">Delete Asset</a>

Options:

multiple (boolean) | Default: false
If this option is set to true it will allow multiple assets to be deleted. A checkbox will be added next to each of the elements matched in the jQuery selector.

checkboxClass (string) | Default: delete
This is the class that is added to the checkbox if multiple asset deleting is enabled.

checkboxAfter (boolean) | Default: true
This option gives you the choice of creating the checkbox before or after your link.

urlSuffix (string) | Default: action=delete
This is the extra data that is sent with the ajax POST. This should match what you have configured in your Trigger for URL Match.

target (jQuery) | Default: body
This is the element where the multiple delete button is appended. This can be any supported jQuery selector.

simpleEdit (boolean) | Default: false
If this option is set to true /_edit will be removed from all URLs that match the jQuery selector. This is useful in Simple Edit to allow the trigger to fire on design menus.

beforeComplete (function) | Default: empty function
This is an optional callback function that can be run before the ajax function runs.

onComplete (function) | Default: empty function
If this option adds a great deal of flexibility for the user as you can add a custom function which will run after the plugin script is complete. You can show and hide new content, add alert dialogs or do anything you want!

trigger (boolean) | Default: true
This option allows you to not use triggers for deleting of assets. If this option is set to false, a hippo job will be run for each asset that needs to be deleted. Note: This option requires that you have access to the admin interface, otherwise you will not have access to running the hippo, and the function will fail.

ajaxStatus (boolean) | Default: false
You can use this option to output the status of the plugin, showing when locks are aquired, hippo job status, etc. This option only works when trigger is set to false.

matrixClone();

» Asset Clone Demo

This plugin will allow you to clone an asset a user defined amount of times. The plugin posts to a trigger using ajax.

For example, you could use the following code to apply the matrixClone plugin, and make any of the links selectable, then you enter into the input field how many duplicates you would like to make.

$('a').matrixClone();

With this plugin, you might want to specify a class, so that you can have a "clone" or "duplicate" link next to your normal link.

$('a.cloneLink').matrixClone();

To set up cloning for assets in an asset listing, use the following.

<a id="a%asset_assetid%" href="%asset_url%" class="cloneLink">Clone Asset</a>

Options:

limit (number) | Default: 10
This options lets you set the limit of how many duplicates a user can specify. If the value entered is greater than this number, an error will be thrown, and the value will be cleared.

urlSuffix (string) | Default: action=duplicate
This is the extra data that is sent with the ajax POST. This should match what you have configured in your Trigger for URL Match.

target (jQuery) | Default: body
This is the element where the multiple delete button is appended. This can be any supported jQuery selector.

beforeComplete (function) | Default: empty function
This is an optional callback function that can be run before the ajax function runs.

onComplete (function) | Default: empty function
If this option adds a great deal of flexibility for the user as you can add a custom function which will run after the plugin script is complete. You can show and hide new content, add alert dialogs or do anything you want!

matrixStatus();

» Status Change Demo

This plugin will allow you to change the status of an asset using ajax.

For example, you could use the following code to change the status of an asset when clicked.

$('a').matrixStatus();

With this plugin, you might want to specify a class, so that you can have a "change status" link next to your normal link.

$('a.statusLink').matrixStatus();

To set up status change for assets in an asset listing, use the following.

<a id="a%asset_assetid%" href="%asset_url%" class="statusLink">Change Status</a>

This example shows how you can set up matrixStatus to chage the status of a Matrix asset without using a trigger. By setting the trigger default to false, the plugin will then use ajax to change the status by running a hippo job. Also, the additional HTML example shows how the asset ID needs to be passed to the plugin through the elements ID attribute. Note: This option requires that you have access to the admin interface, otherwise you will not have access to running the hippo, and the function will fail.

$('a.changeStatus').matrixStatus({
	urlSuffix: '?action=status_change',
	trigger: false,
	ajaxStatus: true,
	assetStatus: 'Live',
	onComplete: function () {
		$(this).fadeOut('slow');
	}
});

<a id="a%asset_assetid%" href="#" class="changeStatus">Change Status</a>

Options:

urlSuffix (string) | Default: action=live
This is the extra data that is sent with the ajax POST. This should match what you have configured in your Trigger for URL Match.

beforeComplete (function) | Default: empty function
This is an optional callback function that can be run before the ajax function runs.

onComplete (function) | Default: empty function
If this option adds a great deal of flexibility for the user as you can add a custom function which will run after the plugin script is complete. You can show and hide new content, add alert dialogs or do anything you want!

assetStatus (string) | Default: Live
This option allows you to choose what status you would like the asset to be set to. This can only be used when trigger is set to false. Possible values are: Live, Safe Edit, and Under Construction.

trigger (boolean) | Default: true
This option allows you to not use triggers for deleting of assets. If this option is set to false, a hippo job will be run for each asset that needs to be deleted. Note: This option requires that you have access to the admin interface, otherwise you will not have access to running the hippo, and the function will fail.

ajaxStatus (boolean) | Default: false
You can use this option to output the status of the plugin, showing when locks are aquired, hippo job status, etc. This option only works when trigger is set to false.