maria updated to use bower.

architecture-examples/maria/component.json

+{
+  "name": "todomvc-maria",
+  "version": "0.0.0",
+  "dependencies": {
+    "todomvc-common": "~0.1.4",
+    "director": "~1.2.0"
+  }
+}

architecture-examples/maria/components/todomvc-common/base.css

+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #eaeaea url('bg.png');
+	color: #4d4d4d;
+	width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#todoapp {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.9);
+	margin: 130px 0 40px 0;
+	border: 1px solid #ccc;
+	position: relative;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+				0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+	content: '';
+	border-left: 1px solid #f5d6d6;
+	border-right: 1px solid #f5d6d6;
+	width: 2px;
+	position: absolute;
+	top: 0;
+	left: 40px;
+	height: 100%;
+}
+
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+}
+
+#todoapp input:-moz-placeholder {
+	font-style: italic;
+	color: #a9a9a9;
+}
+
+#todoapp h1 {
+	position: absolute;
+	top: -120px;
+	width: 100%;
+	font-size: 70px;
+	font-weight: bold;
+	text-align: center;
+	color: #b3b3b3;
+	color: rgba(255, 255, 255, 0.3);
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+#header {
+	padding-top: 15px;
+	border-radius: inherit;
+}
+
+#header:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 15px;
+	z-index: 2;
+	border-bottom: 1px solid #6c615c;
+	background: #8d7d77;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+	border-top-left-radius: 1px;
+	border-top-right-radius: 1px;
+}
+
+#new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.02);
+	z-index: 2;
+	box-shadow: none;
+}
+
+#main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+#toggle-all {
+	position: absolute;
+	top: -42px;
+	left: -4px;
+	width: 40px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+	content: '»';
+	font-size: 28px;
+	color: #d9d9d9;
+	padding: 0 25px 7px;
+}
+
+#toggle-all:checked:before {
+	color: #737373;
+}
+
+#todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+#todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px dotted #ccc;
+}
+
+#todo-list li:last-child {
+	border-bottom: none;
+}
+
+#todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+#todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+#todo-list li .toggle:after {
+	content: '✔';
+	line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+	font-size: 20px;
+	color: #d9d9d9;
+	text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+	color: #85ada7;
+	text-shadow: 0 1px 0 #669991;
+	bottom: 1px;
+	position: relative;
+}
+
+#todo-list li label {
+	word-break: break-word;
+	padding: 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	-webkit-transition: color 0.4s;
+	-moz-transition: color 0.4s;
+	-ms-transition: color 0.4s;
+	-o-transition: color 0.4s;
+	transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+	color: #a9a9a9;
+	text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 22px;
+	color: #a88a8a;
+	-webkit-transition: all 0.2s;
+	-moz-transition: all 0.2s;
+	-ms-transition: all 0.2s;
+	-o-transition: all 0.2s;
+	transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+	text-shadow: 0 0 1px #000,
+				 0 0 10px rgba(199, 107, 107, 0.8);
+	-webkit-transform: scale(1.3);
+	-moz-transform: scale(1.3);
+	-ms-transform: scale(1.3);
+	-o-transform: scale(1.3);
+	transform: scale(1.3);
+}
+
+#todo-list li .destroy:after {
+	content: '✖';
+}
+
+#todo-list li:hover .destroy {
+	display: block;
+}
+
+#todo-list li .edit {
+	display: none;
+}
+
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+#footer {
+	color: #777;
+	padding: 0 15px;
+	position: absolute;
+	right: 0;
+	bottom: -31px;
+	left: 0;
+	height: 20px;
+	z-index: 1;
+	text-align: center;
+}
+
+#footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 31px;
+	left: 0;
+	height: 50px;
+	z-index: -1;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+				0 6px 0 -3px rgba(255, 255, 255, 0.8),
+				0 7px 1px -3px rgba(0, 0, 0, 0.3),
+				0 43px 0 -6px rgba(255, 255, 255, 0.8),
+				0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+	float: left;
+	text-align: left;
+}
+
+#filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+#filters li {
+	display: inline;
+}
+
+#filters li a {
+	color: #83756f;
+	margin: 2px;
+	text-decoration: none;
+}
+
+#filters li a.selected {
+	font-weight: bold;
+}
+
+#clear-completed {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	background: rgba(0, 0, 0, 0.1);
+	font-size: 11px;
+	padding: 0 10px;
+	border-radius: 3px;
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#clear-completed:hover {
+	background: rgba(0, 0, 0, 0.15);
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+#info {
+	margin: 65px auto 0;
+	color: #a6a6a6;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+#info a {
+	color: inherit;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	#toggle-all,
+	#todo-list li .toggle {
+		background: none;
+	}
+
+	#todo-list li .toggle {
+		height: 40px;
+	}
+
+	#toggle-all {
+		top: -56px;
+		left: -15px;
+		width: 65px;
+		height: 41px;
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+.hidden{
+	display:none;
+}

architecture-examples/maria/components/todomvc-common/base.js

+(function () {
+	'use strict';
+
+	if (location.hostname === 'todomvc.com') {
+		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+	}
+
+	function getSourcePath() {
+		// If accessed via addyosmani.github.io/todomvc/, strip the project path.
+		if (location.hostname.indexOf('github.io') > 0) {
+			return location.pathname.replace(/todomvc\//, '');
+		}
+		return location.pathname;
+	}
+
+	function appendSourceLink() {
+		var sourceLink = document.createElement('a');
+		var paragraph = document.createElement('p');
+		var footer = document.getElementById('info');
+		var urlBase = 'https://github.com/addyosmani/todomvc/tree/gh-pages';
+
+		if (footer) {
+			sourceLink.href = urlBase + getSourcePath();
+			sourceLink.appendChild(document.createTextNode('Check out the source'));
+			paragraph.appendChild(sourceLink);
+			footer.appendChild(paragraph);
+		}
+	}
+
+	function redirect() {
+		if (location.hostname === 'addyosmani.github.io') {
+			location.href = location.href.replace('addyosmani.github.io/todomvc', 'todomvc.com');
+		}
+	}
+
+	appendSourceLink();
+	redirect();
+})();

architecture-examples/maria/src/index.html → architecture-examples/maria/index.html

@@ -3,16 +3,20 @@
 <head>
 	<meta charset="utf-8">
 	<title>Maria • TodoMVC</title>
-
-	<link href="../../../assets/base.css" rel="stylesheet">
+	<link href="components/todomvc-common/base.css" rel="stylesheet">
 	<link href="css/app.css" rel="stylesheet">
-
 </head>
 <body>
+	<footer id="info">
+		<p>Double-click to edit a todo</p>
+		<p>Created by <a href="http://github.com/petermichaux">Peter Michaux</a></p>
+		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+	</footer>
 
-	<script src="../lib/maria/maria.js"></script>
-	<script src="../lib/aristocrat/aristocrat.js"></script>
-	<script src="../../../assets/director.min.js"></script>
+	<script src="components/todomvc-common/base.js"></script>
+	<script src="components/director/build/director.js"></script>
+	<script src="lib/maria/maria.js"></script>
+	<script src="lib/aristocrat/aristocrat.js"></script>
 
 	<script src="js/namespace.js"></script>
 	<script src="js/util.js"></script>
@@ -25,12 +29,5 @@
 	<script src="js/views/TodoView.js"></script>
 	<script src="js/controllers/TodoController.js"></script>
 	<script src="js/bootstrap.js"></script>
-
-	<footer id="info">
-		<p>Double-click to edit a todo</p>
-		<p>Created by <a href="http://github.com/petermichaux">Peter Michaux</a></p>
-		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-	</footer>
-
 </body>
 </html>

architecture-examples/maria/src/js/bootstrap.js → architecture-examples/maria/js/bootstrap.js

 /*jshint strict: false */
 /*global maria, Router, checkit */
 
-maria.on(window, 'load', function() {
+maria.on(window, 'load', function () {
 	var model;
+
 	if ((typeof localStorage === 'object') && (typeof JSON === 'object')) {
 		var store = localStorage.getItem('todos-maria');
-		model = store ? checkit.TodosModel.fromJSON(JSON.parse(store)) :
-						new checkit.TodosModel();
-		maria.on(model, 'change', function() {
+
+		if (store) {
+			model = checkit.TodosModel.fromJSON(JSON.parse(store));
+		} else {
+			model = new checkit.TodosModel();
+		}
+
+		maria.on(model, 'change', function () {
 			localStorage.setItem('todos-maria', JSON.stringify(model.toJSON()));
 		});
-	}
-	else {
+	} else {
 		model = new checkit.TodosModel();
 	}
 
 	var routes = {
-		'/': function() {
+		'/': function () {
 			model.setMode('all');
 		},
-		'/active': function() {
+		'/active': function () {
 			model.setMode('incompleted');
 		},
-		'/completed': function() {
+		'/completed': function () {
 			model.setMode('completed');
 		}
 	};
-	var router = Router(routes);
+
+	var router = new Router(routes);
 	router.init();
 
 	var view = new checkit.TodosAppView(model);

architecture-examples/maria/src/js/controllers/TodoController.js → architecture-examples/maria/js/controllers/TodoController.js

@@ -3,35 +3,41 @@
 
 maria.Controller.subclass(checkit, 'TodoController', {
 	properties: {
-		onClickDestroy: function() {
+		onClickDestroy: function () {
 			this.getModel().destroy();
 		},
-		onClickToggle: function() {
+
+		onClickToggle: function () {
 			this.getModel().toggleCompleted();
 		},
-		onDblclickLabel: function() {
+
+		onDblclickLabel: function () {
 			this.getView().showEdit();
 		},
-		onKeyupEdit: function(evt) {
+
+		onKeyupEdit: function (evt) {
 			var keyCode = evt.keyCode;
+
 			if (checkit.isEnterKeyCode(keyCode)) {
 				this.onBlurEdit();
-			}
-			else if (checkit.isEscapeKeyCode(keyCode)) {
+			} else if (checkit.isEscapeKeyCode(keyCode)) {
 				var view = this.getView();
+
 				view.resetEdit();
 				view.showDisplay();
 			}
 		},
-		onBlurEdit: function() {
+
+		onBlurEdit: function () {
 			var model = this.getModel();
 			var view = this.getView();
 			var value = view.getInputValue();
+
 			view.showDisplay();
+
 			if (checkit.isBlank(value)) {
 				model.destroy();
-			}
-			else {
+			} else {
 				model.setTitle(value);
 			}
 		}

architecture-examples/maria/src/js/controllers/TodosController.js → architecture-examples/maria/js/controllers/TodosController.js

@@ -3,28 +3,33 @@
 
 maria.Controller.subclass(checkit, 'TodosAppController', {
 	properties: {
-		onKeyupNewTodo: function(evt) {
+		onKeyupNewTodo: function (evt) {
 			if (checkit.isEnterKeyCode(evt.keyCode)) {
 				var view = this.getView();
 				var value = view.getInputValue();
+
 				if (!checkit.isBlank(value)) {
 					var todo = new checkit.TodoModel();
+
 					todo.setTitle(value);
 					this.getModel().add(todo);
+
 					view.clearInput();
 				}
 			}
 		},
-		onClickToggleAll: function() {
+
+		onClickToggleAll: function () {
 			var model = this.getModel();
+
 			if (model.isAllCompleted()) {
 				model.markAllIncompleted();
-			}
-			else {
+			} else {
 				model.markAllCompleted();
 			}
 		},
-		onClickClearCompleted: function() {
+
+		onClickClearCompleted: function () {
 			this.getModel().deleteCompleted();
 		}
 	}

architecture-examples/maria/src/js/models/TodoModel.js → architecture-examples/maria/js/models/TodoModel.js

@@ -5,30 +5,40 @@ maria.Model.subclass(checkit, 'TodoModel', {
 	properties: {
 		_title: '',
 		_completed: false,
-		getTitle: function() {
+
+		getTitle: function () {
 			return this._title;
 		},
-		setTitle: function(title) {
+
+		setTitle: function (title) {
 			title = ('' + title).trim();
+
 			if (this._title !== title) {
 				this._title = title;
-				this.dispatchEvent({type: 'change'});
+
+				this.dispatchEvent({ type: 'change' });
 			}
 		},
-		isCompleted: function() {
+
+		isCompleted: function () {
 			return this._completed;
 		},
-		setCompleted: function(completed) {
+
+		setCompleted: function (completed) {
 			completed = !!completed;
+
 			if (this._completed !== completed) {
 				this._completed = completed;
-				this.dispatchEvent({type: 'change'});
+
+				this.dispatchEvent({ type: 'change' });
 			}
 		},
-		toggleCompleted: function() {
+
+		toggleCompleted: function () {
 			this.setCompleted(!this.isCompleted());
 		},
-		toJSON: function() {
+
+		toJSON: function () {
 			return {
 				title: this._title,
 				completed: this._completed
@@ -37,9 +47,11 @@ maria.Model.subclass(checkit, 'TodoModel', {
 	}
 });
 
-checkit.TodoModel.fromJSON = function(todoJSON) {
+checkit.TodoModel.fromJSON = function (todoJSON) {
 	var model = new checkit.TodoModel();
+
 	model._title = todoJSON.title;
 	model._completed = todoJSON.completed;
+
 	return model;
 };

architecture-examples/maria/src/js/models/TodosModel.js → architecture-examples/maria/js/models/TodosModel.js

@@ -4,61 +4,79 @@
 maria.SetModel.subclass(checkit, 'TodosModel', {
 	properties: {
 		_mode: 'all',
-		getPossibleModes: function() {
+
+		getPossibleModes: function () {
 			return ['all', 'incompleted', 'completed'];
 		},
-		getMode: function() {
+
+		getMode: function () {
 			return this._mode;
 		},
-		setMode: function(mode) {
-			if (this.getPossibleModes().some(function(m) {return m === mode;})) {
+
+		setMode: function (mode) {
+			var modePossible = this.getPossibleModes().some(function (m) {
+				return m === mode;
+			});
+
+			if (modePossible) {
 				if (this._mode !== mode) {
 					this._mode = mode;
-					this.dispatchEvent({type: 'change'});
-				}
+
+					this.dispatchEvent({ type: 'change' });
 				}
-			else {
-				throw new Error('checkit.TodosModel.prototype.setMode: unsupported mode "'+mode+'".');
+			} else {
+				throw new Error('checkit.TodosModel.prototype.setMode: unsupported mode "' + mode + '".');
 			}
 		},
-		getCompleted: function() {
-			return this.filter(function(todo) {
+
+		getCompleted: function () {
+			return this.filter(function (todo) {
 				return todo.isCompleted();
 			});
 		},
-		getIncompleted: function() {
-			return this.filter(function(todo) {
+
+		getIncompleted: function () {
+			return this.filter(function (todo) {
 				return !todo.isCompleted();
 			});
 		},
-		isAllCompleted: function() {
+
+		isAllCompleted: function () {
 			return (this.length > 0) && (this.getCompleted().length === this.length);
 		},
-		markAllCompleted: function() {
-			this.forEach(function(todo) {
+
+		markAllCompleted: function () {
+			this.forEach(function (todo) {
 				todo.setCompleted(true);
 			});
 		},
-		markAllIncompleted: function() {
-			this.forEach(function(todo) {
+
+		markAllIncompleted: function () {
+			this.forEach(function (todo) {
 				todo.setCompleted(false);
 			});
 		},
-		deleteCompleted: function() {
+
+		deleteCompleted: function () {
 			this['delete'].apply(this, this.getCompleted());
 		},
-		toJSON: function() {
-			return this.map(function(todo) {
+
+		toJSON: function () {
+			return this.map(function (todo) {
 				return todo.toJSON();
 			});
 		}
 	}
 });
 
-checkit.TodosModel.fromJSON = function(todosJSON) {
+checkit.TodosModel.fromJSON = function (todosJSON) {
 	var model = new checkit.TodosModel();
-	for (var i = 0, ilen = todosJSON.length; i < ilen; i++) {
+	var i;
+	var ilen;
+
+	for (i = 0, ilen = todosJSON.length; i < ilen; i++) {
 		model.add(checkit.TodoModel.fromJSON(todosJSON[i]));
 	}
+
 	return model;
 };

architecture-examples/maria/src/js/util.js → architecture-examples/maria/js/util.js

 /*jshint strict: false */
 /*global checkit */
 
-checkit.isBlank = function(str) {
+checkit.isBlank = function (str) {
 	return (/^\s*$/).test(str);
 };
 
-checkit.escapeHTML = function(str) {
+checkit.escapeHTML = function (str) {
 	return String(str)
 		.replace(/&(?!\w+;)/g, '&')
 		.replace(/</g, '&lt;')
@@ -13,10 +13,10 @@ checkit.escapeHTML = function(str) {
 		.replace(/"/g, '&quot;');
 };
 
-checkit.isEnterKeyCode = function(keyCode) {
+checkit.isEnterKeyCode = function (keyCode) {
 	return keyCode === 13;
 };
 
-checkit.isEscapeKeyCode = function(keyCode) {
+checkit.isEscapeKeyCode = function (keyCode) {
 	return keyCode === 27;
 };

architecture-examples/maria/src/js/views/TodoView.js → architecture-examples/maria/js/views/TodoView.js

@@ -3,17 +3,18 @@
 
 maria.ElementView.subclass(checkit, 'TodoView', {
 	uiActions: {
-		'click    .destroy': 'onClickDestroy' ,
-		'click    .toggle' : 'onClickToggle'  ,
-		'dblclick label'   : 'onDblclickLabel',
-		'keyup    .edit'   : 'onKeyupEdit'    ,
-		'blur     .edit'   : 'onBlurEdit'
+		'click .destroy': 'onClickDestroy',
+		'click .toggle': 'onClickToggle',
+		'dblclick label': 'onDblclickLabel',
+		'keyup .edit': 'onKeyupEdit',
+		'blur .edit': 'onBlurEdit'
 	},
+
 	properties: {
-		buildData: function() {
+		buildData: function () {
 			var model = this.getModel();
-
 			var item = this.find('li');
+
 			aristocrat.removeClass(item, '(in|)completed');
 			aristocrat.addClass(item, (model.isCompleted() ? 'completed' : 'incompleted'));
 
@@ -21,23 +22,32 @@ maria.ElementView.subclass(checkit, 'TodoView', {
 
 			this.find('.toggle').checked = model.isCompleted();
 		},
-		update: function() {
+
+		update: function () {
 			this.buildData();
 		},
-		resetEdit: function() {
+
+		resetEdit: function () {
 			var input = this.find('.edit');
+
 			input.value = this.getModel().getTitle();
 		},
-		showEdit: function() {
-			this.resetEdit();
+
+		showEdit: function () {
 			var input = this.find('.edit');
+
+			this.resetEdit();
+
 			aristocrat.addClass(this.find('li'), 'editing');
+
 			input.focus();
 		},
-		showDisplay: function() {
+
+		showDisplay: function () {
 			aristocrat.removeClass(this.find('li'), 'editing');
 		},
-		getInputValue: function() {
+
+		getInputValue: function () {
 			return this.find('.edit').value;
 		}
 	}

architecture-examples/maria/src/js/views/TodosView.js → architecture-examples/maria/js/views/TodosView.js

@@ -3,12 +3,13 @@
 
 maria.SetView.subclass(checkit, 'TodosAppView', {
 	uiActions: {
-		'keyup #new-todo'       : 'onKeyupNewTodo'       ,
-		'click #toggle-all'     : 'onClickToggleAll'     ,
+		'keyup #new-todo': 'onKeyupNewTodo',
+		'click #toggle-all': 'onClickToggleAll',
 		'click #clear-completed': 'onClickClearCompleted'
 	},
+
 	properties: {
-		buildData: function() {
+		buildData: function () {
 			var model = this.getModel();
 
 			var length = model.length;
@@ -20,7 +21,7 @@ maria.SetView.subclass(checkit, 'TodosAppView', {
 			checkbox.disabled = model.isEmpty();
 
 			var todoList = this.find('#todo-list');
-			model.getPossibleModes().forEach(function(mode) {
+			model.getPossibleModes().forEach(function (mode) {
 				aristocrat.removeClass(todoList, mode);
 			});
 			aristocrat.addClass(todoList, model.getMode());
@@ -42,21 +43,27 @@ maria.SetView.subclass(checkit, 'TodosAppView', {
 			clearButton.style.display = (completedLength > 0) ? '' : 'none';
 			clearButton.innerHTML = 'Clear completed (' + completedLength + ')';
 		},
-		update: function(evt) {
+
+		update: function (evt) {
 			maria.SetView.prototype.update.call(this, evt);
+
 			this.buildData();
 		},
-		getContainerEl: function() {
+
+		getContainerEl: function () {
 			// child views will be appended to this element
 			return this.find('#todo-list');
 		},
-		createChildView: function(todoModel) {
+
+		createChildView: function (todoModel) {
 			return new checkit.TodoView(todoModel);
 		},
-		getInputValue: function() {
+
+		getInputValue: function () {
 			return this.find('#new-todo').value;
 		},
-		clearInput: function() {
+
+		clearInput: function () {
 			this.find('#new-todo').value = '';
 		}
 	}