Permalink
Browse files

Agility - code style

  • Loading branch information...
sindresorhus committed Mar 9, 2013
1 parent 2b5c9ac commit 941a0ac91d2794ca9c969f394e2f880593984c20
@@ -1,56 +1,56 @@
<!doctype html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Agility.js • TodoMVC</title>
- <link rel="stylesheet" href="components/todomvc-common/base.css">
-</head>
-<body>
- <section id="todoapp">
- <header id="header">
- <h1>todos</h1>
- <input id="new-todo" type="text" data-bind="newtitle" placeholder="What needs to be done?" autofocus>
- </header>
- <section id="main" data-bind="class = mainStyle">
- <input id="toggle-all" type="checkbox">
- <label for="toggle-all">Mark all as complete</label>
- <ul id="todo-list">
- <li>
- <div class="view">
- <input class="toggle" type="checkbox" data-bind="completed">
- <label data-bind="title"></label>
- <button class="destroy"></button>
- </div>
- <input class="edit" type="text" data-bind="title">
- </li>
- </ul>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Agility.js • TodoMVC</title>
+ <link rel="stylesheet" href="components/todomvc-common/base.css">
+ </head>
+ <body>
+ <section id="todoapp">
+ <header id="header">
+ <h1>todos</h1>
+ <input id="new-todo" type="text" data-bind="newtitle" placeholder="What needs to be done?" autofocus>
+ </header>
+ <section id="main" data-bind="class = mainStyle">
+ <input id="toggle-all" type="checkbox">
+ <label for="toggle-all">Mark all as complete</label>
+ <ul id="todo-list">
+ <li>
+ <div class="view">
+ <input class="toggle" type="checkbox" data-bind="completed">
+ <label data-bind="title"></label>
+ <button class="destroy"></button>
+ </div>
+ <input class="edit" data-bind="title">
+ </li>
+ </ul>
+ </section>
+ <footer id="footer" data-bind="class = mainStyle">
+ <span id="todo-count"><strong data-bind='todoCount'></strong> item<span data-bind='pluralizer'></span> left</span>
+ <ul id="filters">
+ <li>
+ <a class="selected" href="#/">All</a>
+ </li>
+ <li>
+ <a href="#/active">Active</a>
+ </li>
+ <li>
+ <a href="#/completed">Completed</a>
+ </li>
+ </ul>
+ <button id="clear-completed" data-bind="class = clearBtnStyle">Clear completed (<span data-bind="completedCount"></span>)</button>
+ </footer>
</section>
- <footer id="footer" data-bind="class = mainStyle">
- <span id="todo-count"><strong data-bind='todoCount'></strong> item<span data-bind='pluralizer'></span> left</span>
- <ul id="filters">
- <li>
- <a class="selected" href="#/">All</a>
- </li>
- <li>
- <a href="#/active">Active</a>
- </li>
- <li>
- <a href="#/completed">Completed</a>
- </li>
- </ul>
- <button id="clear-completed" data-bind="class = clearBtnStyle">Clear completed (<span data-bind="completedCount"></span>)</button>
+ <footer id="info">
+ <p>Double-click to edit a todo</p>
+ <p>Created by <a href="http://github.com/tshm/todomvc/">Tosh Shimayama</a></p>
+ <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
- </section>
- <footer id="info">
- <p>Double-click to edit a todo</p>
- <p>Created by <a href="http://github.com/tshm/todomvc/">Tosh Shimayama</a></p>
- <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
- </footer>
- <script src="components/todomvc-common/base.js"></script>
- <script src="components/jquery/jquery.js"></script>
- <script src="components/agility/agility.js"></script>
- <script src="js/localstorage.js"></script>
- <script src="js/app.js"></script>
-</body>
+ <script src="components/todomvc-common/base.js"></script>
+ <script src="components/jquery/jquery.js"></script>
+ <script src="components/agility/agility.js"></script>
+ <script src="js/localstorage.js"></script>
+ <script src="js/app.js"></script>
+ </body>
</html>
@@ -1,15 +1,16 @@
(function ($, $$) {
'use strict';
+
var ENTER_KEY = 13;
- // Hack of taking out html elements from DOM so that agility's view can use it.
- // We need 'outerhtml' also, as agilityjs will append DOM, so removing it.
+ // hack of taking out html elements from DOM so that agility's view can use it
+ // we need 'outerhtml' also, as agilityjs will append DOM, so removing it
var drawHtml = function (selector) {
return $(selector).remove().wrap('<div>').parent().html();
};
- // Simple Two layer composition:
- // individual 'todoitem' and 'app'lication which holds multiple todoitems.
+ // simple Two layer composition:
+ // individual 'todoitem' and 'app' which holds multiple todoitems
$(function () {
// todo item
var todoitem = $$({
@@ -52,8 +53,10 @@
}
},
updateTitle: function () {
- this.view.$().removeClass('editing');
var title = this.model.get('title').trim();
+
+ this.view.$().removeClass('editing');
+
if (title) {
this.model.set({
title: title
@@ -66,7 +69,7 @@
collection: 'todos-agilityjs'
});
- // The main application which holds todo items.
+ // the main application which holds todo items
var app = $$({
model: {
todoCount: '0',
@@ -87,14 +90,14 @@
'append': function () {
this.updateStatus();
},
- 'keyup #new-todo': function (event) {
+ 'keyup #new-todo': function (e) {
var title = $('#new-todo').val().trim();
- if (event.which === ENTER_KEY && title) {
+ if (e.which === ENTER_KEY && title) {
var item = $$(todoitem, {
title: title
}).save();
this.append(item, '#todo-list');
- event.target.value = ''; // clear input field
+ e.target.value = ''; // clear input field
}
},
'click #toggle-all': function () {
@@ -116,20 +119,23 @@
// utility functions
updateStatus: function () {
// update counts
- var count = this.size(),
- completedCount = 0;
+ var count = this.size();
+ var completedCount = 0;
+
this.each(function (id, item) {
if (item.model.get('completed')) {
completedCount++;
}
});
+
this.model.set({
todoCount: count - completedCount + '',
- pluralizer: (count - completedCount === 1 ? '' : 's'),
+ pluralizer: count - completedCount === 1 ? '' : 's',
completedCount: completedCount + '',
- mainStyle: (count === 0 ? 'hidden' : ''),
- clearBtnStyle: (completedCount === 0 ? 'hidden' : '')
+ mainStyle: count === 0 ? 'hidden' : '',
+ clearBtnStyle: completedCount === 0 ? 'hidden' : ''
});
+
// update toggle-all checked status
$('#toggle-all').prop('checked', completedCount === count);
// update the view according to the current filter.
@@ -156,26 +162,23 @@
}
}
}).persist();
+
$$.document.prepend(app);
// load from localStorage
app.gather(todoitem, 'append', '#todo-list').updateStatus();
- // manual routing (not supported by agilityjs)
+ // manual routing (not supported by agilityjs)
$(window).on('hashchange', function () {
var hash = location.hash;
app.applyFilter(hash);
$('#filters a').each(function () {
- if (hash === $(this).attr('href')) {
- $(this).addClass('selected');
- } else {
- $(this).removeClass('selected');
- }
+ $(this).toggleClass('selected', hash === $(this).attr('href'));
});
});
+
if (location.hash) {
$(window).trigger('hashchange');
}
});
-
})(window.jQuery, window.agility);
@@ -3,10 +3,10 @@
'use strict';
$$.adapter.localStorage = function (_params) {
- var storageKey = (this._data.persist.baseUrl || '') + this._data.persist.collection,
- storageStr = localStorage[storageKey],
- items = (storageStr ? JSON.parse(storageStr) : {});
- //
+ var storageKey = (this._data.persist.baseUrl || '') + this._data.persist.collection;
+ var storageStr = localStorage[storageKey];
+ var items = (storageStr ? JSON.parse(storageStr) : {});
+
if (_params.type === 'GET') {
if (_params.id !== undefined) { // normal get
if (typeof items[_params.id] === 'object') {

0 comments on commit 941a0ac

Please sign in to comment.