Permalink
Browse files

Merge branch 'master' of git://github.com/addyosmani/todomvc

  • Loading branch information...
2 parents 47df8a5 + 557228c commit 726803b839b75b347e747236b3365eebee1f9090 @jsoverson jsoverson committed Sep 5, 2012
Showing with 485 additions and 33 deletions.
  1. +7 −0 LICENSE.md
  2. +3 −2 architecture-examples/backbone/js/routers/router.js
  3. +13 −15 architecture-examples/backbone/js/views/app.js
  4. +14 −0 architecture-examples/backbone/js/views/todos.js
  5. +4 −0 assets/base.css
  6. +3 −2 dependency-examples/backbone_require/js/routers/router.js
  7. +12 −13 dependency-examples/backbone_require/js/views/app.js
  8. +14 −0 dependency-examples/backbone_require/js/views/todos.js
  9. +3 −0 index.html
  10. +5 −0 labs/architecture-examples/derbyjs/.gitignore
  11. +7 −0 labs/architecture-examples/derbyjs/Makefile
  12. +23 −0 labs/architecture-examples/derbyjs/README.md
  13. +15 −0 labs/architecture-examples/derbyjs/package.json
  14. +1 −0 labs/architecture-examples/derbyjs/public/base.css
  15. +1 −0 labs/architecture-examples/derbyjs/public/bg.png
  16. +1 −0 labs/architecture-examples/derbyjs/public/ie.js
  17. +1 −0 labs/architecture-examples/derbyjs/server.js
  18. +41 −0 labs/architecture-examples/derbyjs/src/server/index.coffee
  19. +3 −0 labs/architecture-examples/derbyjs/src/server/queries.coffee
  20. +18 −0 labs/architecture-examples/derbyjs/src/server/serverError.coffee
  21. +84 −0 labs/architecture-examples/derbyjs/src/todos/index.coffee
  22. +1 −0 labs/architecture-examples/derbyjs/styles/404.styl
  23. +59 −0 labs/architecture-examples/derbyjs/styles/todos/index.styl
  24. +18 −0 labs/architecture-examples/derbyjs/styles/ui.styl
  25. +22 −0 labs/architecture-examples/derbyjs/ui/connectionAlert/index.html
  26. +13 −0 labs/architecture-examples/derbyjs/ui/connectionAlert/index.js
  27. +14 −0 labs/architecture-examples/derbyjs/ui/index.js
  28. +16 −0 labs/architecture-examples/derbyjs/views/404.html
  29. +67 −0 labs/architecture-examples/derbyjs/views/todos/index.html
  30. +2 −1 readme.md
View
@@ -0,0 +1,7 @@
+Copyright (c) Addy Osmani & Sindre Sorhus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -15,8 +15,9 @@ var app = app || {};
// Set the current filter to be used
window.app.TodoFilter = param.trim() || '';
- // Trigger a collection reset/addAll
- window.app.Todos.trigger('reset');
+ // Trigger a collection filter event, causing hiding/unhiding
+ // of Todo view items
+ window.app.Todos.trigger('filter');
}
});
@@ -29,14 +29,15 @@ $(function( $ ) {
initialize: function() {
this.input = this.$('#new-todo');
this.allCheckbox = this.$('#toggle-all')[0];
+ this.$footer = this.$('#footer');
+ this.$main = this.$('#main');
window.app.Todos.on( 'add', this.addAll, this );
window.app.Todos.on( 'reset', this.addAll, this );
- window.app.Todos.on( 'change:completed', this.addAll, this );
- window.app.Todos.on( 'all', this.render, this );
+ window.app.Todos.on('change:completed', this.filterOne, this);
+ window.app.Todos.on("filter", this.filterAll, this);
- this.$footer = this.$('#footer');
- this.$main = this.$('#main');
+ window.app.Todos.on( 'all', this.render, this );
app.Todos.fetch();
},
@@ -78,18 +79,15 @@ $(function( $ ) {
// Add all items in the **Todos** collection at once.
addAll: function() {
this.$('#todo-list').html('');
+ app.Todos.each(this.addOne, this);
+ },
- switch( app.TodoFilter ) {
- case 'active':
- _.each( app.Todos.remaining(), this.addOne );
- break;
- case 'completed':
- _.each( app.Todos.completed(), this.addOne );
- break;
- default:
- app.Todos.each( this.addOne, this );
- break;
- }
+ filterOne : function (todo) {
+ todo.trigger("visible");
+ },
+
+ filterAll : function () {
+ app.Todos.each(this.filterOne, this);
},
// Generate the attributes for a new Todo item.
@@ -30,17 +30,31 @@ $(function() {
initialize: function() {
this.model.on( 'change', this.render, this );
this.model.on( 'destroy', this.remove, this );
+ this.model.on( 'visible', this.toggleVisible, this );
},
// Re-render the titles of the todo item.
render: function() {
this.$el.html( this.template( this.model.toJSON() ) );
this.$el.toggleClass( 'completed', this.model.get('completed') );
+ this.toggleVisible();
this.input = this.$('.edit');
return this;
},
+ toggleVisible : function () {
+ this.$el.toggleClass( 'hidden', this.isHidden());
+ },
+
+ isHidden : function () {
+ var isCompleted = this.model.get('completed');
+ return ( // hidden cases only
+ (!isCompleted && app.TodoFilter === 'completed')
+ || (isCompleted && app.TodoFilter === 'active')
+ );
+ },
+
// Toggle the `"completed"` state of the model.
togglecompleted: function() {
this.model.toggle();
View
@@ -404,3 +404,7 @@ label[for='toggle-all'] {
background: none;
}
}
+
+.hidden{
+ display:none;
+}
@@ -14,8 +14,9 @@ define([
// Set the current filter to be used
Common.TodoFilter = param.trim() || '';
- // Trigger a collection reset/addAll
- Todos.trigger('reset');
+ // Trigger a collection filter event, causing hiding/unhiding
+ // of the Todo view items
+ Todos.trigger('filter');
}
});
@@ -33,10 +33,12 @@ define([
this.$footer = this.$('#footer');
this.$main = this.$('#main');
- Todos.on( 'add', this.addAll, this );
+ Todos.on( 'add', this.addOne, this );
Todos.on( 'reset', this.addAll, this );
- Todos.on( 'change:completed', this.addAll, this );
+ Todos.on( 'change:completed', this.filterOne, this );
+ Todos.on( "filter", this.filterAll, this);
Todos.on( 'all', this.render, this );
+
Todos.fetch();
},
@@ -77,20 +79,17 @@ define([
// Add all items in the **Todos** collection at once.
addAll: function() {
this.$('#todo-list').html('');
+ Todos.each(this.addOne, this);
+ },
- switch( Common.TodoFilter ) {
- case 'active':
- _.each( Todos.remaining(), this.addOne );
- break;
- case 'completed':
- _.each( Todos.completed(), this.addOne );
- break;
- default:
- Todos.each( this.addOne, this );
- break;
- }
+ filterOne : function (todo) {
+ todo.trigger("visible");
},
+ filterAll : function () {
+ app.Todos.each(this.filterOne, this);
+ },
+
// Generate the attributes for a new Todo item.
newAttributes: function() {
return {
@@ -27,17 +27,31 @@ define([
initialize: function() {
this.model.on( 'change', this.render, this );
this.model.on( 'destroy', this.remove, this );
+ this.model.on( 'visible', this.toggleVisible, this );
},
// Re-render the titles of the todo item.
render: function() {
this.$el.html( this.template( this.model.toJSON() ) );
this.$el.toggleClass( 'completed', this.model.get('completed') );
+ this.toggleVisible();
this.input = this.$('.edit');
return this;
},
+ toggleVisible : function () {
+ this.$el.toggleClass( 'hidden', this.isHidden());
+ },
+
+ isHidden : function () {
+ var isCompleted = this.model.get('completed');
+ return ( // hidden cases only
+ (!isCompleted && Common.TodoFilter === 'completed')
+ || (isCompleted && Common.TodoFilter === 'active')
+ );
+ },
+
// Toggle the `"completed"` state of the model.
togglecompleted: function() {
this.model.toggle();
View
@@ -167,6 +167,9 @@ <h2 style="text-align:center;font-weight:300">Scroll down for 30+ more framework
<a href="http://todomvc.meteor.com" data-source="http://meteor.com" data-content="Meteor is an ultra-simple environment for building modern websites.A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a>
</li>
<li>
+ <a href="http://todomvc.derbyjs.com" data-source="http://derbyjs.com" data-content="MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.">Derby</a>
+ </li>
+ <li>
<a href="labs/architecture-examples/montage/" data-source="https://github.com/Motorola-Mobility/montage" data-content="Montage simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, CommonJS dependency management, and many more conveniences.">Montage</a>
</li>
<li>
@@ -0,0 +1,5 @@
+node_modules
+lib
+gen
+*.swp
+*.un~
@@ -0,0 +1,7 @@
+compile:
+ ./node_modules/coffee-script/bin/coffee -bw -o ./lib -c ./src
+
+run:
+ npm install
+ ./node_modules/coffee-script/bin/coffee -b -o ./lib -c ./src
+ node server.js
@@ -0,0 +1,23 @@
+# Derby.js TodoMVC app
+
+## Getting started
+
+[NodeJS](http://nodejs.org) (>= 0.8.0) is required to run this app.
+
+## Run the app
+`make run`
+
+This will install the dependencies locally, compile the coffeescript and run
+the demo server for you.
+
+## Play with the code
+In one window, run `make` which will continue to compile the coffeescript as
+you save changes. In a separate window run `node server.js` and open up the
+shown URL.
+
+
+## TODO
+ * PROBLEM: Add ie.js - I've added the include to the template, but it
+ obviously gets stripped out due to the comments, plus Nate mentioned that
+ there's work needing to be done for ie < 10.
+ * QUESTION: Check with derby folk whether there's a better way to do the filtering while still using a route, and other improvements.
@@ -0,0 +1,15 @@
+{
+ "name": "todomvc-derbyjs",
+ "description": "",
+ "version": "0.0.0",
+ "main": "./server.js",
+ "dependencies": {
+ "derby": "0.3.13",
+ "express": "3.0.0beta4",
+ "gzippo": ">=0.1.4"
+ },
+ "private": true,
+ "devDependencies": {
+ "coffee-script": ">=1.3.1"
+ }
+}
@@ -0,0 +1 @@
+require('derby').run(__dirname + '/lib/server', 3003);
@@ -0,0 +1,41 @@
+http = require 'http'
+path = require 'path'
+express = require 'express'
+gzippo = require 'gzippo'
+derby = require 'derby'
+todos = require '../todos'
+serverError = require './serverError'
+
+## SERVER CONFIGURATION ##
+
+expressApp = express()
+server = http.createServer expressApp
+module.exports = server
+
+store = derby.createStore
+ listen: server
+require('./queries')(store)
+
+ONE_YEAR = 1000 * 60 * 60 * 24 * 365
+root = path.dirname path.dirname __dirname
+publicPath = path.join root, 'public'
+
+expressApp
+ .use(express.favicon())
+ # Gzip static files and serve from memory
+ .use(gzippo.staticGzip publicPath, maxAge: ONE_YEAR)
+ # Gzip dynamically rendered content
+ .use(express.compress())
+
+ # Adds req.getModel method
+ .use(store.modelMiddleware())
+ # Creates an express middleware from the app's routes
+ .use(todos.router())
+ .use(expressApp.router)
+ .use(serverError root)
+
+
+## SERVER ONLY ROUTES ##
+
+expressApp.all '*', (req) ->
+ throw "404: #{req.url}"
@@ -0,0 +1,3 @@
+module.exports = (store) ->
+ store.query.expose 'todos', 'forGroup', (group) ->
+ @where('group').equals(group)
@@ -0,0 +1,18 @@
+derby = require 'derby'
+{isProduction} = derby.util
+
+module.exports = (root) ->
+ staticPages = derby.createStatic root
+
+ return (err, req, res, next) ->
+ return next() unless err?
+
+ console.log(if err.stack then err.stack else err)
+
+ ## Customize error handling here ##
+ message = err.message || err.toString()
+ status = parseInt message
+ if status is 404
+ staticPages.render '404', res, {url: req.url}, 404
+ else
+ res.send if 400 <= status < 600 then status else 500
Oops, something went wrong.

0 comments on commit 726803b

Please sign in to comment.