Vytvořte jednoduchý posuvník zpráv pomocí Dojo

Moje cesta do JavaScriptu Dojo byla vzrušující a stále se učím více, když přenáším skripty MooTools do Dojo. Můj poslední experiment je přenesení jednoduchého nového scrolleru z MooTools do Dojo. Kód je velmi podobný!

Zobrazit ukázku

HTML

<div id="news-feed">
	<ul>
		<li><strong style="font-size:14px;">News Item 1</strong><br />Pellentesque habitant morbi...<a href="#">Read More</a></li>
		<li><strong style="font-size:14px;">News Item 2</strong><br />Pellentesque habitant morbi...<a href="/news/2">Read More</a></li>
		<!-- more.... -->
	</ul>
</div>

Novinky jsou umístěny do položek seznamu. UL bude prvkem, který bude animován.

CSS

#news-feed	 { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul	{ position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { min-height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden; }

Pro správnou animaci je nezbytné absolutní umístění. Na rozdíl od mého příkladu MooTools tento příklad již nevyžaduje pevnou výšku pro každou novinku. Přidal jsem minimální výšku, takže se v okně posuvníku zobrazuje vždy pouze jedna položka.

Dojo JavaScript

dojo.require('dojo.NodeList-fx');
dojo.addOnLoad(function() {
	/* settings */
	var list = dojo.query('#news-feed ul'),
		items = list.query("li"),
		showDuration = 3000,
		scrollDuration = 500,
		scrollTopDuration = 200,
		index = 0,
		interval;

	/* movement */
	var start = function() { interval = setInterval(move,showDuration); };
	var stop = function() { if(interval) clearInterval(interval); };
	var reset = function() {
	    list.anim({ top: 0}, scrollTopDuration, null, start);
	};
	/* action! */
	var move = function() {
	    list.anim({ top: (0 - (dojo.coords(items[++index]).t)) }, scrollDuration, null, function(){
			if(index == items.length - 1) {
				index = 0-1;
				stop();
				setTimeout(reset,showDuration);
			}
	    });
	};

	/* stop and start during mouseenter, mouseleave  */
	list.onmouseenter(stop).onmouseleave(start);

	/* go! */
	start();
});

Tady mám epický popis...ale výše uvedený kód (alespoň pro uživatele MooTools) by měl vypadat povědomě. Logika je úplně stejná, ale kód používá metody dojo.* namísto metod Fx, $$, $ a Element.Dimensions od MooTools.

JavaScript MooTools

window.addEvent('domready',function() {
	/* settings */
	var list = $('news-feed').getFirst('ul');
	var items = list.getElements('li');
	var showDuration = 3000;
	var scrollDuration = 500;
	var index = 0;
	var height = items[0].getSize().y;
	/* action func */
	var move = function() {
		list.set('tween',{
			duration: scrollDuration,
			onComplete: function() {
				if(index == items.length - 1) {
					index = 0 - 1;
					list.scrollTo(0,0);
				}
			}
		}).tween('top',0 - (++index * height));
	};
	/* go! */
	window.addEvent('load',function() {		
		move.periodical(showDuration);
	});
});

Výše uvedený kód byl převzat z mého původního příspěvku. Věnujte chvíli porovnání kódu Dojo a MooTools.

Zobrazit ukázku

Co myslíš? Tři příspěvky do Dojo v -- co si o Dojo zatím myslíte?