EFJAC Task Example

by Rob Cameron

HTML

<ul id="tasks">
  <li class="task">
    <h2>Task name</h2>
    <p>Task description</h2>
    <a href="#" class="open-task" data-behavior="open">Open</a>
    <a href="#" class="close-task" data-behavior="close">Close</a>
    <form action="/echo/json/">
      <input type="text" name="name">
      <a href="#" class="save" data-behavior="save">Save</a>
    </form>
  </li>
</ul>

CSS

body {
  background-color: #eeeeee;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.task {
  overflow: auto;
  background-color: #ffffff;
  padding: 10px;
}
h2 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}
p {
  margin: 0;
}
.open-task {
  display: block;
  float: right;
}
.close-task {
  display: none;
  float: right;
}
form {
  text-align: center;
  display: none;
}
.task.complete {
  background-color: #dddddd;
  color: #999999;
}
.task.complete .open-task {
  display: none;
}
.task.open form {
  display: block;
}
.task.open .close-task {
  display: block;
}
.task.open .open-task {
  display: none;
}

JavaScript

// DOM Events

$('.task').on('click', '[data-behavior~=open]', function() {
  $(this).closest('.task').trigger('open.task'); 
  return false;
});

$('.task').on('click', '[data-behavior~=close]', function() {
  $(this).closest('.task').trigger('close.task');
  return false;
});

$('.task').on('click', '[data-behavior~=save]', function() {
  $(this).closest('.task').trigger('save.task');
  return false;
});

// Custom Events

$('.task').on('open.task', function() {
  $(this).addClass('open'); 
});

$('.task').on('close.task', function() {
  $(this).removeClass('open');
});

$('.task').on('save.task', function() {
  var $this = $(this);
  $.post('/echo/json').success(function(data) {
    $this.trigger('saved.task', data);
  });
});

$('.task').on('saved.task', function(e, data) {
  $(this).trigger('complete.task');
});

$('.task').on('complete.task', function() {
  $(this).trigger('close.task');
  $(this).addClass('complete');
});