gent_styleguide 5.0.2 → 5.0.6

package/build/styleguide/js/checkbox_dynamic.functions.js

@@ -0,0 +1,401 @@
+'use strict';
+
+/* global define, module */
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(factory);
+  }
+  else {
+    if (typeof exports === 'object') {
+      module.exports = factory();
+    }
+    else {
+      root.CheckboxFilterDynamic = factory();
+    }
+  }
+})(this || window, function () {
+  return function (elem, options) {
+
+    options = options || {};
+    options.filterField = options.filterField || '.checkbox-filter__filter';
+    options.modalPreview = options.modalPreview || '.modal-preview';
+    options.accordionPreview = options.accordionPreview || '.accordion-preview';
+    options.accordionBtn = options.accordionBtn || 'button.accordion--button';
+    options.previewCheckboxes = options.previewCheckboxes || 'div.checkbox.preview';
+    options.checkboxes = options.checkboxes || 'div.checkbox:not(.preview)';
+    options.selectedContainer = options.selectedContainer || '.checkbox-filter__selected';
+    options.checkboxContainers = options.checkboxContainers || '.checkbox-filter__checkboxes';
+    options.openBtn = options.openBtn || '.checkbox-filter__open';
+    options.submitBtn = options.submitBtn || '.checkbox-filter__submit';
+    options.closeBtns = options.closeBtns || '.checkbox-filter__close';
+    options.resultSpan = options.resultSpan || '.checkbox-filter__result';
+    options.makeTags = options.makeTags !== false;
+    options.hiddenTagText = options.hiddenTagText || 'remove tag';
+    options.onRemoveTag = options.onRemoveTag || function () {};
+
+    /**
+     * Filter input field.
+     * @type {HTMLInputElement}
+     */
+    const filterField = elem.querySelector(options.filterField);
+
+    /**
+     * Container for the modal preview checkboxes.
+     * @type {HTMLElement}
+     */
+    const modalPreview = elem.querySelector(options.modalPreview);
+
+    /**
+     * Container for the accordion preview checkboxes.
+     * @type {HTMLElement}
+     */
+    const accordionPreview = elem.querySelector(options.accordionPreview);
+
+    /**
+     * Button to toggle the accordion.
+     * @type {HTMLElement}
+     */
+    const accordionBtn = elem.querySelector(options.accordionBtn);
+
+    /**
+     * List of preview checkboxes, these exist outside of the modal.
+     * @type {NodeList|Array}
+     */
+    const previewCheckboxes = elem.querySelectorAll(options.previewCheckboxes) || [];
+
+    /**
+     * List of checkboxwrappers, each containing a checkbox and a label.
+     * @type {NodeList|Array}
+     */
+    const checkboxes = elem.querySelectorAll(options.checkboxes) || [];
+
+    /**
+     * Container to display the selected items.
+     * @type {HTMLElement}
+     */
+    const selectedContainer = elem.querySelector(options.selectedContainer);
+
+    /**
+     * Container for the checkboxes.
+     * @type {HTMLElement}
+     */
+    const checkboxContainers = elem.querySelectorAll(options.checkboxContainers);
+
+    /**
+     * Button to trigger opening the modal.
+     * @type {HTMLElement}
+     */
+    const openBtn = elem.querySelector(options.openBtn);
+
+    /**
+     * Button to confirm the selection and close the modal.
+     * @type {Element}
+     */
+    const submitBtn = elem.querySelector(options.submitBtn);
+
+    /**
+     * A list of elements to trigger closing the modal.
+     * At least one must have the button role.
+     * @type {NodeList}
+     */
+    const closeBtns = elem.querySelectorAll(options.closeBtns);
+
+    /**
+     * Container to display the number of search results.
+     * @type {HTMLElement}
+     */
+    const resultSpan = elem.querySelector(options.resultSpan);
+
+    /**
+     * Store the checked checkboxes prior to making changes.
+     * @type {Array}
+     */
+    let selectedFilters = [];
+
+    /**
+     * Filter the displayed checkboxes.
+     * @param {boolean} clear Clear the filtervalue if true.
+     */
+    const filter = clear => {
+      if (!filterField) {
+        return;
+      }
+
+      if (clear) {
+        filterField.value = '';
+      }
+
+      let count = 0;
+
+      [].slice.call(checkboxContainers).forEach(container => {
+        container.style.display = 'none';
+      });
+
+      checkboxLoop(({checkboxWrapper, checkbox, label}) => {
+        if (
+          !label ||
+          label.textContent
+            .toUpperCase()
+            .indexOf(filterField.value.toUpperCase()) === -1
+        ) {
+          checkboxWrapper.setAttribute('hidden', 'true');
+          checkbox.setAttribute('hidden', 'true');
+        }
+        else {
+          checkboxWrapper.removeAttribute('hidden');
+          checkbox.removeAttribute('hidden');
+          count++;
+        }
+      });
+
+      [].slice.call(checkboxContainers).forEach(container => {
+        let displayedCount = container.querySelectorAll(`${options.checkboxes}:not([hidden])`).length;
+        if (displayedCount) {
+          container.style.display = '';
+        }
+      });
+
+      if (resultSpan) {
+        resultSpan.textContent = '' + count;
+      }
+    };
+
+    /**
+     * Make a tag.
+     * @param {HTMLInputElement} checkbox Input type checkbox.
+     * @param {Element} label Label for the input type checkbox.
+     * @return {Element} A gent styleguide tag component.
+     */
+    const makeTag = (checkbox, label) => {
+
+      const li = document.createElement('li');
+
+      const tag = document.createElement('span');
+      tag.className = 'tag filter';
+      tag.textContent = label.textContent;
+      tag.setAttribute('data-value', checkbox.value);
+
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.innerHTML = `<span class="visually-hidden">${options.hiddenTagText} ${label.textContent}</span>`;
+      button.addEventListener('click', () => checkbox.click());
+
+      tag.appendChild(button);
+      li.appendChild(tag);
+
+      return li;
+    };
+
+    /**
+     * Remove a tag from the selectedContainer.
+     * @param {HTMLInputElement} checkbox Input type checkbox.
+     */
+    const removeTag = checkbox => {
+      if (options.makeTags && selectedContainer) {
+        const tag = selectedContainer.querySelector('.filter[data-value="' + checkbox.value + '"]');
+        if (tag) {
+          selectedContainer.removeChild(tag.parentElement);
+          options.onRemoveTag(checkbox, tag);
+        }
+      }
+    };
+
+    const addTag = (checkbox, label) => {
+      if (options.makeTags && selectedContainer) {
+        selectedContainer.appendChild(makeTag(checkbox, label));
+      }
+    };
+
+    /**
+     * Loop over all checkboxes and execute a callback for each iteration.
+     * @param {function} next The callback function.
+     */
+    const checkboxLoop = next => {
+      for (let i = 0; i < checkboxes.length; i++) {
+        let checkboxWrapper = checkboxes[i];
+        let checkbox = checkboxWrapper.querySelector('input[type=checkbox]');
+        let label = checkboxWrapper.querySelector('label');
+
+        // Sometimes the input element isn't rendered at this point.
+        if (checkbox && label) {
+          next({checkboxWrapper, checkbox, label});
+        }
+      }
+    };
+
+    /**
+     * Reset the component to it's stored value.
+     */
+    const reset = () => {
+      checkboxLoop(({checkbox}) => {
+        const isSelected = selectedFilters.indexOf(checkbox) !== -1;
+        if ((isSelected && !checkbox.checked) || (!isSelected && checkbox.checked)) {
+          checkbox.click();
+        }
+      });
+    };
+
+    /**
+     * Initialise the component.
+     */
+    const init = () => {
+      checkboxLoop(({checkbox, label}) => {
+        if (checkbox.checked && !checkbox.indeterminate) {
+          addTag(checkbox, label);
+        }
+      });
+      filter(true);
+    };
+
+    /**
+     * Bind two checkboxes
+     * @param {HTMLInputElement} a A checkbox.
+     * @param {HTMLInputElement} b Another checkbox.
+     */
+    const bindState = (a, b) => {
+      if (a.checked !== b.checked) {
+        a.click();
+      }
+    };
+
+    /**
+     * Bind the preview checkboxes to their original counterpart in the modal.
+     */
+    const addPreviewCheckboxesEvent = () => {
+      if (!previewCheckboxes.length) {
+        return;
+      }
+
+      for (let i = previewCheckboxes.length; i--;) {
+        const checkboxWrapper = previewCheckboxes[i];
+        const checkbox = checkboxWrapper.querySelector('input[type=checkbox]');
+        const original = elem.querySelector('#' + checkbox.getAttribute('data-original'));
+
+        if (checkbox) {
+          checkbox.addEventListener('change', () => bindState(original, checkbox));
+          original.addEventListener('change', () => bindState(checkbox, original));
+        }
+      }
+    };
+
+    const addModalEvents = () => {
+      // Enable opening the modal.
+      if (openBtn) {
+        openBtn.addEventListener('click', () => {
+          selectedFilters = [];
+
+          checkboxLoop(({checkbox}) => {
+            if (checkbox.checked) {
+              selectedFilters.push(checkbox);
+            }
+          });
+
+          document.addEventListener('keydown', handleKeyboardInput);
+        });
+      }
+
+      // Add close events to all closeBtns.
+      if (closeBtns) {
+        for (let i = closeBtns.length; i--;) {
+          closeBtns[i].addEventListener('click', () => {
+            reset();
+            document.removeEventListener('keydown', handleKeyboardInput);
+          });
+        }
+      }
+
+      // Update selectedFilters and close.
+      if (submitBtn) {
+        submitBtn.addEventListener('click', () => {
+          document.removeEventListener('keydown', handleKeyboardInput);
+        });
+      }
+
+      // Make sure the filter method is not repeated while typing.
+      if (filterField) {
+        let filterTimeOut = null;
+        filterField.addEventListener('input', () => {
+          if (filterTimeOut) {
+            clearTimeout(filterTimeOut);
+          }
+          filterTimeOut = setTimeout(filter, 200);
+        });
+      }
+    };
+
+    const createPreviewClone = (checkboxWrapper, checkbox) => {
+      if (!modalPreview) {
+        return;
+      }
+      if (modalPreview.querySelector('#' + checkbox.id + '-preview')) {
+        return;
+      }
+
+      const wrapperClone = checkboxWrapper.cloneNode(true);
+      const checkboxClone = wrapperClone.querySelector('input');
+      const labelClone = wrapperClone.querySelector('label');
+
+      checkboxClone.name = null;
+      checkboxClone.id += '-preview';
+      labelClone.for += '-preview';
+
+      checkbox.addEventListener('change', () => bindState(checkboxClone, checkbox));
+      checkboxClone.addEventListener('change', () => bindState(checkbox, checkboxClone));
+      modalPreview.appendChild(wrapperClone);
+    };
+
+    const addAccordionEvent = () => {
+      if (!accordionBtn || !accordionPreview) {
+        return;
+      }
+
+      accordionBtn.addEventListener('click', () =>
+        checkboxLoop(({checkboxWrapper, checkbox}) => {
+          if (checkbox.checked && !accordionPreview.contains(checkboxWrapper)) {
+            accordionPreview.appendChild(checkboxWrapper);
+          }
+        })
+      );
+    };
+
+    /**
+     * Add all events.
+     */
+    const addEvents = () => {
+
+      addModalEvents();
+      addPreviewCheckboxesEvent();
+      addAccordionEvent();
+
+      // Add events for all checkboxes.
+      checkboxLoop(({checkboxWrapper, checkbox, label}) => {
+        checkbox.addEventListener('change', () => {
+          if (checkbox.checked) {
+            addTag(checkbox, label);
+            createPreviewClone(checkboxWrapper, checkbox);
+          }
+          else {
+            removeTag(checkbox);
+          }
+        });
+      });
+    };
+
+    /**
+     * Handle keyboard input
+     * @param {object} e event
+     */
+    const handleKeyboardInput = e => {
+      let keyCode = e.keyCode || e.which;
+      if (keyCode === 27) {
+        e.preventDefault();
+        reset();
+      }
+    };
+
+    init();
+    addEvents();
+
+    return {};
+  };
+});

package/build/styleguide/js/checkbox_filter.bindings-min.js

@@ -0,0 +1 @@
+"use strict";!function(){if(CheckboxFilter)for(var e=document.querySelectorAll(".checkbox-filter"),t=e.length;t--;)new CheckboxFilter(e[t],{hiddenTagText:"Remove tag"})}();

package/build/styleguide/js/checkbox_filter.bindings.js

@@ -0,0 +1,14 @@
+'use strict';
+
+(function () {
+
+  if (!CheckboxFilter) { // eslint-disable-line no-undef
+    return;
+  }
+
+  const selected = document.querySelectorAll('.checkbox-filter');
+  for (let i = selected.length; i--;) {
+    new CheckboxFilter(selected[i], {hiddenTagText: 'Remove tag'}); // eslint-disable-line no-undef
+  }
+
+})();

package/build/styleguide/js/checkbox_filter.functions-min.js

@@ -0,0 +1 @@
+"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e,t){"function"==typeof define&&define.amd?define(t):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=t():e.CheckboxFilter=t()}(window,function(){return function(e,o){o=o||{};function n(e){var c;r&&(e&&(r.value=""),c=0,[].slice.call(t).forEach(function(e){e.style.display="none"}),x(function(e){var t=e.checkboxWrapper,n=e.checkbox,e=e.label;e&&-1!==e.textContent.toUpperCase().indexOf(r.value.toUpperCase())?(t.removeAttribute("hidden"),n.removeAttribute("hidden"),c++):(t.setAttribute("hidden","true"),n.setAttribute("hidden","true"))}),[].slice.call(t).forEach(function(e){e.querySelectorAll("".concat(o.checkboxes||"div.checkbox",":not([hidden])")).length&&(e.style.display="")}),k(c))}function c(e){27===(e.keyCode||e.which)&&(e.preventDefault(),m(),v())}var r=e.querySelector(o.filterfield||".checkbox-filter__filter"),i=e.querySelectorAll(o.checkboxes||"div.checkbox")||[],l=e.querySelector(o.selectedContainer||".checkbox-filter__selected"),t=e.querySelectorAll(o.checkboxContainers||".checkbox-filter__checkboxes"),u=e.querySelector(o.openBtn||".checkbox-filter__open"),a=e.querySelector(o.submitBtn||".checkbox-filter__submit"),d=e.querySelectorAll(o.closeBtns||".checkbox-filter__close"),f=e.querySelector(o.resultSpan||".checkbox-filter__result"),h=e.querySelector(o.countSpanWrapper||".checkbox-filter__count-wrapper"),s=e.querySelector(o.countSpan||".checkbox-filter__count"),p=[],b=!1!==o.makeTags||o.makeTags,y=function(e,t){var n=document.createElement("span");n.className="tag filter",n.textContent=t.textContent,n.setAttribute("data-value",e.value);t=document.createElement("button");return t.type="button",t.innerHTML='<span class="visually-hidden">'.concat(o.hiddenTagText||"Remove tag","</span>"),t.addEventListener("click",function(){e.checked=!1,l.removeChild(n),"function"==typeof o.onRemoveTag&&o.onRemoveTag(e,n)}),n.appendChild(t),n},v=function(){var e=l.children.length;s&&(s.textContent=e),h&&(0<e?h.classList.remove("hidden"):h.classList.add("hidden"))},k=function(e){f&&(f.textContent=e)},x=function(e){for(var t=i.length;t--;){var n=i[t],c=n.querySelector("input[type=checkbox]"),o=n.querySelector("label");c&&o&&e({checkboxWrapper:n,checkbox:c,label:o})}},m=function(){b&&(l.innerHTML=""),x(function(e){var t=e.checkbox,e=e.label;-1!==p.indexOf(t)?t.checked=!0:t.checked=!1,t.checked&&b&&l.appendChild(y(t,e))})};return p=[],x(function(e){var t=e.checkbox,e=e.label;t.checked&&!t.indeterminate&&b&&l.appendChild(y(t,e))}),v(),n(!0),function(){var e;if(r&&(e=null,r.addEventListener("input",function(){e&&clearTimeout(e),e=setTimeout(n,200)})),x(function(e){var t=e.checkbox,n=e.label;t.addEventListener("change",function(){t.checked?b&&l.appendChild(y(t,n)):b&&function(e){for(var t=l.querySelectorAll(".filter"),n=t.length;n--;)t[n].getAttribute("data-value")===e.value&&l.removeChild(t[n])}(t)})}),u&&u.addEventListener("click",function(e){p=[];var t=0;x(function(e){e=e.checkbox;e.checked&&p.push(e),t++}),k(t),document.addEventListener("keydown",c)}),d)for(var t=d.length;t--;)d[t].addEventListener("click",function(){m(),v(),document.removeEventListener("keydown",c)});a&&a.addEventListener("click",function(){v(),document.removeEventListener("keydown",c)})}(),{}}});