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

@@ -187,9 +187,9 @@ $(document).ready(function(){
             '</li>'
         );
     });
-    
+
     choiceContainer.find('input').click(plotAccordingToChoices);
-        
+
     function plotAccordingToChoices() {
         var data = [];
         choiceContainer.find('input:checked').each(function () {
@@ -198,7 +198,7 @@ $(document).ready(function(){
                 data.push(datasets[key]);
             }
         });
-        
+
         if (data.length > -1) {
             $.plot(graphContainer, data, graphOptions);
         }
@@ -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,47 +1,56 @@
 
-<ul class="list-unstyled clearfix crunch-bottom">
+<div data-control="task-list">
-	<li class="col-md-4 col-sm-6 task-card add-task">
+
-		{{#if readonly}}
+	<div class="no-js-hide">
-			<span class="well task-card-link crunch-bottom">
+		<label for="task-filter">Filter URLs</label>
-				<p class="h3 crunch">Add new URL</p>
+		<input id="task-filter" type="text" data-role="input"/>
-				<p class="supersize-me crunch">+</p>
+	</div>
-			</span>
+
-		{{else}}
+	<ul class="list-unstyled clearfix crunch-bottom">
-			<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
+		<li class="col-md-4 col-sm-6 task-card add-task">
-				<p class="h3 crunch">Add new URL</p>
+			{{#if readonly}}
-				<p class="supersize-me crunch">+</p>
+				<span class="well task-card-link crunch-bottom">
-			</a>
+					<p class="h3 crunch">Add new URL</p>
-		{{/if}}
+					<p class="supersize-me crunch">+</p>
-	</li>
+				</span>
-	{{#each tasks}}
+			{{else}}
-		<li class="col-md-4 col-sm-6 task-card" data-test="task">
+				<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
-			<a class="well task-card-link crunch-bottom" title="Details for URL {{simplify-url url}}" href="{{href}}">
+					<p class="h3 crunch">Add new URL</p>
-				<p class="h3">{{name}}</p>
+					<p class="supersize-me crunch">+</p>
-				<p class="h5">({{standard}})</p>
+				</a>
-				{{#if lastResult}}
+			{{/if}}
-				<ul class="clearfix list-unstyled floated-list task-stats">
-					{{#lastResult}}
-						<li class="danger" title="Number of errors ({{count.error}})">{{count.error}}<span class="stat-type">Errors</span></li>
-						<li class="warning" title="Number of warnings ({{count.warning}})">{{count.warning}}<span class="stat-type">Warnings</span></li>
-						<li class="info last" title="Number of notices ({{count.notice}})">{{count.notice}}<span class="stat-type">Notices</span></li>
-					{{/lastResult}}
-				</ul>
-				Last run {{date-format lastResult.date format="DD MMM YYYY"}}
-				{{else}}
-					<p class="no-results">No results</p>
-				{{/if}}
-			</a>
-			{{#unless ../readonly}}
-				<div class="btn-group options-button text-right">
-				        <button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown"><span class="sr-only">Options</span><span class="glyphicon glyphicon-cog"></span></button>
-				        <ul class="dropdown-menu pull-right" role="menu">
-				          	<li><a href="{{href}}/edit">Edit this task</a></li>
-							<li><a href="{{href}}/delete">Delete this task</a></li>
-							<li class="divider"></li>
-							<li><a href="{{href}}/run" data-test="run-task">Run pa11y</a></li>
-						</ul>
-				    </div>
-			{{/unless}}
 		</li>
-	{{/each}}
+		{{#each tasks}}
-</ul>
+			<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>
+					{{#if lastResult}}
+					<ul class="clearfix list-unstyled floated-list task-stats">
+						{{#lastResult}}
+							<li class="danger" title="Number of errors ({{count.error}})">{{count.error}}<span class="stat-type">Errors</span></li>
+							<li class="warning" title="Number of warnings ({{count.warning}})">{{count.warning}}<span class="stat-type">Warnings</span></li>
+							<li class="info last" title="Number of notices ({{count.notice}})">{{count.notice}}<span class="stat-type">Notices</span></li>
+						{{/lastResult}}
+					</ul>
+					Last run {{date-format lastResult.date format="DD MMM YYYY"}}
+					{{else}}
+						<p class="no-results">No results</p>
+					{{/if}}
+				</a>
+				{{#unless ../readonly}}
+					<div class="btn-group options-button text-right">
+							<button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown"><span class="sr-only">Options</span><span class="glyphicon glyphicon-cog"></span></button>
+							<ul class="dropdown-menu pull-right" role="menu">
+								<li><a href="{{href}}/edit">Edit this task</a></li>
+								<li><a href="{{href}}/delete">Delete this task</a></li>
+								<li class="divider"></li>
+								<li><a href="{{href}}/run" data-test="run-task">Run pa11y</a></li>
+							</ul>
+						</div>
+				{{/unless}}
+			</li>
+		{{/each}}
+	</ul>
+
+</div>