Write the JavaScript for URL filtering

app.js

@@ -49,6 +49,7 @@ function initApp (config, callback) {
 
 	// View helpers
 	require('./view/helper/date')(hbs.registerHelper);
+	require('./view/helper/string')(hbs.registerHelper);
 	require('./view/helper/url')(hbs.registerHelper);
 
 	// Populate view locals

public/js/site.js

@@ -230,4 +230,45 @@ $(document).ready(function(){
             previousPoint = null;
         }
     });
+
+
+	// Task filter
+
+	function initTaskFilter (container) {
+		var tasks = initTaskFilterTasks(container);
+		var input = initTaskFilterInput(container, tasks);
+	}
+
+	function initTaskFilterTasks (container) {
+		var tasks = container.find('[data-role=task]');
+		return tasks;
+	}
+
+	function initTaskFilterInput (container, tasks) {
+		var input = container.find('[data-role=input]');
+		input.on('keyup', function () {
+			filterTasks(tasks, input.val());
+		});
+		return input;
+	}
+
+	function filterTasks (tasks, query) {
+		query = query.replace(/[^a-z0-9\s]+/gi, '').trim();
+		tasks.removeClass('hidden');
+		if (/^\s*$/.test(query)) {
+			return;
+		}
+		var queryRegExp = new RegExp('(' + query.replace(/\s+/gi, '|') + ')', 'i');
+		tasks.filter(function () {
+			return !queryRegExp.test($(this).data('keywords'));
+		}).addClass('hidden');
+	}
+
+	var taskLists = $('[data-control=task-list]');
+	if (taskLists.length > 0) {
+		$('[data-control=task-list]').each(function () {
+			initTaskFilter($(this));
+		});
+	}
+
 });

public/less/site-nojavascript.less

@@ -26,4 +26,7 @@
 	.show-class {
 		display:block;
 	}
+	.no-js-hide {
+		display: none;
+	}
 }

view/helper/string.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = helper;
+
+function helper (register) {
+
+	// Convert a string to lower-case
+	register('lowercase', function (context) {
+		return context.toLowerCase();
+	});
+
+}

view/helper/url.js

@@ -6,7 +6,7 @@ function helper (register) {
 
 	// Simplify url by removing (eg http://, https://, trailing slashes) from url
 	register('simplify-url', function (context) {
-		return context.replace(/^https?:\/\//i, '').replace(/\/$/, '');
+		return context.replace(/^https?:\/\//i, '').replace(/\/$/, '').toLowerCase();
 	});
 
 }

view/partial/tasks.html

@@ -1,4 +1,11 @@
 
+<div data-control="task-list">
+
+	<div class="no-js-hide">
+		<label for="task-filter">Filter URLs</label>
+		<input id="task-filter" type="text" data-role="input"/>
+	</div>
+
 	<ul class="list-unstyled clearfix crunch-bottom">
 		<li class="col-md-4 col-sm-6 task-card add-task">
 			{{#if readonly}}
@@ -14,7 +21,7 @@
 			{{/if}}
 		</li>
 		{{#each tasks}}
-		<li class="col-md-4 col-sm-6 task-card" data-test="task">
+			<li class="col-md-4 col-sm-6 task-card" data-test="task" data-role="task" data-keywords="{{lowercase name}} {{lowercase standard}} {{simplify-url url}}">
 				<a class="well task-card-link crunch-bottom" title="Details for URL {{simplify-url url}}" href="{{href}}">
 					<p class="h3">{{name}}</p>
 					<p class="h5">({{standard}})</p>
@@ -45,3 +52,5 @@
 			</li>
 		{{/each}}
 	</ul>
+
+</div>