Commit 7422d03a authored by addyosmani's avatar addyosmani

updating index with sproutcore example

parents 692da506 aa2b2691
...@@ -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 -->
......
...@@ -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>
......
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
...@@ -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;
......
...@@ -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'>
......
<!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>
......
...@@ -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,24 +175,11 @@ ...@@ -193,24 +175,11 @@
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);
}); });
});*/
}); });
......
...@@ -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>
......
<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
...@@ -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"]();
......
<!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>
......
...@@ -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>
...@@ -69,10 +69,9 @@ ...@@ -69,10 +69,9 @@
<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>
This diff is collapsed.
This diff is collapsed.
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