jQuery code for FiveThings Contrast App School app.js

// application.js
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
function leave_note(){
  if($("div#note").css('display')=='none'){
    $("div#note").dialog();
    $('div#note').show();
  } else {
    $('div#note').hide();
    $("div#note").dialog("destroy");
  }
}

var authenticity_token = $('html:first').attr('id').split('-')[1]

function form_for(item){
  // load up the edit form from the template ul
  form = $('ul.interface li.editing').clone()
    .find('textarea#description').val(
      $.trim($('<div/>').html($(item).find('span').html()).text())
      ).end()
    .find('input#due-at').val($(item).parent().attr('id').split('-')[1] + ' 12:00').end()
    .find('input#user-id').val($(item).parent().attr('id').split('-')[3]).end()
  $(item).after(form)
  
  //add active class to form
  form.find('form#task-form').addClass('active')
  
  // change the form to edit mode if we're editing
  if($(item).attr('id'))
  {
    form.find('form#task-form').attr('action', '/tasks/' + $(item).attr('id').replace('t-', ''))
    .append('<input type="hidden" name="_method" value="put">')
  }
  
  form.find('textarea#description').select()
  // hide the item itself and the boiler-plate
  $(item).hide()
  $(item).siblings('li.available').remove()
  //alert(form.find('textarea#description').val())
}

function post_form(form){
  if($(form).find('textarea#description').val() == 'New task')
  {
    $(form).parents('li').prev('li').remove()
  }
  else
  {
    //submit the form here
    $.post($(form).attr('action'),
      $(form).serialize())
    $(form).parent().prev('li').find('span').html(
      $('<div/>').text($(form).find('textarea#description').val()).html()
    ).end().show()
  }
  if($.trim($(form).find('textarea#description').val()) == '')
  {
    $(form).parent().prev('li.taken').remove()
  }

  if($(form).parents('ul.tasks').children('li.taken').size() < 5 && $(form).parents('ul.tasks').children('li.editing').size() == 1)
  { $(form).parents('ul.tasks').append($('ul.interface li.available').clone()) }

  $(form).parent().remove()

}

function new_item_for(item){
  if(item)
  {
    new_item = $('ul.interface li.taken').clone()
    $(item).find('ul').append(new_item)
    form_for(new_item)
  }
}

function next_available_slot(item)
{
  if($(item).children('ul.tasks').children('li.taken').size() >= 5)
  {
    if($(item).next('td.task-list').size() > 0)
    {
      return next_available_slot($(item).next('td.task-list'))
    }
    else
    {
      return false
    }
  }
  else
  {
    return item
  }
}

function move_item(from,to){
  if(from.parent().parent().attr('id') != to.attr('id'))
  {
    to_ul = $('ul#' + to.children('ul').attr('id'))
    from_ul = $('ul#' + from.parent().attr('id'))
    to_ul.children('li.available').remove()
    from_ul.children('li.available').remove()
    
    // don't allow more than 5
    if(to.find('ul').children('li.taken').size() < 5)
    {
      // lose double click to add
      to.children('ul').children('li.available').remove()
  
      // do the swap 
      to.find('ul').append(from.clone().attr('style','')); 
    
      // save to the server
      date = to.children('ul').attr('id').split('-')[1]
      user_id = to.children('ul').attr('id').split('-')[3]
      $.post(
        '/tasks/' + from.attr('id').replace('t-', ''),
        {'authenticity_token':authenticity_token, '_method': 'put', 'task[due_at]':date + ' 12:00','task[user_id]':user_id},
        function(data){
          eval(data)
        }
        )
    
      // remove boilerplate if there're 5 items
      if(to.children('ul').children('li.available').size() == 5)
      {
        to.children('ul').children('li.available').remove()
      }
      from.remove();
    }
    
    // load up the boilerplate available item if the list is empty
    if(from_ul.children('li.taken').size() < 5)
    { 
      from_ul.append($('ul.interface li.available').clone())
    }
    if(to_ul.children('li.taken').size() < 5)
    {
      to_ul.append($('ul.interface li.available').clone())
    }
    
  } 
}

$(document).ready(function(){
  $('div#note').hide();
  $('ul.interface').hide()
  $('li.taken').livequery(function(){
    $(this).draggable({revert:true})
    $(this).dblclick(function(e){
      if($(e.target).hasClass('checkbox')){ return }
      $('form.active').submit()
      form_for(this)
      return false;
      })
    $(this).contextMenu('context-menu', {});
  });
  $('a.checkbox').livequery(function(){
    $(this).click(function(){
      $(this).parents('li.taken:first').toggleClass('complete')
      
      id = $(this).parents('li.taken:first').attr('id').replace('t-','')
      
      // save to the server
      $.post(
        '/tasks/' + id,
        {'authenticity_token':authenticity_token, '_method': 'put', 'task[done]':$(this).parents('li.taken:first').hasClass('complete')},
        function(data){
          eval(data)
        })
      return false
    })
  })
  $('td.task-list').livequery(function(){
    $(this).droppable(
    {
      accept:'li.taken',
      over: function(e, ui){
        if($(this).find('ul').children('li.taken').size() == 5)
          {
            $(this).addClass('over-no')
          }
      },
      out: function(e, ui){
        $(this).removeClass('over-no')
      },
      drop: function(e, ui){
        $('td.task-list').removeClass('over-no')
          move_item(ui.draggable, $(this))
        },
      hoverClass:'drop-hover'
      }
    )

  })
  $('li.available').livequery(function(){
      $(this).click(function(e){
        if($(this).siblings('li.taken').size() < 5)
        {
          new_item_for($(this).parents('td.task-list:first'))
        }
        return false;
      })
    }
    )
  $('textarea#description').livequery(function(){
    $(this).blur(function(){
      post_form($(this).parents('form'))
    })
  })
  $('form').livequery(function(){
    $(this).submit(function(){
      if($(this).parent().prev('li.taken')[0] == $(this).parents('ul').children('li.taken:last')[0])
        {
          // display a new item if we've submitted the form
          // typically with TAB or ENTER
          if($.trim($(this).find('textarea#description').val()) != '' && $.trim($(this).find('textarea#description').val()) != 'New task')
          { new_item_for(next_available_slot($(this).parents('td'))) }
        }
      post_form(this)
      return false;
    })
  })
  $('textarea').livequery(function(){
    $(this).keydown(function(e){
      if(e.which == 27)
      {
        //ESC
        if($(this).parents('li').prev('li.taken').attr('id'))
        {
          $(this).parents('li').prev('li.taken').show()
        }
        else
        {
          $(this).parents('li').prev('li.taken').remove()
        }
        
        if($(this).parents('ul').children('li.available').size() < 1 && $(this).parents('ul').children('li.taken').size() < 5)
        { $(this).parents('ul').append($('ul.interface li.available').clone()) }
        $(this).parents('li').remove()
      }
      else if(e.which == 9 || e.which == 13)
      {
        //TAB or RETURN
        $(this).parents('form').submit()
        return false
      }
    })
  })

})

jQuery.ajaxSetup({ 
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept",
    "text/javascript")} 
})