Skip to content

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

Adding Batman.js example. 

Current version is missing edit capabilities which still need to be completed.
parent 3b0c900e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 6296 additions and 0 deletions
architecture-examples/batmanjs/css/todo.css 0 → 100644
View file @ 5a20536e
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: 5px;
top: 14px;
display: none;
cursor: pointer;
width: 20px;
height: 20px;
background: url(../images/destroy.png) no-repeat 0 0;
}
#tasks .item:hover .destroy {
display: block;
}
#tasks li:hover .todo-destroy {
display: block;
}
#tasks .destroy:hover {
background-position: 0 -20px;
}
/*
#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;
}
\ No newline at end of file
architecture-examples/batmanjs/index.html 0 → 100644
View file @ 5a20536e
<!DOCTYPE html>
<html lang="en">
<head>
<title>Todos</title>
<link rel="stylesheet" href="css/todo.css" type="text/css">
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="lib/batman.js" type="text/javascript"></script>
<script src="lib/batman.jquery.js" type="text/javascript"></script>
<script src="lib/es5-shim.js" type="text/javascript"></script>
<script src="lib/coffee-script.js" type="text/javascript"></script>
</head>
<body>
<div id="views">
<div id="tasks">
<h1>Todos</h1>
<form data-formfor-todo="controllers.todos.emptyTodo" data-event-submit="controllers.todos.create">
<input type="text" placeholder="What needs to be done?" data-bind="todo.body" />
</form>
<div class="items">
<div class="item" data-foreach-todo="Todo.all" data-addclass-done="todo.completed">
<div class="view" title="Double click to edit..." data-event-doubleclick="todo.on_edit" data-hideif="todo.editing">
<input type="checkbox" data-bind="todo.completed" data-event-change="todo.save" />
<span data-bind="todo.body"></span>
<a class="destroy" data-event-click="todo.destroy"></a>
</div>
<div data-showif="todo.editing">
<form data-event-submit="todo.on_blur">
<input type="text" data-bind="todo.body" data-event-blur="todo.on_blur"/>
</form>
</div>
</div>
</div>
<footer>
<a class="clear" data-event-click="Todo.clear">Clear completed</a>
<div class="count"><span class="countVal" data-bind="Todo.remaining"></span> left</div>
</footer>
<!--
This version by https://github.com/johnknott/batman-todos-example
Currently missing todo edit.
-->
</div>
</div>
<script type="text/coffeescript">
class Example extends Batman.App
@root 'todos#index'
class Example.Todo extends Batman.Model
@global yes
@persist Batman.LocalStorage
@encode 'body', 'completed'
completed: false
editing: false
on_edit: (node, event) ->
@set 'todo.editing', true
$(node).parent().find("input[type=text]").focus()
on_blur: (node, event) ->
@set 'todo.editing', false
@todo.save()
@clear: (node, event) ->
Todo.all.forEach (todo) ->
if todo.get 'completed'
todo.destroy()
@classAccessor 'remaining',
get: -> Todo.get('all').get('length')
class Example.TodosController extends Batman.Controller
emptyTodo: null
index: ->
@set 'emptyTodo', new Todo
@render false
create: =>
@emptyTodo.save =>
@set 'emptyTodo', new Todo
Example.run()
</script>
</body>
</html>
architecture-examples/batmanjs/lib/batman.jquery.js 0 → 100644
View file @ 5a20536e
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Batman.Request.prototype.send = function(data) {
var options, _ref;
options = {
url: this.get('url'),
type: this.get('method'),
dataType: this.get('type'),
data: data || this.get('data'),
username: this.get('username'),
password: this.get('password'),
beforeSend: __bind(function() {
return this.fire('loading');
}, this),
success: __bind(function(response, textStatus, xhr) {
this.set('status', xhr.status);
this.set('response', response);
return this.fire('success', response);
}, this),
error: __bind(function(xhr, status, error) {
this.set('status', xhr.status);
this.set('response', xhr.responseText);
xhr.request = this;
return this.fire('error', xhr);
}, this),
complete: __bind(function() {
return this.fire('loaded');
}, this)
};
if ((_ref = this.get('method')) === 'PUT' || _ref === 'POST') {
if (!this.get('formData')) {
options.contentType = this.get('contentType');
} else {
options.contentType = false;
options.processData = false;
options.data = this.constructor.objectToFormData(options.data);
}
}
return jQuery.ajax(options);
};
Batman.mixins.animation = {
show: function(addToParent) {
var jq, show, _ref, _ref2;
jq = $(this);
show = function() {
return jq.show(600);
};
if (addToParent) {
if ((_ref = addToParent.append) != null) {
_ref.appendChild(this);
}
if ((_ref2 = addToParent.before) != null) {
_ref2.parentNode.insertBefore(this, addToParent.before);
}
jq.hide();
setTimeout(show, 0);
} else {
show();
}
return this;
},
hide: function(removeFromParent) {
$(this).hide(600, __bind(function() {
var _ref;
if (removeFromParent) {
return (_ref = this.parentNode) != null ? _ref.removeChild(this) : void 0;
}
}, this));
return this;
}
};
}).call(this);
architecture-examples/batmanjs/lib/batman.js 0 → 100644
View file @ 5a20536e
This diff is collapsed.
architecture-examples/batmanjs/lib/coffee-script.js 0 → 100644
View file @ 5a20536e
This source diff could not be displayed because it is too large. You can view the blob instead.
architecture-examples/batmanjs/lib/es5-shim.js 0 → 100644
View file @ 5a20536e
This diff is collapsed.
architecture-examples/batmanjs/lib/jquery-1.6.4.min.js 0 → 100644
View file @ 5a20536e
This diff is collapsed.
index.html
View file @ 5a20536e
...@@ -42,6 +42,9 @@ ...@@ -42,6 +42,9 @@
<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> <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> </li>
<li>
<a href="architecture-examples/batmanjs/index.html" data-source="http://batmanjs.org/" data-content="Batman.js is a framework for building rich web applications with CoffeeScript or JavaScript. App code is concise and declarative, thanks to a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority.">Batman.js</a>
</li>
<li> <li>
<a href="architecture-examples/stapes/index.html" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a> available.">Stapes</a> <a href="architecture-examples/stapes/index.html" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a> available.">Stapes</a>
</li> </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