Skip to content

T
todomvc
Commit 26bd236c authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Merge pull request #514 from stephenplusplus/gh-pages 

Sammy.js using Bower + new design + Sammy upgrade
parents ff17a59f 7d077b1d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 12641 additions and 727 deletions
labs/architecture-examples/sammyjs/component.json 0 → 100644
View file @ 26bd236c
{
"name": "todomvc-sammyjs",
"version": "0.0.0",
"dependencies": {
"sammy": "~0.7.4",
"jquery": "~1.9.1",
"todomvc-common": "~0.1.2"
}
}
labs/architecture-examples/sammyjs/components/jquery/jquery.js 0 → 100644
View file @ 26bd236c
This diff is collapsed.
labs/architecture-examples/sammyjs/components/sammy/sammy.js 0 → 100644
View file @ 26bd236c
This diff is collapsed.
labs/architecture-examples/sammyjs/js/lib/sammy.template.js → labs/architecture-examples/sammyjs/components/sammy/sammy.template.js
View file @ 26bd236c
......@@ -11,11 +11,6 @@
// adapted from: http://ejohn.org/blog/javascript-micro-templating/
// originally $.srender by Greg Borenstein http://ideasfordozens.com in Feb 2009
// modified for Sammy by Aaron Quint for caching templates by name
// Backport of escapeHTML from sammy.js 0.7
var _escapeHTML = function(s) {
return String(s).replace(/&(?!\w+;)/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
};
var srender_cache = {};
var srender = function(name, template, data, options) {
var fn, escaped_string;
......@@ -137,7 +132,7 @@
if (typeof options == 'undefined' && typeof name == 'object') {
options = name; name = template;
}
return srender(name, template, $.extend({h: _escapeHTML}, this, data), options);
return srender(name, template, $.extend({}, this, data), options);
};
// set the default method name/extension
......
labs/architecture-examples/sammyjs/components/todomvc-common/base.css 0 → 100644
View file @ 26bd236c
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
color: inherit;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #eaeaea url('bg.png');
color: #4d4d4d;
width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#todoapp {
background: #fff;
background: rgba(255, 255, 255, 0.9);
margin: 130px 0 40px 0;
border: 1px solid #ccc;
position: relative;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
content: '';
border-left: 1px solid #f5d6d6;
border-right: 1px solid #f5d6d6;
width: 2px;
position: absolute;
top: 0;
left: 40px;
height: 100%;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todoapp input:-moz-placeholder {
font-style: italic;
color: #a9a9a9;
}
#todoapp h1 {
position: absolute;
top: -120px;
width: 100%;
font-size: 70px;
font-weight: bold;
text-align: center;
color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#header {
padding-top: 15px;
border-radius: inherit;
}
#header:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 15px;
z-index: 2;
border-bottom: 1px solid #6c615c;
background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px;
border-top-right-radius: 1px;
}
#new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#new-todo {
padding: 16px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.02);
z-index: 2;
box-shadow: none;
}
#main {
position: relative;
z-index: 2;
border-top: 1px dotted #adadad;
}
label[for='toggle-all'] {
display: none;
}
#toggle-all {
position: absolute;
top: -42px;
left: -4px;
width: 40px;
text-align: center;
border: none; /* Mobile Safari */
}
#toggle-all:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
}
#toggle-all:checked:before {
color: #737373;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
#todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px dotted #ccc;
}
#todo-list li:last-child {
border-bottom: none;
}
#todo-list li.editing {
border-bottom: none;
padding: 0;
}
#todo-list li.editing .edit {
display: block;
width: 506px;
padding: 13px 17px 12px 17px;
margin: 0 0 0 43px;
}
#todo-list li.editing .view {
display: none;
}
#todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list li .toggle:after {
content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list li .toggle:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
#todo-list li label {
word-break: break-word;
padding: 15px;
margin-left: 45px;
display: block;
line-height: 1.2;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li.completed label {
color: #a9a9a9;
text-decoration: line-through;
}
#todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 22px;
color: #a88a8a;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#todo-list li .destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
#todo-list li .destroy:after {
content: '✖';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list li .edit {
display: none;
}
#todo-list li.editing:last-child {
margin-bottom: -1px;
}
#footer {
color: #777;
padding: 0 15px;
position: absolute;
right: 0;
bottom: -31px;
left: 0;
height: 20px;
z-index: 1;
text-align: center;
}
#footer:before {
content: '';
position: absolute;
right: 0;
bottom: 31px;
left: 0;
height: 50px;
z-index: -1;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 6px 0 -3px rgba(255, 255, 255, 0.8),
0 7px 1px -3px rgba(0, 0, 0, 0.3),
0 43px 0 -6px rgba(255, 255, 255, 0.8),
0 44px 2px -6px rgba(0, 0, 0, 0.2);
}
#todo-count {
float: left;
text-align: left;
}
#filters {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
}
#filters li {
display: inline;
}
#filters li a {
color: #83756f;
margin: 2px;
text-decoration: none;
}
#filters li a.selected {
font-weight: bold;
}
#clear-completed {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
font-size: 11px;
padding: 0 10px;
border-radius: 3px;
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}
#info {
margin: 65px auto 0;
color: #a6a6a6;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
text-align: center;
}
#info a {
color: inherit;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all,
#todo-list li .toggle {
background: none;
}
#todo-list li .toggle {
height: 40px;
}
#toggle-all {
top: -56px;
left: -15px;
width: 65px;
height: 41px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-appearance: none;
appearance: none;
}
}
.hidden{
display:none;
}
labs/architecture-examples/sammyjs/components/todomvc-common/base.js 0 → 100644
View file @ 26bd236c
(function () {
'use strict';
if (location.hostname === 'todomvc.com') {
window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
}
function getSourcePath() {
// If accessed via addyosmani.github.com/todomvc/, strip the project
// path.
if (location.hostname.indexOf('github.com') > 0) {
return location.pathname.replace(/todomvc\//, '');
}
return location.pathname;
}
function appendSourceLink() {
var sourceLink = document.createElement('a');
var paragraph = document.createElement('p');
var footer = document.getElementById('info');
var urlBase = 'https://github.com/addyosmani/todomvc/tree/gh-pages';
if (footer) {
sourceLink.href = urlBase + getSourcePath();
sourceLink.appendChild(document.createTextNode('Check out the source'));
paragraph.appendChild(sourceLink);
footer.appendChild(paragraph);
}
}
function redirect() {
if (location.hostname === 'addyosmani.github.com') {
location.href = location.href.replace('addyosmani.github.com/todomvc',
'todomvc.com');
}
}
appendSourceLink();
redirect();
})();
labs/architecture-examples/sammyjs/css/app.css deleted 100644 → 0
View file @ ff17a59f
This diff is collapsed.
labs/architecture-examples/sammyjs/index.html
View file @ 26bd236c
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sammy.js • TodoMVC</title>
<link rel="stylesheet" href="css/app.css">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
<link rel="stylesheet" href="components/todomvc-common/base.css">
</head>
<body>
<div id="todoapp">
<div class="title">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
</div>
<div class="content">
<div id="create-todo">
<input id="new-todo" placeholder="What needs to be done?" type="text">
</div>
<div id="todos">
<ul id="todo-list"></ul>
</div>
<div id="todo-stats"></div>
</div>
</div>
<div id="credits">
This version by
<br />
<a href="http://twitter.com/addyosmani">Addy Osmani</a>
<br />
based on some code by Brandon Aaron
</div>
<script src="../../../assets/base.js"></script>
<script src="../../../assets/jquery.min.js"></script>
<script src="js/lib/sammy.js"></script>
<script src="js/lib/sammy.template.js"></script>
<script src="js/lib/model.js"></script>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="https://github.com/stephenplusplus">Stephen Sawchuk</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/sammy/sammy.js"></script>
<script src="components/sammy/sammy.template.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/TodoItem.js"></script>
<script src="js/controllers/TodoList.js"></script>
<script src="js/models/Todos.js"></script>
<script src="js/routes/active.js"></script>
<script src="js/routes/completed.js"></script>
<script src="js/routes/home.js"></script>
<script src="js/views/TodoItem.js"></script>
<script src="js/views/TodoList.js"></script>
</body>
</html>
\ No newline at end of file
</html>
labs/architecture-examples/sammyjs/js/app.js
View file @ 26bd236c
(function($) {
var ESCAPE_KEY = 13;
/*global Sammy, jQuery, TodoApp */
var app = $.sammy(function() {
this.use(Sammy.Template);
(function (window, $) {
'use strict';
this.notFound = function(verb, path) {
this.runRoute('get', '#/404');
};
this.get('#/404', function() {
this.partial('templates/404.template', {}, function(html) {
$('#todo-list').html(html);
});
});
this.get('#/list/:id', function() {
var list = Lists.get(this.params['id']);
if (list) {
this.partial('templates/todolist.template', {
list: list,
todos: Todos.filter('listId', list.id)
}, function(html) {
$('#todo-list').html(html);
});
} else {
this.notFound();
}
});
// events
this.bind('run', function(e, data) {
var context = this;
var title = localStorage.getItem('title') || "Todos";
$('h1').text(title);
if(Lists._data.length <=0){
var list = Lists.create({ name: 'My new list' });
//app.trigger('updateLists');
}
$('#new-todo').keydown(function(e) {
if (e.keyCode == ESCAPE_KEY){
var todoContent = $(this).val();
var todo = Todos.create({ name: todoContent, done: false, listId: parseInt($('h2').attr('data-id'), 10) });
context.partial('templates/todo.template', todo, function(html) {
$('#todo-list').append(html);
});
$(this).val('');
}
});
$('.trashcan')
.live('click', function() {
var $this = $(this);
app.trigger('delete', {
type: $this.attr('data-type'),
id: $this.attr('data-id')
});
});
//new
$('.check')
.live('click', function() {
var $this = $(this),
$li = $this.parents('li').toggleClass('done'),
isDone = $li.is('.done');
app.trigger('mark' + (isDone ? 'Done' : 'Undone'), { id: $li.attr('data-id') });
});
$('[contenteditable]')
.live('focus', function() {
// store the current value
$.data(this, 'prevValue', $(this).text());
})
.live('blur', function() {
var $this = $(this),
// grab the, likely, modified value
text = $.trim($this.text());
if (!text) {
// restore the previous value if text is empty
$this.text($.data(this, 'prevValue'));
} else {
if ($this.is('h1')) {
// it is the title
localStorage.setItem('title', text);
} else {
// save it
app.trigger('save', {
type: $this.attr('data-type'),
id: $this.attr('data-id'),
name: text
});
}
}
})
.live('keypress', function(event) {
// save on enter
if (event.which === 13) {
this.blur();
return false;
}
});
if (!localStorage.getItem('initialized')) {
// create first list and todo
var listId = Lists.create({
name: 'My first list'
}).id;
/*
Todos.create({
name: 'My first todo',
done: false,
listId: listId
});
*/
localStorage.setItem('initialized', 'yup');
this.redirect('#/list/'+listId);
} else {
var lastViewedOrFirstList = localStorage.getItem('lastviewed') || '#/list/' + Lists.first().id;
this.redirect(lastViewedOrFirstList);
}
});
/*save the route as the lastviewed item*/
this.bind('route-found', function(e, data) {
localStorage.setItem('lastviewed', document.location.hash);
});
this.bind('save', function(e, data) {
var model = data.type == 'todo' ? Todos : Lists;
model.update(data.id, { name: data.name });
});
/*marking the selected item as done*/
this.bind('markDone', function(e, data) {
Todos.update(data.id, { done: true });
});
/*mark the todo with the selected id as not done*/
this.bind('markUndone', function(e, data) {
Todos.update(data.id, { done: false });
});
this.bind('delete', function(e, data) {
//if (confirm('Are you sure you want to delete this ' + data.type + '?')) {
var model = data.type == 'list' ? Lists : Todos;
model.destroy(data.id);
if (data.type == 'list') {
var list = Lists.first();
if (list) {
this.redirect('#/list/'+list.id);
} else {
// create first list and todo
var listId = Lists.create({
name: 'Initial list'
}).id;
Todos.create({
name: 'A sample todo item',
done: false,
listId: listId
});
this.redirect('#/list/'+listId);
}
} else {
// delete the todo from the view
$('li[data-id=' + data.id + ']').remove();
}
});
window.TodoApp = Sammy('#todoapp').use('Template');
TodoApp.notFound = function () {
this.runRoute('get', '#/');
};
$(function () {
TodoApp.run('#/');
});
// lists model
Lists = Object.create(Model);
Lists.name = 'lists-sammyjs';
Lists.init();
// todos model
Todos = Object.create(Model);
Todos.name = 'todos-sammyjs';
Todos.init();
$(function() { app.run(); });
})(jQuery);
})(window, jQuery);
labs/architecture-examples/sammyjs/js/controllers/TodoItem.js 0 → 100644
View file @ 26bd236c
/*global jQuery, TodoApp */
(function ($) {
'use strict';
var ESCAPE_KEY = 27;
var ENTER_KEY = 13;
var TodoItem = {
// `effectCause`
// i.e. "removeClick" = "a click to remove a todoItem"
removeClick: function () {
TodoApp.trigger('removeTodo', {
id: $(this).parents('li').data('id')
});
},
toggleClick: function () {
TodoApp.trigger('toggleTodoCompleted', {
id: $(this).parents('li').data('id')
});
},
editDblClick: function () {
$(this).parents('li').data('original-name', $(this).text());
TodoApp.trigger('editingTodo', {
id: $(this).parents('li').data('id')
});
},
editBlur: function () {
TodoApp.trigger('doneEditingTodo', {
id: $(this).parents('li').data('id'),
name: $.trim($(this).val())
});
},
editKeyup: function (e) {
if (e.which === ESCAPE_KEY) {
$(this).trigger('cancelEditingTodo', {
id: $(this).parents('li').data('id'),
name: $(this).parents('li').data('original-name')
});
}
if (e.which === ENTER_KEY) {
$(this).trigger('blur');
}
},
init: function () {
$('#todo-list')
.on('click', '.destroy', TodoItem.removeClick)
.on('click', '.toggle', TodoItem.toggleClick)
.on('dblclick', 'label', TodoItem.editDblClick)
.on('blur', '.edit', TodoItem.editBlur)
.on('keyup', '.edit', TodoItem.editKeyup);
}
};
TodoApp.bind('todoListRendered', TodoItem.init);
})(jQuery);
labs/architecture-examples/sammyjs/js/controllers/TodoList.js 0 → 100644
View file @ 26bd236c
/*global jQuery, TodoApp */
(function ($) {
'use strict';
var ENTER_KEY = 13;
var TodoList = {
// `effectCause`
// i.e. "newKeydown" = "a keydown event to create a new Todo"
newKeydown: function (e) {
var name = $.trim($(this).val());
if (e.keyCode !== ENTER_KEY || !name) {
return;
}
TodoApp.trigger('saveTodo', {
name: name,
completed: false
});
$(this).val('');
},
toggleAllClick: (function () {
var flags = ['active', 'completed'];
var count = 1;
return function () {
TodoApp.trigger('toggleAllTodosCompleted', flags[count++ % 2]);
};
})(),
removeCompletedClick: function () {
TodoApp.trigger('removeCompletedTodos');
},
init: function () {
// The TodoApp has launched, let's bind our events.
$('#new-todo').on('keydown', TodoList.newKeydown);
$('#toggle-all').on('click', TodoList.toggleAllClick);
$('#footer').on('click', '#clear-completed', TodoList.removeCompletedClick);
}
};
TodoApp.bind('todoListRendered', TodoList.init);
})(jQuery);
labs/architecture-examples/sammyjs/js/lib/model.js deleted 100644 → 0
View file @ ff17a59f
Model={name:"model",init:function(){this._id=0;this._data=[];this._deserialize();return this},create:function(a,b){a.id=this._newId();var c=this._data[this._data.push(a)-1];!1!==b&&this.save();return this._clone(c)},first:function(){return this._clone(this._data[0])},last:function(){return this._clone(_data[this._data.length-1])},get:function(a){return this._clone(this._get(a))},getAll:function(){return this._clone(this._data)},filter:function(a,b){return this._clone(this._filter(a,b))},multiFilter:function(){return this._clone(this._multiFilter(filter))},
update:function(a,b,c){if(a=this._get(a)||!1)this._mixin(a,b),!1!==c&&this.save();return a},destroy:function(a,b){this._data.splice(this._indexOf(a),1);!1!==b&&this.save();return!0},destroyAll:function(a){this._data=[];!1!==a&&this.save();return!0},save:function(){this._serialize();return!0},_first:function(){return this._data[0]},_last:function(){return _data[this._data.length-1]},_get:function(a){return this._filter("id",a)[0]},_filter:function(a,b){var c=[],d,e,f="undefined"==typeof b;for(d in this._data)this._data.hasOwnProperty(d)&&
(e=this._data[d],(f||e[a]==b)&&c.push(e));return c},_multiFilter:function(a){var b=[],c,d,e;for(c in this._data)if(this._data.hasOwnProperty(c))for(d in e=this._data[c],a)a.hasOwnProperty(d)&&a[d]==e[d]&&b.push(e);return b},_indexOf:function(a){return this._data.indexOf(this._get(a))},_serialize:function(){localStorage[this.name]=JSON.stringify({prevId:this._id,data:this._data})},_deserialize:function(){var a=localStorage[this.name];a&&(a=JSON.parse(a),this._id=a.prevId,this._data=a.data)},_newId:function(){return this._id++},
_mixin:function(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])},_clone:function(a){var b=Object.prototype.toString.call(a),c=a;if("[object Object]"==b){var c={},d;for(d in a)a.hasOwnProperty(d)&&(c[d]=this._clone(a[d]))}else if("[object Array]"==b){c=[];b=0;for(d=a.length;b<d;b++)c[b]=this._clone(a[b])}return c}};"function"!==typeof Object.create&&(Object.create=function(a){function b(){}b.prototype=a;return new b});
\ No newline at end of file
labs/architecture-examples/sammyjs/js/lib/sammy.js deleted 100644 → 0
View file @ ff17a59f
This diff is collapsed.
labs/architecture-examples/sammyjs/js/models/Todos.js 0 → 100644
View file @ 26bd236c
/*global TodoApp */
(function () {
'use strict';
var Todos = {
all: [],
visible: [],
flag: null,
createId: (function () {
// Creates a unique ID for every todoItem.
var s4 = function () {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
};
return function () {
return s4() + s4();
};
})(),
findOne: function (param, value) {
var todo = {};
Todos.all.forEach(function (thisTodo, i) {
if (thisTodo[param] === value) {
todo.todo = thisTodo;
todo.index = i;
}
});
return todo;
},
filter: function (param, value) {
return Todos.all.filter(function (thisTodo) {
return thisTodo[param] === value;
});
},
get: function (id) {
if (id && id !== 'active' && id !== 'completed') {
// We are looking for a particular todoItem.
return Todos.findOne('id', id);
} else if (id === 'active' || id === 'completed') {
// We either want to receive only the completed or active todoItems.
return Todos.filter('completed', id === 'completed');
} else {
// We want all of the todoItems.
return JSON.parse(localStorage.getItem('todos-sammyjs')) || [];
}
},
getData: function () {
return {
flag: Todos.flag,
all: Todos.all,
active: Todos.get('active'),
completed: Todos.get('completed'),
visible: Todos.get(Todos.flag)
};
},
save: function (e, data) {
Todos.all.push({
id: Todos.createId(),
name: data.name,
completed: data.completed
});
Todos.sync();
},
toggleCompleted: function (e, data) {
Todos.get(data.id).todo.completed = !Todos.get(data.id).todo.completed;
TodoApp.trigger('toggledTodoCompleted', {
id: data.id,
completed: Todos.get(data.id).todo.completed
});
Todos.sync();
},
toggleAllCompleted: function () {
var activeTodosLeft = Todos.get('active').length > 0;
Todos.all.forEach(function (thisTodo) {
thisTodo.completed = activeTodosLeft;
TodoApp.trigger('toggledTodoCompleted', {
id: thisTodo.id,
completed: thisTodo.completed
});
});
Todos.sync();
},
edit: function (e, data) {
if (!data.name) {
return Todos.remove(e, data);
}
Todos.get(data.id).todo.name = data.name;
Todos.syncQuiet();
},
removeCompleted: function () {
Todos.get('completed').forEach(function (thisTodo) {
Todos.remove(null, thisTodo);
});
},
remove: function (e, data) {
Todos.all.splice(Todos.get(data.id).index, 1);
Todos.sync();
},
fetchTodos: function (e, flag) {
// Called from each route's instantiation.
Todos.all = Todos.get();
Todos.flag = flag;
TodoApp.trigger('launch', Todos.getData());
Todos.sync();
},
syncQuiet: function () {
// Syncs data with `localStorage`, without forcing all of the todoItems
// to repaint.
localStorage.setItem('todos-sammyjs', JSON.stringify(Todos.all));
TodoApp.trigger('todosUpdatedQuiet', Todos.getData());
},
sync: function () {
// Syncs data with `localStorage`, and rebuilds the todoItems.
Todos.syncQuiet();
TodoApp.trigger('todosUpdated', Todos.getData());
}
};
TodoApp
.bind('fetchTodos', Todos.fetchTodos)
.bind('saveTodo', Todos.save)
.bind('doneEditingTodo', Todos.edit)
.bind('toggleTodoCompleted', Todos.toggleCompleted)
.bind('removeTodo', Todos.remove)
.bind('toggleAllTodosCompleted', Todos.toggleAllCompleted)
.bind('removeCompletedTodos', Todos.removeCompleted);
})();
labs/architecture-examples/sammyjs/js/routes/active.js 0 → 100644
View file @ 26bd236c
/*global TodoApp */
(function () {
'use strict';
TodoApp.route('get', '#/active', function () {
TodoApp.trigger('fetchTodos', 'active');
});
})();
labs/architecture-examples/sammyjs/js/routes/completed.js 0 → 100644
View file @ 26bd236c
/*global TodoApp */
(function () {
'use strict';
TodoApp.route('get', '#/completed', function () {
TodoApp.trigger('fetchTodos', 'completed');
});
})();
labs/architecture-examples/sammyjs/js/routes/home.js 0 → 100644
View file @ 26bd236c
/*global TodoApp */
(function () {
'use strict';
TodoApp.route('get', '#/', function () {
TodoApp.trigger('fetchTodos');
});
})();
labs/architecture-examples/sammyjs/js/views/TodoItem.js 0 → 100644
View file @ 26bd236c
/*global jQuery, TodoApp */
(function ($) {
'use strict';
var TodoItem = {
renderAllTodos: function (e, data) {
this.renderEach('templates/todoItem.template', data.visible).then(function () {
$('#todo-list').html(this.content);
TodoApp.trigger('todoItemsRendered', data);
});
},
toggleCompleteClass: function (e, data) {
if (data.completed) {
$('[data-id="' + data.id + '"]').addClass('completed');
} else {
$('[data-id="' + data.id + '"]').removeClass('completed');
}
},
editingTodo: function (e, data) {
var todo = $('[data-id="' + data.id + '"]');
todo.addClass('editing');
todo.find('.edit').focus().val(todo.find('.edit').val());
},
doneEditingTodo: function (e, data) {
var todo = $('[data-id="' + data.id + '"]');
todo.removeClass('editing');
if (data.name) {
todo.find('label').text(data.name);
todo.find('.edit').val(data.name);
}
}
};
TodoApp.bind('todosUpdated', TodoItem.renderAllTodos);
TodoApp.bind('toggleAllTodosCompleted', TodoItem.toggleCompleteClass);
TodoApp.bind('toggledTodoCompleted', TodoItem.toggleCompleteClass);
TodoApp.bind('editingTodo', TodoItem.editingTodo);
TodoApp.bind('cancelEditingTodo', TodoItem.doneEditingTodo);
TodoApp.bind('doneEditingTodo', TodoItem.doneEditingTodo);
})(jQuery);
labs/architecture-examples/sammyjs/js/views/TodoList.js 0 → 100644
View file @ 26bd236c
/*global jQuery, TodoApp */
(function ($) {
'use strict';
var TodoList = {
elem: {
todoapp: '#todoapp',
main: '#main',
footer: '#footer'
},
render: function () {
TodoList.elem.todoapp = $(TodoList.elem.todoapp);
TodoList.elem.main = $(TodoList.elem.main);
TodoList.elem.footer = $(TodoList.elem.footer);
this.render('templates/todos.template').then(function () {
TodoList.elem.main.html(this.content);
TodoApp.trigger('todoListRendered');
});
},
refreshStats: function (e, data) {
var todoData = {
itemsLeft: data.active.length || 0,
completedCount: data.completed.length || 0,
flag: data.flag || ''
};
// Toggles the `#toggle-all` checkbox if all items are completed.
$('#toggle-all').prop('checked', data.completed.length === data.all.length ? 'checked' : false);
// Hides '#main' and '#footer' unless there are todoItems.
TodoList.elem.main.toggle(data.all.length > 0);
TodoList.elem.footer.toggle(data.all.length > 0);
this.render('templates/footer.template', todoData).then(function () {
TodoList.elem.footer.html(this.content);
});
}
};
TodoApp.bind('launch', TodoList.render);
TodoApp.bind('todoItemsRendered', TodoList.refreshStats);
})(jQuery);
labs/architecture-examples/sammyjs/readme.md
View file @ 26bd236c
# Sammy.js TodoMVC app
[Brandon Aaron](http://brandonaaron.net) wrote the original version of this application, which was then refactored and rewritten by Addy Osmani.
\ No newline at end of file
[Brandon Aaron](http://brandonaaron.net) wrote the original version of this application, which was then refactored and rewritten by [Addy Osmani](https://github.com/addyosmani), followed by a complete rewrite and upgrade by [Stephen Sawchuk](https://github.com/stephenplusplus).
labs/architecture-examples/sammyjs/templates/404.template deleted 100644 → 0
View file @ ff17a59f
There was an error.
\ No newline at end of file
labs/architecture-examples/sammyjs/templates/footer.template 0 → 100644
View file @ 26bd236c
<span id="todo-count">
<strong><%= itemsLeft %></strong> <%= itemsLeft == 0 || itemsLeft > 1 ? 'items' : 'item' %> left
</span>
<ul id="filters">
<li>
<a <%= flag === '' ? 'class=selected' : '' %> href="#/">All</a>
</li>
<li>
<a <%= flag === 'active' ? 'class=selected' : '' %> href="#/active">Active</a>
</li>
<li>
<a <%= flag === 'completed' ? 'class=selected' : '' %> href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" <%= completedCount === 0 ? 'class=hidden' : '' %>>Clear completed (<%= completedCount %>)</button>
labs/architecture-examples/sammyjs/templates/todo.template deleted 100644 → 0
View file @ ff17a59f
<li data-type="todo" data-id="<%= id %>" class="<%= done ? 'done' : '' %>">
<div class="todo">
<div class="display">
<input class="check" type="checkbox" <%= done ? 'checked' : '' %>/>
<span class="trashcan" data-type="todo" data-id="<%= id %>"></span>
<span contenteditable="true" data-type="todo" data-id="<%= id %>" class="todo-item"><%= name %></span>
</div>
</div>
</li>
labs/architecture-examples/sammyjs/templates/todoItem.template 0 → 100644
View file @ 26bd236c
<li data-id="<%= id %>" class="<%= completed ? 'completed' : '' %>">
<div class="view">
<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
<label><%= name %></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%= name %>">
</li>
labs/architecture-examples/sammyjs/templates/todolist.template deleted 100644 → 0
View file @ ff17a59f
<h2 data-type="list" data-id="<%= list.id %>"></h2>
<% $.each(todos, function(index, todo) { %>
<li data-type="todo" data-id="<%= todo.id %>" class="<%= todo.done ? 'done' : '' %>">
<div class="todo">
<div class="display">
<input class="check" type="checkbox" <%= todo.done ? 'checked' : '' %>/>
<span class="trashcan" data-type="todo" data-id="<%= todo.id %>"></span><span contenteditable="true" data-type="todo" data-id="<%= todo.id %>" class="todo-item"><%= todo.name %></span>
</div>
</div>
</li>
<% }); %>
labs/architecture-examples/sammyjs/templates/todos.template 0 → 100644
View file @ 26bd236c
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
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