gent_styleguide 5.0.2 → 5.0.6

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

@@ -0,0 +1,380 @@
+'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.CheckboxFilter = factory();
+    }
+  }
+})(this || window, function () {
+  return function (elem, options) {
+    if (!options) {
+      options = {};
+    }
+
+    /**
+     * Filter input field.
+     * @type {Element}
+     */
+    const filterfield = elem.querySelector(
+      options.filterfield || '.checkbox-filter__filter'
+    );
+
+    /**
+     * List of checkboxwrappers, each containing a checkbox and a label.
+     * @type {NodeList|Array}
+     */
+    const checkboxes =
+      elem.querySelectorAll(options.checkboxes || 'div.checkbox') || [];
+
+    /**
+     * Container to display the selected items.
+     * @type {Element}
+     */
+    const selectedContainer = elem.querySelector(
+      options.selectedContainer || '.checkbox-filter__selected'
+    );
+
+    /**
+     * Container for the checkboxes.
+     * @type {Element}
+     */
+    const checkboxContainers = elem.querySelectorAll(
+      options.checkboxContainers || '.checkbox-filter__checkboxes'
+    );
+
+    /**
+     * Button to trigger opening the modal.
+     * @type {Element}
+     */
+    const openBtn = elem.querySelector(
+      options.openBtn || '.checkbox-filter__open'
+    );
+
+    /**
+     * Button to confirm the selection and close the modal.
+     * @type {Element}
+     */
+    const submitBtn = elem.querySelector(
+      options.submitBtn || '.checkbox-filter__submit'
+    );
+
+    /**
+     * 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 || '.checkbox-filter__close'
+    );
+
+    /**
+     * Container to display the number of search results.
+     * @type {Element}
+     */
+    const resultSpan = elem.querySelector(
+      options.resultSpan || '.checkbox-filter__result'
+    );
+
+    /**
+     * Container wrapping the countspan.
+     * @type {Element}
+     */
+    const countSpanWrapper = elem.querySelector(
+      options.countSpanWrapper || '.checkbox-filter__count-wrapper'
+    );
+
+    /**
+     * Container to display the number of selected values.
+     * @type {Element}
+     */
+    const countSpan = elem.querySelector(
+      options.countSpan || '.checkbox-filter__count'
+    );
+
+    /**
+     * Store the checked checkboxes prior to making changes.
+     * @type {Array}
+     */
+    let selectedFilters = [];
+
+    /**
+     * Check to prevent the class from making selected item tags.
+     * @type {boolean}
+     */
+    const makeTags = (() => {
+      if (options.makeTags === false) {
+        return options.makeTags;
+      }
+      return true;
+    })();
+
+    /**
+     * 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 || 'div.checkbox'}:not([hidden])`).length;
+        if (displayedCount) {
+          container.style.display = '';
+        }
+      });
+
+      updateResult(count);
+    };
+
+    /**
+     * Make a tag.
+     * @param {Element} checkbox Input type checkbox.
+     * @param {Element} label Label for the input type checkbox.
+     * @return {Element} A gent styleguide tag component.
+     */
+    const makeTag = (checkbox, label) => {
+      let tag = document.createElement('span');
+      tag.className = 'tag filter';
+      tag.textContent = label.textContent;
+      tag.setAttribute('data-value', checkbox.value);
+
+      let button = document.createElement('button');
+      button.type = 'button';
+      button.innerHTML = `<span class="visually-hidden">${options.hiddenTagText ||
+      'Remove tag'}</span>`;
+
+      button.addEventListener('click', () => {
+        checkbox.checked = false;
+        selectedContainer.removeChild(tag);
+
+        if (typeof options.onRemoveTag === 'function') {
+          options.onRemoveTag(checkbox, tag);
+        }
+      });
+
+      tag.appendChild(button);
+
+      return tag;
+    };
+
+    /**
+     * Remove a tag from the selectedContainer.
+     * @param {Element} checkbox Input type checkbox.
+     */
+    const removeTag = checkbox => {
+      let test = selectedContainer.querySelectorAll('.filter');
+      for (let i = test.length; i--;) {
+        if (test[i].getAttribute('data-value') === checkbox.value) {
+          selectedContainer.removeChild(test[i]);
+        }
+      }
+    };
+
+    /**
+     * Update the count display.
+     */
+    const updateCount = () => {
+      const selectedCount = selectedContainer.children.length;
+
+      if (countSpan) {
+        countSpan.textContent = selectedCount;
+      }
+      if (countSpanWrapper) {
+        if (selectedCount > 0) {
+          countSpanWrapper.classList.remove('hidden');
+        }
+        else {
+          countSpanWrapper.classList.add('hidden');
+        }
+      }
+    };
+
+    /**
+     * Update the result display.
+     * @param {number} resultCount The number of results after filter.
+     */
+    const updateResult = (resultCount) => {
+      if (resultSpan) {
+        resultSpan.textContent = resultCount;
+      }
+    };
+
+    /**
+     * Loop over all checkboxes and execute a callback for each iteration.
+     * @param {function} next The callback function.
+     */
+    const checkboxLoop = next => {
+      for (let 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 = () => {
+      if (makeTags) {
+        selectedContainer.innerHTML = '';
+      }
+
+      checkboxLoop(({checkbox, label}) => {
+        if (selectedFilters.indexOf(checkbox) !== -1) {
+          checkbox.checked = true;
+        }
+        else {
+          checkbox.checked = false;
+        }
+        if (checkbox.checked && makeTags) {
+          selectedContainer.appendChild(makeTag(checkbox, label));
+        }
+      });
+    };
+
+    /**
+     * Initialise the component.
+     */
+    const init = () => {
+      selectedFilters = [];
+
+      checkboxLoop(({checkbox, label}) => {
+        if (checkbox.checked && !checkbox.indeterminate && makeTags) {
+          selectedContainer.appendChild(makeTag(checkbox, label));
+        }
+      });
+
+      updateCount();
+      filter(true);
+    };
+
+    /**
+     * Add all events.
+     */
+    const addEvents = () => {
+      // 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);
+        });
+      }
+
+      // Add events for all checkboxes.
+      checkboxLoop(({checkbox, label}) => {
+        checkbox.addEventListener('change', () => {
+          if (checkbox.checked) {
+            if (makeTags) {
+              selectedContainer.appendChild(makeTag(checkbox, label));
+            }
+          }
+          else {
+            if (makeTags) {
+              removeTag(checkbox);
+            }
+          }
+        });
+      });
+
+      // Enable opening the modal.
+      if (openBtn) {
+        openBtn.addEventListener('click', (e) => {
+          selectedFilters = [];
+          let count = 0;
+
+          checkboxLoop(({checkbox}) => {
+            if (checkbox.checked) {
+              selectedFilters.push(checkbox);
+            }
+            count++;
+          });
+
+          updateResult(count);
+          document.addEventListener('keydown', handleKeyboardInput);
+        });
+      }
+
+      // Add close events to all closeBtns.
+      if (closeBtns) {
+        for (let i = closeBtns.length; i--;) {
+          closeBtns[i].addEventListener('click', () => {
+            reset();
+            updateCount();
+            document.removeEventListener('keydown', handleKeyboardInput);
+          });
+        }
+      }
+
+      // Update selectedFilters and close.
+      if (submitBtn) {
+        submitBtn.addEventListener('click', () => {
+          updateCount();
+          document.removeEventListener('keydown', handleKeyboardInput);
+        });
+      }
+    };
+
+    /**
+     * Handle keyboard input
+     * @param {object} e event
+     */
+    const handleKeyboardInput = e => {
+      let keyCode = e.keyCode || e.which;
+      if (keyCode === 27) {
+        e.preventDefault();
+        reset();
+        updateCount();
+      }
+    };
+
+    init();
+    addEvents();
+
+    return {};
+  };
+});

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

@@ -0,0 +1 @@
+"use strict";!function(){if(File)for(var e=document.querySelectorAll(".file"),l=e.length;l--;)new File(e[l])}();

package/build/styleguide/js/file.bindings.js

@@ -0,0 +1,15 @@
+/* global File */
+'use strict';
+
+(function () {
+
+  if (!File) {
+    return;
+  }
+
+  const selected = document.querySelectorAll('.file');
+  for (let i = selected.length; i--;) {
+    new File(selected[i]);
+  }
+
+})();

package/build/styleguide/js/file.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.File=t()}(window,function(){return function(t,n){var o=t.querySelector('input[type="file"]');if(!o)throw new Error('Element input[type="file"] not found.');n=n||{};function e(e){o.files.length?1<o.files.length?t.dataset.file=n.multipleText||t.dataset.multipleText||"Multiple files.":t.dataset.file=o.files[0].name:t.dataset.file=n.emptyText||t.dataset.emptyText||"No file chosen."}return o.hasAttribute("multiple")||(o.addEventListener("change",e),e()),{updateFile:e}}});

package/build/styleguide/js/file.functions.js

@@ -0,0 +1,63 @@
+'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.File = factory();
+    }
+  }
+}(this || window, function () {
+  return function (elem, options) {
+    const input = elem.querySelector('input[type="file"]');
+
+    if (!input) {
+      throw new Error('Element input[type="file"] not found.');
+    }
+
+    options = options || {};
+
+    /**
+     * Update the filename of the uploaded file.
+     *
+     * @param {Event} e
+     *  Event object for the change event.
+     *
+     */
+    const updateFile = e => {
+      if (!input.files.length) {
+        elem.dataset.file = options.emptyText || elem.dataset.emptyText || 'No file chosen.';
+        return;
+      }
+
+      if (input.files.length > 1) {
+        elem.dataset.file = options.multipleText || elem.dataset.multipleText || 'Multiple files.';
+        return;
+      }
+
+      elem.dataset.file = input.files[0].name;
+    };
+
+    /**
+     * Initialize the FileUpload component
+     */
+    const init = () => {
+      if (input.hasAttribute('multiple')) {
+        return;
+      }
+
+      input.addEventListener('change', updateFile);
+      updateFile();
+    };
+
+    init();
+
+    return {updateFile};
+  };
+}));

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

@@ -0,0 +1 @@
+"use strict";!function(){var i;Modal&&(i=document.querySelector("#filter"),new Modal(i,{resizeEvent:function(e,t){960<window.innerWidth?(t(),i.setAttribute("aria-hidden","false")):i.classList.contains("visible")||i.setAttribute("aria-hidden","true")}}))}();

package/build/styleguide/js/filter.bindings.js

@@ -0,0 +1,24 @@
+'use strict';
+
+(function () {
+
+  if (!Modal) { // eslint-disable-line no-undef
+    return;
+  }
+
+  const filter = document.querySelector('#filter');
+  // eslint-disable-next-line no-undef
+  new Modal(filter, {
+    // The modal is always visible from tablet and up,
+    // this is atypical.
+    resizeEvent: (open, close) => {
+      if (window.innerWidth > 960) {
+        close();
+        filter.setAttribute('aria-hidden', 'false');
+      }
+      else if (!filter.classList.contains('visible')) {
+        filter.setAttribute('aria-hidden', 'true');
+      }
+    }
+  });
+})();

package/build/styleguide/js/image-collections.bindings-min.js

@@ -0,0 +1 @@
+"use strict";baguetteBox&&baguetteBox.run(".js-lightbox",{filter:/.*/i,async:!0,captions:function(t){t=t.querySelector("figcaption");return t?t.innerText:null},buttons:!0});

package/build/styleguide/js/image-collections.bindings.js

@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Javascript binding of baguettebox.min.js.
+ */
+'use strict';
+
+(function () {
+
+  if (!baguetteBox) { // eslint-disable-line no-undef
+    return;
+  }
+  baguetteBox.run('.js-lightbox', { // eslint-disable-line no-undef
+    filter: /.*/i,
+    async: true,
+    captions: function (element) {
+      var figcaption = element.querySelector('figcaption');
+      return figcaption ? figcaption.innerText : null;
+    },
+    buttons: true
+  });
+
+})();

package/build/styleguide/js/image-wall.bindings-min.js

@@ -0,0 +1 @@
+"use strict";!function(){var e,o;Masonry&&imagesLoaded&&((e=document.querySelector(".image-wall"))&&(o=new Masonry(e,{columnWidth:"li:not(.hidden)",itemSelector:"li",transitionDuration:0,gutter:24}),imagesLoaded(e).on("progress",function(){o.layout()})))}();

package/build/styleguide/js/image-wall.bindings.js

@@ -0,0 +1,29 @@
+/**
+ * @file
+ * Javascript binding of Masonry.
+ */
+'use strict';
+
+(function () {
+
+  if (!Masonry || !imagesLoaded) { // eslint-disable-line no-undef
+    return;
+  }
+
+  const grid = document.querySelector('.image-wall');
+  if (!grid) {
+    return;
+  }
+
+  const msnry = new Masonry(grid, { // eslint-disable-line no-undef
+    columnWidth: 'li:not(.hidden)',
+    itemSelector: 'li',
+    transitionDuration: 0,
+    gutter: 24
+  });
+
+  imagesLoaded(grid).on('progress', () => { // eslint-disable-line no-undef
+    msnry.layout();
+  });
+
+})();

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

@@ -0,0 +1 @@
+"use strict";!function(){if(Modal)for(var e=document.querySelectorAll(".modal.menu"),t=e.length;t--;)!function(i){new Modal(i,{resizeEvent:function(e,t){960<window.innerWidth?(t(),i.setAttribute("aria-hidden","false")):i.classList.contains("visible")||i.setAttribute("aria-hidden","true")}})}(e[t])}();

package/build/styleguide/js/menu.bindings.js

@@ -0,0 +1,33 @@
+'use strict';
+
+(function () {
+
+  if (!Modal) { // eslint-disable-line no-undef
+    return;
+  }
+
+  const menu = document.querySelectorAll('.modal.menu');
+
+  const createModal = function (modal) {
+    // eslint-disable-next-line no-undef
+    new Modal(modal, {
+      // The modal is always visible from tablet and up,
+      // this is atypical.
+      resizeEvent: (open, close) => {
+        if (window.innerWidth > 960) {
+          close();
+          modal.setAttribute('aria-hidden', 'false');
+        }
+        else {
+          if (!modal.classList.contains('visible')) {
+            modal.setAttribute('aria-hidden', 'true');
+          }
+        }
+      }
+    });
+  };
+
+  for (var i = menu.length; i--;) {
+    createModal(menu[i]);
+  }
+})();

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

@@ -0,0 +1 @@
+"use strict";!function(){if(Modal)for(var o=document.querySelectorAll(".modal:not(.has-custom-binding)"),n=o.length;n--;)new Modal(o[n])}();

package/build/styleguide/js/modal.bindings.js

@@ -0,0 +1,15 @@
+/* global Modal */
+'use strict';
+
+(function () {
+
+  if (!Modal) {
+    return;
+  }
+
+  const selected = document.querySelectorAll('.modal:not(.has-custom-binding)');
+  for (let i = selected.length; i--;) {
+    new Modal(selected[i]);
+  }
+
+})();

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

@@ -0,0 +1 @@
+"use strict";!function(){for(var e=document.querySelectorAll(".responsive-table .table-wrapper"),l=0;l<e.length;l++){var r=e[l];new ResponsiveTable(r,{scrollableText:"(scroll to see more)"})}}();

package/build/styleguide/js/table.bindings.js

@@ -0,0 +1,18 @@
+/* global ResponsiveTable */
+
+'use strict';
+
+(function () {
+  var tablesNodeList = document.querySelectorAll('.responsive-table .table-wrapper');
+
+  // Optimise all tables with a wrapper div.responsive-table
+  for (var i = 0; i < tablesNodeList.length; i++) {
+    var table = tablesNodeList[i];
+
+    // Adds accessibility support.
+    new ResponsiveTable(table, {
+      scrollableText: '(scroll to see more)'
+    });
+  }
+
+})();

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

@@ -0,0 +1 @@
+"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(t,e){"function"==typeof define&&define.amd?define(e):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=e():t.ResponsiveTable=e()}(window,function(){return function(l,t){var u=null,c=function(){l.parentNode.querySelector("table").scrollWidth<=l.parentNode.clientWidth?l.removeAttribute("tabindex"):u&&(u.innerText+=" "+t.scrollableText)};return l&&(u=l.querySelector("caption"),function(){u&&!u.hasAttribute("id")&&(t=Math.random().toString(36).substr(2,16),u.setAttribute("id","responsive-table-caption-caption-"+t),l.setAttribute("aria-labelledby",u.getAttribute("id"))),l.setAttribute("tabindex","0"),l.setAttribute("role","group");var t=l.querySelector("tr"),e=t.querySelectorAll("th");if(t.getElementsByTagName("th").length===t.querySelectorAll("*").length)for(var o=0;o<e.length;o++)e[o].hasAttribute("scope")||e[o].setAttribute("scope","col");for(var r=l.querySelectorAll("tr"),n=0;n<r.length;n++){var i=r[n].firstElementChild;i.hasAttribute("scope")||i.setAttribute("scope","row")}c()}()),{}}});