gent_styleguide 7.0.5 → 7.0.6

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

@@ -1 +1 @@
-((e,t)=>{"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.Breadcrumbs=t()})(window,function(){return function(t,e){let n=t.querySelector("ol, ul"),d=t.querySelectorAll("li"),r,a=e=>{var t=document.createElement("a");t.textContent="...",t.href="#",t.addEventListener("click",o),(r=document.createElement("li")).classList.add("expandable"),r.appendChild(t),n.insertBefore(r,n.children[e]),n.tabIndex=-1},i=e=>{l(),(e.matches&&5<d.length||!e.matches&&2<d.length)&&(t.setAttribute("aria-expanded",!1),a(d.length-2))},l=()=>{r&&r.parentNode.removeChild(r)},o=e=>{l(),t.setAttribute("aria-expanded",!0),n.focus()};var c;return c=window.matchMedia("(min-width: 768px)"),i(c),c.addListener(i),{}}});
+((e,t)=>{"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.Breadcrumbs=t()})(window,function(){return function(l,e){let o=l.querySelector("ol, ul");if(o){let n=null,r=()=>o.querySelectorAll("li"),d=()=>{n&&n.parentNode&&n.parentNode.removeChild(n),n=null},a=e=>{e&&"function"==typeof e.preventDefault&&e.preventDefault(),d(),l.setAttribute("aria-expanded","true"),o.focus()},i=e=>{var t=document.createElement("a");t.textContent="...",t.href="#",t.addEventListener("click",a),(n=document.createElement("li")).classList.add("expandable"),n.appendChild(t),o.insertBefore(n,o.children[e]),o.tabIndex=-1},e=e=>{var e=e.matches,t=r();d(),e&&5<t.length||!e&&2<t.length?(l.setAttribute("aria-expanded","false"),i(t.length-2)):l.removeAttribute("aria-expanded")};var t;t=window.matchMedia("(min-width: 768px)"),e(t),"function"==typeof t.addEventListener?t.addEventListener("change",e):"function"==typeof t.addListener&&t.addListener(e)}return{}}});

package/build/styleguide/js/breadcrumbs.functions.js

@@ -4,90 +4,135 @@
   if (typeof define === 'function' && define.amd) {
     define(factory);
   }
+  else if (typeof exports === 'object') {
+    module.exports = factory();
+  }
   else {
-    if (typeof exports === 'object') {
-      module.exports = factory();
-    }
-    else {
-      root.Breadcrumbs = factory();
-    }
+    root.Breadcrumbs = factory();
   }
 }(this || window, function () {
 
+  /**
+   * Breadcrumb constructor.
+   *
+   * @param {HTMLElement} elem
+   *   The root .breadcrumb element.
+   * @param {Object} [options]
+   *   Optional options object (currently unused).
+   *
+   * @return {Object}
+   *   An object representing the Breadcrumbs instance. Currently empty, but
+   *   reserved for future public API methods.
+   */
   return function (elem, options) {
     let list = elem.querySelector('ol, ul');
-    let items = elem.querySelectorAll('li');
-    let expandable;
+    if (!list) {
+      return {};
+    }
+
+    let expandable = null;
+
+    /**
+     * Get the current list items for this breadcrumb.
+     *
+     * @return {NodeListOf<HTMLLIElement>}
+     *   List items.
+     */
+    const getItems = () => list.querySelectorAll('li');
+
+    /**
+     * Remove the expandable for the current breadcrumb.
+     */
+    const removeExpandable = () => {
+      if (expandable && expandable.parentNode) {
+        expandable.parentNode.removeChild(expandable);
+      }
+      expandable = null;
+    };
+
+    /**
+     * Expand the entire breadcrumb.
+     *
+     * @param {Event} e
+     *   Event object.
+     */
+    const expand = e => {
+      if (e && typeof e.preventDefault === 'function') {
+        e.preventDefault();
+      }
+
+      removeExpandable();
+      elem.setAttribute('aria-expanded', 'true');
+      list.focus();
+    };
 
     /**
      * Add an element to the DOM that makes it possible to expand the breadcrumb.
      *
-     * @param {Int} position
+     * @param {number} position
      *   Index of the new element.
      */
     const insertExpandable = position => {
-      let a = document.createElement('a');
-      a.textContent = '...';
-      a.href = '#';
+      const expandLink = document.createElement('a');
+      expandLink.textContent = '...';
+      expandLink.href = '#';
 
-      // attach event listener.
-      a.addEventListener('click', expand);
+      // Attach event listener on this instance only.
+      expandLink.addEventListener('click', expand);
 
-      // Add it to the DOM
       expandable = document.createElement('li');
       expandable.classList.add('expandable');
-      expandable.appendChild(a);
+      expandable.appendChild(expandLink);
+
+      // Insert before the requested position.
       list.insertBefore(expandable, list.children[position]);
       list.tabIndex = -1;
     };
 
     /**
-     *  Collapse the breadcrumb.
+     * Collapse the breadcrumb for the given media query result.
      *
-     * @param {MediaQueryList} query
-     *   The results of the matchMedia function.
+     * @param {MediaQueryList|MediaQueryListEvent} query
+     *   The matchMedia object or its event.
      */
     const collapse = query => {
-      // Remove any old expandables.
+      // In some browsers the callback receives a MediaQueryListEvent.
+      const matches = query.matches;
+
+      const items = getItems();
+
+      // Remove any old expandable for this breadcrumb.
       removeExpandable();
 
       // Collapse when more than 5 items on tablet+,
-      // or more than 2 items on mobile screens
-      if ((query.matches && items.length > 5) ||
-      (!query.matches && items.length > 2)) {
-        elem.setAttribute('aria-expanded', false);
+      // or more than 2 items on mobile screens.
+      if ((matches && items.length > 5) || (!matches && items.length > 2)) {
+        elem.setAttribute('aria-expanded', 'false');
         insertExpandable(items.length - 2);
       }
-    };
-
-    /**
-     * Remove the expandable for the current breadcrumb.
-     */
-    const removeExpandable = () => {
-      if (expandable) {
-        expandable.parentNode.removeChild(expandable);
+      else {
+        // When not collapsed, remove attribute for clarity.
+        elem.removeAttribute('aria-expanded');
       }
     };
 
     /**
-     * Expand the entire breadcrumb.
-     *
-     * @param {Event} e
-     *   Event object.
-     */
-    const expand = e => {
-      removeExpandable();
-      elem.setAttribute('aria-expanded', true);
-      list.focus();
-    };
-
-    /**
-     * Initialize functionality.
+     * Initialize functionality for this breadcrumb instance.
      */
     const init = () => {
-      let query = window.matchMedia('(min-width: 768px)');
-      collapse(query); // Execute once on page load.
-      query.addListener(collapse);
+      const query = window.matchMedia('(min-width: 768px)');
+
+      // Execute once on page load.
+      collapse(query);
+
+      // Listen to changes in viewport width.
+      if (typeof query.addEventListener === 'function') {
+        query.addEventListener('change', collapse);
+      }
+      else if (typeof query.addListener === 'function') {
+        // Fallback for older browsers.
+        query.addListener(collapse);
+      }
     };
 
     init();

package/build/styleguide/sass/31-molecules/breadcrumbs/_breadcrumbs.scss

@@ -18,6 +18,7 @@
 
       display: inline-flex;
       align-items: center;
+      height: 38px;
       margin-right: 8px;
       margin-bottom: 0;
       padding-left: 0;
@@ -99,7 +100,7 @@
     }
 
     &::after {
-      line-height: inherit;
+      line-height: 1.6rem;
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gent_styleguide",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "description": "Styleguide Stad.Gent",
   "devDependencies": {
     "@babel/core": "^7.20.12",