Fix #812 Remove routing mark for Olives (#1634)

.jscsrc

@@ -42,6 +42,7 @@
 		"examples/elm/elm-stuff/**",
 		"examples/humble/js/**",
 		"examples/js_of_ocaml/js/*.js",
+		"examples/olives/olives-todo.js",
 		"examples/polymer/elements/elements.build.js",
 		"examples/spine/js/**",
 		"examples/thorax/js/lib/backbone-localstorage.js",

examples/olives/.gitignore

+node_modules/**
+**/.idea/
+
 node_modules/todomvc-app-css/*
 !node_modules/todomvc-app-css/index.css
 

examples/olives/css/app.css

@@ -5,3 +5,11 @@
 .show {
 	display: block !important;
 }
+
+.show-completed li:not(.completed) {
+	display: none;
+}
+
+.show-active li.completed {
+	display: none;
+}

examples/olives/index.html

@@ -16,7 +16,7 @@
 			<section id="main" data-stats="bind:toggleClass,nbItems,show">
 				<input id="toggle-all" type="checkbox" data-event="listen:click,toggleAll" data-stats="bind:toggleCheck,nbCompleted">
 				<label for="toggle-all">Mark all as complete</label>
-				<ul id="todo-list" data-model="foreach">
+				<ul id="todo-list" data-model="foreach" data-router="toggleClassOnRouteChange">
 					<li data-model="bind:toggleClass,completed,completed;">
 						<div class="view">
 							<input class="toggle" type="checkbox" data-model="bind:checked,completed">
@@ -29,6 +29,17 @@
 			</section>
 			<footer id="footer" data-stats="bind:toggleClass,nbItems,show">
 				<span id="todo-count"><strong data-stats="bind:innerHTML,nbLeft">0</strong> <span data-stats="bind:innerHTML,plural"></span> left</span>
+				<ul id="filters">
+				    <li>
+			        	<a data-router="isLinkActive:selected" href="#/">All</a>
+				    </li>
+					<li>
+			        	<a data-router="isLinkActive:selected" href="#/active">Active</a>
+				    </li>
+				    <li>
+			        	<a data-router="isLinkActive:selected" href="#/completed">Completed</a>
+				    </li>
+				</ul>
 				<button id="clear-completed" data-event="listen:click,delAll" data-stats="bind:toggleClass,nbCompleted,show">
 					Clear completed
 				</button>

examples/olives/js/lib/RouterPlugin.js

+'use strict';
+
+var tools = require('./tools');
+
+var routes = {
+	'#/': 'show-all',
+	'#/completed': 'show-completed',
+	'#/active': 'show-active'
+};
+
+/**
+ * A quick plugin to interface with a url-highway router.
+ * @param {url highway} the router's instance
+ * @constructor
+ */
+module.exports = function RouterPlugin(router) {
+	var currentRoute = router.getLastRoute();
+
+	/**
+	 * Set a given className to a dom element if its hash matches with the url's hash
+	 * @param link
+	 * @param className
+	 */
+	this.isLinkActive = function isLinkActive(link, className) {
+		if (router.getLastRoute() === link.hash) {
+			link.classList.add(className);
+		}
+
+		router.watch(function (route) {
+			tools.toggleClass.call(link, link.hash === route, className);
+		});
+	};
+
+	this.toggleClassOnRouteChange = function toggleClassOnRouteChange(list) {
+		router.watch(function (route) {
+			list.classList.remove(routes[currentRoute]);
+			list.classList.add(routes[route]);
+			currentRoute = route;
+		});
+	};
+
+	router.start('#/');
+};

examples/olives/js/lib/router.js

+'use strict';
+
+var UrlHighway = require('url-highway');
+
+var urlHighway = new UrlHighway();
+
+urlHighway.parse = function (hash) {
+	return [hash];
+};
+
+module.exports = urlHighway;

examples/olives/js/uis/controls.js

@@ -2,7 +2,9 @@
 var OObject = require('olives').OObject;
 var EventPlugin = require('olives')['Event.plugin'];
 var BindPlugin = require('olives')['Bind.plugin'];
-var Tools = require('../lib/Tools');
+var tools = require('../lib/tools');
+var router = require('../lib/router');
+var RouterPlugin = require('../lib/RouterPlugin');
 
 module.exports = function controlsInit(view, model, stats) {
 	// The OObject (the controller) inits with a default model which is a simple store
@@ -10,7 +12,7 @@ module.exports = function controlsInit(view, model, stats) {
 	var controls = new OObject(model);
 
 	// A function to get the completed tasks
-	var getCompleted = function () {
+	function getCompleted() {
 		var completed = [];
 		model.loop(function (value, id) {
 			if (value.completed) {
@@ -18,23 +20,24 @@ module.exports = function controlsInit(view, model, stats) {
 			}
 		});
 		return completed;
-	};
+	}
 
 	// Update all stats
-	var updateStats = function () {
+	function updateStats() {
 		var nbCompleted = getCompleted().length;
 
 		stats.set('nbItems', model.count());
 		stats.set('nbLeft', stats.get('nbItems') - nbCompleted);
 		stats.set('nbCompleted', nbCompleted);
 		stats.set('plural', stats.get('nbLeft') === 1 ? 'item' : 'items');
-	};
+	}
 
 	// Add plugins to the UI.
 	controls.seam.addAll({
 		event: new EventPlugin(controls),
+		router: new RouterPlugin(router),
 		stats: new BindPlugin(stats, {
-			toggleClass: Tools.toggleClass
+			toggleClass: tools.toggleClass
 		})
 	});
 
@@ -42,7 +45,7 @@ module.exports = function controlsInit(view, model, stats) {
 	controls.alive(view);
 
 	// Delete all tasks
-	controls.delAll = function () {
+	controls.delAll = function delAll() {
 		model.delAll(getCompleted());
 	};
 

examples/olives/js/uis/list.js

@@ -2,14 +2,16 @@
 var OObject = require('olives').OObject;
 var EventPlugin = require('olives')['Event.plugin'];
 var BindPlugin = require('olives')['Bind.plugin'];
-var Tools = require('../lib/Tools');
+var tools = require('../lib/tools');
+var router = require('../lib/router');
+var RouterPlugin = require('../lib/routerPlugin');
 
 module.exports = function listInit(view, model, stats) {
 	// The OObject (the controller) initializes with a default model which is a simple store
 	// But it can be initialized with any other store, like the LocalStore
 	var list = new OObject(model);
 	var modelPlugin = new BindPlugin(model, {
-		toggleClass: Tools.toggleClass
+		toggleClass: tools.toggleClass
 	});
 	var ENTER_KEY = 13;
 	var ESC_KEY = 27;
@@ -18,8 +20,9 @@ module.exports = function listInit(view, model, stats) {
 	list.seam.addAll({
 		event: new EventPlugin(list),
 		model: modelPlugin,
+		router: new RouterPlugin(router),
 		stats: new BindPlugin(stats, {
-			toggleClass: Tools.toggleClass,
+			toggleClass: tools.toggleClass,
 			toggleCheck: function (value) {
 				this.checked = model.count() === value ? 'on' : '';
 			}
@@ -41,7 +44,7 @@ module.exports = function listInit(view, model, stats) {
 	};
 
 	// Enter edit mode
-	list.startEdit = function (event, node) {
+	list.startEdit = function startEdit(event, node) {
 		var taskId = modelPlugin.getItemIndex(node);
 
 		toggleEditing(taskId, true);
@@ -49,7 +52,7 @@ module.exports = function listInit(view, model, stats) {
 	};
 
 	// Leave edit mode
-	list.stopEdit = function (event, node) {
+	list.stopEdit = function stopEdit(event, node) {
 		var taskId = modelPlugin.getItemIndex(node);
 		var value;
 
@@ -62,7 +65,8 @@ module.exports = function listInit(view, model, stats) {
 				model.del(taskId);
 			}
 
-			// When task #n is removed, #n+1 becomes #n, the dom node is updated to the new value, so editing mode should exit anyway
+			// When task #n is removed, #n+1 becomes #n, the dom node is updated to the new value,
+			// so editing mode should exit anyway
 			if (model.has(taskId)) {
 				toggleEditing(taskId, false);
 			}
@@ -78,7 +82,7 @@ module.exports = function listInit(view, model, stats) {
 
 	function toggleEditing(taskId, bool) {
 		var li = getElementByModelId('li', taskId);
-		Tools.toggleClass.call(li, bool, 'editing');
+		tools.toggleClass.call(li, bool, 'editing');
 	}
 
 	function getElementByModelId(selector, taskId) {

examples/olives/node_modules/todomvc-app-css/index.css

@@ -197,8 +197,8 @@ label[for='toggle-all'] {
 }
 
 #todo-list li label {
-	white-space: pre-line;
-	word-break: break-all;
+	white-space: pre;
+	word-break: break-word;
 	padding: 15px 60px 15px 15px;
 	margin-left: 45px;
 	display: block;

examples/olives/node_modules/todomvc-common/base.js

@@ -114,7 +114,12 @@
 	})({});
 
 	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(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		ga('create', 'UA-31081062-1', 'auto');
+		ga('send', 'pageview');
 	}
 	/* jshint ignore:end */
 
@@ -228,7 +233,7 @@
 			xhr.onload = function (e) {
 				var parsedResponse = JSON.parse(e.target.responseText);
 				if (parsedResponse instanceof Array) {
-					var count = parsedResponse.length
+					var count = parsedResponse.length;
 					if (count !== 0) {
 						issueLink.innerHTML = 'This app has ' + count + ' open issues';
 						document.getElementById('issue-count').style.display = 'inline';

examples/olives/package.json

 {
   "private": true,
   "dependencies": {
-    "emily": "^3.0.3",
-    "olives": "^3.0.5",
+    "emily": "^3.0.7",
+    "olives": "^3.0.8",
     "todomvc-app-css": "^1.0.1",
-    "todomvc-common": "^1.0.1"
+    "todomvc-common": "^1.0.1",
+    "url-highway": "1.0.0"
   },
   "scripts": {
     "build": "browserify ./js/app.js -o olives-todo.js",