Commit ebdead12 authored by Sindre Sorhus's avatar Sindre Sorhus
parent 19064ddd
......@@ -205,9 +205,6 @@
<li>
<a href="labs/architecture-examples/puremvc/" data-source="http://puremvc.github.com" data-content="PureMVC is a lightweight framework for creating applications based upon the classic Model-View-Controller design meta-pattern.">PureMVC</a>
</li>
<li>
<a href="labs/architecture-examples/fidel/" data-source="https://github.com/jgallen23/fidel" data-content="Fidel is a micro-framework for building widgets, modules and plugins. It resembles the controller in Spine.js and could be considered a controller library. Having not heavily needed models and routing in some of the single-page applications the author built, he found a library focusing on controller logic more useful.">Fidel</a>
</li>
<li>
<a href="labs/architecture-examples/olives/" data-source="https://github.com/flams/olives" data-content="Olives is a JS MVC framework that helps you create realtime UIs. It includes a set of AMD/CommonJS modules that are easily extensive, a high level of abstraction to reduce boilerplate and is based on socket.io, to provide a powerful means to communicate with node.js.">Olives</a>
</li>
......
This diff is collapsed.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fidel</title>
<link href="css/app.css" rel="stylesheet">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<div id="todoapp">
<div class="title">
<h1>todos</h1>
</div>
<div class="content">
<div id="create-todo">
<input data-element="input" placeholder="What needs to be done?" type="text">
</div>
<div id="todos">
<ul id="todo-list" data-element="todosContainer"></ul>
</div>
<div id="todo-stats" data-element="statsContainer"></div>
</div>
</div>
<div id="credits">
<p>Created by
<br />
<a href="http://jga.me/">Greg Allen</a> (<a href="http://twitter.com/jgaui">jgaui</a>)</p>
<br />
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
<script type="text/template" id="item-template">
<li class="todo {!= todo.done ? 'done' : '' !}" data-todoid="{!= todo.guid !}">
<div class="display">
<input class="check" type="checkbox" {!= todo.done ? 'checked="checked"' : '' !} />
<div class="todo-content">{!= todo.name !}</div>
<span data-action="destroyTodo" class="todo-destroy"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" value="" />
</div>
</li>
</script>
<script type="text/template" id="stats-template">
{! if (total) { !}
<span class="todo-count">
<span class="number">{!= remaining !}</span>
<span class="word">{!= remaining == 1 ? 'item' : 'items' !}</span> left.
</span>
{! } !}
{! if (done) { !}
<span class="todo-clear">
<a data-action="clearCompleted" href="#">
Clear <span class="number-done">{!= done !}</span>
completed <span class="word-done">{!= done == 1 ? 'item' : 'items' !}</span>
</a>
</span>
{! } !}
</script>
<script src="../../../assets/base.js"></script>
<script src="../../../assets/jquery.min.js"></script>
<script src="js/lib/fidel.js"></script>
<script src="js/app.js"></script>
</body>
</html>
\ No newline at end of file
var localStoreName = 'todos-fidel';
var todoStore = (function() {
return {
get: function() {
var d = localStorage.getItem(localStoreName);
var todos = {};
if (d) {
d = JSON.parse(d);
for (var key in d) {
todos[key] = new Todo(d[key]);
}
}
return todos;
},
save: function(todos) {
localStorage.setItem(localStoreName, JSON.stringify(todos));
}
};
})();
var Todo = Fidel.Class.extend({
defaults: {
name: "empty todo...",
done: false,
order: 0
},
init: function() {
},
toggleDone: function() {
this.done = !this.done;
}
});
var TodoView = Fidel.ViewController.extend({
templates: {
item: "#item-template",
stats: '#stats-template'
},
events: {
'keypress input[type="text"]': 'addOnEnter',
'click .check': 'complete'
},
init: function() {
this.todos = todoStore.get();
this.renderAll();
},
addOnEnter: function(e) {
if (e.keyCode == 13)
this.add();
},
add: function() {
var name = this.input.val();
this.input.val('');
var todo = new Todo({ name: name, order: this.taskCount });
this.taskCount++;
this.todos[todo.guid] = todo;
this.save();
var tmp = this.template(this.templates.item, { todo: todo });
this.todosContainer.prepend(tmp);
this.renderStats();
},
save: function() {
todoStore.save(this.todos);
},
sortTasks: function() {
var sorted = [];
for (var key in this.todos) {
sorted.push(this.todos[key]);
}
sorted.sort(function(a, b) {
return (b.order - a.order);
});
return sorted;
},
renderAll: function() {
var html = [];
var todos = this.sortTasks();
this.taskCount = todos.length;
for (var i = 0, c = todos.length; i < c; i++) {
var todo = todos[i];
var tmp = this.template(this.templates.item, { todo: todo });
html.push(tmp);
}
this.todosContainer.html(html.join(''));
this.renderStats();
},
renderStats: function() {
var todos = this.sortTasks();
var data = {
total: todos.length,
remaining: 0,
done: 0
};
for (var i = 0, c = todos.length; i < c; i++) {
var todo = todos[i];
if (todo.done)
data.done++;
else
data.remaining++;
}
this.render('stats', data, this.statsContainer);
},
complete: function(e) {
var complete = (e.target.value == "on");
var el = $(e.target);
el.parents('li').toggleClass('done');
var todoId = el.parents('li').attr('data-todoid');
this.todos[todoId].toggleDone();
this.save();
this.renderStats();
},
clearCompleted: function() {
var completedTodos = this.find('input:checked');
for (var i = 0, c = completedTodos.length; i < c; i++) {
var item = completedTodos[i];
this.destroyTodo($(item));
}
},
destroyTodo: function(el) {
var parent = el.parents('li');
var guid = parent.attr('data-todoid');
delete this.todos[guid];
parent.remove();
this.save();
this.renderStats();
}
});
//app
var todos = new TodoView({ el: $("#todoapp") });
\ No newline at end of file
/*!
* Fidel - A javascript controller
* v1.2.2
* https://github.com/jgallen23/fidel
* copyright JGA 2011
* MIT License
*/
!function(h,b){"undefined"!=typeof module&&module.exports?module.exports=b():"function"==typeof define&&"object"==typeof define.amd?define(b):this[h]=b()}("Fidel",function(){var h=this,b={guid:function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(a){var c=16*Math.random()|0;return("x"===a?c:c&3|8).toString(16)}).toUpperCase()},extend:function(){throw Error("Fidel.extend is deprecated, please use Fidel.ViewController.extend");}},j=h.Fidel;b.noConflict=function(){h.Fidel=
j;return this};var i=!1,k=/xyz/.test(function(){xyz})?/\b_super\b/:/.*/;b.Class=function(){};b.Class.extend=function(a){function c(a){if(!i){if(this.defaults)for(var c in this.defaults)if("object"!==typeof a||!a[c])this[c]=this.defaults[c];if("object"===typeof a)for(var d in a)this[d]=a[d];this.guid||(this.guid=b.guid());this._initialize&&this._initialize.apply(this,arguments);this.init&&this.init.apply(this,arguments)}}var d=this.prototype;i=!0;var e=new this;i=!1;for(var f in a)e[f]="function"==
typeof a[f]&&"function"==typeof d[f]&&k.test(a[f])?function(a,c){return function(){var b=this._super;this._super=d[a];var e=c.apply(this,arguments);this._super=b;return e}}(f,a[f]):a[f];c.prototype=e;c.prototype.proxy=function(a){var c=this;return function(){if(a)return a.apply(c,arguments)}};c.constructor=c;c.extend=arguments.callee;return c};var g={};b.publish=function(a,c){for(var d=g[a],b=d?d.length:0;b--;)d[b].apply(this,c||[])};b.subscribe=function(a,c){g[a]||(g[a]=[]);g[a].push(c);return[a,
c]};b.unsubscribe=function(a){for(var c=g[a[0]],a=a[1],b=c?c.length:0;b--;)c[b]===a&&c.splice(b,1)};b.Class.prototype.on=b.Class.prototype.bind=function(a,c){return b.subscribe(this.guid+"."+a,this.proxy(c))};b.Class.prototype.emit=b.Class.prototype.trigger=function(a,c){b.publish(this.guid+"."+a,c);b.publish(a,c)};b.Class.prototype.removeListener=b.Class.prototype.unbind=function(a){b.unsubscribe(a)};!function(){var a={};b.template=function d(b,f){var g=!/\W/.test(b)?a[b]=a[b]||d(b):new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('"+b.replace(/[\r\t\n]/g,"").split("{!").join("\t").replace(/((^|!})[^\t]*)'/g,"$1\r").replace(/\t=(.*?)!}/g,"',$1,'").split("\t").join("');").split("!}").join("p.push('").split("\r").join("\\'")+"');}return p.join('');");return f?g(f):g}}();var l=/^(\w+)\s*(.*)$/,m=b.Class.extend({_initialize:function(){if(!this.el)throw"el is required";this._subscribeHandles={};this.events&&this.delegateEvents();this.elements&&this.refreshElements();
this.templates&&this.loadTemplates();this.actionEvent||(this.actionEvent="click");this.subscribe&&this.bindSubscriptions();this.delegateActions();this.getDataElements()},template:b.template,delegateEvents:function(){for(var a in this.events){var c=this.events[a],b=a.match(l),e=b[1],b=b[2],c=this.proxy(this[c]);""===b?this.el.bind(e,c):this.el.delegate(b,e,c)}},delegateActions:function(){var a=this;this.el.delegate("[data-action]",this.actionEvent,function(b){var d=$(this),e=d.attr("data-action");
a[e]&&a[e].call(a,d,b)})},refreshElements:function(){for(var a in this.elements)this[a]=this.find(this.elements[a])},getDataElements:function(){for(var a=this.find("[data-element]"),b=0,d=a.length;b<d;b++){var e=a[b].getAttribute("data-element");if(!this[e]){var f=this.find('[data-element="'+e+'"]');this[e]=f}}},bindSubscriptions:function(){for(var a in this.subscribe)this._subscribeHandles[a]=b.subscribe(a,this.proxy(this[this.subscribe[a]]))},loadTemplates:function(){for(var a in this.templates)this.templates[a]=
$(this.templates[a]).html()},find:function(a){return $(a,this.el[0])},render:function(a,b,d){1==arguments.length&&(b=a,a=this.primaryTemplate);if(template=this.templates[a]){var e=this.template(template,b),d=d?$(d):this.el;d.html(e)}},destroy:function(){for(var a in this._subscribeHandles)b.unsubscribe(this._subscribeHandles[a]);this.el.undelegate("[data-action]",this.actionEvent);this.el=null}});b.ViewController=m;return b});
\ No newline at end of file
......@@ -56,7 +56,6 @@ We also have a number of in-progress applications in Labs:
- [TroopJS](https://github.com/troopjs)
- [soma.js](http://somajs.github.com/somajs)
- [DUEL](https://bitbucket.org/mckamey/duel/wiki/Home)
- [Fidel](https://github.com/jgallen23/fidel)
- [Olives](https://github.com/flams/olives)
- [PlastronJS](https://github.com/rhysbrettbowen/PlastronJS)
- [Dijon](https://github.com/creynders/dijon-framework)
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment