Filter
plugin¶
This plugin allows the user to navigate and filter the displayed annotations.
Interface Overview¶
The plugin adds a toolbar to the top of the window. This contains the available filters that can be applied to the current annotations.
Usage¶
Adding the Filter plugin to the annotator is very simple. Add the
annotator to the page using the .annotator()
jQuery plugin. Then
call the .addPlugin()
method by calling
.annotator('addPlugin', 'Filter')
.
var content = $('#content').annotator().annotator('addPlugin', 'Filter');
Options¶
There are several options available to customise the plugin.
filters
: This is an array of filter objects. These will be added to the toolbar on load.addAnnotationFilter
: Iftrue
this will display the default filter that searches the annotation text.
Filters¶
Filters are very easy to create. The options require two properties a
label
and an annotation property
to search for. For example if
we wanted to filter on an annotations quoted text we can create the
following filter.
content.annotator('addPlugin', 'Filter', {
filters: [
{
label: 'Quote',
property: 'quote'
}
]
});
You can also customise the filter logic that determines if an annotation
should be filtered by providing an isFiltered
function. This
function receives the contents of the filter input as well as the
annotation property. It should return true
if the annotation should
remain highlighted.
Heres an example that uses the annotation.tags
property, which is an
array of tags:
content.annotator('addPlugin', 'Filter', {
filters: [
{
label: 'Tag',
property: 'tags',
isFiltered: function (input, tags) {
if (input && tags && tags.length) {
var keywords = input.split(/\s+/g);
for (var i = 0; i < keywords.length; i += 1) {
for (var j = 0; j < tags.length; j += 1) {
if (tags[j].indexOf(keywords[i]) !== -1) {
return true;
}
}
}
}
return false;
}}
]
});