Skip to content

T
todomvc
Commit 05ccb64c authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Fix agility.js being duplicated in labs, it's now only in master

parent 562e660e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4 additions and 345 deletions
README.md
View file @ 05ccb64c
...@@ -26,6 +26,7 @@ To help solve this problem, TodoMVC was created - a project which offers the sam ...@@ -26,6 +26,7 @@ To help solve this problem, TodoMVC was created - a project which offers the sam
- AngularJS - AngularJS
- Angular + PersistenceJS - Angular + PersistenceJS
- Ext.js - Ext.js
- Agility.js
###### Non MV* ###### Non MV*
......
index.html
View file @ 05ccb64c
...@@ -86,6 +86,9 @@ had it been designed for web apps">AngularJS</a> ...@@ -86,6 +86,9 @@ had it been designed for web apps">AngularJS</a>
<li> <li>
<a href="architecture-examples/extjs/index.html" data-source="http://www.sencha.com/products/extjs" data-content="Ext JS 4 is the next major advancement in our JavaScript framework. Featuring expanded functionality, plugin-free charting, and a new MVC architecture it's the best Ext JS yet. Create incredible web apps for every browser.">Ext.js</a> <a href="architecture-examples/extjs/index.html" data-source="http://www.sencha.com/products/extjs" data-content="Ext JS 4 is the next major advancement in our JavaScript framework. Featuring expanded functionality, plugin-free charting, and a new MVC architecture it's the best Ext JS yet. Create incredible web apps for every browser.">Ext.js</a>
</li> </li>
<li>
<a href="architecture-examples/agilityjs/index.html" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">Agility.js</a>
</li>
</ul> </ul>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li><a href="architecture-examples/jquery/index.html" data-source="http://jquery.com/" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a></li> <li><a href="architecture-examples/jquery/index.html" data-source="http://jquery.com/" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a></li>
......
labs/architecture-examples/agilityjs/index.html deleted 100755 → 0
View file @ 562e660e
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Agility.js • TodoMVC</title>
<link rel="stylesheet" href="../../assets/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="complete">
<label data-bind="title"></label>
<button class="destroy"></button>
</div>
<input class="edit" type="text" 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="completeCount"></span>)</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<p>Created by <a href="http://github.com/tshm/todomvc/">Tosh Shimayama</a></p>
<p>Part of <a href="http://github.com/addyosmani/todomvc/">TodoMVC</a></p>
</footer>
<script src="../../assets/jquery.min.js"></script>
<script src="js/lib/agility.min.js"></script>
<script src="js/localstorage.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/agilityjs/js/app.js deleted 100755 → 0
View file @ 562e660e
(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.
var drawHtml = function( selector ) {
return $(selector).remove().wrap( '<div>' ).parent().html();
};
// Simple Two layer composition:
// individual 'todoitem' and 'app'lication which holds multiple todoitems.
$(function() {
// todo item
var todoitem = $$({
model: {
title: 'no name',
complete: false
},
view: {
format: drawHtml( '#todo-list li' ),
style: '.hidden { display: none }'
},
controller: {
'change:complete': function() {
this.view.$().toggleClass( 'complete', this.model.get( 'complete' ));
app.updateStatus();
},
'dblclick .view': function() {
this.view.$().addClass( 'editing' );
this.view.$('.edit').select();
},
'click .destroy': function() {
this.destroy();
},
'create': function() {
this.view.$().toggleClass( 'complete', this.model.get( 'complete' ));
},
'change': function() {
this.save();
},
'destroy': function() {
this.erase();
},
'change:title': function() {
this.view.$().removeClass( 'editing' );
var title = this.model.get( 'title' ).trim();
if ( title ) {
this.model.set({
title: title
});
} else {
this.destroy();
}
}
}
}).persist( $$.adapter.localStorage, {
collection: 'todos-agilityjs'
});
// The main application which holds todo items.
var app = $$({
model: {
todoCount: '0',
pluralizer: '',
completeCount: '0',
newtitle: '',
mainStyle: '',
clearBtnStyle: ''
},
view: {
format: drawHtml( '#todoapp' ),
style: '.hidden { display: none }'
},
controller: {
'remove': function() {
this.updateStatus();
},
'append': function() {
this.updateStatus();
},
'keyup #new-todo': function( event ) {
var title;
if ( event.which === ENTER_KEY && (title = $('#new-todo').val().trim()) ) {
var item = $$(todoitem, {
title: title
}).save();
this.append( item, '#todo-list' );
event.target.value = ''; // clear input field
}
},
'click #toggle-all': function() {
var ischecked = this.view.$('#toggle-all').prop('checked');
this.each(function( id, item ) {
item.model.set({
complete: ischecked
});
});
},
'click #clear-completed': function() {
this.each(function( id, item ) {
if ( item.model.get( 'complete' ) ) {
item.destroy();
}
});
}
},
// utility functions
updateStatus: function() {
// update counts
var count = this.size(),
completeCount = 0;
this.each(function( id, item ) {
if ( item.model.get( 'complete' ) ) {
completeCount++;
}
});
this.model.set({
todoCount: count - completeCount + '',
pluralizer: (count > 1 ? 's' : ''),
completeCount: completeCount + '',
mainStyle: (count === 0 ? 'hidden' : ''),
clearBtnStyle: (completeCount === 0 ? 'hidden' : '')
});
// update toggle-all checked status
$('#toggle-all').prop( 'checked', completeCount === count );
},
// filter handler
filters: {
'#/': function( item ) {
return true;
},
'#/active': function( item ) {
return !item.model.get( 'complete' );
},
'#/completed': function( item ) {
return item.model.get( 'complete' );
}
},
applyFilter: function( hash ) {
var isVisible = this.filters[hash];
this.each(function( id, item ) {
item.view.$().toggleClass( 'hidden', !isVisible( item ));
});
}
}).persist();
$$.document.prepend( app );
// load from localStorage
app.gather( todoitem, 'append', '#todo-list' ).updateStatus();
// 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' );
}
});
});
if ( location.hash ) {
$(window).trigger( 'hashchange' );
}
});
})( window.jQuery, window.agility );
labs/architecture-examples/agilityjs/js/localstorage.js deleted 100755 → 0
View file @ 562e660e
// custom agilityjs adapter for localstorage
(function( $$, undefined ) {
'use strict';
$$.adapter.localStorage = function( _params ) {
var storageKey = (this._data.persist.baseUrl || '') + this._data.persist.collection,
storageStr = localStorage[storageKey],
items = (storageStr ? JSON.parse( storageStr ) : {});
//
if ( _params.type === 'GET' ) {
if ( _params.id !== undefined ) { // normal get
if ( typeof items[_params.id] === 'object' ) {
_params.success( items[_params.id] );
} else {
_params.error();
}
} else { // gather call
_params.success( items );
}
} else if ( _params.type === 'DELETE' ) {
delete items[_params.id];
localStorage[storageKey] = JSON.stringify( items );
} else if ( _params.type === 'PUT' || _params.type === 'POST' ) {
if ( _params.id === undefined ) {
_params.id = (new Date()).getTime();
_params.data.id = _params.id;
}
items[_params.id] = _params.data;
localStorage[storageKey] = JSON.stringify( items );
} else {
_params.error();
}
_params.complete();
};
})( window.agility );
labs/index.html
View file @ 05ccb64c
...@@ -66,9 +66,6 @@ ...@@ -66,9 +66,6 @@
<div class="span5" id="demos"> <div class="span5" id="demos">
<h2>Demos</h2> <h2>Demos</h2>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li>
<a href="architecture-examples/agilityjs/index.html" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">AgilityJS *</a>
</li>
<li> <li>
<a href="architecture-examples/stapes/index.html" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a> available.">Stapes *</a> <a href="architecture-examples/stapes/index.html" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a> available.">Stapes *</a>
</li> </li>
...@@ -150,7 +147,6 @@ ...@@ -150,7 +147,6 @@
<footer> <footer>
<p>&copy; TodoMVC Labs. Brought to you by <a href="https://github.com/addyosmani">Addy Osmani</a> and <a href="https://github.com/sindresorhus">Sindre Sorhus</a>.</p> <p>&copy; TodoMVC Labs. Brought to you by <a href="https://github.com/addyosmani">Addy Osmani</a> and <a href="https://github.com/sindresorhus">Sindre Sorhus</a>.</p>
<p id="contributor-list">Big thanks to our magnificent labs contributors: <p id="contributor-list">Big thanks to our magnificent labs contributors:
<a href="https://github.com/tshm">Tosh Shimayama</a>
<a href="https://github.com/johnknott">John Knott</a> <a href="https://github.com/johnknott">John Knott</a>
<a href="https://github.com/brokenseal">Davide Callegari</a> <a href="https://github.com/brokenseal">Davide Callegari</a>
<a href="http://bitovi.com">Bitovi</a> <a href="http://bitovi.com">Bitovi</a>
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7