Source code for todo.html


<!-- -------------------------------------------------------------------------
# Copyright (c) 2007 Humanized, Inc. All rights reserved.
# ----------------------------------------------------------------------------
#
#   File: todo.html
#   Author: Aza Raskin
#
# -------------------------------------------------------------------------- -->


<html>
<head>
  <title>Todo List</title>

  <style>
    body{ background: #cc3300; color: white; font-size: 20pt; margin-top:10px;}
    li{ list-style-type: none; }
    li a { font-size: 10pt; color: #ccc;}
    li img { cursor: move; padding-left: 3px; padding-right: 3px;}
    li input{ position: relative; top: -5px; }
    .box{ width: 300px; height: 30px; margin-left: 15px; }
    #undo{ color: #ccc;
           font-size: 15pt;
           margin-left: 30px;
           background-color: #dd4411; 
           padding: 5px; 
           display: none; 
           width: 140px;
            position: relative;
            top: 10px; }

    #done{ margin-left: 42px; }
  </style>
  
  <script src="jquery.js"></script>
  <script src="interface.js"></script>
  
  <script>
  //-------------------------------------------------------------------------
  // GLOBAL VARIABLES
  // ------------------------------------------------------------------------
  
  // Holds the to-do items which have been deleted on the client side. Because
  // the user could undo the deletes, the fact of their deletion has not yet
  // been sent to the server.
  var EVENT_QUEUE = [];

  // How long we should wait after the animation for to-do item deletion
  // completes before we should show/hide the undo link.
  var UNDO_DISPLAY_WAIT = 300;

  //-------------------------------------------------------------------------
  // GLOBAL EVENT BINDING
  // ------------------------------------------------------------------------

  $(document).ready(function(){
    doInit();
    $(window).unload( doUnload );
  });


  //-------------------------------------------------------------------------
  // IMPLEMENTATION
  // ------------------------------------------------------------------------

  // Handles the logic for showing and hiding the undo link.
  function updateUndoLink(){
    // If there are no items that are undoable, hide the undo link.
    if( EVENT_QUEUE.length == 0 ){
      setTimeout( '$("#undo").fadeOut();', UNDO_DISPLAY_WAIT )
    }
    // If there are any items that are undoable, show the undo link.
    else if( EVENT_QUEUE.length == 1 ){
      $("#levels").text( "" );

      // Only do the fade in if the undo link is currently hidden.
      if( $("#undo").css("display") == "none" ){
        setTimeout( '$("#undo").fadeIn()', UNDO_DISPLAY_WAIT );
      }
    }
    // If there is more than one thing that can be undone, then let the user
    // know how many levels of undo there are.
    else if( EVENT_QUEUE.length > 1 ){
      $("#levels").text( "("+EVENT_QUEUE.length+")" );
    }
  }

  // Sets up all event binding.
  function doInit(){
    // Setup the to-do items to be sortable. For more information, please see
    // http://interface.eyecon.ro/docs/sort
    $("#todo-list").Sortable({
      accept: "sortable",
      axis: "vertically",
      handle: "img"
    });

    // Handler for the delete link.
    $("#todo-list a").click( function(event){

      // Apparently, assigning a jQuery return value to a variable
      // does not work in IE6. Instead, we'll create a helper
      // function that does roughly the same thing.
      getParent = function(){ return $(event.target).parent(); }

      // Hide the newly deleted to-do item.
      getParent().slideUp();
      
      // Add the to-do item to the event queue.
      EVENT_QUEUE.push( getParent() )

      updateUndoLink();
    });

    // Handler for clicking on the Undo link
    $("#undo").click( function(){
      // Get the last to-do item added to the event queue and un-hide it.
      EVENT_QUEUE.pop().slideDown();
      updateUndoLink();
    })

  }

  // When the user navigates away from the current page, let the server know
  // which to-dos have been deleted.
  function doUnload(){
    for( var i=0; i<EVENT_QUEUE.length; i++ ){
      // For this demo, we'll use an alert instead of an AJAX call.
      alert( "Performing an AJAX call to delete: " + EVENT_QUEUE[i].text() );
    }
  }
  </script>
</head>
<body>

<div class="box">
  <a href="#" id="undo">Undo delete! <span id="levels"></span></a>
</div>

<ul id="todo-list">
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Call Home<a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Change car oil<a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Do laundry<a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Craft Halloween costume<a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Paint Warhammer figures<a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Make sure to never expect <a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">The spanish inquisition <a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Write blog post <a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Destroy all humans <a href="#">(delete)</a></li>
  <li class="sortable"><img src="grip.gif"/><input type="checkbox">Allow for creation of to-dos <a href="#">(delete)</a></li>
</ul>

<form action="todo.html">
<input id="done" type="submit" value="Done"/>
</form>

</body>
</html>