Permalink
Browse files

Initial port to TodoMVC and DoneJS

  • Loading branch information...
daffl committed May 2, 2012
1 parent ee7eb33 commit 29521abfa0f95e19962d1fdee941d73cb9a20608
Showing with 450 additions and 392 deletions.
  1. +1 −0 .gitignore
  2. +3 −3 .gitmodules
  3. +1 −0 can
  4. +0 −1 jquery
  5. +0 −52 todo/index.html
  6. +97 −0 todo/model.js
  7. +0 −1 todo/production.css
  8. +0 −7 todo/production.js
  9. +208 −0 todo/styles/base.css
  10. +5 −0 todo/styles/todo.css
  11. +0 −43 todo/todo.css
  12. +23 −49 todo/todo.html
  13. +87 −236 todo/todo.js
  14. +25 −0 todo/views/todo.ejs
View
@@ -0,0 +1 @@
+.idea
View
@@ -1,9 +1,9 @@
-[submodule "jquery"]
- path = jquery
- url = git://github.com/jupiterjs/jquerymx.git
[submodule "funcunit"]
path = funcunit
url = git://github.com/jupiterjs/funcunit.git
[submodule "steal"]
path = steal
url = git://github.com/jupiterjs/steal.git
+[submodule "can"]
+ path = can
+ url = git@github.com:jupiterjs/canjs.git
1 can
Submodule can added at 325950
1 jquery
Submodule jquery deleted from 9ce150
View
@@ -1,52 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-<html lang="en">
- <head>
- <link rel="stylesheet" type='text/css' href='production.css' />
- <title>todo</title>
- </head>
- <body>
- <div id='todos'>
- <h1>Todos</h1>
- <input type='text' class='create'/>
- <ul id='list'></ul>
- <div id='todo-stats'>
-
- </div>
- </div>
-
- <script type='text/ejs' id='todosEJS'>
- <% for(var i =0; i < this.length ; i++){ %>
- <li <%= this[i]%>>
- <%== $.View('todoEJS',this[i] ) %>
- </li>
- <% } %>
- </script>
- <script type='text/ejs' id='todoEJS'>
- <input type='checkbox' name='complete'
- <%= this.complete ? "checked" : "" %>>
- <span class=''><%= (this.text || "empty todo ...")%></span>
- <span class='destroy'></span>
- </script>
- <script type='text/ejs' id='statsEJS'>
- <% if (total) { %>
- <span class="todo-count">
- <span class="number"><%= remaining %></span>
- <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
- </span>
- <% } %>
- <% if (completed) { %>
- <span class="todo-clear">
- <a href="#">
- Clear <span class="number-done"><%= completed %></span>
- completed <span class="word-done"><%= completed == 1 ? 'item' : 'items' %></span>
- </a>
- </span>
- <% } %>
-
- </script>
- <script type='text/javascript'
- src='../steal/steal.production.js?todo'>
- </script>
- </body>
-</html>
View
@@ -0,0 +1,97 @@
+steal('can/model').then(function() {
+
+ // Basic Todo entry model
+ // { text: 'todo', complete: false }
+ can.Model('Todo', {
+
+ // Implement local storage handling
+ localStore: function(cb){
+ var name = 'todos-canjs-jquery',
+ data = JSON.parse( window.localStorage[name] || (window.localStorage[name] = '[]') ),
+ res = cb.call(this, data);
+ if(res !== false){
+ can.each(data, function(i, todo) {
+ delete todo.editing;
+ });
+ window.localStorage[name] = JSON.stringify(data);
+ }
+ },
+
+ findAll: function(params){
+ var def = new can.Deferred();
+ this.localStore(function(todos){
+ var instances = [],
+ self = this;
+ can.each(todos, function(i, todo) {
+ instances.push(new self(todo));
+ });
+ def.resolve({data: instances});
+ })
+ return def;
+ },
+
+ destroy: function(id){
+ var def = new can.Deferred();
+ this.localStore(function(todos){
+ for (var i = 0; i < todos.length; i++) {
+ if (todos[i].id === id) {
+ todos.splice(i, 1);
+ break;
+ }
+ }
+ def.resolve({});
+ });
+ return def
+ },
+
+ create: function(attrs){
+ var def = new can.Deferred();
+ this.localStore(function(todos){
+ attrs.id = attrs.id || parseInt(100000 *Math.random());
+ todos.push(attrs);
+ });
+ def.resolve({id : attrs.id});
+ return def
+ },
+
+ update: function(id, attrs){
+ var def = new can.Deferred();
+ this.localStore(function(todos){
+ for (var i = 0; i < todos.length; i++) {
+ if (todos[i].id === id) {
+ var todo = todos[i];
+ break;
+ }
+ }
+ can.extend(todo, attrs);
+ });
+ def.resolve({});
+ return def
+ }
+
+ },{});
+
+ // List for Todos
+ can.Model.List('Todo.List', {
+
+ completed: function() {
+ // Ensure this triggers on length change
+ this.attr('length');
+
+ var completed = 0;
+ this.each(function(todo, i) {
+ completed += todo.attr('complete') ? 1 : 0
+ });
+ return completed;
+ },
+
+ remaining: function() {
+ return this.attr('length') - this.completed();
+ },
+
+ allComplete: function() {
+ return this.attr('length') === this.completed();
+ }
+ });
+
+});
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,208 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ background: #eeeeee;
+ color: #333333;
+ width: 520px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+}
+
+#todoapp {
+ background: #fff;
+ padding: 20px;
+ margin-bottom: 40px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+ -ms-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;
+ -webkit-border-radius: 0 0 5px 5px;
+ -moz-border-radius: 0 0 5px 5px;
+ -ms-border-radius: 0 0 5px 5px;
+ -o-border-radius: 0 0 5px 5px;
+ border-radius: 0 0 5px 5px;
+}
+
+#todoapp h1 {
+ font-size: 36px;
+ font-weight: bold;
+ text-align: center;
+ padding: 0 0 10px 0;
+}
+
+#todoapp 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;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -ms-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;
+}
+
+#todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+}
+
+#main {
+ display: none;
+}
+
+#todo-list {
+ margin: 10px 0;
+ padding: 0;
+ list-style: none;
+}
+
+#todo-list li {
+ padding: 18px 20px 18px 0;
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #cccccc;
+}
+
+#todo-list li:last-child {
+ border-bottom: none;
+}
+
+#todo-list li.done label {
+ color: #777777;
+ text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 20px;
+ right: 10px;
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
+}
+
+#todo-list li:hover .destroy {
+ display: block;
+}
+
+#todo-list li.editing {
+ border-bottom: none;
+ margin-top: -1px;
+ padding: 0;
+}
+
+#todo-list li.editing:last-child {
+ margin-bottom: -1px;
+}
+
+#todo-list li.editing .edit {
+ display: block;
+ width: 444px;
+ padding: 13px 15px 14px 20px;
+ margin: 0;
+}
+
+#todo-list li.editing .view {
+ display: none;
+}
+
+#todo-list li .view label {
+ word-break: break-word;
+}
+
+#todo-list li .edit {
+ display: none;
+}
+
+#todoapp footer {
+ display: none;
+ margin: 0 -20px -20px -20px;
+ overflow: hidden;
+ color: #555555;
+ background: #f4fce8;
+ border-top: 1px solid #ededed;
+ padding: 0 20px;
+ line-height: 37px;
+ -webkit-border-radius: 0 0 5px 5px;
+ -moz-border-radius: 0 0 5px 5px;
+ -ms-border-radius: 0 0 5px 5px;
+ -o-border-radius: 0 0 5px 5px;
+ border-radius: 0 0 5px 5px;
+}
+
+#clear-completed {
+ display: none;
+ float: right;
+ line-height: 20px;
+ text-decoration: none;
+ background: rgba(0, 0, 0, 0.1);
+ color: #555555;
+ font-size: 11px;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ padding: 0 10px 1px;
+ cursor: pointer;
+ -webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ -ms-border-radius: 12px;
+ -o-border-radius: 12px;
+ border-radius: 12px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+ -ms-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;
+}
+
+#clear-completed:hover {
+ background: rgba(0, 0, 0, 0.15);
+ -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+ -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+ -ms-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;
+}
+
+#clear-completed:active {
+ position: relative;
+ top: 1px;
+}
+
+#todo-count span {
+ font-weight: bold;
+}
+
+#instructions {
+ margin: 10px auto;
+ color: #777777;
+ text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+ text-align: center;
+}
+
+#instructions a {
+ color: #336699;
+}
+
+#credits {
+ margin: 30px auto;
+ color: #999;
+ text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+ text-align: center;
+}
+
+#credits a {
+ color: #888;
+}
View
@@ -0,0 +1,5 @@
+#main.show,
+#stats.show,
+#stats.show #clear-completed {
+ display: block;
+}
Oops, something went wrong.

0 comments on commit 29521ab

Please sign in to comment.