Skip to content

T
todomvc
Commit b0070454 authored by addyosmani's avatar addyosmani
Browse files
Options

Adding Meteor.js example app. Description included for index.

parent 5a20536e
Show whitespace changes
Inline Side-by-side
Showing with 337 additions and 1 deletion
architecture-examples/meteor/README.md 0 → 100644
View file @ b0070454
Meteor TodoMVC
---------------
A todo app built using [Meteor](http://meteor.com), inspired by [TodoMVC](https://github.com/addyosmani/todomvc).
Setup
=======
* Install Meteor ```$ curl install.meteor.com | /bin/sh```
* $ cd meteor
* $ meteor
The app should now be running on http://localhost:3000/
To deploy to meteor.com simply do this:
```$ meteor deploy myapp.meteor.com```
Credits
=======
- Stylesheet from [TodoMVC](https://github.com/addyosmani/todomvc)
- Meteor from [Meteor](http://meteor.com)
- This app by [siuying](https://github.com/siuying)
License
=======
Public Domain
architecture-examples/meteor/todo.coffee 0 → 100644
View file @ b0070454
Tasks = new Meteor.Collection("tasks")
if Meteor.is_client
# Export Tasks model to client
window.Tasks = Tasks
Template.todo.tasks = ->
Tasks.find {}, {sort: {completed: 1, updated: -1, created: -1}}
Template.todo.remainingTodos = ->
Tasks.find({completed: false}).count()
Template.todo.hasCompleted = ->
Tasks.find({completed: true}).count() > 0
Template.todo.events =
'keyup #new-todo' : (evt) ->
if evt.type == "keyup" && evt.which == 13
textbox = $("#new-todo")
Tasks.insert {text: textbox.val(), created: new Date(), updated: new Date(), completed: false}
textbox.val("")
textbox.focus()
return false
'click #clear-completed': ->
Tasks.remove {completed: true}
return false
'click #mark-all-checked': (evt) ->
Tasks.update {}, {$set: {completed: true}}, {multi: true}
$(evt.target).removeAttr("checked")
Template.item.events =
'click #done': (evt) ->
task = Tasks.findOne this._id
task.completed = $(evt.target).attr("checked") == "checked"
Tasks.update {_id: this._id}, task
'dblclick .text': (evt) ->
task = Tasks.findOne this._id
task.editing = true
selector = "#i-#{this._id} input.edit"
Tasks.update {_id: this._id}, task, (err) ->
$(selector).focus().select() unless err
'blur input.edit': (evt) ->
task = Tasks.findOne this._id
task.editing = false
Tasks.update {_id: this._id}, task
'keyup input.edit': (evt) ->
if evt.type == "keyup" && evt.which == 13
task = Tasks.findOne this._id
task.editing = false
task.updated = new Date()
task.text = $(evt.target).val()
Tasks.update {_id: this._id}, task, (err) =>
alert("Sorry, an error prevent the changes to be saved") if err
return false
if Meteor.is_server
Meteor.startup ->
console.log "server startup"
architecture-examples/meteor/todo.css 0 → 100644
View file @ b0070454
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;
list-style: none;
}
#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;
margin-bottom: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;
}
/* focus is actually pointless here as it's not
possible to tab to the anchor for some reason */
#tasks .clear:hover, #tasks .clear:focus {
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;
}
#credits {
width: 520px;
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#credits a {
color: #888;
}
#todo-list li {
list-style-type: none;
}
#todo-list {
margin: 0;
padding: 0;
}
architecture-examples/meteor/todo.html 0 → 100644
View file @ b0070454
<head>
<meta charset="utf-8">
<title>Meteor - TodoMVC</title>
</head>
<body>
<div id="views">
<div id="tasks">
{{> todo}}
</div>
</div>
<div id="credits">
<p>Double-click to edit a todo</p>
<p>Created by <a href="https://github.com/siuying">siuying</a>.</p>
<p>Modifications by <a href="https://github.com/addyosmani">addyosmani</a>.</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
</body>
<template name="todo">
<header>
<h1>Todos</h1>
<input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?">
</header>
<section id="main">
<input id="mark-all-checked" type="checkbox" name="allChecked">
<label for="mark-all-checked">Mark all as complete</label>
<ul id="todo-list">
{{#each tasks}}
{{> item}}
{{/each}}
</ul>
</section>
<footer>
{{#if hasCompleted}}
<a id="clear-completed" class="clear">Clear completed</a>
{{/if}}
<div id="todo-count"><b>{{ remainingTodos }}</b> left</div>
</footer>
</template>
<template name="item">
<li id="i-{{ _id }}">
{{#unless editing}}
<div class="item {{#if completed}}done{{/if}}">
<input class="toggle" type="checkbox" id="done" {{#if completed}}checked="checked"{{/if}}>
<span class="text">{{ text }}</span>
<a class="destroy"></a>
</div>
{{/unless}}
{{#if editing}}
<input class="edit" type="text" name="text" value="{{ text }}">
{{/if}}
</li>
</template>
index.html
View file @ b0070454
......@@ -34,11 +34,14 @@
<div class="span4">
<h2>Introduction</h2>
<p>TodoMVC Labs showcases sample Todo applications for frameworks that have just been released or are still awaiting consideration for inclusion in TodoMVC.</p>
<p>While our team are working on improving these applications for a future release of TodoMVC, developers wishing to try out brand new frameworks or see what's coming next for this project can preview this today.</p>
<p>While our team are working on improving these applications for a future release of TodoMVC (e.g ensuring they meet our functional requirements), developers wishing to try out brand new frameworks or see what's coming next for this project can preview this today.</p>
</div>
<div class="span5" id="demos">
<h2>Demos</h2>
<ul class="nav nav-pills">
<li>
<a href="http://todomvcapp.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="architecture-examples/agilityjs/index.html" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">AgilityJS</a>
</li>
......
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