Description
The PageAction widget implements an interface that enables actions to be taken on multiple items on the page. This model is commonly used for multi-moderation actions.
Note: The PageAction widget can work in tandem with the ips.ui.autoCheck widget to provide a streamlined workflow that saves the user from having to manually click many checkboxes to perform actions.
Example
@todo
Usage
The PageAction widget requires certain elements to exist on the page in order to operate. The widget attribute itself should appear on the form element, or some wrapper around it. Your table content should appear inside of the form.
<form method='get' action='...' data-ipsPageAction> <!-- content rows --> </form>
Adding actions
To add actions to the widget, within the form tag you should have a div with the attribute data-role='pageActionOptions'. Within this div should be a select box control containing your actions, and a submit button (for accessibility when javascript is disabled)
Actions are specified by the options you add to the select box. Actions can either be single items, or grouped items inside an optgroup.
A single action is simply an option element that will display as a button on the PageAction toolbar. You should specify the icon that the button will use by adding a data-icon attribute to the option element, and this should be one of the FontAwesome icons without the preceding fa-.
Multiple actions are those which have more than one related state, e.g. feature and unfeature. These display as a single button in the widget, with a menu to select the state. They are created by adding option elements to an optgroup. The optgroup should contain the data-icon attribute, and a data-action attribute which will be sent as the parameter name when the form is submitted.
Therefore, our actions HTML might look like this:
<div data-role='pageActionOptions'> <select name='...' data-role='moderationAction'> <option value='approve' data-icon='check-circle'>Approve</option> <option value='move' data-icon='arrow-right'>Move</option> <optgroup label='feature' data-icon='star' data-action='feature'> <option value='feature'>Feature</option> <option value='unfeature'>Unfeature</option> </optgroup> </select> </div>
Triggering the pageActions toolbar
With the actions set up, you next need to add the triggers to the checkboxes in your form. This is done by adding a special data-actions attribute to the checkbox which contains a space-separated list of actions available for that checkbox. For example:
<input type='checkbox' data-actions='approve feature'>
When this checkbox is checked, the PageAction toolbar will display with the appropriate actions available. When multiple checkboxes are selected, all actions that match those checkboxes will be displayed.
Options
The ips.ui.pageAction widget does not support any options.
Events
The PageAction widget does not emit any events. When toolbar buttons are selected, the widget changes the value of the select control behind the scenes, so observe that control for value changes.
Report Guide