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

refactor for code style, spaces creep in, fix issue with active filter, change completed to boolean, editing enter fires blur, see pull/235#issuecomment-7264416

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++;
 				}