Skip to content

T
todomvc
Commit 10dee133 authored by Romuald Quantin's avatar Romuald Quantin
Browse files
Options

soma.js version 2 in progress 

todo scope in models updated

somajs update and comments

somajs update

soma.js and require.js added

whitespace update

main view hide update

jshint errors update

jshint errors update

cleanup requirejs dependencies

save on blur and remote persistent editing

todomvc-common update on soma.js

cleanup bower components in soma.js
parent 3af9f7bb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 9576 additions and 11328 deletions
labs/architecture-examples/somajs/bower.json
View file @ 10dee133
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
"name": "todomvc-somajs", "name": "todomvc-somajs",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"todomvc-common": "~0.1.6", "todomvc-common": "~0.1.6",
"jquery": "~2.0.0", "director": "~1.2.0",
"handlebars.js": "~1.0.0-rc.3" "soma.js": "~2.0.0",
"soma-template": "~0.1.8"
} }
} }
labs/architecture-examples/somajs/components/todomvc-common/bower.json 0 → 100644
View file @ 10dee133
{
"name": "todomvc-common",
"version": "0.1.7",
"gitHead": "42348a8146fe0be847b93cd98664813fbae62be9",
"_id": "todomvc-common@0.1.7",
"readme": "ERROR: No README.md file found!",
"description": "ERROR: No README.md file found!",
"repository": {
"type": "git",
"url": "git://github.com/tastejs/todomvc-common.git"
}
}
\ No newline at end of file
labs/architecture-examples/somajs/css/app.css 0 → 100644
View file @ 10dee133
.data-cloak {
display: none;
}
\ No newline at end of file
labs/architecture-examples/somajs/index.html
View file @ 10dee133
<!doctype html> <!doctype html>
<html lang="en" data-framework="somajs"> <html lang="en" data-framework="somajs">
<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>soma.js • TodoMVC</title> <title>soma.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css"> <link rel="stylesheet" href="components/todomvc-common/base.css">
</head> <link rel="stylesheet" href="css/app.css">
<body> </head>
<section id="todoapp"> <body>
<header id="header">
<h1>todos</h1> <section id="todoapp">
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header> <!-- HEADER VIEW, template: /views/header.js (todo.HeaderView) -->
<section id="main">
<input id="toggle-all" type="checkbox"> <header id="header">
<label for="toggle-all">Mark all as complete</label> <h1>todos</h1>
<ul id="todo-list"></ul> <input id="new-todo" placeholder="What needs to be done?" autofocus data-keypress="add()" data-blur="clear()">
</header>
<!-- MAIN VIEW, template: /views/main.js (todo.MainView) -->
<section id="main" data-show="{{isVisible}}">
<input id="toggle-all" type="checkbox" data-click="toggleAll()" data-checked="{{allCompleted}}">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" class="data-cloak">
<li data-repeat="todo in items" class="{{completedClass(todo.completed)}} {{todo.editing}}">
<div class="view">
<input class="toggle" type="checkbox" data-checked="{{todo.completed}}" data-click="toggle(todo)">
<label data-dblclick="edit(todo)">{{todo.title}}</label>
<button class="destroy" data-click="remove(todo)"></button>
</div>
<input class="edit" value="{{todo.title}}" data-keypress="update(todo)" data-blur="update(todo)">
</li>
</ul>
</section>
<!-- FOOTER VIEW, template: /views/footer.js (todo.FooterView) -->
<footer id="footer" class="data-cloak" data-show="{{footerVisible}}">
<span id="todo-count"><strong>{{active}}</strong> {{itemLabel}} left</span>
<ul id="filters">
<li>
<a class="{{highlightFilter('')}}" href="#/">All</a>
</li>
<li>
<a class="{{highlightFilter('active')}}" href="#/active">Active</a>
</li>
<li>
<a class="{{highlightFilter('completed')}}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-show="{{clearCompletedVisible()}}" data-click="clearCompleted()">Clear completed ({{completed}})</button>
</footer>
</section> </section>
<footer id="footer"></footer>
</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="http://soundstep.com">Romuald Quantin</a> (<a href="http://somajs.github.io/somajs/">soma.js</a>)</p>
<p>Created by <a href="http://soundstep.com">Romuald Quantin</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
<p>With <a href="http://somajs.github.com/somajs">soma.js</a></p> </footer>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer> <!-- LIBRARIES -->
<script id="todo-list-template" type="text/x-handlebars-template">
{{#this}} <script src="components/todomvc-common/base.js"></script>
<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}"> <script src="components/director/build/director.js"></script>
<div class="view"> <script src="components/soma.js/build/soma.js"></script>
<input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}> <script src="components/soma-template/build/soma-template.js"></script>
<label>{{title}}</label>
<button class="destroy"></button> <!-- TODO APP -->
</div>
<input class="edit" value="{{title}}"> <script src="js/models/todos.js"></script>
</li> <script src="js/models/router.js"></script>
{{/this}} <script src="js/views/header.js"></script>
</script> <script src="js/views/main.js"></script>
<script id="footer-template" type="text/x-handlebars-template"> <script src="js/views/footer.js"></script>
<span id="todo-count"><strong>{{active}}</strong> {{itemLabel}} left</span> <script src="js/app.js"></script>
<button id="clear-completed">Clear completed ({{completed}})</button>
</script> </body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/handlebars.js/handlebars.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="js/lib/soma-native_v1.0.2_min.js"></script>
<script src="js/todos/models/models.js"></script>
<script src="js/todos/views/views.js"></script>
<script src="js/todos/controllers/controllers.js"></script>
<script src="js/app.js"></script>
</body>
</html> </html>
labs/architecture-examples/somajs/js/app.js
View file @ 10dee133
var todo = window.todo || {}; /*global soma:false */
(function (todo, soma) {
(function( window ) {
'use strict'; 'use strict';
todo.TodoApp = new soma.Application.extend({ todo.TodoApp = soma.Application.extend({
init: function () {
init: function() { // mapping rules so the model and router can be injected
this.injector.mapClass('model', todo.Model, true);
this.addModel( todo.TodoModel.NAME, new todo.TodoModel() ); this.injector.mapClass('router', todo.Router, true);
// create templates for DOM Elements (optional soma-template plugin)
this.addCommand( todo.TodoEvent.RENDER, todo.TodoCommand ); this.createTemplate(todo.HeaderView, document.getElementById('header'));
this.addCommand( todo.TodoEvent.CREATE, todo.TodoCommand ); this.createTemplate(todo.MainView, document.getElementById('main'));
this.addCommand( todo.TodoEvent.DELETE, todo.TodoCommand ); this.createTemplate(todo.FooterView, document.getElementById('footer'));
this.addCommand( todo.TodoEvent.TOGGLE, todo.TodoCommand );
this.addCommand( todo.TodoEvent.UPDATE, todo.TodoCommand );
this.addCommand( todo.TodoEvent.TOGGLE_ALL, todo.TodoCommand );
this.addCommand( todo.TodoEvent.CLEAR_COMPLETED, todo.TodoCommand );
this.addView( todo.TodoListView.NAME, new todo.TodoListView( $('#todo-list')[0] ) );
this.addView( todo.FooterView.NAME, new todo.FooterView( $('#footer')[0] ) );
this.addView( todo.TodoInputView.NAME, new todo.TodoInputView( $('#new-todo')[0] ) );
}, },
start: function () {
start: function() { // dispatch a custom event to render the templates
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.RENDER ) ); this.dispatcher.dispatch('render');
} }
}); });
var app = new todo.TodoApp(); // create the application
new todo.TodoApp();
})( window ); })(window.todo = window.todo || {}, soma);
labs/architecture-examples/somajs/js/models/router.js 0 → 100644
View file @ 10dee133
/*global Router:false */
(function (todo, Router) {
'use strict';
todo.Router = function (dispatcher) {
// create the router (director.js)
var router = new Router().init();
// dispatch a custom event to render the template on a route change
router.on(/.*/, function () {
dispatcher.dispatch('render');
});
return {
getRoute: function () {
return router.getRoute()[0];
}
};
};
})(window.todo = window.todo || {}, Router);
labs/architecture-examples/somajs/js/models/todos.js 0 → 100644
View file @ 10dee133
(function (todo) {
'use strict';
todo.Model = function () {
var storeKey = 'todos-somajs';
return {
get: function () {
// get the data from the local storage
return JSON.parse(localStorage.getItem(storeKey) || '[]');
},
set: function (items) {
// set the data to the local storage
localStorage.setItem(storeKey, JSON.stringify(items));
},
getActive: function () {
// returns items that are not completed
return this.get().filter(function (item) {
return !item.completed;
}).length;
}
};
};
})(window.todo = window.todo || {});
labs/architecture-examples/somajs/js/todos/controllers/controllers.js deleted 100644 → 0
View file @ 3af9f7bb
var todo = window.todo || {};
(function( window ) {
'use strict';
todo.TodoCommand = soma.Command.extend({
execute: function( event ) {
var model = this.getModel( todo.TodoModel.NAME );
switch( event.type ) {
case todo.TodoEvent.RENDER:
this.getView( todo.TodoListView.NAME ).render( model.data, model.getActiveLength() );
this.getView( todo.FooterView.NAME ).render( model.dataFooter );
break;
case todo.TodoEvent.CREATE:
model.addItem( event.params.todoTitle );
break;
case todo.TodoEvent.DELETE:
model.removeItem( event.params.todoId );
break;
case todo.TodoEvent.TOGGLE:
model.toggleItem( event.params.todoId );
break;
case todo.TodoEvent.TOGGLE_ALL:
model.toggleAll( event.params.toggleAll );
break;
case todo.TodoEvent.UPDATE:
model.updateItem( event.params.todoId, event.params.todoTitle );
break;
case todo.TodoEvent.CLEAR_COMPLETED:
model.clearCompleted();
break;
}
}
});
todo.TodoEvent = soma.Event.extend({
constructor: function( type, todoTitle, todoId, toggleAll ) {
return soma.Event.call( this, type, {
todoTitle: todoTitle,
todoId: todoId,
toggleAll: toggleAll
});
}
});
todo.TodoEvent.RENDER = 'TodoEvent.RENDER';
todo.TodoEvent.CREATE = 'TodoEvent.CREATE';
todo.TodoEvent.DELETE = 'TodoEvent.DELETE';
todo.TodoEvent.UPDATE = 'TodoEvent.UPDATE';
todo.TodoEvent.TOGGLE = 'TodoEvent.TOGGLE';
todo.TodoEvent.TOGGLE_ALL = 'TodoEvent.TOGGLE_ALL';
todo.TodoEvent.CLEAR_COMPLETED = 'TodoEvent.CLEAR_COMPLETED';
})( window );
labs/architecture-examples/somajs/js/todos/models/models.js deleted 100644 → 0
View file @ 3af9f7bb
var todo = window.todo || {};
(function( window ) {
'use strict';
todo.TodoModel = new soma.Model.extend({
dataFooter: null,
init: function() {
this.storeKey = 'todos-somajs';
this.data = JSON.parse( this.getStore() ) || [];
this.updateDataFooter();
},
updateDataFooter: function() {
var active = this.getActiveLength();
this.dataFooter = {
active: active,
itemLabel: active === 1 ? 'item' : 'items',
completed: this.data.length - active,
length: this.data.length
};
},
addItem: function( title ) {
this.data.push({
id: this.uuid(),
title: title,
completed: false
});
this.update();
},
removeItem: function( id ) {
this.data.splice( this.getIndexById( id ), 1 );
this.update();
},
toggleItem: function( id ) {
var item = this.data[ this.getIndexById( id ) ];
item.completed = !item.completed;
this.update();
},
updateItem: function( id, title ) {
this.data[ this.getIndexById( id ) ].title = title;
this.update();
},
toggleAll: function( toggleValue ) {
var i;
for ( i = 0; i < this.data.length; i++ ) {
this.data[i].completed = toggleValue;
}
this.update();
},
clearCompleted: function() {
var i = this.data.length;
while ( i-- ) {
if ( this.data[ i ].completed ) {
this.data.splice( i, 1 );
}
}
this.update();
},
getIndexById: function( id ) {
var i;
for ( i = 0; i < this.data.length; i++ ) {
if ( this.data[ i ].id === id ) {
return i;
}
}
return -1;
},
getActiveLength: function() {
var i,
count = 0;
for ( i = 0; i < this.data.length; i++ ) {
if ( !this.data[ i ].completed ) {
count++;
}
}
return count;
},
update: function() {
this.updateDataFooter();
this.setStore( this.data );
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.RENDER ) );
},
getStore: function() {
return localStorage.getItem( this.storeKey );
},
setStore: function() {
localStorage.setItem( this.storeKey, JSON.stringify( this.data ) );
},
// https://gist.github.com/1308368
uuid: function(a,b){for(b=a='';a++<36;b+=a*51&52?(a^15?8^Math.random()*(a^20?16:4):4).toString(16):'-');return b;}
});
todo.TodoModel.NAME = 'TodoModel';
})( window );
labs/architecture-examples/somajs/js/todos/views/views.js deleted 100644 → 0
View file @ 3af9f7bb
var todo = window.todo || {};
(function( window ) {
'use strict';
var ENTER_KEY = 13;
todo.TodoListView = soma.View.extend({
template: null,
init: function() {
this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
$( this.domElement ).on( 'click', '.destroy', this.destroy.bind( this ) );
$( this.domElement ).on( 'click', '.toggle', this.toggle.bind( this ) );
$( this.domElement ).on( 'dblclick', 'label', this.edit );
$( this.domElement ).on( 'blur', '.edit', this.update.bind( this ) );
$( this.domElement ).on( 'keypress', '.edit', this.blurInput );
$('#toggle-all').click( this.toggleAll );
},
render: function( data, activeCount ) {
$(this.domElement).html( this.template( data ) );
$('#toggle-all').prop( 'checked', !activeCount );
$('#main').toggle( !!data.length );
},
destroy: function( event ) {
var id = $(event.target).closest('li').attr('data-id');
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.DELETE, null, id ) );
},
toggle: function( event ) {
var id = $(event.target).closest('li').attr('data-id');
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.TOGGLE, null, id ) );
},
toggleAll: function() {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.TOGGLE_ALL, null, null, $( this ).prop('checked') ) );
},
edit: function( event ) {
$( this ).closest('li').addClass('editing').find('.edit').focus();
},
update: function( event ) {
var li = $( event.target ).closest('li').removeClass('editing'),
id = li.data('id'),
val = li.find('.edit').val().trim();
if ( val ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.UPDATE, val, id ) );
}
else {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.DELETE, null, id ) );
}
},
blurInput: function( event ) {
if ( event.which === ENTER_KEY ) {
event.target.blur();
}
}
});
todo.TodoListView.NAME = 'TodoListView';
todo.TodoInputView = soma.View.extend({
init: function() {
$( this.domElement ).keypress( this.keyPressHandler.bind( this ) );
$( this.domElement ).blur( this.blur );
},
keyPressHandler: function( event ) {
if ( event.which === ENTER_KEY ) {
this.createItem();
}
},
createItem: function() {
var value = this.domElement.value.trim();
if ( value ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CREATE, value ) );
}
this.domElement.value = '';
},
blur: function( event ) {
if ( !this.value.trim() ) {
this.value = '';
}
}
});
todo.TodoInputView.NAME = 'TodoInputView';
todo.FooterView = soma.View.extend({
template: null,
init: function() {
this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
$( this.domElement ).on( 'click', '#clear-completed', this.clearCompleted.bind( this ) );
},
render: function( data ) {
$( this.domElement ).html( this.template( data ) );
$( this.domElement ).toggle( !!data.length );
$('#clear-completed').toggle( !!data.completed );
},
clearCompleted: function( event ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CLEAR_COMPLETED ) );
}
});
todo.FooterView.NAME = 'FooterView';
})( window );
labs/architecture-examples/somajs/js/views/footer.js 0 → 100644
View file @ 10dee133
(function (todo) {
'use strict';
todo.FooterView = function (scope, template, model, router, dispatcher) {
// get data from the injected model
var items = model.get();
// template function: returns a css class for the current filter (all/active/completed)
scope.highlightFilter = function (filter) {
var route = router.getRoute();
return route === filter ? 'selected' : '';
};
// template function: returns the number of completed items
scope.clearCompleted = function () {
items = items.filter(function (item) {
return !item.completed;
});
update();
};
// save the changes to the model and dispatch a custom event to render the templates
function update() {
model.set(items);
dispatcher.dispatch('render');
}
// listen to a custom event to render the footer view
dispatcher.addEventListener('render', function () {
items = model.get();
scope.active = model.getActive();
scope.completed = items.length - scope.active;
scope.itemLabel = scope.active === 1 ? 'item' : 'items';
scope.footerVisible = items.length > 0 ? true : false;
scope.clearCompletedVisible = scope.completed > 0 ? true : false;
template.render();
});
};
})(window.todo = window.todo || {});
labs/architecture-examples/somajs/js/views/header.js 0 → 100644
View file @ 10dee133
(function (todo) {
'use strict';
var ENTER_KEY = 13;
todo.HeaderView = function (scope, template, model, dispatcher) {
// get data from the injected model
var items = model.get();
// template function: add a new item on an enter key press
scope.add = function (event) {
var value = event.currentTarget.value.trim();
if (event.which === ENTER_KEY && value !== '') {
items.push({
title: value,
completed: false
});
event.currentTarget.value = '';
update();
}
};
// template function: remove text from the input (used on blur event)
scope.clear = function (event) {
event.currentTarget.value = '';
};
// save the changes to the model and dispatch a custom event to render the templates
function update() {
model.set(items);
dispatcher.dispatch('render');
}
// listen to a custom event to render the header view
dispatcher.addEventListener('render', function () {
items = model.get();
template.render();
});
};
})(window.todo = window.todo || {});
labs/architecture-examples/somajs/js/views/main.js 0 → 100644
View file @ 10dee133
This diff is collapsed.
labs/architecture-examples/somajs/readme.md
View file @ 10dee133
...@@ -21,7 +21,6 @@ Get help from other soma.js users: ...@@ -21,7 +21,6 @@ Get help from other soma.js users:
* [Mailing list on Google Groups](https://groups.google.com/forum/#!forum/somajs) * [Mailing list on Google Groups](https://groups.google.com/forum/#!forum/somajs)
* [soma.js on Twitter](http://twitter.com/soundstep) * [soma.js on Twitter](http://twitter.com/soundstep)
_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._ _If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
......
labs/dependency-examples/somajs_require/bower.json 0 → 100644
View file @ 10dee133
{
"name": "todomvc-somajs",
"version": "0.0.0",
"dependencies": {
"todomvc-common": "~0.1.6",
"director": "~1.2.0",
"requirejs": "~2.1.5",
"soma.js": "~2.0.0",
"soma-template": "~0.1.8"
}
}
labs/dependency-examples/somajs_require/components/todomvc-common/bower.json 0 → 100644
View file @ 10dee133
{
"name": "todomvc-common",
"version": "0.1.7",
"gitHead": "42348a8146fe0be847b93cd98664813fbae62be9",
"_id": "todomvc-common@0.1.7",
"readme": "ERROR: No README.md file found!",
"description": "ERROR: No README.md file found!",
"repository": {
"type": "git",
"url": "git://github.com/tastejs/todomvc-common.git"
}
}
\ No newline at end of file
labs/dependency-examples/somajs_require/css/app.css 0 → 100644
View file @ 10dee133
.data-cloak {
display: none;
}
\ No newline at end of file
labs/dependency-examples/somajs_require/index.html 0 → 100644
View file @ 10dee133
This diff is collapsed.
labs/dependency-examples/somajs_require/js/app.js 0 → 100644
View file @ 10dee133
This diff is collapsed.
labs/dependency-examples/somajs_require/js/models/router.js 0 → 100644
View file @ 10dee133
/*global define:false */
(function () {
'use strict';
define(['director'], function (Router) {
var RouterModel = function (dispatcher) {
// create the router (director.js)
var router = new Router().init();
// dispatch a custom event to render the template on a route change
router.on(/.*/, function () {
dispatcher.dispatch('render');
});
return {
getRoute: function () {
return router.getRoute()[0];
}
};
};
return RouterModel;
});
})();
labs/dependency-examples/somajs_require/js/models/todos.js 0 → 100644
View file @ 10dee133
This diff is collapsed.
labs/dependency-examples/somajs_require/js/views/footer.js 0 → 100644
View file @ 10dee133
This diff is collapsed.
labs/dependency-examples/somajs_require/js/views/header.js 0 → 100644
View file @ 10dee133
This diff is collapsed.
labs/dependency-examples/somajs_require/js/views/main.js 0 → 100644
View file @ 10dee133
This diff is collapsed.
labs/dependency-examples/somajs_require/readme.md 0 → 100644
View file @ 10dee133
This diff is collapsed.
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