Skip to content

T
todomvc
Commit 7422d03a authored by addyosmani's avatar addyosmani
Browse files
Options

updating index with sproutcore example

parents 692da506 aa2b2691
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 211 additions and 24259 deletions
index.html
View file @ 7422d03a
...@@ -96,6 +96,7 @@ changes to code. At present, JavaScriptMVC is the only framework included which ...@@ -96,6 +96,7 @@ changes to code. At present, JavaScriptMVC is the only framework included which
<li><a href="todo-example/sammyjs/index.html">Sammy.js</a></li> <li><a href="todo-example/sammyjs/index.html">Sammy.js</a></li>
<li><a href="todo-example/sproutcore/index.html">SproutCore 2.0</a></li> <li><a href="todo-example/sproutcore/index.html">SproutCore 2.0</a></li>
<li><a href="todo-example/knockoutjs/index.html">KnockoutJS (MVVM)</a></li> <li><a href="todo-example/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
<li><a href="todo-example/sproutcore/index.html">SproutCore</a></li>
</ul> </section> <!-- /.widget --> </ul> </section> <!-- /.widget -->
<section class="widget"> <h4 class="widgettitle">GitHub</h4> <ul> <li><a <section class="widget"> <h4 class="widgettitle">GitHub</h4> <ul> <li><a
...@@ -103,6 +104,7 @@ href="https://github.com/addyosmani/todomvc/">View repository</a></li> </ul> ...@@ -103,6 +104,7 @@ href="https://github.com/addyosmani/todomvc/">View repository</a></li> </ul>
</section> <!-- /.widget --> </section> <!-- /.widget -->
<<<<<<< HEAD
<section class="widget clearfix"> <section class="widget clearfix">
<h4 class="widgettitle">Contributors</h4> <h4 class="widgettitle">Contributors</h4>
<ul> <ul>
...@@ -116,6 +118,16 @@ href="https://github.com/addyosmani/todomvc/">View repository</a></li> </ul> ...@@ -116,6 +118,16 @@ href="https://github.com/addyosmani/todomvc/">View repository</a></li> </ul>
<li><a href="">Ashish Sharma</a> <li><a href="">Ashish Sharma</a>
<li><a href="http://twitter.com/tomdale">Tom Dale</a> <li><a href="http://twitter.com/tomdale">Tom Dale</a>
</li> </li>
=======
<section class="widget clearfix"> <h4 class="widgettitle">Contributors</h4> <ul> <li><a
href="http://twitter.com/addyosmani">Addy Osmani</a></li> <li><a
href="http://twitter.com/justinbmeyer">Justin Meyer</a></li> <li><a
href="http://twitter.com/jeromegn">Jérôme Gravel-Niquet</a></li> <li><a
href="http://twitter.com/macmann">Alex MacCaw</a></li>
<li><a href="">Ashish Sharma</a></li>
<li><a href="http://sproutcore.com">Tom Dale, Yehuda Katz</a></li>
>>>>>>> aa2b269194fee9c46c1f3689c46cbe94e6635776
</ul> </ul>
</section> <!-- /.widget --> </section> <!-- /.widget -->
......
todo-example/backbone/index.html
View file @ 7422d03a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>Backbone Demo: Todos</title> <title>Backbone.js</title>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/> <link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/>
<script src="js/json2.js"></script> <script src="js/json2.js"></script>
<script src="js/jquery-1.5.js"></script> <script src="js/jquery-1.5.js"></script>
......
todo-example/javascriptmvc/todo/todo/production.css
View file @ 7422d03a
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0}body{font-family:"Helvetica Neue",helvetica,arial,sans-serif;font-size:14px;line-height:1.4em;background:#eee;color:#333;padding:0;margin:0}#todos{-moz-box-shadow:rgba(0,0,0,0.2) 0 2px 6px 0;-webkit-box-shadow:rgba(0,0,0,0.2) 0 2px 6px 0;-o-box-shadow:rgba(0,0,0,0.2) 0 2px 6px 0;box-shadow:rgba(0,0,0,0.2) 0 2px 6px 0;-moz-border-radius:0 0 5px 5px;-o-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-attachment:scroll;margin:0 auto 40px;width:520px;background-color:white}h1{font-size:36px;font-weight:bold;line-height:1;padding:30px 0 10px;text-align:center}#todos .create{border:1px solid #999;box-shadow:0 1px 2px 0 rgba(0,0,0,0.2) inset;font-family:inherit;font-size:24px;line-height:1.4em;outline:medium none;padding:6px;width:466px}.content{padding:20px 20px 0}#instructions{color:#777;margin:10px auto;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.8);width:520px}#instructions li{list-style-type:none}.create,input.text{font-size:1.4em;width:100%}ul{margin:0;padding:0}.todo{list-style:none;border-bottom:1px solid #ccc;font-size:24px;padding:15px 20px 15px 0;position:relative;margin-left:15px}.todo:hover .todestroy{display:block}#todo-stats{background:none repeat scroll 0 0 #f4fce8;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:1px solid #ededed;color:#555;line-height:36px;margin-top:20px;padding:0 20px}.todo-count .number{color:#555;font-weight:bold}#list{margin-top:20px}.todestroy{background:url(destroy.png) no-repeat scroll center center transparent;cursor:pointer;height:20px;position:absolute;right:0;top:16px;width:20px;display:none;margin-right:20px}.todo-clear{float:right}.todo-clear a{display:block;line-height:20px;text-decoration:none;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-ms-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;background:rgba(0,0,0,0.1);color:#555;font-size:11px;margin-top:8px;padding:0 10px 1px;-moz-box-shadow:rgba(0,0,0,0.2) 0 -1px 0 0;-webkit-box-shadow:rgba(0,0,0,0.2) 0 -1px 0 0;-o-box-shadow:rgba(0,0,0,0.2) 0 -1px 0 0;box-shadow:rgba(0,0,0,0.2) 0 -1px 0 0}#credits{color:#999;margin:30px auto;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.8);width:520px}#credits a{color:#888} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
\ No newline at end of file blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
}
body {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 14px;
line-height: 1.4em;
background: #eeeeee;
color: #333333;
padding: 0px;
margin: 0px;
}
#todos {
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-attachment: scroll;
margin: 0 auto 40px;
width: 520px;
background-color: white;
}
h1{
font-size: 36px;
font-weight: bold;
line-height: 1;
padding: 30px 0 10px;
text-align: center;
}
#todos .create {
border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; font-family: inherit;
font-size: 24px;
line-height: 1.4em;
outline: medium none;
padding: 6px;
width: 466px;
}
.content{
padding: 20px 20px 0;
}
#instructions {
color: #777777;
margin: 10px auto;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
width: 520px;
}
#instructions li{
list-style-type:none;
}
.create, input.text {
font-size: 1.4em;
width: 100%;
}
ul {
margin: 0px;padding: 0px;
}
.todo {
list-style: none;
border-bottom: 1px solid #CCCCCC;
font-size: 24px;
padding: 15px 20px 15px 0;
position: relative;
margin-left: 15px;
}
.todo:hover .todestroy{
display:block;
}
#todo-stats {
background: none repeat scroll 0 0 #F4FCE8;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 1px solid #EDEDED;
color: #555555;
line-height: 36px;
margin-top: 20px;
padding: 0 20px;
}
.todo-count .number {
color: #555555;
font-weight: bold;
}
#list {
margin-top: 20px;
}
.todestroy {
background: url("destroy.png") no-repeat scroll center center transparent;
cursor: pointer;
height: 20px;
position: absolute;
right: 0;
top: 16px;
width: 20px;
display:none;
margin-right: 20px;
}
.todo-clear {
float: right;
}
.todo-clear a {
display: block;
line-height: 20px;
text-decoration: none;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
padding: 0 10px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
#credits {
color: #999999;
margin: 30px auto;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
width: 520px;
}
#credits a {
color: #888888;
}
\ No newline at end of file
todo-example/javascriptmvc/todo/todo/todo.css
View file @ 7422d03a
...@@ -45,8 +45,10 @@ h1{ ...@@ -45,8 +45,10 @@ h1{
#todos .create { #todos .create {
border: 1px solid #999999; border: 1px solid #999999;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
font-family: inherit; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; font-family: inherit;
font-size: 24px; font-size: 24px;
line-height: 1.4em; line-height: 1.4em;
outline: medium none; outline: medium none;
......
todo-example/javascriptmvc/todo/todo/todo.html
View file @ 7422d03a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> <html lang="en">
<head> <head>
<title>todo</title> <title>JavaScriptMVC</title>
</head> </head>
<body> <body>
<div id='todos'> <div id='todos'>
......
todo-example/knockoutjs/index.html
View file @ 7422d03a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Knockout Demo: Todos</title> <title>Knockout.js</title>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css" /> <link href="css/todos.css" media="all" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.js" type="text/javascript"></script> <script src="js/jquery-1.6.1.js" type="text/javascript"></script>
<script src="js/jquery.tmpl.js" type="text/javascript"></script> <script src="js/jquery.tmpl.js" type="text/javascript"></script>
...@@ -105,11 +105,11 @@ ...@@ -105,11 +105,11 @@
}; };
viewModel.remaining = ko.dependentObservable(function () { viewModel.remaining = ko.dependentObservable(function () {
return this.todos().filter(function (el) { return this.todos().filter(function (el) {
return el.done() === false; return el.done() === false;
}); });
}, viewModel), }, viewModel),
viewModel.done = ko.dependentObservable(function () { viewModel.done = ko.dependentObservable(function () {
return this.todos().filter(function (el) { return this.todos().filter(function (el) {
......
todo-example/sammyjs/app.js
View file @ 7422d03a
...@@ -46,10 +46,7 @@ ...@@ -46,10 +46,7 @@
var todoContent = $(this).val(); var todoContent = $(this).val();
var todo = Todos.create({ name: todoContent, done: false, listId: parseInt($('h2').attr('data-id'), 10) }); var todo = Todos.create({ name: todoContent, done: false, listId: parseInt($('h2').attr('data-id'), 10) });
context.partial('templates/_todo.template', todo, function(html) { context.partial('templates/_todo.template', todo, function(html) {
//$(html).insertAfter('#todo-list li:last'); $('#todo-list').append(html);
var q = $(html);
console.log(q);
$('#todo-list').append(q);
}); });
$(this).val(''); $(this).val('');
...@@ -58,12 +55,7 @@ ...@@ -58,12 +55,7 @@
}); });
/*
$('#lists')
.delegate('dd[data-id]', 'click', function() {
context.redirect('#/list/'+$(this).attr('data-id'));
app.trigger('updateList');
});*/
$('.trashcan') $('.trashcan')
.live('click', function() { .live('click', function() {
...@@ -84,14 +76,7 @@ ...@@ -84,14 +76,7 @@
app.trigger('mark' + (isDone ? 'Done' : 'Undone'), { id: $li.attr('data-id') }); app.trigger('mark' + (isDone ? 'Done' : 'Undone'), { id: $li.attr('data-id') });
}); });
/*
$('.checkbox')
.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]') $('[contenteditable]')
.live('focus', function() { .live('focus', function() {
...@@ -145,7 +130,6 @@ ...@@ -145,7 +130,6 @@
this.redirect(lastViewedOrFirstList); this.redirect(lastViewedOrFirstList);
} }
//app.trigger('updateLists');
}); });
/*save the route as the lastviewed item*/ /*save the route as the lastviewed item*/
...@@ -156,9 +140,7 @@ ...@@ -156,9 +140,7 @@
this.bind('save', function(e, data) { this.bind('save', function(e, data) {
var model = data.type == 'todo' ? Todos : Lists; var model = data.type == 'todo' ? Todos : Lists;
model.update(data.id, { name: data.name }); model.update(data.id, { name: data.name });
//if (data.type == 'list') {
//app.trigger('updateLists');
// }
}); });
/*marking the selected item as done*/ /*marking the selected item as done*/
...@@ -193,25 +175,12 @@ ...@@ -193,25 +175,12 @@
this.redirect('#/list/'+listId); this.redirect('#/list/'+listId);
} }
//app.trigger('updateLists');
} else { } else {
// delete the todo from the view // delete the todo from the view
$('li[data-id=' + data.id + ']').remove(); $('li[data-id=' + data.id + ']').remove();
} }
// }
}); });
/*
this.bind('updateLists', function(e, data) {
var selected = parseInt(location.hash.substr(location.hash.lastIndexOf('/')+1), 10);
this.partial('templates/_lists.template', {
lists: Lists.getAll(),
selected: selected
}, function(html) {
$('#lists').html(html);
});
});*/
}); });
......
todo-example/sammyjs/index.html
View file @ 7422d03a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Todo App</title> <title>Sammy.js</title>
<link rel="stylesheet" href="app.css" type="text/css" media="screen" charset="utf-8"> <link rel="stylesheet" href="app.css" type="text/css" media="screen" charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
......
todo-example/sammyjs/templates/404.template
View file @ 7422d03a
<h2>What?!</h2> There was an error.
<p>Try clicking on one of your lists to the right.</p> \ No newline at end of file
\ No newline at end of file
todo-example/spine/app/application.js
View file @ 7422d03a
...@@ -103,7 +103,7 @@ jQuery(function($){ ...@@ -103,7 +103,7 @@ jQuery(function($){
renderCount: function(){ renderCount: function(){
var active = Task.active().length; var active = Task.active().length;
this.count.text(active); this.count.text(active + ' left');
var inactive = Task.done().length; var inactive = Task.done().length;
this.clear[inactive ? "show" : "hide"](); this.clear[inactive ? "show" : "hide"]();
......
todo-example/spine/index.html
View file @ 7422d03a
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Spine.js</title>
<link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
<script src="lib/json2.js" type="text/javascript" charset="utf-8"></script> <script src="lib/json2.js" type="text/javascript" charset="utf-8"></script>
...@@ -39,7 +40,7 @@ ...@@ -39,7 +40,7 @@
<footer> <footer>
<a class="clear">Clear completed</a> <a class="clear">Clear completed</a>
<div class="count"><span class="countVal"></span> left</div> <div class="count"><span class="countVal"></span></div>
</footer> </footer>
</div> </div>
</div> </div>
......
todo-example/sproutcore/index.html
View file @ 7422d03a
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title> <title>SproutCore</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
action="clearCompletedTodos"}} action="clearCompletedTodos"}}
Clear Completed Clear Completed
{{/view}} {{/view}}
{{remainingString}} remaining {{remainingString}} left
{{/view}} {{/view}}
</script> </script>
...@@ -68,11 +68,10 @@ ...@@ -68,11 +68,10 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script> <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
<script src="js/libs/sproutcore-2.0.a.2.min.js"></script> <script src="js/libs/sproutcore-2.0.a.3.min.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>
</html> </html>
todo-example/sproutcore/js/libs/sproutcore-2.0.a.1.js deleted 100755 → 0
View file @ 692da506
This diff is collapsed.
todo-example/sproutcore/js/libs/sproutcore-2.0.a.2.js deleted 100644 → 0
View file @ 692da506
This diff is collapsed.
todo-example/sproutcore/js/libs/sproutcore-2.0.a.3.min.js 0 → 100644
View file @ 7422d03a
This diff is collapsed.
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