QuickBoxes for Dojo

By  on  
Dojo Toolkit

Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin, QuickBoxes, to port over from MooTools. The following is the result.

The Dojo JavaScript

//safety closure
;(function(d, $){
	//plugin begins
    d.QuickBoxes = function(args, node){
		//scoping
		node = d.byId(node);
		//settings
		var active = 0;
		args.elements = $(args.elements);
		//for every checkbox
		args.elements.forEach(function(el) {
			//connect the MouseDown event
			d.connect(el,'onmousedown',function(ev){
				d.stopEvent(ev);
				active = 1;
				el.checked = !el.checked;
			});
			//connect the MouseEnter event
			d.connect(el,'onmouseenter',function(e){
				if(active == 1) {
					el.checked = ('toggle' == args.mode ? !el.checked : 'check' == args.mode);
				}
			});
			//connect the Click event
			d.connect(el,'onclick',function(e){
				el.checked = !el.checked;
				active = 0;
			});
			//fix the labels
			var label = $('label[for=' + el.getAttribute('id') + ']');
			if(label.length) {
				d.connect(label[0],'onclick',function(e){
					el.checked = !el.checked;
				});
			}
		});
		//add the mouseup event to the Window
		d.connect(d.body(),'mouseup',function(){ active = 0; });
	};	
	//usage
	d.addOnLoad(function(){
		var togglers = new d.QuickBoxes({ elements: '.toggle', mode: 'toggle' });
		var checked = new d.QuickBoxes({ elements: '.checked', mode: 'check' });
		var unchecked = new d.QuickBoxes({ elements: '.unchecked', mode: 'uncheck' });
	});
})(dojo, dojo.query);

If you take a look at the Dojo version and the MooTools version, they're very much the same. Like I've preached with Moo and jQuery, the frameworks all do the same thing but with a different syntax.

A special thanks to Peter Higgins for his help -- in all honestly, I was pretty lost at a few points of this simple plugin. It was good to dabble in Dojo and I look forward to more experimentation.

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

  • By
    CSS Custom Cursors

    Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for...

Discussion

  1. Why are you using dojo instead of the d argument passed to the “safety closure” function?

    In the same way, dojo.query is not used inside the function? Plugin convention?

  2. Darkimmortal

    Can’t see this being useful – the concept is completely unintuitive.

  3. Why you do not use dojo widget system, its more powerfull?

  4. This would be better if you triggered the event when the mouse crosses the tag.

  5. @Pierre: I built that off of a plugin template — good point.

    @Darkimmortal: Fair enough.

    @Ignar: I wanted to use “pure” Dojo code for this first one.

    @Matt: Do you mean LABEL?

  6. darn HTML filter.

  7. Nice and useful – works similarly to my Dojo powered GreaseMonkey script called EasyCheckboxes – http://userscripts.org/scripts/show/48011

  8. I agree it should be using ‘d’ in all places. In this case can also drop the || create(“div”) part for this progressive case. $ is used twice in the above, so the closure is fine otherwise.

    I agree it should react to dragging over the label. dojo.setSelectable can help there, should be pretty easy.

    @ignar – dijit is probably “too much” for such a simple action (though would benefit from some of the framework design patterns, this is just a simple “plugin” using only Base Dojo, so the overhead is minimal)

    Regards

  9. I’ve updated the script by changing references to “dojo” to “d”.

  10. Hmmmm…I should really rewrite this.

  11. Hi… i need… if is possible… dont show the “mondays” days.
    I will make a form with all days of year, with a checkbox and send to database. And the days in database will be checkbox disabled.
    I need check if the date is (are) in database and i dont understanded with that code
    /** QUERY THE DATABASE FOR AN ENTRY FOR THIS DAY !! IF MATCHES FOUND, PRINT THEM !! **/

    Thank you for all… is a amazing script

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!