Skip to content

T
todomvc
Commit 704b7625 authored by Addy Osmani's avatar Addy Osmani
Browse files
Options

Merge pull request #16 from brokenseal/master 

Adding Broke.js example.
parents f75a7d1e e467a6e3
Expand all Show whitespace changes
Inline Side-by-side
Showing with 5442 additions and 0 deletions
todo-example/broke/css/application.css 0 → 100644
View file @ 704b7625
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;
padding: 0;
}
#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/delete.png) no-repeat center center;
}
#tasks .item .edit {
position: absolute;
right: 36px;
top: 16px;
display: none;
cursor: pointer;
width: 20px;
height: 20px;
background: url(../images/pencil.png) no-repeat center center;
}
#tasks .item:hover .destroy,
#tasks .item:hover .edit {
display: block;
}
#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;
}
#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
todo-example/broke/index.html 0 → 100644
View file @ 704b7625
<!DOCTYPE html>
<html>
<head>
<title>Broke.js</title>
<link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
</head>
<body>
<div id="views">
<div id="tasks">
<h1>Todos</h1>
<form action="#/task/create/" method="post">
<input type="text" name="title" placeholder="What needs to be done?" />
</form>
<div id="content"></div>
<footer>
<a class="clear" href="#/task/clear_completed/">Clear completed</a>
<div class="count"><span class="countVal"></span></div>
</footer>
</div>
</div>
<script src="libs/jquery-1.6.4.min.js"></script>
<script src="libs/gettext.min.js"></script>
<script src="libs/pyjammin.min.js"></script>
<script src="libs/broke-client-0.2b.min.js"></script>
<script src="project/my-blog.js"></script>
<script src="project/settings.js"></script>
<script src="project/models.js"></script>
<script src="project/views.js"></script>
<script src="project/urls.js"></script>
<script src="project/templates.js"></script>
</body>
</html>
\ No newline at end of file
todo-example/broke/libs/broke-client-0.2b.min.js 0 → 100644
View file @ 704b7625
This diff is collapsed.
todo-example/broke/libs/gettext.min.js 0 → 100644
View file @ 704b7625
This diff is collapsed.
todo-example/broke/libs/jquery-1.6.4.min.js 0 → 100644
View file @ 704b7625
This diff is collapsed.
todo-example/broke/libs/pyjammin.min.js 0 → 100644
View file @ 704b7625
This diff is collapsed.
todo-example/broke/project/models.js 0 → 100644
View file @ 704b7625
(function(context, undefined){
var
models= broke.db.models
;
todo.models= {};
models.Model.create({
__name__: "todo.models.Task"
,title: models.CharField({ max_length: 200 })
,is_complete: models.BooleanField({ 'default': false })
});
})(this);
\ No newline at end of file
todo-example/broke/project/my-blog.js 0 → 100644
View file @ 704b7625
(function(context, undefined){
context.todo= {};
$(function(){
broke.init('todo.settings', function(){
// fill db
todo.models.Task.objects.create({"pk": 1, "model": "todo.task", "fields": {"is_complete": false, "title": "Title A"}});
todo.models.Task.objects.create({"pk": 2, "model": "todo.task", "fields": {"is_complete": false, "title": "Title B"}});
todo.models.Task.objects.create({"pk": 3, "model": "todo.task", "fields": {"is_complete": false, "title": "Title C"}});
broke.events.request('/');
});
});
})(this);
\ No newline at end of file
todo-example/broke/project/settings.js 0 → 100644
View file @ 704b7625
;(function(context, undefined){
todo.settings= {
MIDDLEWARE_CLASSES: []
,DEBUG_PROPAGATE_EXCEPTIONS: true
,LANGUAGE_CODE: 'en'
,TEMPLATE_LOADERS: [
'broke.template.loaders.apps'
,'broke.template.loaders.remote'
]
,EVENT_TRIGGERING_METHOD: 'elements'
,HIDE_HASH: true
,USE_I18N: true
,DEBUG: false
,GET_LATEST_BY: 'title'
,INSTALLED_APPS: [
'todo'
]
,ROOT_URLCONF: 'todo.urls'
,URL_CHANGING_ELEMENTS: broke.extend(broke.conf.settings.URL_CHANGING_ELEMENTS, {
'input': {
events: ['click']
,urlAttribute: 'data-href'
}
})
};
})(this);
\ No newline at end of file
todo-example/broke/project/templates.js 0 → 100644
View file @ 704b7625
(function(context, undefined){
var
genericTaskTemplate= '<li class="item" data-app_label="{{ task.__class__._meta.appLabel }}" data-model="{{ task.__class__._meta.modelName }}" data-pk="{{ task.pk }}">'+
'<input type="checkbox" data-field="is_complete" data-href="#/task/complete/{{ task.pk }}/" {% if task.fields.is_complete %} checked="checked"{% endif %} />' +
'<span data-field="title">{{ task.title }}</span>' +
'<a class="edit" href="#/task/update/{{ task.pk }}/"></a>' +
'<a class="destroy" href="#/task/delete/{{ task.pk }}/"></a>' +
'</li>'
;
todo.templates= {
list: '<ul class="items">' +
'{% for task in taskList %}' +
genericTaskTemplate +
'{% endfor %}' +
'</ul>'
,view: genericTaskTemplate
,create: ''
,update: '<li class="item" data-app_label="{{ task.__class__._meta.appLabel }}" data-model="{{ task.__class__._meta.modelName }}" data-pk="{{ task.pk }}">'+
'<form action="#/task/update/{{ task.pk }}/">' +
'<input type="text" name="title" value="{{ task.title }}" />' +
'</form>' +
'</li>'
};
})(this);
\ No newline at end of file
todo-example/broke/project/urls.js 0 → 100644
View file @ 704b7625
(function(context, undefined){
var
patterns= broke.conf.urls.defaults.patterns
;
todo.urls= patterns('todo.views',
[ '^/$', 'list' ]
,[ '^/task/create/', 'create' ]
,[ '^/task/update/([a-zA-Z0-9_-]+)/', 'update' ]
,[ '^/task/delete/([a-zA-Z0-9_-]+)/', 'delete' ]
,[ '^/task/complete/([a-zA-Z0-9_-]+)/', 'complete' ]
,[ '^/task/clear_completed/', 'clear_completed' ]
);
})(this);
\ No newline at end of file
todo-example/broke/project/views.js 0 → 100644
View file @ 704b7625
(function(context, undefined){
var
node= broke.shortcuts.node
,Task= todo.models.Task
;
todo.views= {
list: function(request, callback){
Task.objects.all(function(taskList){
callback(node.create({
htmlNode: '#content'
,template: 'list'
,object: taskList
,context: {
taskList: taskList
}
}));
});
}
,create: function(request, callback){
if(request.POST) {
Task.objects.create({
title: request.POST['title']
,pk: 'auto'
}, function(task){
callback(node.create({
htmlNode: '#content .items'
,template: 'view'
,object: task
,context: {
task: task
}
,callback: function(){
broke.DOM.val(request.event.target.title, '');
}
}));
});
}
}
,update: function(request, taskId, callback){
Task.objects.get({ pk: taskId }, function(task){
if(request.POST) {
task.update({ title: request.POST['title'] });
callback(node.replace({
template: 'view'
,context: {
task: task
}
,htmlNode: task.elements({ clearCache: true, filter: 'li' })
}));
} else {
callback(node.replace({
template: 'update'
,context: {
task: task
}
,htmlNode: task.elements({ clearCache: true, filter: 'li' })
,callback: function(){
broke.DOM.querySelector('input', this)[0].focus();
}
}));
}
});
}
,'delete': function(request, taskId, callback){
request.event.preventDefault();
Task.objects.get({ pk: taskId }, function(task){
task['delete']();
});
}
,complete: function(request, taskId, callback){
Task.objects.get({ pk: taskId }, function(task){
task.update({ is_complete: request.event.target.checked }, false);
});
}
,clear_completed: function(request, taskId, callback){
Task.objects.filter({ is_complete: true }).all(function(taskList){
builtins.forEach(taskList, function(task){
this['delete']();
});
});
}
};
})(this);
\ 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