Merge pull request #239 from DimitarChristoff/epitome-fix

refactor for code style, spaces creep in, fix issue with active filter, ...

labs/architecture-examples/epitome/index.html

@@ -25,7 +25,7 @@
 	<footer id="info">
 		<p>Double-click to edit a todo</p>
 		<p>Created by <a href="https://github.com/DimitarChristoff/">Dimitar Christoff</a></p>
-                <p>Powered by <a href="https://github.com/DimitarChristoff/Epitome">Epitome for MooTools</a></p>
+        <p>Powered by <a href="https://dimitarchristoff.github.com/Epitome">Epitome for MooTools</a></p>
 		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	</footer>
 	<script type="text/template" id="item-template">
@@ -63,6 +63,7 @@
 	<script src="js/collections/todo-collection.js"></script>
 	<script src="js/views/todo-list.js"></script>
 	<script src="js/views/todo-main.js"></script>
+	<script src="js/controllers/todo-router.js"></script>
 	<script src="js/app.js"></script>
 </body>
 </html>
\ No newline at end of file

labs/architecture-examples/epitome/js/app.js

 /*global Epitome */
+/*jshint mootools:true */
 (function( window ) {
 	'use strict';
 
@@ -19,10 +20,10 @@
 		collection: todos,
 
 		// encapsulating element to bind to
-		element: document.id('todo-list'),
+		element: document.id( 'todo-list' ),
 
 		// template to use
-		template: document.id('item-template').get('text')
+		template: document.id( 'item-template' ).get( 'text' )
 
 	});
 
@@ -36,11 +37,23 @@
 		element: document.id('todoapp'),
 
 		// stats template from DOM
-		template: document.id('stats-template').get('text')
+		template: document.id( 'stats-template' ).get( 'text' ),
+
+		onReady: function() {
+			// need to work with controller that sets the current state of filtering
+			var proxy = function() {
+				App.router.showActiveFilter();
+			};
+
+			this.addEvents({
+				'add:collection': proxy,
+				'change:collection': proxy
+			});
+		}
 	});
 
 	// the pseudo controller via Epitome.Router
-	App.router = new Epitome.Router({
+	App.router = new App.Router({
 		routes: {
 			'': 'init',
 			'#!/': 'applyFilter',
@@ -49,7 +62,7 @@
 
 		onInit: function() {
 			// we want to always have a state
-			this.navigate('#!/');
+			this.navigate( '#!/' );
 		},
 
 		onApplyFilter: function( filter ) {
@@ -60,11 +73,7 @@
 			// render as per current filter
 			App.todoView.render();
 
-			// fix up the links quickie.
-			var self = this;
-                        document.getElements('#filters li a').each(function( link ) {
-                                link.set( 'class', link.get('href') === self.req ? 'selected' : '' );
-			});
+			this.showActiveFilter();
 		}
 	});
 }( window ));
\ No newline at end of file

labs/architecture-examples/epitome/js/collections/todo-collection.js

-/*global Epitome, App, Class */
+/*global Epitome, App */
+/*jshint mootools:true */
 (function(window) {
 	'use strict';
 
@@ -15,9 +16,14 @@
 		// base model class prototype
 		model: App.Todo,
 
+		map: {
+			active: 0,
+			completed: 1
+		},
+
 		todoFilter: function( model ) {
 			// references the filterType which the controller sets
-                        return this.filterType === false ? true : model.get('completed') === this.filterType;
+			return this.filterType === false ? true : this.map[this.filterType] === +model.get( 'completed' );
 		}
 	});
 }( window ));
\ No newline at end of file

labs/architecture-examples/epitome/js/controllers/todo-router.js

+/*global Epitome, App */
+/*jshint mootools:true */
+(function(window) {
+	'use strict';
+
+	window.App = window.App || {};
+
+	App.Router = new Class({
+
+		Extends: Epitome.Router,
+
+		showActiveFilter: function() {
+			// fix up the links for current filter
+			var self = this;
+			document.getElements( '#filters li a' ).each(function( link ) {
+				link.set( 'class', link.get( 'href' ) === self.req ? 'selected' : '' );
+			});
+		}
+	});
+
+
+}( window ));
\ No newline at end of file

labs/architecture-examples/epitome/js/models/todo-model.js

-/*global Epitome, App, Class */
+/*global Epitome, App */
+/*jshint mootools:true */
 (function(window) {
 	'use strict';
 
@@ -11,7 +12,7 @@
 
 		options: {
 			defaults: {
-				completed: 'active',
+				completed: false,
 				title: ''
 			}
 		}

labs/architecture-examples/epitome/js/views/todo-list.js

-/*global Epitome, App, Class, Elements, Element */
+/*global Epitome, App */
+/*jshint mootools:true */
 (function( window ) {
 	'use strict';
 
@@ -67,26 +68,35 @@
 				el.getElement( this.options.input ).focus();
 			},
 
+			// when enter pressed while editing
+			onHandleKeypress: function( e, el ) {
+				// on enter, blur() and let it bubble to onUpdate.
+				if ( e.key === 'enter' ) {
+					el.blur();
+				}
+			},
+
+
 			// fired when editing ends
 			onUpdate: function( e, el ) {
-                                var p = el.getParent('li').removeClass( this.options.editingClass );
-                                var val = el.get('value').trim();
+				var p = el.getParent( 'li ').removeClass( this.options.editingClass );
+				var val = el.get( 'value' ).trim();
 
 				if ( !val.length ) {
 					// the render method stores the model into the element, get it and remove
-                                        this.collection.removeModel( p.retrieve('model') );
+					this.collection.removeModel( p.retrieve( 'model' ) );
 					return;
 				}
 
-                                p.retrieve('model').set( 'title', val );
+				p.retrieve( 'model' ).set( 'title', val );
 			},
 
 			// handler for clicks on the checkboxes
 			onStatusChange: function( e, el ) {
-                                var p = el.getParent('li');
-                                var done = !!el.get('checked') ? 'completed' : 'active';
+				var p = el.getParent( 'li' );
+				var done = !!el.get( 'checked' );
 
-                                p.retrieve('model').set( 'completed', done );
+				p.retrieve( 'model' ).set( 'completed', done );
 			},
 
 			// when the X is pressed, drop the model
@@ -96,7 +106,7 @@
 				}
 
 				// the render method stores the model into the element, get it and remove
-                                this.collection.removeModel( el.getParent('li').retrieve('model') );
+				this.collection.removeModel( el.getParent( 'li' ).retrieve( 'model' ) );
 			}
 		},
 
@@ -111,10 +121,10 @@
 			// the route controller works with the todoFilter to help determine what we render.
 			this.collection.filter( this.collection.todoFilter.bind( this.collection ) ).each(function( model ) {
 				var obj = model.toJSON();
-                                var li = new Element( self.tagName ).toggleClass( 'completed', obj.completed === 'completed' ).store( 'model', model );
+				var li = new Element( self.tagName ).toggleClass( 'completed', obj.completed ).store( 'model', model );
 
 				// help the template to avoid slower logic in the template layer
-                                obj.completedCheckbox = obj.completed === 'completed' ? 'checked' : '';
+				obj.completedCheckbox = obj.completed ? 'checked' : '';
 
 				// compile template and store resulting element in our Elements collection
 				todos.push( li.set( 'html', self.template( obj ) ) );

labs/architecture-examples/epitome/js/views/todo-main.js

-/*global Epitome, App, Class */
+/*global Epitome, App */
+/*jshint mootools:true */
 (function( window ) {
 	'use strict';
 
@@ -30,8 +31,8 @@
 
 			onToggleAll: function( e, el ) {
 				// all todos will change their models to the new completed value
-				var state = el.get('checked') ? 'completed' : 'active';
-                                this.collection.each(function( model ) {
+				var state = !!el.get( 'checked' );
+				this.collection.each( function( model ) {
 					model.set( 'completed', state );
 				});
 			},
@@ -46,7 +47,7 @@
 			onClearCompleted: function() {
 				// because removing a model re-indexes so we don't get a sparse array, cannot apply that in a normal loop.
 				var toRemove = this.collection.filter(function( model ) {
-                                        return model.get('completed') === 'completed';
+					return model.get( 'completed' );
 				});
 
 				// removeModel actually supports a single model or an array of models as arguments.
@@ -85,12 +86,12 @@
 
 		addTodo: function() {
 			// adding a new model when data exists
-			var val = this.newTodo.get('value').trim();
+			var val = this.newTodo.get( 'value' ).trim();
 
 			if ( val.length ) {
 				this.collection.addModel({
 					title: val,
-					completed: 'active'
+					completed: false
 				});
 			}
 
@@ -104,10 +105,10 @@
 			// work out what we have remaining and what is complete
 			var remaining = 0;
 
-                        var completed = this.collection.filter(function( el ) {
-                                var status = el.get('completed') === 'completed';
+			var completed = this.collection.filter(function( model ) {
+				var status = model.get( 'completed' );
 
-                                if ( !status ) {
+				if ( status === false ) {
 					remaining++;
 				}