.eternal

Activator.js updated – Widget.Activator

It’s been a long time since I’ve released an update to the Activator script. In the interim I have used it in several projects, as well as reused it as the basis of several controls, and made several improvements as well as fixed a number of bugs. So, here it is.

Ok, so mainly I fixed bugs. But there are also a few improvements. First amongst these is that I changed the way that the classNames and eventNames parameters are passed in to the constructor. Previously you would go:

var classNamesActivator = new Widget.Activator(".classNamesDemo", {
	normalClassName: "customButton",
	hoverClassName: "customButtonHover",
	activeClassName: "customButtonActive",
	selectedClassName: "customButtonSelected",
	disabledClassName: "customButtonDisabled"
});

Now, instead the classNames (and eventNames) are separated into their own block which makes for much easier readability in my opinion (especially when passes a lot of options):

var classNamesActivator = new Widget.Activator(".classNamesDemo", {
	classNames: {
		normal: "customButton",
		hover: "customButtonHover",
		active: "customButtonActive",
		selected: "customButtonSelected",
		disabled: "customButtonDisabled"
	}
});

That just looks much neater.

The second major change is that the event handlers fired by activator now have more options on the memo. Previously the memo was the selected (clicked, hovered, etc.) element. Now, the memo has three properties: 1. element which is the same as the old memo, the element for which the event was fired; 2. activator which is the activator object that fired the event; 3. and event which is the original event captured by the activator that caused it to fire the event. This means that where previously you were going:

activator.observe(activator.options.events.click, function(e) {
	e.memo.setSelected(e.memo.isSelected());
});

You now need to go:

activator.observe(activator.options.events.click, function(e) {
	e.memo.element.setSelected(e.memo.element.isSelected());
});

That is a little more verbose, but, it does allow you access to the inner event, a capability I used in the new table demo I added to the demo page. Why would you want to access the inner event? Well, to get at it’s properties, of course. The inner event has properties like ctrlKey which you might use for multiple selection, as follows:

activator.observe(activator.options.events.click, function(e) {
	if(!e.memo.event.ctrlKey) {
		e.memo.activator.selectAll(false);
	}
	e.memo.element.setSelected(e.memo.element.isSelected());
});

The new table demo also shows that the activator is not just another toolbar control. It can be used for more than just buttons.

Finally, I am releasing activator under the MIT license, which means you can pretty much do anything you like with it. This is compatible with the Prototype license (also MIT).

You can see the demo here, view the docs here, and download the script here.