Permalink
Browse files

first commit

  • Loading branch information...
maccman committed Mar 18, 2011
0 parents commit 6ed3cb24d8b59a3bcc9ccbec7e41f4a8b6e5f987
Showing with 9,581 additions and 0 deletions.
  1. +73 −0 app/application.js
  2. +22 −0 app/models/task.js
  3. +153 −0 css/application.css
  4. BIN images/destroy.png
  5. +47 −0 index.html
  6. +8,316 −0 lib/jquery.js
  7. +68 −0 lib/jquery.link.js
  8. +490 −0 lib/jquery.tmpl.js
  9. +394 −0 lib/spine.js
  10. +18 −0 lib/spine.model.local.js
@@ -0,0 +1,73 @@
+(function($, Spine){
+
+ var con = new Spine.Controller("#tasks");
+
+ con.events = {
+ "change .item input[type=checkbox]": "toggle",
+ "click .item .destroy": "destroy",
+ "dblclick .item .view": "edit",
+ "keypress .item input[type=text]": "closeEdit",
+
+ "submit form": "create",
+ "click .clear": "clear",
+ "render .items": "render"
+ };
+
+ // Show tasks
+ con.load(function(){
+ this.tasks = this.el.find(".items");
+ this.count = this.el.find(".countVal");
+ this.input = this.el.find("form input");
+
+ this.tasks.link(Task, function(){
+ var elements = $("#taskTemplate").tmpl(Task.all());
+
+ $(this).empty();
+ $(this).append(elements);
+ });
+ });
+
+ con.extend({
+ toggle: function(e){
+ var task = $(e.target).item();
+ task.done = !task.done;
+ task.save();
+ },
+
+ destroy: function(e){
+ $(e.target).item().destroy();
+ },
+
+ edit: function(e){
+ var item = $(e.target).parents(".item");
+ item.addClass("editing");
+ item.find("input").focus();
+ },
+
+ closeEdit: function(e){
+ if ( e.keyCode != 13 ) return;
+ $(e.target).parents("li").removeClass("editing");
+ $(e.target).item().updateAttributes({name: $(e.target).val()});
+ },
+
+ create: function(e){
+ Task.create({name: this.input.val()});
+ this.input.val("");
+ return false;
+ },
+
+ clear: function(){
+ Task.destroyDone();
+ },
+
+ render: function(){
+ this.count.text(Task.active().length);
+ }
+ });
+
+ // Initial render
+ con.load(function(){
+ this.tasks.render();
+ });
+
+})(jQuery, Spine);
@@ -0,0 +1,22 @@
+// Create the Task model.
+var Task = Spine.Model.setup("Task", ["name", "done"]);
+
+// Persist model between page reloads.
+Task.extend(Spine.Model.Local);
+
+Task.extend({
+ // Return all active tasks.
+ active: function(){
+ return(this.select(function(item){ return !item.done; }));
+ },
+
+ // Return all done tasks.
+ done: function(){
+ return(this.select(function(item){ return !!item.done; }));
+ },
+
+ // Clear all done tasks.
+ destroyDone: function(){
+ this.done().forEach(function(rec){ rec.destroy() });
+ }
+});
@@ -0,0 +1,153 @@
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: "Helvetica Neue", helvetica, arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.4em;
+ background: #eeeeee;
+ color: #333333;
+}
+
+#views {
+ width: 520px;
+ margin: 0 auto 40px auto;
+ background: white;
+
+ -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;
+}
+
+#tasks {
+ padding: 20px;
+}
+
+#tasks h1 {
+ font-size: 36px;
+ font-weight: bold;
+ text-align: center;
+ padding: 0 0 10px 0;
+}
+
+#tasks input[type="text"] {
+ width: 466px;
+ font-size: 24px;
+ font-family: inherit;
+ line-height: 1.4em;
+ border: 0;
+ outline: none;
+ padding: 6px;
+ 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;
+}
+
+#tasks input::-webkit-input-placeholder {
+ font-style: italic;
+}
+
+#tasks .items {
+ margin: 10px 0;
+}
+
+#tasks .item {
+ padding: 15px 20px 15px 0;
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #cccccc;
+}
+
+#tasks .item.done span {
+ color: #777777;
+ text-decoration: line-through;
+}
+
+#tasks .item .destroy {
+ position: absolute;
+ right: 10px;
+ top: 16px;
+ display: none;
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ background: url(../images/destroy.png) no-repeat center center;
+}
+
+#tasks .item:hover .destroy {
+ display: block;
+}
+
+#tasks .item .edit { display: none; }
+#tasks .item.editing .edit { display: block; }
+#tasks .item.editing .view { display: none; }
+
+#tasks footer {
+ display: block;
+ margin: 20px -20px -20px -20px;
+ overflow: hidden;
+
+ color: #555555;
+ background: #f4fce8;
+ border-top: 1px solid #ededed;
+ padding: 0 20px;
+ line-height: 36px;
+
+ -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;
+}
+
+#tasks .clear {
+ display: block;
+ float: right;
+ line-height: 20px;
+ text-decoration: none;
+
+ background: rgba(0, 0, 0, 0.1);
+ color: #555555;
+ font-size: 11px;
+ margin-top: 8px;
+ padding: 0 10px 1px;
+
+ -moz-border-radius: 12px;
+ -webkit-border-radius: 12px;
+ -o-border-radius: 12px;
+ border-radius: 12px;
+
+ -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;
+
+ cursor: pointer;
+}
+
+#tasks .clear:hover {
+ background: rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+ -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+ box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+}
+
+#tasks .clear:active {
+ position: relative;
+ top: 1px;
+}
+
+#tasks .count span {
+ font-weight: bold;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
+
+ <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/jquery.link.js" type="text/javascript" charset="utf-8"></script>
+
+ <script src="lib/spine.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/spine.model.local.js" type="text/javascript" charset="utf-8"></script>
+
+ <script src="app/models/task.js" type="text/javascript" charset="utf-8"></script>
+ <script src="app/application.js" type="text/javascript" charset="utf-8"></script>
+
+ <script type="text/x-jquery-tmpl" id="taskTemplate">
+ <div class="item {{if done}}done{{/if}}">
+ <div class="view">
+ <input type="checkbox" {{if done}}checked="checked"{{/if}}>
+ <span>${name}</span> <a class="destroy"></a>
+ </div>
+
+ <div class="edit">
+ <input type="text" value="${name}">
+ </div>
+ </div>
+ </script>
+</head>
+<body>
+ <div id="views">
+ <div id="tasks">
+ <h1>Todos</h1>
+
+ <form>
+ <input type="text" placeholder="What needs to be done?">
+ </form>
+
+ <div class="items"></div>
+
+ <footer>
+ <a class="clear">Clear completed</a>
+ <div class="count"><span class="countVal"></span> left</div>
+ </footer>
+ </div>
+ </div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 6ed3cb2

Please sign in to comment.