EFJAC Task Example

by Kenneth Luplau-Brøgger

HTML

<div data-module="taskhandler">
    <ul id="tasks">
      <li class="task" data-module="task">
        <h2>Task name</h2>
        <a href="#" class="star-task" data-behavior="task.star">Star task</a>
        <p>Task description</h2>
        <a href="#" class="open-task" data-behavior="task.open">Open</a>
        <a href="#" class="close-task" data-behavior="task.close">Close</a>
        <div class="form">
          <input type="text" name="name">
          <a href="#" class="save" data-behavior="task.save">Save</a
        </div>
      </li>
      <li class="task" data-module="task">
        <h2>Task name</h2>
        <a href="#" class="star-task" data-behavior="task.star">Star task</a>
        <p>Task description</h2>
        <a href="#" class="open-task" data-behavior="task.open">Open</a>
        <a href="#" class="close-task" data-behavior="task.close">Close</a>
        <div class="form">
          <input type="text" name="name">
          <a href="#" class="save" data-behavior="task.save">Save</a
        </div>
      </li>
    </ul>
</div>

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.star {
    color: orange;
}
.task.open .close-task {
  display: block;
}
.task.open .open-task {
  display: none;
}

JavaScript

//Scope
app = {};
app.module = {}; //This is where the registered apps are defined

app._module = function($module, moduleName) {
    this.$module = $module;
    this.moduleName = moduleName;
}

app.modules = {}; //Container for modules when they have been registred

//Register modules. This is done once by kicker.
app.registerModules = function() {
    $("[data-module]").each(function(i, module) {
        var $module = $(this);
        var modules = $(this).data("module").split(" ");
        
        $.each(modules, function(i, module) {
            //New instance of module
            app.modules[module] = new app._module($module, module);
            
            app.modules[module].$el = $module;
            
            //Define init function
            app.modules[module].init = app.module[module];
            
            //Init module
            app.modules[module].init($module, module);
        });
    });
}
//Register behaviors. This is done once by kicker
app.registerBehaviors = function() {
    var self = this;
    
    this._registredModules = [];
    
    $("[data-behavior]").each(function(i, module) {
        var behaviors = $(this).data("behavior").split(" ");
        
        $.each(behaviors, function(i, behavior) {
            //Don't register events twice
            if (self._registredModules.indexOf(behavior) > -1) {
                return false;
            }
    
            self._registredModules.push(behavior);  
            
            var module = behavior.split(".")[0]; //Task
            var action = behavior.split(".")[1]; //Open
            
            var $module = $("[data-module~='" + module + "']");
            
            $module.on('click', "[data-behavior~='" + behavior + "']", function() {
                $(this).trigger(behavior, {
                    trigger: $(this),
                    module: $module
                }); 
                return false;
            });        
        });
    });
}

// Task module....