Context Navigation

fx.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 13.5 KB

Rev	Line
[483]	1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	2	"http://www.w3.org/TR/html4/strict.dtd">
	3	<html>
	4	<head>
	5	<title>Testing fx</title>
	6	<script type="text/javascript" src="../dojo.js" data-dojo-config="isDebug:true"></script>
	7	<script type="text/javascript">
	8	require([
	9	"doh",
	10	"dojo/_base/array", "dojo/aspect", "dojo/dom", "dojo/dom-style",
	11	"dojo/_base/fx", "dojo/fx", "dojo/fx/easing", "dojo/fx/Toggler", "dojo/_base/lang",
	12	"dojo/domReady!"
	13	], function(doh, array, aspect, dom, domStyle, baseFx, fx, easing, Toggler, lang){
	14	doh.register("t",
	15	[
	16	function slideTo(t){
	17	var s = fx.slideTo({
	18	node: "foo",
	19	duration: 500,
	20	left: 500,
	21	top: 50
	22	}).play();
	23	var d = new doh.Deferred();
	24	aspect.after(s, "onEnd", function(){
	25	doh.is(domStyle.get("foo", "left"), 500);
	26	doh.is(domStyle.get("foo", "top"), 50);
	27	with(dom.byId("foo").style){
	28	position = left = top = "";
	29	}
	30	d.callback(true);
	31	}, true);
	32	s.play();
	33	return d;
	34	},
	35
	36	function wipeOut(t){
	37	dom.byId("foo").style.height = "";
	38	var d = new doh.Deferred();
	39	var s = fx.wipeOut({
	40	node: "foo",
	41	onEnd: function(){
	42	doh.t(domStyle.get("foo", "height") < 5);
	43	d.callback(true);
	44	}
	45	}).play();
	46	return d;
	47	},
	48
	49	function wipeIn(t){
	50	var d = new doh.Deferred();
	51	setTimeout(function(){
	52	fx.wipeIn({
	53	node: "foo",
	54	onEnd: function(){
	55	console.debug(domStyle.get("foo", "height"));
	56	doh.t(domStyle.get("foo", "height") > 10);
	57	d.callback(true);
	58	}
	59	}).play();
	60	}, 10);
	61	return d;
	62	},
	63
	64	{
	65	name: "chain",
	66	timeout: 1500,
	67	runTest: function(t){
	68	dom.byId("foo").style.height = "0px";
	69	var d = new doh.Deferred();
	70	var w = fx.wipeIn({
	71	node: "foo",
	72	duration: 500
	73	});
	74	var f = baseFx.fadeOut({
	75	node: "foo",
	76	duration: 500
	77	});
	78	var a = fx.chain([w,f]);
	79	aspect.after(a, "onEnd", function(){
	80	doh.t((w.status()=="stopped"&&f.status()=="stopped"));
	81	d.callback(true);
	82	});
	83	a.play();
	84	return d;
	85	}
	86	},
	87
	88	{
	89	name: "combine",
	90	timeout: 1500,
	91	runTest: function(t){
	92	dom.byId("foo").style.height = "0px";
	93	var d = new doh.Deferred();
	94	var w = fx.wipeIn({
	95	node: "foo",
	96	duration: 500
	97	});
	98	var f = baseFx.fadeIn({
	99	node: "foo",
	100	duration: 1000
	101	});
	102	var a = fx.combine([w,f]);
	103	aspect.after(a, "onEnd", function(){
	104	doh.t((w.status()=="stopped"&&f.status()=="stopped"));
	105	d.callback(true);
	106	}, true);
	107	a.play();
	108	return d;
	109	}
	110	},
	111	{
	112	name:"combineBeforeBegin",
	113	timeout:1500,
	114	runTest: function(t){
	115	var d = new doh.Deferred();
	116	var a = baseFx.fadeOut({ node:"foo2", duration:400 });
	117	var b = baseFx.fadeIn({ node:"foo2", duration:400 });
	118	var chain = fx.combine([a,b]);
	119	aspect.after(chain,"beforeBegin",lang.hitch(d,"callback",true), true);
	120	chain.play();
	121	return d;
	122	}
	123
	124	},
	125	{
	126	name:"delayTest",
	127	timeout:2000,
	128	runTest:function(t){
	129	var d = new doh.Deferred();
	130	var delay = 100;
	131	var _anims = [];
	132	var nodes = ["a","b","c","d"];
	133	array.forEach(nodes,function(n){
	134	_anims.push(baseFx.fadeOut({ node:n, duration:100, delay: delay += 100 }));
	135	});
	136	var a = fx.combine(_anims);
	137	var timer = (new Date()).getTime();
	138	aspect.after(a,"onEnd",function(){
	139	console.warn("delayTest running time:", (new Date()).getTime() - timer, "ms, expected:", a.duration, "ms");
	140	d.callback(true);
	141	}, true);
	142	a.play();
	143	return d;
	144	}
	145	},
	146	{
	147	name:"delayTestChain",
	148	timeout:2200,
	149	runTest:function(t){
	150	var d = new doh.Deferred();
	151	var delay = 100;
	152	var _anims = [];
	153	var nodes = ["a","b","c","d"];
	154	array.forEach(nodes,function(n){
	155	_anims.push(baseFx.fadeIn({ node:n, duration:100, delay: delay += 100 }));
	156	});
	157	var a = fx.chain(_anims);
	158	var timer = (new Date()).getTime();
	159	aspect.after(a,"onEnd",function(){
	160	console.warn("delayTestChain running time:", (new Date()).getTime() - timer, "ms, expected:", a.duration, "ms");
	161	d.callback(true);
	162	}, true);
	163	a.play();
	164	return d;
	165	}
	166	},
	167	{
	168	name:"combineOnEnd",
	169	timeout:1500,
	170	runTest: function(t){
	171	var d = new doh.Deferred();
	172	var a = baseFx.fadeOut({ node:"foo2", duration:400 });
	173	var b = baseFx.fadeIn({ node:"foo2", duration:400 });
	174	var combine = fx.combine([a,b]);
	175	aspect.after(combine,"onEnd",lang.hitch(d,"callback",true), true);
	176	combine.play();
	177	return d;
	178	}
	179
	180	},
	181	{
	182	name:"combineOnPlay",
	183	timeout:1500,
	184	runTest: function(t){
	185	var d = new doh.Deferred();
	186	var a = baseFx.fadeOut({ node:"foo2", duration:400 });
	187	var b = baseFx.fadeIn({ node:"foo2", duration:400 });
	188	var combine = fx.combine([a,b]);
	189	aspect.after(combine,"onPlay",lang.hitch(d,"callback",true), true);
	190	combine.play();
	191	return d;
	192	}
	193
	194	},
	195	{
	196	name:"chainOnEnd",
	197	timeout:1500,
	198	runTest: function(t){
	199	var d = new doh.Deferred();
	200	var a = baseFx.fadeOut({ node:"foo2", duration:400 });
	201	var b = baseFx.fadeIn({ node:"foo2", duration:400 });
	202	var chain = fx.chain([a,b]);
	203	aspect.after(chain,"onEnd",lang.hitch(d,"callback",true), true);
	204	chain.play();
	205	return d;
	206	}
	207
	208	},
	209	{
	210	name:"chainOnPlay",
	211	timeout:1500,
	212	runTest: function(t){
	213
	214	var d = new doh.Deferred();
	215	var a = baseFx.fadeOut({ node:"foo2", duration:200 });
	216	var b = baseFx.fadeIn({ node:"foo2", duration:200 });
	217	var chain = fx.chain([a,b]);
	218	aspect.after(chain,"onPlay",lang.hitch(d,"callback",true), true);
	219	chain.play();
	220	return d;
	221	}
	222
	223	},
	224
	225	{
	226	name:"stopDelay",
	227	timeout:1500,
	228	runTest: function(t){
	229
	230	var d = new doh.Deferred();
	231	var a = baseFx.fadeOut({ node: "foo2", delay:400 });
	232	aspect.after(a, "onPlay", lang.hitch(d, "errback", true), true);
	233	a.play();
	234	a.stop();
	235	setTimeout(function(){
	236	d.callback(true);
	237	}, 500);
	238	return d;
	239	}
	240	},
	241
	242	{
	243	name:"stopDelayPassed",
	244	timeout:1500,
	245	runTest: function(t){
	246
	247	var d = new doh.Deferred();
	248	var b = baseFx.fadeIn({ node: "foo2" });
	249	aspect.after(b, "onPlay", lang.hitch(d, "errback", true), true);
	250	b.play(400);
	251	b.stop();
	252	setTimeout(function(){
	253	d.callback(true);
	254	}, 600);
	255	return d;
	256	}
	257
	258	},
	259
	260	function testToggler(){
	261	var d = new doh.Deferred();
	262	var t = new Toggler({
	263	node: "foo",
	264	hideDuration: 100,
	265	hideFunc: fx.wipeOut,
	266	showFunc: fx.wipeIn
	267	});
	268	t.hide();
	269	setTimeout(function(){
	270	var sa = t.show();
	271	aspect.after(sa, "onEnd", lang.hitch(d, "callback", true), true);
	272	}, 50);
	273	return d;
	274	},
	275
	276	function combineChain(t){
	277	// test combining two chained() animations
	278	var anim1 = fx.chain([
	279	baseFx.fadeIn({ node:"chained" }),
	280	baseFx.fadeOut({ node:"chained" })
	281	]);
	282	var anim2 = fx.chain([
	283	baseFx.fadeOut({ node:"chainedtoo" }),
	284	baseFx.fadeIn({ node:"chainedtoo" })
	285	]);
	286
	287	var anim = fx.combine([anim1, anim2]);
	288
	289	var d = new doh.Deferred();
	290	aspect.after(anim, "onEnd", lang.hitch(d, "callback", true), true);
	291	anim.play();
	292	},
	293
	294	function chainCombine(t){
	295	// test chaining two combined() animations
	296	var anim1 = fx.combine([
	297	baseFx.fadeIn({ node:"chained" }),
	298	baseFx.fadeOut({ node:"chainedtoo" })
	299	]);
	300	var anim2 = fx.combine([
	301	baseFx.fadeOut({ node:"chained" }),
	302	baseFx.fadeIn({ node:"chainedtoo" })
	303	]);
	304
	305	var anim = fx.chain([anim1, anim2]);
	306
	307	var d = new doh.Deferred();
	308	aspect.after(anim, "onEnd", lang.hitch(d, "callback", true), true);
	309	anim.play();
	310
	311	},
	312
	313	function easingNames(t){
	314	for(var i in easing){
	315	t.assertTrue(lang.isFunction(easing[i]));
	316	}
	317	},
	318
	319	function easingReturns(t){
	320	for(var i in easing){
	321	t.assertTrue(!isNaN(easing[i](0.5)));
	322	}
	323	},
	324
	325	{
	326	name:"onendStatus-chain",
	327	timeout:1500,
	328	runTest: function(t){
	329	var d = new doh.Deferred;
	330
	331	var a1 = baseFx.fadeOut({ node:"a1" });
	332	var a2 = baseFx.fadeOut({ node:"a2" });
	333
	334	var anim = fx.chain([a1, a2]);
	335	aspect.after(anim, "onEnd", function(){
	336	t.is("stopped", a1.status());
	337	t.is("stopped", a2.status());
	338	t.is("stopped", anim.status());
	339	d.callback(true);
	340	}, true);
	341
	342	anim.play();
	343
	344	return d;
	345	}
	346	},
	347	{
	348	name:"onendStatus-combine",
	349	timeout:1500,
	350	runTest: function(t){
	351	var d = new doh.Deferred;
	352
	353	var a1 = baseFx.fadeOut({ node:"a1" });
	354	var a2 = baseFx.fadeOut({ node:"a2" });
	355
	356	var anim = fx.combine([a1, a2]);
	357	aspect.after(anim, "onEnd", function(){
	358	t.is("stopped", a1.status());
	359	t.is("stopped", a2.status());
	360	setTimeout(function(){
	361	t.is("stopped", anim.status());
	362	d.callback(true);
	363	}, 10);
	364	}, true);
	365
	366	anim.play();
	367	return d;
	368	}
	369	},
	370	{
	371	name: "wipeOut onStop",
	372	timeout: 1500,
	373	runTest: function(t){
	374	dom.byId("foo").style.height = "auto";
	375	dom.byId("foo").style.overflow = "visible";
	376	var d = new doh.Deferred();
	377	var w = fx.wipeOut({
	378	node: "foo",
	379	duration: 1000
	380	});
	381	aspect.after(w, "onStop", function(){
	382	doh.t(dom.byId("foo").style.overflow == "visible");
	383	d.callback(true);
	384	}, true);
	385	w.play();
	386	setTimeout(function(){ w.stop(); }, 100);
	387	return d;
	388	}
	389	},
	390	{
	391	name: "wipeIn onStop",
	392	timeout: 1500,
	393	runTest: function(t){
	394	dom.byId("foo").style.height = "0px";
	395	dom.byId("foo").style.overflow = "visible";
	396	var d = new doh.Deferred();
	397	var w = fx.wipeIn({
	398	node: "foo",
	399	duration: 1000
	400	});
	401	aspect.after(w, "onStop", function(){
	402	doh.t(dom.byId("foo").style.overflow == "visible");
	403	d.callback(true);
	404	}, true);
	405	w.play();
	406	setTimeout(function(){ w.stop(); }, 100);
	407	return d;
	408	}
	409	}
	410	]
	411	);
	412	doh.run();
	413	});
	414	</script>
	415	<style type="text/css">
	416	@import "../resources/dojo.css";
	417
	418	body {
	419	text-shadow: 0px 0px;
	420	margin: 1em;
	421	background-color: #DEDEDE;
	422	}
	423
	424	.box {
	425	color: #292929;
	426	/* color: #424242; */
	427	/* text-align: left; */
	428	width: 300px;
	429	border: 1px solid #BABABA;
	430	background-color: white;
	431	padding-left: 10px;
	432	padding-right: 10px;
	433	margin-left: 10px;
	434	margin-bottom: 1em;
	435	-o-border-radius: 10px;
	436	-moz-border-radius: 12px;
	437	-webkit-border-radius: 10px;
	438	-webkit-box-shadow: 0px 3px 7px #adadad;
	439	/* -opera-border-radius: 10px; */
	440	border-radius: 10px;
	441	-moz-box-sizing: border-box;
	442	-opera-sizing: border-box;
	443	-webkit-box-sizing: border-box;
	444	-khtml-box-sizing: border-box;
	445	box-sizing: border-box;
	446	overflow: hidden;
	447	/* position: absolute; */
	448	}
	449	</style>
	450	</head>
	451	<body>
	452	<div class="box" id="a">a</div><div class="box" id="b">b</div>
	453	<div class="box" id="c">c</div><div class="box" id="d">d</div>
	454
	455	<div id="foo" class="box">
	456	<p>
	457	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
	458	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
	459	Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
	460	facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
	461	semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
	462	magna. Sed vitae risus.
	463	</p>
	464	<p>
	465	Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
	466	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
	467	lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
	468	id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
	469	mauris. In pellentesque. Mauris ipsum est, pharetra semper,
	470	pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
	471	tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
	472	elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
	473	ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
	474	pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
	475	massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
	476	nec est. Aenean id risus blandit tortor pharetra congue.
	477	Suspendisse pulvinar.
	478	</p>
	479	</div>
	480	<div id="foo2">foo2</div>
	481
	482	<div>
	483	<p id="chained">foo</p><p id="chainedtoo">bar</p>
	484	</div>
	485
	486	<p id="a1">p</p><p id="a2">p</p>
	487
	488	</body>
	489	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Dev/trunk/src/client/dojo/tests/fx.html

Download in other formats: