Skip to content

T
todomvc
Commit 4841d65f authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

rAppid.js app: Enforce code style

parent 9803689b
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 104 deletions
labs/architecture-examples/rappidjs/app/Todo.xml
View file @ 4841d65f
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
<!-- HERE WE START TO DEFINE THE UI WITH HTML AND CUSTOM UI COMPONENTS --> <!-- HERE WE START TO DEFINE THE UI WITH HTML AND CUSTOM UI COMPONENTS -->
<section id="todoapp"> <section id="todoapp">
<header id="header"> <header id="header">
<h1>Todos</h1> <h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" type="text" onkeyup="addNewTodo" autofocus="autofocus"/> <input id="new-todo" placeholder="What needs to be done?" onkeyup="addNewTodo" autofocus="autofocus"/>
</header> </header>
<section id="main" visible="{todoList.hasItems()}"> <section id="main" visible="{todoList.hasItems()}">
<input id="toggle-all" type="checkbox" onclick="markAllComplete" <input id="toggle-all" type="checkbox" onclick="markAllComplete"
...@@ -53,15 +53,13 @@ ...@@ -53,15 +53,13 @@
</footer> </footer>
</section> </section>
<footer id="info"> <footer id="info">
<p visible="{todoList.hasItems()}">Double - click to edit a todo</p> <p visible="{todoList.hasItems()}">Double-click to edit a todo</p>
<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p> <p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
<p> <p>
Created by <a href="http://github.com/krebbl">Marcus Krejpowicz</a> with<a href="http://rappidjs.com">&lt; rAppid:js/&gt;</a> Created by <a href="http://github.com/krebbl">Marcus Krejpowicz</a> with<a href="http://rappidjs.com">&lt; rAppid:js/&gt;</a>
<br/> <br/>
Big credits to <a href="http://github.com/it-ony">Tony Findeisen</a> Big credits to <a href="http://github.com/it-ony">Tony Findeisen</a>
</p> </p>
<p>Part of <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
<a href="http://todomvc.com">TodoMVC</a>
</p>
</footer> </footer>
</app:TodoClass> </app:TodoClass>
\ No newline at end of file
labs/architecture-examples/rappidjs/app/TodoClass.js
View file @ 4841d65f
...@@ -18,66 +18,82 @@ define([ ...@@ -18,66 +18,82 @@ define([
this.set( 'filterList', null ); this.set( 'filterList', null );
this.callBase(); this.callBase();
}, },
/** /**
* Are triggered * Are triggered
*/ */
showAll: function () { showAll: function() {
this.$.filterList.set("filter", 'all'); this.$.filterList.set( 'filter', 'all' );
}, },
showActive: function () {
this.$.filterList.set("filter", "active"); showActive: function() {
this.$.filterList.set( 'filter', 'active' );
}, },
showCompleted: function () {
this.$.filterList.set("filter", "completed"); showCompleted: function() {
this.$.filterList.set( 'filter', 'completed' );
}, },
/** /**
* The rest is just controller stuff * The rest is just controller stuff
*/ */
addNewTodo: function (e) { addNewTodo: function( e ) {
if (e.domEvent.keyCode === ENTER_KEY) { if ( e.domEvent.keyCode === ENTER_KEY ) {
var title = e.target.get("value").trim(); var title = e.target.get('value').trim();
if (title) {
var newTodo = this.$.dataSource.createEntity(Todo); if ( title ) {
newTodo.set({title: title, completed: false}); var newTodo = this.$.dataSource.createEntity( Todo );
this.get("todoList").add(newTodo);
newTodo.set({
title: title,
completed: false
});
this.get('todoList').add( newTodo );
// save the new item // save the new item
newTodo.save(); newTodo.save();
e.target.set('value',''); e.target.set( 'value', '' );
} }
} }
}, },
markAllComplete: function (e) {
this.get("todoList").markAll(e.target.$el.checked); markAllComplete: function( e ) {
this.get('todoList').markAll( e.target.$el.checked );
}, },
clearCompleted: function () {
this.get("todoList").clearCompleted(); clearCompleted: function() {
this.get('todoList').clearCompleted();
}, },
removeTodo: function (e) {
var todo = e.$, self = this; removeTodo: function( e ) {
todo.remove(null, function(err){ var todo = e.$,
if(!err){ self = this;
self.get("todoList").remove(todo);
todo.remove( null, function( err ) {
if ( !err ) {
self.get('todoList').remove( todo );
} }
}); });
}, },
/** /**
* Start the application and render it to the body ... * Start the application and render it to the body ...
*/ */
start: function (parameter, callback) { start: function( parameter, callback ) {
this.set('todoList', this.$.dataSource.createCollection(TodoList)); this.set( 'todoList', this.$.dataSource.createCollection( TodoList ) );
// fetch all todos, can be done sync because we use localStorage // fetch all todos, can be done sync because we use localStorage
this.$.todoList.fetch(); this.$.todoList.fetch();
this.set('filterList', new FilterDataView({ this.set( 'filterList', new FilterDataView({
baseList: this.get("todoList"), baseList: this.get('todoList'),
filter: 'all', filter: 'all',
filterFnc: function (item) { filterFnc: function( item ) {
var filter = this.$.filter; var filter = this.$.filter;
if (filter == "active") {
if ( filter === 'active' ) {
return !item.isCompleted(); return !item.isCompleted();
} else if (filter == "completed") { } else if ( filter === 'completed' ) {
return item.isCompleted(); return item.isCompleted();
} else { } else {
return true; return true;
...@@ -87,11 +103,13 @@ define([ ...@@ -87,11 +103,13 @@ define([
// false - disables autostart // false - disables autostart
this.callBase(); this.callBase();
}, },
translateItems: function(num){
return (num === 1) ? "item" : "items"; translateItems: function( num ) {
return num === 1 ? 'item' : 'items';
}, },
selectedClass: function (expected, current) {
return expected == current ? "selected" : ""; selectedClass: function( expected, current ) {
return expected === current ? 'selected' : '';
} }
}); });
}); });
\ No newline at end of file
labs/architecture-examples/rappidjs/app/collection/TodoList.js
View file @ 4841d65f
define(["js/data/Collection", "app/model/Todo", "flow"], function (Collection, Todo, flow) { define([
return Collection.inherit("app.collection.TodoList", { 'js/data/Collection',
'app/model/Todo',
'flow'
], function ( Collection, Todo, flow ) {
return Collection.inherit( 'app.collection.TodoList', {
$modelFactory: Todo, $modelFactory: Todo,
markAll: function (done) { markAll: function( done ) {
this.each(function (todo) { this.each(function (todo) {
todo.setCompleted(done); todo.setCompleted( done );
todo.save(); todo.save();
}); });
}, },
areAllComplete: function () {
if (this.$items.length === 0) { areAllComplete: function() {
var i, l;
if ( this.$items.length ) {
return false; return false;
} }
for (var i = 0; i < this.$items.length; i++) {
if (!this.$items[i].isCompleted()) { for ( i = 0, l = this.$items.length; i < l; i++ ) {
if ( !this.$items[ i ].isCompleted() ) {
return false; return false;
} }
} }
return true; return true;
}.on('change', 'add', 'remove'), }.on('change', 'add', 'remove'),
clearCompleted: function () {
clearCompleted: function() {
var self = this; var self = this;
// remove all completed todos in a sequence // remove all completed todos in a sequence
flow().seqEach(this.$items,function (todo, cb) { flow().seqEach( this.$items, function( todo, cb ) {
if (todo.isCompleted()) {
if ( todo.isCompleted() ) {
// remove the todo // remove the todo
todo.remove(null, function (err) { todo.remove( null, function( err ) {
if (!err) { if ( !err ) {
self.remove(todo); self.remove( todo );
} }
cb(err); cb( err );
}); });
} else { } else {
cb(); cb();
} }
}).exec(); }).exec();
}, },
numOpenTodos: function () {
var num = 0; numOpenTodos: function() {
for (var i = 0; i < this.$items.length; i++) { var i, l,
if (!this.$items[i].isCompleted()) { num = 0;
for ( i = 0, l = this.$items.length; i < l; i++ ) {
if ( !this.$items[ i ].isCompleted() ) {
num++; num++;
} }
} }
return num; return num;
}.on('change', 'add', 'remove'), }.on('change', 'add', 'remove'),
numCompletedTodos: function () {
var num = 0; numCompletedTodos: function() {
for (var i = 0; i < this.$items.length; i++) { var i, l,
if (this.$items[i].isCompleted()) { num = 0;
for ( i = 0, l = this.$items.length; i < l; i++ ) {
if ( this.$items[ i ].isCompleted() ) {
num++; num++;
} }
} }
return num; return num;
}.on('change', 'add', 'remove'), }.on('change', 'add', 'remove'),
hasCompletedTodos: function () {
hasCompletedTodos: function() {
return this.numCompletedTodos() > 0; return this.numCompletedTodos() > 0;
}.on('change', 'add', 'remove') }.on('change', 'add', 'remove')
}); });
......
labs/architecture-examples/rappidjs/app/model/Todo.js
View file @ 4841d65f
define(["js/data/Model"], function (Model) { define([
return Model.inherit("app.model.Todo", { 'js/data/Model'
], function( Model ) {
return Model.inherit('app.model.Todo', {
defaults: { defaults: {
title: "", title: '',
completed: false completed: false
}, },
setCompleted: function (completed) {
this.set("completed", completed); setCompleted: function( completed ) {
this.set( 'completed', completed );
}, },
isCompleted: function () {
isCompleted: function() {
return this.$.completed; return this.$.completed;
}, },
status: function () {
return this.$.completed ? "completed" : ''; status: function() {
}.onChange("completed"), return this.$.completed ? 'completed' : '';
hasTitle: function () { }.onChange('completed'),
hasTitle: function() {
return this.$.title.trim().length; return this.$.title.trim().length;
}.onChange("title") }.onChange('title')
}); });
}); });
\ No newline at end of file
labs/architecture-examples/rappidjs/app/view/TodoView.xml
View file @ 4841d65f
...@@ -2,62 +2,72 @@ ...@@ -2,62 +2,72 @@
xmlns:js="js.core" xmlns:ui="js.ui" componentClass="{todo.status()}"> xmlns:js="js.core" xmlns:ui="js.ui" componentClass="{todo.status()}">
<js:Script> <js:Script>
<![CDATA[ <![CDATA[
(function () { (function() {
var ENTER_KEY = 13; var ENTER_KEY = 13;
var INPUT_BLUR = "blur";
return { return {
defaults: { defaults: {
editing: false editing: false
}, },
$classAttributes: ['todo', 'inputElement'], $classAttributes: ['todo', 'inputElement'],
events: ["remove"],
editTodo: function (e) { events: ['remove'],
this.set("editing", true);
editTodo: function( e ) {
this.set( 'editing', true );
e.preventDefault(); e.preventDefault();
this.$.inputElement.$el.select(); this.$.inputElement.$el.select();
return false; return false;
}, },
checkTodo: function () {
var todo = this.get("todo"); checkTodo: function() {
todo.setCompleted(!todo.isCompleted()); var todo = this.get('todo');
todo.setCompleted( !todo.isCompleted() );
todo.save(); todo.save();
}, },
preventEditing: function(e){
preventEditing: function( e ) {
e.stopPropagation(); e.stopPropagation();
}, },
updateTodo: function (e) {
updateTodo: function( e ) {
var todo; var todo;
if (e.domEvent.keyCode === ENTER_KEY || e.domEvent.type === INPUT_BLUR) {
todo = this.get("todo"); if ( e.domEvent.keyCode === ENTER_KEY || e.domEvent.type === 'blur' ) {
if (!todo.hasTitle()) { todo = this.get('todo');
this.trigger("remove", todo);
} else { if ( todo.hasTitle() ) {
this.set("editing", false); this.set( 'editing', false );
todo.save(); todo.save();
} else {
this.trigger( 'remove', todo );
} }
} }
}, },
triggerOnRemove: function () {
this.trigger("remove", this.get("todo")); triggerOnRemove: function() {
this.trigger( 'remove', this.get('todo') );
}, },
_renderEditing: function (editing) {
if (editing) { _renderEditing: function( editing ) {
this.addClass("editing"); if ( editing ) {
this.addClass('editing');
} else { } else {
this.removeClass("editing"); this.removeClass('editing');
this.$.inputElement.$el.blur(); this.$.inputElement.$el.blur();
} }
}, },
trim: function(title){
if(title){ trim: function( title ) {
if( title ) {
return title.trim(); return title.trim();
} }
return ""; return '';
} }
};
}
}) })
]]> ]]>
</js:Script> </js:Script>
...@@ -71,5 +81,4 @@ ...@@ -71,5 +81,4 @@
<input class="edit" cid="inputElement" type="text" value="{{todo.title|trim()}}" <input class="edit" cid="inputElement" type="text" value="{{todo.title|trim()}}"
onkeyup="updateTodo" onblur="updateTodo" updateOnEvent="change"/> onkeyup="updateTodo" onblur="updateTodo" updateOnEvent="change"/>
</js:Template> </js:Template>
</ui:View> </ui:View>
\ 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