generate-examples-index-webpack-plugin/src/assets/js/index.js

Generate an examples index page from your examples folder

/* eslint-disable */
(function() {
  var filterInput = document.getElementById('filter');
  var groups = initGroups();

  if (filterInput) {
    filterInput.addEventListener('keyup', filterHandler);
  }

  function filterHandler(event) {
    var filter = event.target.value.toLowerCase();
    var i;
    var j;

    for (i = 0; i < groups.length; i++) {
      var group = groups[i];
      var shown = 0;

      if (group.title.indexOf(filter) !== -1) {
        group.elem.hidden = false;
        for (j = 0; j < group.examples.length; j++) {
          group.examples[j].elem.hidden = false;
        }
        continue;
      }

      for (j = 0; j < group.examples.length; j++) {
        var example = group.examples[j];
        if (example.text.indexOf(filter) === -1) {
          example.elem.hidden = true;
        } else {
          example.elem.hidden = false;
          shown++;
        }
      }

      group.elem.hidden = shown === 0;
    }
  }

  function initGroups() {
    var groups = [];
    var groupElements = document.querySelectorAll('#examples .list-group');

    for (var i = 0; i < groupElements.length; i++) {
      var groupElem = groupElements[i];
      var titleElement = groupElem.querySelector('.list-group-item-primary');
      groups.push({
        title: titleElement && titleElement.innerText.toLowerCase(),
        elem: groupElem,
        examples: getExamples(groupElem)
      });
    }

    return groups;
  }

  function getExamples(groupElem) {
    var examples = [];
    var exampleElements = groupElem.querySelectorAll('.list-group-item:not(.list-group-item-primary)');

    for (var i = 0; i < exampleElements.length; i++) {
      examples.push({
        elem: exampleElements[i],
        text: exampleElements[i].innerText.toLowerCase()
      });
    }

    return examples;
  }
})();