Merge branch 'filter-urls' of github.com:nature/pa11y-dashboard into develop

Gruntfile.js

@@ -91,6 +91,8 @@ module.exports = function (grunt) {
 						'public/js/vendor/bootstrap/js/alert.js',
 						'public/js/vendor/bootstrap/js/dropdown.js',
 						'public/js/vendor/bootstrap/js/tooltip.js',
+						'public/js/vendor/bootstrap/js/transition.js',
+						'public/js/vendor/bootstrap/js/collapse.js',
 						'public/js/vendor/flot/jquery.flot.js',
 						'public/js/vendor/flot/jquery.flot.time.js',
 						'public/js/vendor/flot/jquery.flot.selection.js',

app.js

@@ -64,6 +64,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

@@ -245,4 +245,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 = $.trim(query.replace(/[^a-z0-9\s]+/gi, ''));
+		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-ie8and.less

@@ -52,6 +52,20 @@
 	.date-selector .btn-full-width {
 		width:90%;
 	}
+	.filter-toggle {
+		&:before {
+			height:110%;
+			width:100%;
+			left:0;
+			top:0;
+		}
+		input {
+			width:92%;
+		}
+		.filter-trigger {
+			padding-bottom:0;
+		}
+	}
 }
 
 .ie7 {
@@ -95,4 +109,20 @@
 	.tasks-list li {
 		padding-right:105px;
 	}
+	.filter-toggle {
+		width:30%;
+		margin:0 35%;
+		margin-top:-10px;
+		background-color:lighten(@gray-lighter, 4%);
+		padding-bottom:10px;
+
+		.glyphicon {
+			display:none;
+		}
+
+		input {
+			width:80%;
+			margin-left:-25%;
+		}
+	}
 }

public/less/site-nojavascript.less

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

public/less/site.less

@@ -447,3 +447,34 @@ ul.date-links {
 		}
 	}
 }
+
+.filter-toggle {
+	top:-20px;
+	margin-top:-10px;
+	font-size:18px;
+	font-weight:bold;
+
+	.filter-trigger {
+		padding-bottom:20px;
+		cursor: pointer;
+
+		.glyphicon {
+			display:block;
+			margin:0 auto;
+		}
+	}
+
+	&:before {
+		position:absolute;
+		content:"";
+		height:90px;
+		width:90px;
+		left:50%;
+		top:-45px;
+		background-color:lighten(@gray-lighter, 4%);
+		transform: translateX(-50%) rotate(45deg);
+		-ms-transform: translateX(-50%) rotate(45deg);
+		-webkit-transform: translateX(-50%) rotate(45deg);
+		z-index:-1;
+	}
+}

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

@@ -21,7 +21,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

@@ -15,49 +15,61 @@ You should have received a copy of the GNU General Public License
 along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 
-<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="col-md-6 col-md-offset-3 filter-toggle no-js-hide text-center">
-			<span class="well task-card-link crunch-bottom">
+		<label for="filter-input" class="filter-trigger" data-toggle="collapse" data-target="#filter-input">Filter<span class="glyphicon glyphicon-filter"></span>
-				<p class="h3 crunch">Add new URL</p>
+		</label>
-				<p class="supersize-me crunch">+</p>
+		<div id="filter-input" class="collapse">
-			</span>
+			<input class="form-control" id="task-filter" type="text" data-role="input" placeholder="Type filter term (name or standard)"/>
-		{{else}}
+		</div>
-			<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
+	</div>
-				<p class="h3 crunch">Add new URL</p>
+
-				<p class="supersize-me crunch">+</p>
+	<ul class="list-unstyled clearfix crunch-bottom">
-			</a>
+		<li class="col-md-4 col-sm-6 task-card add-task">
-		{{/if}}
+			{{#if readonly}}
-	</li>
+				<span class="well task-card-link crunch-bottom">
-	{{#each tasks}}
+					<p class="h3 crunch">Add new URL</p>
-		<li class="col-md-4 col-sm-6 task-card" data-test="task">
+					<p class="supersize-me crunch">+</p>
-			<a class="well task-card-link crunch-bottom" title="Details for URL {{simplify-url url}}" href="{{href}}">
+				</span>
-				<p class="h3">{{name}}</p>
+			{{else}}
-				<p class="h5">({{standard}})</p>
+				<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
-				{{#if lastResult}}
+					<p class="h3 crunch">Add new URL</p>
-				<ul class="clearfix list-unstyled floated-list task-stats">
+					<p class="supersize-me crunch">+</p>
-					{{#lastResult}}
+				</a>
-						<li class="danger" title="Number of errors ({{count.error}})">{{count.error}}<span class="stat-type">Errors</span></li>
+			{{/if}}
-						<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>