Task App #2

by bizamajig

HTML

<input type="text" rows="30" />
<br />
<div id="task-home">
    <div id="task-list-container">
        <div id="left-menu-expand"><a id="left-menu-expand-link" href="#"></a></div>
        <div id="task-list-inner-container">
            <div class="task-list-blue-bar">
                <div class="task-list-buttons">
                    <div class="grey-button add-task"><div class="add-button-grey"></div>Add Task</div>
                    <div class="grey-button complete-task">Complete</div>
                    <div class="grey-button delete-task">Delete</div>
                </div>
            </div>
            <div class="task task-bar overdue-task-bar">
                <div class="tipsy tipsy-e tipsy-task"><div class="tipsy-arrow"></div></div>
                <div class="little-grippy"></div>
                <div class="checkbox"><input type="checkbox" class="checkbox" /></div>
                <div class="tasks-left-tag-area">
                    <div class="tasks-overdue-tag">Overdue</div>
                </div>
                <div class="task-content-title">Take out the trash</div>
                <div class="tasks-right-tag-area"></div>
                <div class="tasks-due-date-area tasks-due-date-overdue">18 days Overdue</div>
                <div class="edit-pencil-icon"></div>
                <div class="task-delete-icon"></div>
            </div>
            <div class="task task-bar due-today-task-bar">
                <div class="little-grippy"></div>
                <div class="checkbox"><input type="checkbox" class="checkbox" /></div>
                <div class="tasks-left-tag-area">
                    <div class="tasks-due-today-tag">Due Today</div>
                </div>
                <div class="task-content-title">Find a better way to take out the trash</div>
                <div class="tasks-right-tag-area"></div>
                <div class="tasks-due-date-area">Due Today</div>
                <div class="edit-pencil-icon"></div>
         ...

CSS

body
{
    font-family: Arial;
    font-size: 12px;
}

.grey-button
{
    position: relative;
    float: left;
    width: auto;
    height: auto;
    margin: 0 1px 0 1px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #DCDCDC url(http://static.goalscdn.com/img/grey-button-background.png) 0 0;
    border: 1px solid #777;
    outline:none;
    display: block;
    color: #333;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 4px;
    line-height: 14px;
    text-shadow: #fff 0px 1px;
    cursor: pointer;
}

.grey-button:hover
{
    text-decoration: none;
}

.grey-button:active
{
    background: transparent url(http://static.goalscdn.com/img/grey-button-background-clicked.png) 0 0;
}

.add-button-grey
{
    float: left;
    margin: -1px 5px 0 2px;
    height: 14px;
    width: 17px;
    background: transparent url(http://static.goalscdn.com/img/addarticleicon.png) 0 0px no-repeat;
}

#task-home
{
    position: relative;
    float:left;
    width: 780px;
}

#task-list-container
{
    position: relative;
    float:left;
    width: 780px;
    height: auto;
    background-color: #CADDEC;
}

#task-list-inner-container
{
    margin: 0px 0 6px 6px;
    width: 768px;
    height: auto;
}

#commands-exterior
{
    float: left;
    width: 780px;
    padding-top: 5px;
    font-size: 11px;
}

#commands-interior
{
    width: 75%;
    margin: auto;
}

.task-list-blue-bar
{
    float: left;
    width: 768px;
    height: 34px;
    background-color: #2775b3;
}

.task-list-buttons
{
    width: 768px;
    padding: 5px;
}

.yellow-task-message
{
    float: left;
    margin-left: 100px;
    width: auto;
    padding: 5px;
    font-weight: bold;
    color: black;
    background-color: #FFF1A8;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.task-bar
{
    float: left;
    width: 100%;
    height: 25px;
    background: -webkit-gradient(linear, left bottom ,left top,...

JavaScript

// Count the number of items checked
  var checked_counter = 0;
  
  // Set focused on input to false (set to true for exiting keydown events)
  var focus_on_input = false;
  
  $('textarea,text,input').bind('focus', function() {
    focus_on_input = true;
    $(this).bind('blur', function() {
      focus_on_input = false;
    });
  });
    
  // Make complete and delete task buttons look disabled
  disableTaskButtons();

  // Turn task bar yellow on checkbox click
  $('#task-list-container :checkbox').bind('click', function() {
    if($(this).is(':checked')) {
      ++checked_counter;
      $(this).parents('.task').addClass('checked-task-bar');
      if(checked_counter >= 1) {
        enableTaskButtons();  
      }
    } else {
      --checked_counter;
      $(this).parents('.task').removeClass('checked-task-bar');
      if( checked_counter == 0 ) {
        // Make complete and delete task buttons look disabled
        disableTaskButtons();
      }
    }
  });
  
  // Listen for keydown for Task list navigation
  $(this).bind('keydown', function(e) {
  // Use keydown for better compatibility
  
    if(focus_on_input) {
      // Do nothing
    } else {
      listenForTaskKeys(e);
    }
  });
  
  function listenForTaskKeys(e) {
      // J Navigates down the list
    if(e.which == 74) {
      var next_task = $('.tipsy-task').parent('.task').next('.task');
      if($(next_task).length == 0) {
        // Do nothing
      } else {
        $('.tipsy-task').remove();
        $(next_task).prepend('<div class="tipsy tipsy-e tipsy-task"><div class="tipsy-arrow"></div></div>');
      }
    }
    
    // K Navigates up the list
    if(e.which == 75) {
      var prev_task = $('.tipsy-task').parent('.task').prev('.task');
      if($(prev_task).length == 0) {
        // Do nothing
      } else {
        $('.tipsy-task').remove();
        $(prev_task).prepend('<div class="tipsy tipsy-e tipsy-task"><div class="tipsy-arrow"></div></div>');      
      }
    }
    
    // X...