Here is a simple example showing how to use:
- EventListenerTask to listen for events.
- TweenTask to define animation-frame-friendly animations.
- ClosureTask to define a small task within the context of a larger task-flow.
- DependencyGraphTask to define application flow with only a few lines of code.
index.html
<html>
<head>
<script src="libs/task-runner/task-runner.js"></script>
<script src="script.js"></script>
</head>
<body onload="init()">
<h1 id="header">Click on Each of the Buttons Below</h1>
<button id="button1">Click Me: I fade!</button>
<button id="button2">Click Me: I shrink!</button>
<button id="button3">Click Me: I fall!</button>
<p id="logger"></p>
</body>
</html>
script.js
goog.require('taskrunner.ClosureTask');
goog.require('taskrunner.DependencyGraphTask');
goog.require('taskrunner.EventListenerTask');
goog.require('taskrunner.TweenTask');
function createFadeInTweenTask(element) {
return new taskrunner.TweenTask(function(value) {
element.style.opacity = value;
}, 1000);
};
function createFadeOutTweenTask(element) {
return new taskrunner.TweenTask(function(value) {
element.style.opacity = 1 - value;
}, 1000);
};
function createShrinkTweenTask(element) {
var boundingClientRect = element.getBoundingClientRect();
return new taskrunner.TweenTask(function(value) {
var multiplier = 1 - value;
element.style.height = boundingClientRect.height * multiplier;
element.style.width = boundingClientRect.width * multiplier;
}, 1000);
};
function creatDropTweenTask(element) {
var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var boundingClientRect = element.getBoundingClientRect();
var task = new taskrunner.TweenTask(function(value) {
element.style.top = boundingClientRect.top + value * (viewportHeight - boundingClientRect.top);
}, 1000);
task.started(function() {
element.style.position = 'absolute';
element.style.left = boundingClientRect.left;
element.style.top = boundingClientRect.top;
});
return task;
};
function init() {
window.dependencyGraphTask = new taskrunner.DependencyGraphTask();
var waitForClickTask;
var completedCount = 0;
var button1 = document.getElementById('button1');
waitForClickTask = new taskrunner.EventListenerTask(button1, "click");
dependencyGraphTask.addTask(createFadeInTweenTask(button1));
dependencyGraphTask.addTask(waitForClickTask);
dependencyGraphTask.addTask(createFadeOutTweenTask(button1), [waitForClickTask]);
var button2 = document.getElementById('button2');
waitForClickTask = new taskrunner.EventListenerTask(button2, "click");
dependencyGraphTask.addTask(createFadeInTweenTask(button2));
dependencyGraphTask.addTask(waitForClickTask);
dependencyGraphTask.addTask(createShrinkTweenTask(button2), [waitForClickTask]);
var button3 = document.getElementById('button3');
waitForClickTask = new taskrunner.EventListenerTask(button3, "click");
dependencyGraphTask.addTask(createFadeInTweenTask(button3));
dependencyGraphTask.addTask(waitForClickTask);
dependencyGraphTask.addTask(creatDropTweenTask(button3), [waitForClickTask]);
// Blocks on all of the above tasks
dependencyGraphTask.addTaskToEnd(
new taskrunner.ClosureTask(function() {
var logger = document.getElementById('logger');
logger.innerText = "Task completed " + ++completedCount + " times";
}, true));
dependencyGraphTask.completed(function() {
dependencyGraphTask.reset();
dependencyGraphTask.run();
});
dependencyGraphTask.run();
};
This gist uses a "release" of Task Runner obtainable here: https://github.com/bvaughn/task-runner/blob/master/dist/task-runner.js