Add New Glossary Page And Developer Search Feature

This commit adds the code necessary to generate a new
en/developre-glossary page with entry pages in the en/glossary/
directory, e.g. en/glossary/51-percent-attack.

The glossary page and the individual term pages feature a JavaScript
search engine (no CGI) for just glossary terms.  This search box has
also been added to the following pages:

    * Developer Documentation (the index page)
    * Developer Guide
    * Developer Reference
    * Developer Examples

The search box requires the following MIT-licensed libraries:

    * JQuery
    * JQuery UI
    * JQuery UI CSS stylesheet

These allow our JS code to be almost trivially simple in js/devsearch.js

This commit adds only code.  Actual glossary entry data will be added in
a subsequent commit.
This commit is contained in:
David A. Harding 2015-03-03 09:11:30 -05:00
parent c2bc8edff3
commit 037cd4553a
No known key found for this signature in database
GPG key ID: 4B29C30FF29EC4B7
17 changed files with 609 additions and 11 deletions

71
js/devsearch.js Normal file
View file

@ -0,0 +1,71 @@
---
# This file is licensed under the MIT License (MIT) available on
# http://opensource.org/licenses/MIT.
---
{% comment %}
NOTICE: if you edit this template, you should also edit
/quality-assurance/devsearches.html which creates a page whose
links can be checked by HTML proofer
Nested loops below:
1. site.devsearches: container for all searches defined in _config.yaml in
the arbitrary order they should appear
2. list: a list item in devsearches; only has two elements:
a. the name of the category
b. an array containing the sublist items (pre-sorted)
3. sublist: a list of the items we want to display as a one-entry hash table
4. term: the term as the key [0] and the uri as the value [1]
{% endcomment %}
var search_data = [
{% for list in site.devsearches %}{% for item in list %}
{% if forloop.first %}{% capture category_name %}{{item}}{% endcapture %}
{% else %}{% for sublist in item %}{% for term in sublist %}
{
label: "{{term[0]}}",
uri: "{{term[1]}}",
category: "{{category_name}}"
}
{% endfor %}{% unless forloop.last %},{% endunless %}{% endfor %}{% endif %}{% endfor %}{% unless forloop.last %},{% endunless %}{% endfor %}
];
{% raw %}
// code adapted from http://jqueryui.com/autocomplete/#categories
// MIT license: https://jquery.org/license/
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
$(function() {
$( "#glossary_term" ).catcomplete({
source: search_data,
delay: 0,
minLength: 2,
autoFocus: true,
select: function( event, ui ) {
location.href = ui.item.uri;
}
});
});
{% endraw %}

4
js/jquery-1.11.2.min.js vendored Normal file

File diff suppressed because one or more lines are too long

13
js/jquery-ui.min.js vendored Normal file

File diff suppressed because one or more lines are too long