accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
150 lines (133 loc) • 5.67 kB
HTML
<html>
<!--
Copyright 2007 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<script src="../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.fx');
goog.require('goog.fx.dom');
goog.require('goog.fx.AnimationQueue');
</script>
<script>
var sx = 5;
var sy = 5;
var isForward = false;
var parallelForward;
var parallelBackward;
var serialForward;
var serialBackward;
var currentlyPlaying;
function createAnimations() {
parallelForward = new goog.fx.AnimationParallelQueue();
parallelBackward = new goog.fx.AnimationParallelQueue();
serialForward = new goog.fx.AnimationSerialQueue();
serialBackward = new goog.fx.AnimationSerialQueue();
// move forward at the same time
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
[5, 5], [55, 50], 2000, goog.fx.easing.easeOut));
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
[10, 5], [60, 50], 2000, goog.fx.easing.easeOut));
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
[15, 5], [65, 50], 2000, goog.fx.easing.easeOut));
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
[20, 5], [70, 50], 2000, goog.fx.easing.easeOut));
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
[25, 5], [75, 50], 2000, goog.fx.easing.easeOut));
// move backward at the same time
parallelBackward.add(new goog.fx.dom.Slide(
goog.dom.getElement("block1"),
[55, 50], [5, 5], 2000, goog.fx.easing.easeOut));
parallelBackward.add(new goog.fx.dom.Slide(
goog.dom.getElement("block2"),
[60, 50], [10, 5], 2000, goog.fx.easing.easeOut));
parallelBackward.add(new goog.fx.dom.Slide
(goog.dom.getElement("block3"),
[65, 50], [15, 5], 2000, goog.fx.easing.easeOut));
parallelBackward.add(new goog.fx.dom.Slide(
goog.dom.getElement("block4"),
[70, 50], [20, 5], 2000, goog.fx.easing.easeOut));
parallelBackward.add(new goog.fx.dom.Slide(
goog.dom.getElement("block5"),
[75, 50], [25, 5], 2000, goog.fx.easing.easeOut));
// move forward in order
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
[5, 5], [55, 50], 400, goog.fx.easing.easeOut));
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
[10, 5], [60, 50], 400, goog.fx.easing.easeOut));
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
[15, 5], [65, 50], 400, goog.fx.easing.easeOut));
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
[20, 5], [70, 50], 400, goog.fx.easing.easeOut));
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
[25, 5], [75, 50], 400, goog.fx.easing.easeOut));
// move backward in order
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
[55, 50], [5, 5], 400, goog.fx.easing.easeOut));
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
[60, 50], [10, 5], 400, goog.fx.easing.easeOut));
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
[65, 50], [15, 5], 400, goog.fx.easing.easeOut));
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
[70, 50], [20, 5], 400, goog.fx.easing.easeOut));
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
[75, 50], [25, 5], 400, goog.fx.easing.easeOut));
}
function demoParallel() {
if (isForward) {
parallelBackward.play();
currentlyPlaying = parallelBackward;
} else {
parallelForward.play();
currentlyPlaying = parallelForward;
}
isForward = !isForward;
}
function demoSerial() {
if (isForward) {
serialBackward.play();
currentlyPlaying = serialBackward;
} else {
serialForward.play();
currentlyPlaying = serialForward;
}
isForward = !isForward;
}
function pause() {
currentlyPlaying.pause();
}
function resume(doRestart) {
currentlyPlaying.play(doRestart);
}
</script>
<style>
.block {
position: absolute;
width: 5px;
height: 5px;
background-color: blue;
}
</style>
</head>
<body>
<div id="block1" class="block" style="left: 5px; top: 5px"></div>
<div id="block2" class="block" style="left: 10px; top: 5px"></div>
<div id="block3" class="block" style="left: 15px; top: 5px"></div>
<div id="block4" class="block" style="left: 20px; top: 5px"></div>
<div id="block5" class="block" style="left: 25px; top: 5px"></div>
<script>
createAnimations();
</script>
<div style="margin-top:70px">
<a href="javascript:demoParallel();">play parallel</a> |
<a href="javascript:demoSerial();">play serial</a> | <br/>
<a href="javascript:pause();">pause</a> |
<a href="javascript:resume(false);">resume</a> |
<a href="javascript:resume(true);">resume + restart</a>
</div>
</body>
</html>