Skip to content

T
todomvc
Commit 3cdea4c1 authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Meteor app cleanup 

Remove trailing whitespace
Convert to tabs
Improve readme
Update base.css
parent e904feb4
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 100 deletions
labs/architecture-examples/meteor/app.html
View file @ 3cdea4c1
<head> <head>
<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>Meteor • TodoMVC</title> <title>Meteor • TodoMVC</title>
</head> </head>
<body> <body>
<section id="todoapp"> <section id="todoapp">
{{> todoapp}} {{> todoapp}}
</section> </section>
<footer id="info"> <footer id="info">
<p>Double-click to edit a todo</p> <p>Double-click to edit a todo</p>
<p>Created by <a href="https://github.com/MStumpp">Matthias Stumpp</a></p> <p>Created by <a href="https://github.com/MStumpp">Matthias Stumpp</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer> </footer>
</body> </body>
<template name="todoapp"> <template name="todoapp">
<header id="header"> <header id="header">
<h1>todos</h1> <h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus> <input id="new-todo" placeholder="What needs to be done?" autofocus>
</header> </header>
{{#if todos}} {{#if todos}}
{{> main}} {{> main}}
{{> footer}} {{> footer}}
{{/if}} {{/if}}
</template> </template>
<template name="main"> <template name="main">
<section id="main"> <section id="main">
<input id="toggle-all" type="checkbox" {{#unless todos_not_completed}}checked="checked"{{/unless}}> <input id="toggle-all" type="checkbox" {{#unless todos_not_completed}}checked="checked"{{/unless}}>
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"> <ul id="todo-list">
{{#each todos}} {{#each todos}}
{{> todo}} {{> todo}}
{{/each}} {{/each}}
</ul> </ul>
</section> </section>
</template> </template>
<template name="todo"> <template name="todo">
<li class="{{#if todo_completed}}completed{{/if}}{{#if todo_editing}}editing{{/if}}"> <li class="{{#if todo_completed}}completed{{/if}}{{#if todo_editing}}editing{{/if}}">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" {{#if todo_completed}}checked="checked"{{/if}}> <input class="toggle" type="checkbox" {{#if todo_completed}}checked="checked"{{/if}}>
<label>{{title}}</label> <label>{{title}}</label>
<button class="destroy"></button> <button class="destroy"></button>
</div> </div>
<input class="edit" value="{{title}}"> <input class="edit" value="{{title}}">
</li> </li>
</template> </template>
<template name="footer"> <template name="footer">
<footer id="footer"> <footer id="footer">
<span id="todo-count"><strong>{{todos_not_completed}}</strong> <span id="todo-count"><strong>{{todos_not_completed}}</strong>
{{#if todos_one_not_completed}}item{{else}}items{{/if}} left</span> {{#if todos_one_not_completed}}item{{else}}items{{/if}} left</span>
<ul id="filters"> <ul id="filters">
{{#each filters}} {{#each filters}}
<li> <li>
<a class="{{#if filter_selected this}} selected {{/if}}" href="#/{{this}}">{{this}}</a> <a class="{{#if filter_selected this}} selected {{/if}}" href="#/{{this}}">{{this}}</a>
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
{{#if todos_completed}} {{#if todos_completed}}
<button id="clear-completed">Clear completed ({{todos_completed}})</button> <button id="clear-completed">Clear completed ({{todos_completed}})</button>
{{/if}} {{/if}}
</footer> </footer>
</template> </template>
\ No newline at end of file
labs/architecture-examples/meteor/app.js
View file @ 3cdea4c1
...@@ -19,7 +19,7 @@ if (Meteor.is_client) { ...@@ -19,7 +19,7 @@ if (Meteor.is_client) {
// Get selector types as array // Get selector types as array
var filters = _.keys(filter_selections); var filters = _.keys(filter_selections);
// Bind route handlers to filter types // Bind route handlers to filter types
var routes = {}; var routes = {};
_.each(filters, function(filter) { _.each(filters, function(filter) {
...@@ -27,13 +27,13 @@ if (Meteor.is_client) { ...@@ -27,13 +27,13 @@ if (Meteor.is_client) {
Session.set('filter', filter); Session.set('filter', filter);
}; };
}); });
// Initialize router with routes // Initialize router with routes
var router = Router(routes); var router = Router(routes);
router.init(); router.init();
///////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////
// The following two functions are taken from the official Meteor // The following two functions are taken from the official Meteor
// "Todos" example // "Todos" example
// The original code can be viewed at: https://github.com/meteor/meteor // The original code can be viewed at: https://github.com/meteor/meteor
///////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////
...@@ -43,19 +43,19 @@ if (Meteor.is_client) { ...@@ -43,19 +43,19 @@ if (Meteor.is_client) {
var okcancel_events = function (selector) { var okcancel_events = function (selector) {
return 'keyup '+selector+', keydown '+selector+', focusout '+selector; return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
}; };
// Creates an event handler for interpreting "escape", "return", and "blur" // Creates an event handler for interpreting "escape", "return", and "blur"
// on a text field and calling "ok" or "cancel" callbacks. // on a text field and calling "ok" or "cancel" callbacks.
var make_okcancel_handler = function (options) { var make_okcancel_handler = function (options) {
var ok = options.ok || function () {}; var ok = options.ok || function () {};
var cancel = options.cancel || function () {}; var cancel = options.cancel || function () {};
return function (evt) { return function (evt) {
if (evt.type === 'keydown' && evt.which === 27) { if (evt.type === 'keydown' && evt.which === 27) {
// escape = cancel // escape = cancel
cancel.call(this, evt); cancel.call(this, evt);
} else if (evt.type === 'keyup' && evt.which === 13 || } else if (evt.type === 'keyup' && evt.which === 13 ||
evt.type === 'focusout') { evt.type === 'focusout') {
// blur/return/enter = ok/submit if non-empty // blur/return/enter = ok/submit if non-empty
var value = String(evt.target.value || ''); var value = String(evt.target.value || '');
...@@ -67,19 +67,19 @@ if (Meteor.is_client) { ...@@ -67,19 +67,19 @@ if (Meteor.is_client) {
} }
}; };
}; };
// Some helpers // Some helpers
// Get the number of todos completed // Get the number of todos completed
var todos_completed_helper = function() { var todos_completed_helper = function() {
return Todos.find({completed: true}).count(); return Todos.find({completed: true}).count();
}; };
// Get the number of todos not completed // Get the number of todos not completed
var todos_not_completed_helper = function() { var todos_not_completed_helper = function() {
return Todos.find({completed: false}).count(); return Todos.find({completed: false}).count();
}; };
//// ////
// Logic for the 'todoapp' partial which represents the whole app // Logic for the 'todoapp' partial which represents the whole app
//// ////
...@@ -88,35 +88,35 @@ if (Meteor.is_client) { ...@@ -88,35 +88,35 @@ if (Meteor.is_client) {
Template.todoapp.todos = function() { Template.todoapp.todos = function() {
return Todos.find().count(); return Todos.find().count();
}; };
Template.todoapp.events = {}; Template.todoapp.events = {};
// Register key events for adding new todo // Register key events for adding new todo
Template.todoapp.events[okcancel_events('#new-todo')] = Template.todoapp.events[okcancel_events('#new-todo')] =
make_okcancel_handler({ make_okcancel_handler({
ok: function (title, evt) { ok: function (title, evt) {
Todos.insert({title: $.trim(title), completed: false, Todos.insert({title: $.trim(title), completed: false,
created_at: new Date().getTime()}); created_at: new Date().getTime()});
evt.target.value = ''; evt.target.value = '';
} }
}); });
//// ////
// Logic for the 'main' partial which wraps the actual todo list // Logic for the 'main' partial which wraps the actual todo list
//// ////
// Get the todos considering the current filter type // Get the todos considering the current filter type
Template.main.todos = function() { Template.main.todos = function() {
return Todos.find(filter_selections[Session.get('filter')], {sort: {created_at: 1}}); return Todos.find(filter_selections[Session.get('filter')], {sort: {created_at: 1}});
}; };
Template.main.todos_not_completed = todos_not_completed_helper; Template.main.todos_not_completed = todos_not_completed_helper;
// Register click event for toggling complete/not complete button // Register click event for toggling complete/not complete button
Template.main.events = { Template.main.events = {
'click input#toggle-all': function(evt) { 'click input#toggle-all': function(evt) {
var completed = true; var completed = true;
if (!Todos.find({completed: false}).count()) { if (!Todos.find({completed: false}).count()) {
completed = false; completed = false;
} }
Todos.find({}).forEach(function(todo) { Todos.find({}).forEach(function(todo) {
...@@ -124,21 +124,21 @@ if (Meteor.is_client) { ...@@ -124,21 +124,21 @@ if (Meteor.is_client) {
}); });
} }
}; };
//// ////
// Logic for the 'todo' partial representing a todo // Logic for the 'todo' partial representing a todo
//// ////
// True of current todo is completed, false otherwise // True of current todo is completed, false otherwise
Template.todo.todo_completed = function() { Template.todo.todo_completed = function() {
return this.completed; return this.completed;
}; };
// Get the current todo which is in editing mode, if any // Get the current todo which is in editing mode, if any
Template.todo.todo_editing = function() { Template.todo.todo_editing = function() {
return Session.equals('editing_todo', this._id); return Session.equals('editing_todo', this._id);
}; };
// Register events for toggling todo's state, editing mode and destroying a todo // Register events for toggling todo's state, editing mode and destroying a todo
Template.todo.events = { Template.todo.events = {
'click input.toggle': function() { 'click input.toggle': function() {
...@@ -151,7 +151,7 @@ if (Meteor.is_client) { ...@@ -151,7 +151,7 @@ if (Meteor.is_client) {
Todos.remove(this._id); Todos.remove(this._id);
} }
}; };
// Register key events for updating title of an existing todo // Register key events for updating title of an existing todo
Template.todo.events[okcancel_events('li.editing input.edit')] = Template.todo.events[okcancel_events('li.editing input.edit')] =
make_okcancel_handler({ make_okcancel_handler({
...@@ -164,34 +164,34 @@ if (Meteor.is_client) { ...@@ -164,34 +164,34 @@ if (Meteor.is_client) {
Todos.remove(this._id); Todos.remove(this._id);
} }
}); });
//// ////
// Logic for the 'footer' partial // Logic for the 'footer' partial
//// ////
Template.footer.todos_completed = todos_completed_helper; Template.footer.todos_completed = todos_completed_helper;
Template.footer.todos_not_completed = todos_not_completed_helper; Template.footer.todos_not_completed = todos_not_completed_helper;
// True if exactly one todo is not completed, false otherwise // True if exactly one todo is not completed, false otherwise
// Used for handling pluralization of "item"/"items" word // Used for handling pluralization of "item"/"items" word
Template.footer.todos_one_not_completed = function() { Template.footer.todos_one_not_completed = function() {
return Todos.find({completed: false}).count() == 1; return Todos.find({completed: false}).count() == 1;
}; };
// Prepare array with keys of filter_selections only // Prepare array with keys of filter_selections only
Template.footer.filters = filters; Template.footer.filters = filters;
// True if the requested filter type is currently selected, // True if the requested filter type is currently selected,
// false otherwise // false otherwise
Template.footer.filter_selected = function(type) { Template.footer.filter_selected = function(type) {
return Session.equals('filter', type); return Session.equals('filter', type);
}; };
// Register click events for clearing completed todos // Register click events for clearing completed todos
Template.footer.events = { Template.footer.events = {
'click button#clear-completed': function() { 'click button#clear-completed': function() {
Todos.remove({completed: true}); Todos.remove({completed: true});
} }
}; };
}; }
\ No newline at end of file
labs/architecture-examples/meteor/client/css/app.css
View file @ 3cdea4c1
/* base.css overrides */
#filters li a { #filters li a {
text-transform:capitalize; text-transform: capitalize;
} }
labs/architecture-examples/meteor/client/css/base.css 100644 → 100755
View file @ 3cdea4c1
...@@ -403,4 +403,8 @@ label[for='toggle-all'] { ...@@ -403,4 +403,8 @@ label[for='toggle-all'] {
#todo-list li .toggle { #todo-list li .toggle {
background: none; background: none;
} }
}
.hidden{
display:none;
} }
\ No newline at end of file
labs/architecture-examples/meteor/client/lib/base.js
View file @ 3cdea4c1
(function( window ) { (function( window ) {
'use strict'; 'use strict';
if ( location.hostname === 'todomvc.com' ) { if ( location.hostname === 'todomvc.com' ) {
var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script')); var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
} }
})( window ); })( window );
\ No newline at end of file
labs/architecture-examples/meteor/readme.md
View file @ 3cdea4c1
Meteor TodoMVC # Meteor TodoMVC app
---------------
A todo app built using [Meteor](http://meteor.com), inspired by [TodoMVC](https://github.com/addyosmani/todomvc). A todo app built using [Meteor](http://meteor.com), inspired by [TodoMVC](https://github.com/addyosmani/todomvc).
Demo online: http://todomvcapp.meteor.com [Demo](http://todomvcapp.meteor.com)
Setup
======= ## Setup
* Install Meteor ```$ curl install.meteor.com | /bin/sh``` * Install Meteor ```$ curl install.meteor.com | /bin/sh```
* $ cd meteor * $ cd meteor
* $ meteor * $ meteor
The app should now be running on http://localhost:3000/ The app should now be running on http://localhost:3000
To deploy to meteor.com simply do this: To deploy to meteor.com simply run:
```$ meteor deploy myapp.meteor.com``` ```$ meteor deploy myapp.meteor.com```
Credits
=======
- Stylesheet from [TodoMVC](https://github.com/addyosmani/todomvc)
- Meteor from [Meteor](http://meteor.com)
- This app by [MStumpp](https://github.com/MStumpp)
License ## Credits
=======
Public Domain Created by [MStumpp](https://github.com/MStumpp)
\ No newline at end of file
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