Adding poor man's routing support. (#812)

examples/duel/pom.xml

@@ -3,6 +3,7 @@
 	xmlns="http://maven.apache.org/POM/4.0.0"
 	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+
 	<modelVersion>4.0.0</modelVersion>
 
 	<groupId>com.todomvc.duel</groupId>
@@ -17,7 +18,7 @@
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 		<resourcesDir>${project.basedir}/src/main/resources</resourcesDir>
 
-		<staticapps.version>0.9.9</staticapps.version>
+		<staticapps.version>0.9.10</staticapps.version>
 		<merge.version>0.6.0</merge.version>
 		<duel.version>0.9.6</duel.version>
 		<slf4j.version>1.7.9</slf4j.version>
@@ -30,12 +31,19 @@
 
 		<merge.cdnMapFile>/cdn.properties</merge.cdnMapFile>
 		<merge.cdnRoot>/cdn/</merge.cdnRoot>
-		<merge.cdnFiles>.ico .png .jpg .gif .eot .woff .ttf .svg .svgz</merge.cdnFiles>
+		<merge.cdnFiles>.ico .png .jpg .gif .cur .eot .woff .ttf .svg .svgz</merge.cdnFiles>
 
 		<staticapps.config>${project.basedir}/staticapp.json</staticapps.config>
 	</properties>
 
 	<dependencies>
+		<!-- SLF4J runtime -->
+		<dependency>
+			<groupId>org.slf4j</groupId>
+			<artifactId>slf4j-jdk14</artifactId>
+			<version>${slf4j.version}</version>
+		</dependency>
+
 		<!-- DUEL runtime -->
 		<dependency>
 			<groupId>org.duelengine</groupId>
@@ -49,13 +57,6 @@
 			<artifactId>duel-staticapps</artifactId>
 			<version>${staticapps.version}</version>
 		</dependency>
-
-		<!-- SLF4J runtime -->
-		<dependency>
-			<groupId>org.slf4j</groupId>
-			<artifactId>slf4j-jdk14</artifactId>
-			<version>${slf4j.version}</version>
-		</dependency>
 	</dependencies>
 
 	<build>

examples/duel/src/main/resources/views/Stats.duel

@@ -3,20 +3,20 @@
 <%-- This footer should hidden by default and shown when there are todos. --%>
 <footer class="footer" if="<%= data.total %>">
 	<span class="todo-count"><strong><%= data.active %></strong> <%= (data.active === 1) ? 'item' : 'items' %> left</span>
-<%-- TODO: implement routing
+
 	<ul class="filters">
 		<li>
-			<a class="selected" href="#/">All</a>
+			<a href="#/" class="<%= !data.filter ? 'selected' : null %>">All</a>
 		</li>
 		<li>
-			<a href="#/active">Active</a>
+			<a href="#/active" class="<%= data.filter === 'active' ? 'selected' : null %>">Active</a>
 		</li>
 		<li>
-			<a href="#/completed">Completed</a>
+			<a href="#/completed" class="<%= data.filter === 'completed' ? 'selected' : null %>">Completed</a>
 		</li>
 	</ul>
---%>
-	<!-- Hidden if no completed items are left ↓ -->
+
+	<%-- Hidden if no completed items are left ↓ --%>
 	<button class="clear-completed"
 		if="<%= data.completed %>"
 		onclick="<%= todos.actions.clearOnClick %>">Clear completed</button>

examples/duel/src/main/webapp/js/todos/controller.js

@@ -11,16 +11,20 @@ var todos = todos || {};
 	var ESC_KEY = 27;
 	var ENTER_KEY = 13;
 
+	// Poor man's routing.
+	addEventListener('hashchange', refreshView, false);
+
+	function curFilter() {
+		return document.location.hash.substr(2);
+	}
+
 	function find(selector, scope) {
 		return (scope || document).querySelector(selector);
 	}
 
 	function refreshView() {
 		// get the data
-		var data = {
-			tasks: todos.model.tasks(),
-			stats: todos.model.stats()
-		};
+		var data = todos.model.viewData(curFilter());
 
 		// build the view
 		var view = todos.views.TodoApp(data).toDOM();
@@ -141,6 +145,7 @@ var todos = todos || {};
 	};
 
 	/*-- init task list -------------------------------*/
+
 	refreshView();
 
 })(todos, window.document);

examples/duel/src/main/webapp/js/todos/model.js

@@ -53,25 +53,40 @@ var todos = todos || {};
 		tasks = [];
 	}
 
-	/*-- export public interface -------------------------------*/
+	function filterTasks(filter) {
+		if (filter === 'completed' || filter === 'active') {
+			var completed = filter === 'completed';
+			return tasks.filter(function (task) {
+				return task.completed === completed;
+			});
+		}
+		return tasks;
+	}
 
-	todos.model = {
-		tasks: function () {
-			return tasks;
-		},
+	function calcStats(filter) {
+		var stats = {
+			total: tasks.length,
 
-		stats: function () {
-			var stats = {};
+			completed: tasks.filter(function (task) {
+					return task.completed;
+				}).length,
 
-			stats.total = tasks.length;
+			filter: filter || ''
+		};
 
-			stats.completed = tasks.filter(function (task) {
-				return task.completed;
-			}).length;
+		stats.active = stats.total - stats.completed;
 
-			stats.active = stats.total - stats.completed;
+		return stats;
+	}
 
-			return stats;
+	/*-- export public interface -------------------------------*/
+
+	todos.model = {
+		viewData: function (filter) {
+			return {
+				tasks: filterTasks(filter),
+				stats: calcStats(filter)
+			};
 		},
 
 		add: function (title) {

examples/duel/www/index.html

@@ -12,7 +12,7 @@
 		<p>Ported to <a href="http://duelengine.org">DUEL</a> by <a href="http://mck.me">Stephen McKamey</a></p>
 		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	</footer>
-	<script src="./cdn/41614acbac7a243d667ca7ec317c4d0c81ca1d7d.js"></script>
+	<script src="./cdn/15eb29cf958c6239f5659fd203f96a63f9475655.js"></script>
 
 </body>
 </html>
\ No newline at end of file