Footer gallery

Here you can test how the Footer behaves when you enable all the features.

1 Add a pager.

ts.ui.Footer.pager({
	pages: 23,
	page: 0,
	onselect: function(index) {
		console.log(index);
	}
});

2 Add some buttons.

ts.ui.Footer.buttons([
	{ label: 'Button 1', type: 'ts-primary' },
	{ label: 'Button 2', type: 'ts-secondary' },
	{ label: 'Button 3' },
	{ label: 'Button 4' },
	{ label: 'Button 5' }
]);

3 Add more buttons until they crash into the Pager. Behold the second toolbar.

ts.ui.Footer.buttons().splice(2, 0,
	{ label: 'Bonus Button', type: 'ts-secondary' }
);

4 The actions will appear in yet another toolbar. That's right.

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' }
]).status('Something is selected').checkbox({
	onclick: function() {
		this.checked = !this.checked;
	}
});

5 Finally add the configuration and collaboration buttons.

ts.ui.Footer.configbutton(function onclick() {
	ts.ui.Notification.success('Go configure!');
}).collabbutton(function onclick() {
	ts.ui.Notification.success('Go collaborate!');
});

With the Footer fully equipped, we can try to hide and destroy these things again.

Hide something (or everything)

If you need to temporarily hide a single Footer member, you can call the associated method without any arguments to get a hold of the thing and then call the hide and show methods. You can also toggle the visible property.

var thing, pause = action => setTimeout(action, 500);
(function toggle(things) {
	if(things.length) {
		if((thing = things.shift())) {
			thing.hide();
			pause(() => {
				thing.show()
				pause(() => {
					toggle(things);
				});
			});
		} else {
			toggle(things);
		}
	}
})([
	ts.ui.Footer.buttons(),
	ts.ui.Footer.actions(),
	ts.ui.Footer.pager(),
	ts.ui.Footer.checkbox(),
	ts.ui.Footer.collabbutton(),
	ts.ui.Footer.configbutton()
]);

Remember that the hidden thing remains hidden until you show it again. You can of course also show and hide the whole Footer. Again note that it will remain hidden.

ts.ui.Footer.hide();
setTimeout(() => {
	ts.ui.Footer.show();
}, 500);

Clear something (or everything)

If you are sure that you won't need to show a configured Footer member again at some point in the future, it is advised that you completely destroy it instead of just hide it. You can do this by passing null to the associated method.

(function destructive(actions) {
	actions.shift()();
	if(actions.length) {
		setTimeout(() => destructive(actions), 500);
	}
})([
	() => ts.ui.Footer.pager(null),
	() => ts.ui.Footer.status(null),
	() => ts.ui.Footer.checkbox(null),
	() => ts.ui.Footer.buttons(null),
	() => ts.ui.Footer.actions(null),
	() => ts.ui.Footer.collabbutton(null),
	() => ts.ui.Footer.configbutton(null),
]);

You can of course also just clear everything and the Footer will automatically hide.

ts.ui.Footer.clear();

If you find a bug or need a feature…

Create GitHub Issue…