Footer actions

The actions method both sets and gets the actions. If you omit the argument, you"ll get the current actions (jQuery style). In real life, the actions should only appear whenever the user has selected something with the mouse or keyboard, so we will just have to pretend that something is selected.

ts.ui.Footer.actions([
	{ label: 'Move Up', icon: 'ts-icon-triangleup' },
	{ label: 'Move Down', icon: 'ts-icon-triangledown' },
	{ label: 'Move Left', icon: 'ts-icon-triangleleft' },
	{ label: 'Move Right', icon: 'ts-icon-triangleright' },
	{ label: 'Don\'t Move', icon: 'ts-icon-halt', onclick: () => {
		ts.ui.Footer.actions().clear();
	}}
]);

You can use array methods like push, pop, shift, unshift, splice and so on to manage actions, just note that the actions length is a readonly property. To ensure consistency, actions should always have both an icon and a label, much unlike the buttons.

Hide actions

You can hide() and show() actions. You can also toggle visible.

ts.ui.Footer.actions().forEach(function(action) {
	if(action.visible) {
		action.hide();
	} else {
		action.show();
	}
});

Disable actions

You can disable() and enable() action. You can also toggle disabled.

ts.ui.Footer.actions().forEach(function(action) {
	if(action.disabled) {
		action.enable();
	} else {
		action.disable();
	}
});

Busy actions

We can display a temporary progress indicator with the busy and done methods.

var action = ts.ui.Footer.actions()[0];
action.busy();
setTimeout(function() {
	action.done();
}, 1000);

The busy method supports an optional message.

var action = ts.ui.Footer.actions()[0];
action.busy('Making progress');
setTimeout(function() {
	action.done();
}, 1000);

Here"s a summary of the actions collection and action model.

Action bar

We can hide or show action bar. Before the operations, you must init the actionbar first.

ts.ui.Footer.actions([
	{ label: 'Move Up', icon: 'ts-icon-triangleup' },
	{ label: 'Move Down', icon: 'ts-icon-triangledown' },
	{ label: 'Move Left', icon: 'ts-icon-triangleleft' },
	{ label: 'Move Right', icon: 'ts-icon-triangleright' },
	{ label: 'Don\'t Move', icon: 'ts-icon-halt'}
]);

ts.ui.Footer.hideActions();

ts.ui.Footer.showActions();

Status message

We can configure the actionbar with a status message. When a selection is made, the massage could be something like "23 products selected". When nothing is selected, it could perhaps be something like "Showing 10-20 out of 123 products".

ts.ui.Footer.status('23% of one million products selected');

If you call linkable(), you can also some links in the message. Beware of phishing!

ts.ui.StatusBar.linkable().message(
	'Please visit (Tradeshift)[http://www.tradeshift.com]'
);

You can pass a callback function to be invoked whenever a link is clicked.

ts.ui.StatusBar.linkable(function onclick(url) {
	ts.ui.Notification.success(url);
	this.status('Thanks!');
}).message('Please (click the link)[The URL can be any string]');

Checkbox

There's also a checkbox which (conceptually) can be used to manage selections. This is the minimum viable implementation.

ts.ui.Footer.checkbox({
	onclick: function() {
		this.checked = !this.checked;
	}
});

You must manually toggle the checked property. This will give you a chance to let the user confirm if he really intends to select millions of products; or if he really wants to clear a selection that took him hours to complete. Here is the CheckBoxModel.

Use the indeterminate property if state that is neither checked nor unchecked. It's a in-between state that can be used show a partial selection and to check all selections.

var i = 0
ts.ui.Footer.checkbox({
	onclick: function() {
		switch (++i % 3) {
			case 0:
				// unchecked
				this.checked = false;
				ts.ui.Footer.status('0 of 3 items selected');
				break;
			case 1:
				// indeterminate overrides checked
				this.checked = true;
				this.indeterminate = true;
				ts.ui.Footer.status('1 of 3 items selected');
				break;
			case 2:
				// checked
				this.indeterminate = false;
				ts.ui.Footer.status('3 of 3 items selected');
				break;
		}
	}
}).status('0 of 3 items selected');

The example above shows, that the indeterminate property will take precedence over the checked property.