forked from external-repos/pa11y-dashboard
Write the JavaScript for URL filtering
This commit is contained in:
Rowan Manning
1
app.js
1
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
|
||||
|
||||
2
public/css/site.min.css
vendored
2
public/css/site.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -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));
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
2
public/js/site.min.js
vendored
2
public/js/site.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -26,4 +26,7 @@
|
||||
.show-class {
|
||||
display:block;
|
||||
}
|
||||
.no-js-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
12
view/helper/string.js
Normal file
12
view/helper/string.js
Normal file
@@ -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();
|
||||
});
|
||||
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
@@ -1,47 +1,56 @@
|
||||
|
||||
<ul class="list-unstyled clearfix crunch-bottom">
|
||||
<li class="col-md-4 col-sm-6 task-card add-task">
|
||||
{{#if readonly}}
|
||||
<span class="well task-card-link crunch-bottom">
|
||||
<p class="h3 crunch">Add new URL</p>
|
||||
<p class="supersize-me crunch">+</p>
|
||||
</span>
|
||||
{{else}}
|
||||
<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
|
||||
<p class="h3 crunch">Add new URL</p>
|
||||
<p class="supersize-me crunch">+</p>
|
||||
</a>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{#each tasks}}
|
||||
<li class="col-md-4 col-sm-6 task-card" data-test="task">
|
||||
<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}}
|
||||
<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}}
|
||||
<span class="well task-card-link crunch-bottom">
|
||||
<p class="h3 crunch">Add new URL</p>
|
||||
<p class="supersize-me crunch">+</p>
|
||||
</span>
|
||||
{{else}}
|
||||
<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
|
||||
<p class="h3 crunch">Add new URL</p>
|
||||
<p class="supersize-me crunch">+</p>
|
||||
</a>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{#each tasks}}
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user