glossary component changes

src/glossary.js

@@ -10,13 +10,17 @@ var KEYCODE_ESC = 27;
 // https://davidwalsh.name/element-matches-selector
 function selectorMatches(el, selector) {
   var p = Element.prototype;
-  var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
-    return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
-  };
+  var f =
+    p.matches ||
+    p.webkitMatchesSelector ||
+    p.mozMatchesSelector ||
+    p.msMatchesSelector ||
+    function(s) {
+      return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
+    };
   return f.call(el, selector);
 }
 
-
 // get nearest parent element matching selector
 function closest(el, selector) {
   while (el) {
@@ -33,27 +37,39 @@ function forEach(values, callback) {
 }
 
 var itemTemplate = function(values) {
-  return '<li class="' + values.glossaryItemClass + '">' +
-      '<button class="data-glossary-term ' + values.termClass + '">' +
-        values.term +
-      '</button>' +
-      '<div class="' + values.definitionClass + '">' + values.definition + '</div>' +
+  return (
+    '<li class="' +
+    values.glossaryItemClass +
+    '" data-glossary-term-value="' +
+    values.term.toLowerCase() + 
+    '">' +
+    '<button class="data-glossary-term ' +
+    values.termClass +
+    '">' +
+    values.term +
+    '</button>' +
+    '<div class="' +
+    values.definitionClass +
+    '">' +
+    values.definition +
+    '</div>' +
     '</li>'
-}
+  );
+};
 
 var defaultSelectors = {
   glossaryID: '#glossary',
   toggle: '.js-glossary-toggle',
   close: '.js-glossary-close',
   listClass: '.js-glossary-list',
-  searchClass: '.js-glossary-search'
+  searchClass: '.js-glossary-search',
 };
 
 var defaultClasses = {
   definitionClass: 'glossary__definition',
   glossaryItemClass: 'glossary__item',
   highlightedTerm: 'term--highlight',
-  termClass: 'glossary__term'
+  termClass: 'glossary__term',
 };
 
 function removeTabindex(elm) {
@@ -74,6 +90,17 @@ function getTabIndex(elm) {
   return elm.querySelectorAll('a, button, input, [tabindex]');
 }
 
+/** Collapse visible terms */
+function collapseTerms(accordion, list) {
+  // collapse any visible terms
+  list.visibleItems.forEach((term) => {
+    // Collapse the term if it is on the DOM
+    const termElm = term.elm.firstChild;
+    const content = termElm ? document.getElementById(termElm.getAttribute('aria-controls')) : null;
+    if(content) accordion.collapse(term.elm.firstChild);
+  })
+}
+
 /**
  * Glossary widget
  * @constructor
@@ -97,6 +124,7 @@ function Glossary(terms, selectors, classes) {
   this.isOpen = false;
 
   // Update DOM
+  this.clearTerms();
   this.populate();
   this.initList();
   this.linkTerms();
@@ -105,15 +133,29 @@ function Glossary(terms, selectors, classes) {
   removeTabindex(this.body);
 
   // Initialize accordions
-  this.accordion = new Accordion(this.listElm, null, {contentPrefix: 'glossary'});
+  this.accordion = new Accordion(this.listElm, null, {
+    contentPrefix: 'glossary',
+  });
 
   // Bind listeners
   this.listeners = [];
   this.addEventListener(this.toggleBtn, 'click', this.toggle.bind(this));
   this.addEventListener(this.closeBtn, 'click', this.hide.bind(this));
   this.addEventListener(this.search, 'input', this.handleInput.bind(this));
   this.addEventListener(document.body, 'keyup', this.handleKeyup.bind(this));
-  this.addEventListener(document,'click', this.closeOpenGlossary.bind(this));
+  this.addEventListener(document, 'click', this.closeOpenGlossary.bind(this));
+  this.addEventListener(document, 'touchstart', this.closeOpenGlossary.bind(this)); // for iPads 
+}
+
+/** Clears terms from the glossary list to ensure no duplication. */
+Glossary.prototype.clearTerms = function() {  
+  forEach(
+    document.getElementsByClassName('js-glossary-list'),
+    function(list) {
+      // remove all child elements from the parent list (i.e. <ul>)
+      list.innerHTML = '';
+    },
+  );
 }
 
 Glossary.prototype.populate = function() {
@@ -123,7 +165,7 @@ Glossary.prototype.populate = function() {
       definition: term.definition,
       definitionClass: this.classes.definitionClass,
       glossaryItemClass: this.classes.glossaryItemClass,
-      termClass: this.classes.termClass
+      termClass: this.classes.termClass,
     };
     this.listElm.insertAdjacentHTML('beforeend', itemTemplate(opts));
   }, this);
@@ -137,10 +179,9 @@ Glossary.prototype.initList = function() {
   var options = {
     valueNames: ['data-glossary-term'],
     listClass: listClass,
-    searchClass: searchClass,
   };
   this.list = new List(glossaryId, options);
-  this.list.sort('data-glossary-term', {order: 'asc'});
+  this.list.sort('data-glossary-term', { order: 'asc' });
 };
 
 /** Add links to terms in body */
@@ -149,7 +190,10 @@ Glossary.prototype.linkTerms = function() {
   forEach(terms, function(term) {
     term.setAttribute('title', 'Click to define');
     term.setAttribute('tabIndex', 0);
-    term.setAttribute('data-term', (term.getAttribute('data-term') || '').toLowerCase());
+    term.setAttribute(
+      'data-term',
+      (term.getAttribute('data-term') || ''),
+    );
   });
   document.body.addEventListener('click', this.handleTermTouch.bind(this));
   document.body.addEventListener('keyup', this.handleTermTouch.bind(this));
@@ -159,34 +203,84 @@ Glossary.prototype.handleTermTouch = function(e) {
   if (e.which === KEYCODE_ENTER || e.type === 'click') {
     if (selectorMatches(e.target, '[data-term]')) {
       this.show(e);
-      this.selectedTerm = e.target;
-      this.findTerm(e.target.getAttribute('data-term'));
-    }
-    else {
-      this.selectedTerm = this.toggleBtn;
+      this.findTerm(e.target.getAttribute('data-term'), true);
     }
+
+    this.selectedTerm = e.target;
   }
 };
 
 /** Highlight a term */
-Glossary.prototype.findTerm = function(term) {
+Glossary.prototype.findTerm = function(term, fromTouch = false) {
+  // skip find term if the search box is not on the DOM
+  if(!this.search) return ;
+
   this.search.value = term;
   var highlightClass = this.classes.highlightedTerm;
 
   // Highlight the term and remove other highlights
   forEach(this.body.querySelectorAll('.' + highlightClass), function(term) {
     term.classList.remove(highlightClass);
   });
-  forEach(this.body.querySelectorAll('span[data-term="' + term + '"]'), function(term) {
-    term.classList.add(highlightClass);
-  });
-  this.list.filter(function(item) {
-    return item._values['data-glossary-term'].toLowerCase() === term;
-  });
-
-  this.list.search();
-  var button = this.list.visibleItems[0].elm.querySelector('button');
-  this.accordion.expand(button);
+  forEach(
+    this.body.querySelectorAll('span[data-term="' + term + '"]'),
+    function(term) {
+      term.classList.add(highlightClass);
+    },
+  );
+
+  const lowerCaseTerm = term.toLowerCase();
+
+  // hide all terms
+  forEach(
+    this.body.querySelectorAll('li[class*="' + this.classes.glossaryItemClass + '"]'),
+    function (term) {
+      term.style.cssText = 'display: none;'
+    }
+  );
+
+  collapseTerms(this.accordion, this.list);
+
+  // perform a search on the provided term
+  const exactMatch = this.body.querySelectorAll('li[data-glossary-term-value="' + lowerCaseTerm + '"]');
+  const matches = this.body.querySelectorAll('li[data-glossary-term-value*="' + lowerCaseTerm + '"]');
+
+  if(fromTouch) {
+    if(exactMatch.length > 0) {
+      // show the exact match term 
+      const term = exactMatch[0];
+      term.style.cssText = 'display: list-item;'
+
+      // expand the exact match term
+      var button = term.querySelector('button');
+      this.accordion.expand(button);      
+    }
+    else {
+      // show terms that match the search criteria and store the first term that was found
+      let firstTerm = null;
+      forEach(
+        matches,
+        function (term) {
+          term.style.cssText = 'display: list-item;'
+          if(!firstTerm) firstTerm = term;
+        }
+      );
+
+      // expand the first term, only if from term touch event and not for search input
+      if(firstTerm) {
+        var button = firstTerm.querySelector('button');
+        this.accordion.expand(button);
+      }
+    }
+  } else {
+    // from search input, go ahead and show all partial matches
+    forEach(
+      matches,
+      function (term) {
+        term.style.cssText = 'display: list-item;'
+      }
+    );
+  }
 };
 
 Glossary.prototype.toggle = function() {
@@ -197,23 +291,49 @@ Glossary.prototype.toggle = function() {
 Glossary.prototype.show = function() {
   this.body.setAttribute('aria-hidden', 'false');
   this.toggleBtn.setAttribute('aria-expanded', 'true');
-  this.search.focus();
   this.isOpen = true;
   restoreTabindex(this.body);
 };
 
 Glossary.prototype.hide = function() {
+  //scroll Glossary panel to the top - handle older browsers where .scrollTo is not supported
+  this.body.scrollTop = 0;
+
+  // remove the search criteria
+  if (this.search){
+    this.search.value = '';
+  } 
+  forEach(
+    this.body.querySelectorAll('li[class*="' + this.classes.glossaryItemClass + '"]'),
+    function (term) {
+      // handle older browsers where .style is readonly
+      term.style.cssText = 'display: list-item;'
+    }
+  );
+
   this.body.setAttribute('aria-hidden', 'true');
   this.toggleBtn.setAttribute('aria-expanded', 'false');
   this.selectedTerm.focus();
+  collapseTerms(this.accordion, this.list);
   this.isOpen = false;
   removeTabindex(this.body);
 };
 
 /** Remove existing filters on input */
-Glossary.prototype.handleInput = function() {
-  if (this.list.filtered) {
-    this.list.filter();
+Glossary.prototype.handleInput = function() {  
+  const term = this.search.value;
+  if(term) {
+    // perform the search
+    this.findTerm(term);
+  }
+  else {
+    // display everything since the search field is empty
+    forEach(
+      this.body.querySelectorAll('li[class*="' + this.classes.glossaryItemClass + '"]'),
+      function (term) {
+        term.style.cssText = 'display: list-item;'
+      }
+    );
   }
 };
 
@@ -228,9 +348,13 @@ Glossary.prototype.handleKeyup = function(e) {
 
 // Close glossary when clicking outside of glossary
 Glossary.prototype.closeOpenGlossary = function(e) {
-  if ( e.target !== this.toggleBtn && this.isOpen) {
-    if (!(closest(e.target, this.selectors.glossaryID))) {
-        this.hide();
+  if (
+    (e.target !== this.toggleBtn && e.target.parentElement !== this.toggleBtn) &&
+    !e.target.getAttribute('data-term') &&
+    this.isOpen
+  ) {
+    if (!closest(e.target, this.selectors.glossaryID)) {
+      this.hide();
     }
   }
 };
@@ -241,7 +365,7 @@ Glossary.prototype.addEventListener = function(elm, event, callback) {
     this.listeners.push({
       elm: elm,
       event: event,
-      callback: callback
+      callback: callback,
     });
   }
 };