QuickBoxy pro Dojo

Přidání do mého duševního portfolia je pro mě důležité. Nejprve přišel MooTools, pak jQuery a nyní Dojo. Často mluvím s Peterem Higginsem o slávě Dojo a rozhodl jsem se, že je čas vstoupit do jeho světa. Vybral jsem si jednoduchý, ale užitečný plugin, QuickBoxes, pro portování z MooTools. Následuje výsledek.

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);

Pokud se podíváte na verzi Dojo a verzi MooTools, jsou velmi stejné. Jak jsem kázal u Moo a jQuery, všechny rámce dělají totéž, ale s jinou syntaxí.

Zvláštní poděkování Peteru Higginsovi za jeho pomoc - upřímně řečeno, v několika bodech tohoto jednoduchého pluginu jsem se docela ztratil. Bylo dobré fušovat do Dojo a těším se na další experimenty.