bvaughn/gist:0e178b3fe5ef916d0389

## gistfile1.md

      
    Raw
  

              gistfile1.md
            
          
    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();
};