vrembem 1.40.2 → 1.42.0

package/dev/scripts.modern.js

@@ -34,10 +34,9 @@ const setTabindex = selector => {
 };
 
 /**
- * Adds a class or classes to an element or NodeList
- * ---
- * @param {Node || NodeList} el - Element(s) to add class(es) to
- * @param {String || Array} cl - Class(es) to add
+ * Adds a class or classes to a Node or NodeList.
+ * @param {Node || NodeList} el - Element(s) to add class(es) to.
+ * @param  {String || Array} cl - Class(es) to add.
  */
 const addClass = (el, ...cl) => {
   el = el.forEach ? el : [el];
@@ -47,10 +46,9 @@ const addClass = (el, ...cl) => {
 };
 
 /**
- * Takes a hyphen cased string and converts it to camel case
- * ---
- * @param {String } str - the string to convert to camel case
- * @returns {Boolean} - returns a camel cased string
+ * Takes a hyphen cased string and converts it to camel case.
+ * @param {String } str - the string to convert to camel case.
+ * @returns {Boolean} - returns a camel cased string.
  */
 const camelCase = str => {
   return str.replace(/-([a-z])/g, function (g) {
@@ -169,23 +167,21 @@ class FocusTrap {
 }
 
 /**
- * Get an element(s) from a selector or return value if not a string
- * ---
- * @param {String} selector - Selector to query
- * @param {Boolean} single - Whether to return a single or all matches
+ * Get an element(s) from a selector or return value if not a string.
+ * @param {String} selector - Selector to query.
+ * @param {Boolean} single - Whether to return a single or all matches.
  */
 const getElement = function getElement(selector, single = 0) {
-  if (typeof selector != 'string') return selector;
+  if (typeof selector !== 'string') return selector;
   return single ? document.querySelector(selector) : document.querySelectorAll(selector);
 };
 
 /**
- * Checks an element or NodeList whether they contain a class or classes
+ * Checks an element or NodeList whether they contain a class or classes.
  * Ref: https://davidwalsh.name/nodelist-array
- * ---
- * @param {Node} el - Element(s) to check class(es) on
- * @param {String || Array} c - Class(es) to check
- * @returns {Boolean} - Returns true if class exists, otherwise false
+ * @param {Node} el - Element(s) to check class(es) on.
+ * @param {String || Array} c - Class(es) to check.
+ * @returns {Boolean} - Returns true if class exists, otherwise false.
  */
 const hasClass = (el, ...cl) => {
   el = el.forEach ? el : [el];
@@ -198,10 +194,9 @@ const hasClass = (el, ...cl) => {
 };
 
 /**
- * Takes a camel cased string and converts it to hyphen case
- * ---
- * @param {String } str - the string to convert to hyphen case
- * @returns {Boolean} - returns a hyphen cased string
+ * Takes a camel cased string and converts it to hyphen case.
+ * @param {String } str - the string to convert to hyphen case.
+ * @returns {Boolean} - returns a hyphen cased string.
  */
 const hyphenCase = str => {
   return str.replace(/([a-z][A-Z])/g, function (g) {
@@ -210,11 +205,10 @@ const hyphenCase = str => {
 };
 
 /**
- * Moves element(s) in the DOM based on a reference and move type
- * ---
- * @param {String} target - The element(s) to move
- * @param {String} type - Move type can be 'after', 'before', 'append' or 'prepend'
- * @param {String} reference - The reference element the move is relative to
+ * Moves element(s) in the DOM based on a reference and move type.
+ * @param {String} target - The element(s) to move.
+ * @param {String} type - Move type can be 'after', 'before', 'append' or 'prepend'.
+ * @param {String} reference - The reference element the move is relative to.
  */
 
 function moveElement(target, type, reference = false) {
@@ -265,10 +259,9 @@ function moveElement(target, type, reference = false) {
 }
 
 /**
- * Remove a class or classes from an element or NodeList
- * ---
- * @param {Node || NodeList} el - Element(s) to remove class(es) from
- * @param {String || Array} cl - Class(es) to remove
+ * Remove a class or classes from an element or NodeList.
+ * @param {Node || NodeList} el - Element(s) to remove class(es) from.
+ * @param {String || Array} cl - Class(es) to remove.
  */
 const removeClass = (el, ...cl) => {
   el = el.forEach ? el : [el];
@@ -278,10 +271,9 @@ const removeClass = (el, ...cl) => {
 };
 
 /**
- * Toggle a class or classes on an element or NodeList
- * ---
- * @param {Node || NodeList} el - Element(s) to toggle class(es) on
- * @param {String || Array} cl - Class(es) to toggle
+ * Toggle a class or classes on an element or NodeList.
+ * @param {Node || NodeList} el - Element(s) to toggle class(es) on.
+ * @param {String || Array} cl - Class(es) to toggle.
  */
 const toggleClass = (el, ...cl) => {
   el = el.forEach ? el : [el];
@@ -367,13 +359,15 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+var defaults$3 = {
+  autoInit: false,
+  stateAttr: 'aria-checked',
+  stateValue: 'mixed'
+};
+
 class Checkbox {
   constructor(options) {
-    this.defaults = {
-      autoInit: false,
-      stateAttr: 'aria-checked',
-      stateValue: 'mixed'
-    };
+    this.defaults = defaults$3;
     this.settings = _extends({}, this.defaults, options);
     this.__handlerClick = this.handlerClick.bind(this);
     if (this.settings.autoInit) this.init();
@@ -467,12 +461,21 @@ class Breakpoint {
   init() {
     const drawers = document.querySelectorAll(`[data-${this.parent.settings.dataBreakpoint}]`);
     drawers.forEach(drawer => {
+      // Setup mediaQueryList object
       const id = drawer.getAttribute(`data-${this.parent.settings.dataDrawer}`);
       const key = drawer.getAttribute(`data-${this.parent.settings.dataBreakpoint}`);
       const bp = this.getBreakpoint(key);
-      const mql = window.matchMedia('(min-width:' + bp + ')');
-      this.match(mql, drawer);
-      mql.addEventListener('change', this.__check);
+      const mql = window.matchMedia('(min-width:' + bp + ')'); // Run match check
+
+      this.match(mql, drawer); // Conditionally use addListner() for IE11 support
+
+      if (typeof mql.addEventListener === 'function') {
+        mql.addEventListener('change', this.__check);
+      } else {
+        mql.addListener(this.__check);
+      } // Push to mediaQueryLists array along with drawer ID
+
+
       this.mediaQueryLists.push({
         'mql': mql,
         'drawer': id
@@ -1108,39 +1111,87 @@ class Modal {
 
 }
 
+class Collection {
+  constructor() {
+    this.collection = [];
+  }
+
+  register(item) {
+    this.deregister(item);
+    this.collection.push(item);
+    return this.collection;
+  }
+
+  deregister(ref) {
+    const index = this.collection.findIndex(entry => {
+      return entry === ref;
+    });
+
+    if (index >= 0) {
+      const entry = this.collection[index];
+      Object.getOwnPropertyNames(entry).forEach(prop => {
+        delete entry[prop];
+      });
+      this.collection.splice(index, 1);
+    }
+
+    return this.collection;
+  }
+
+  registerCollection(items) {
+    items.forEach(item => {
+      this.register(item);
+    });
+    return this.collection;
+  }
+
+  deregisterCollection() {
+    while (this.collection.length > 0) {
+      this.deregister(this.collection[0]);
+    }
+
+    return this.collection;
+  }
+
+  get(query, key = 'id') {
+    const result = this.collection.find(item => {
+      return item[key] === query;
+    });
+    return result || null;
+  }
+
+}
+
 var defaults = {
   autoInit: false,
-  // Data attributes
-  dataPopover: 'popover',
-  dataTrigger: 'popover-trigger',
-  dataArrow: 'popover-arrow',
-  dataEventType: 'popover-event',
-  dataPlacement: 'popover-placement',
+  // Selectors
+  selectorPopover: '.popover',
+  selectorArrow: '.popover__arrow',
   // State classes
   stateActive: 'is-active',
   // Feature toggles
-  eventType: 'click',
   eventListeners: true,
-  placement: 'bottom-start'
+  eventType: 'click',
+  placement: 'bottom'
 };
 
 function close(popover) {
   // Update state class
   popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
 
-  popover.trigger.setAttribute('aria-expanded', 'false'); // Disable popper event listeners
+  if (popover.trigger.hasAttribute('aria-controls')) {
+    popover.trigger.setAttribute('aria-expanded', 'false');
+  } // Disable popper event listeners
+
 
   popover.popper.setOptions({
     modifiers: [{
       name: 'eventListeners',
       enabled: false
     }]
-  }); // Update collection status with new state
+  }); // Update popover state
 
-  const index = this.collection.findIndex(item => {
-    return item.target === popover.target;
-  });
-  this.collection[index].state = 'closed'; // Clear the memory if popover trigger matches the ones saved in memory
+  popover.state = 'closed'; // Clear memory if popover trigger matches the one saved in memory
 
   if (popover.trigger === this.memory.trigger) {
     this.memory.trigger = null;
@@ -1152,7 +1203,7 @@ function close(popover) {
 function closeAll() {
   this.collection.forEach(popover => {
     if (popover.state === 'opened') {
-      this.close(popover);
+      popover.close();
     }
   }); // Return the collection
 
@@ -1166,10 +1217,10 @@ function closeCheck(popover) {
     // Check if trigger or target are being hovered
     const isHovered = popover.target.closest(':hover') === popover.target || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or target are being focused
 
-    const isFocused = document.activeElement.closest(`[data-${this.settings.dataPopover}]`) === popover.target || document.activeElement.closest(`[data-${this.settings.dataTrigger}]`) === popover.trigger; // Close if the trigger and target are not currently hovered or focused
+    const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"]`); // Close if the trigger and target are not currently hovered or focused
 
     if (!isHovered && !isFocused) {
-      this.close(popover);
+      popover.close();
     } // Return the popover
 
 
@@ -1179,10 +1230,10 @@ function closeCheck(popover) {
 
 function handlerClick(popover) {
   if (popover.target.classList.contains(this.settings.stateActive)) {
-    this.close(popover);
+    popover.close();
   } else {
     this.memory.trigger = popover.trigger;
-    this.open(popover);
+    popover.open();
     documentClick.call(this, popover);
   }
 }
@@ -1193,7 +1244,7 @@ function handlerKeydown(event) {
         this.memory.trigger.focus();
       }
 
-      this.closeAll();
+      closeAll.call(this);
       return;
 
     case 'Tab':
@@ -1207,19 +1258,21 @@ function handlerKeydown(event) {
   }
 }
 function documentClick(popover) {
-  const obj = this;
+  const root = this;
   document.addEventListener('click', function _f(event) {
-    const result = event.target.closest(`[data-${obj.settings.dataPopover}], [data-${obj.settings.dataTrigger}]`);
-    const match = result === popover.target || result === popover.trigger;
+    // Check if a popover was clicked
+    const result = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"]`);
 
-    if (!match) {
-      if (popover.target.classList.contains(obj.settings.stateActive)) {
-        obj.close(popover);
+    if (!result) {
+      // If it doesn't match and popover is open, close it and remove event listener
+      if (popover.target && popover.target.classList.contains(root.settings.stateActive)) {
+        popover.close();
       }
 
       this.removeEventListener('click', _f);
     } else {
-      if (!popover.target.classList.contains(obj.settings.stateActive)) {
+      // If it does match and popover isn't currently active, remove event listener
+      if (popover.target && !popover.target.classList.contains(root.settings.stateActive)) {
         this.removeEventListener('click', _f);
       }
     }
@@ -1236,26 +1289,23 @@ function getConfig(el, settings) {
     'offset': 0,
     'overflow-padding': 0,
     'flip-padding': 0,
-    'arrow-element': `[data-${settings.dataArrow}]`,
+    'arrow-element': settings.selectorArrow,
     'arrow-padding': 0
   }; // Loop through config obj
 
   for (const prop in config) {
     // Get the CSS variable property values
     const prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
-    const val = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim(); // If a value was found, replace the default in config obj
+    const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim(); // If a value was found, replace the default in config obj
 
-    if (val) {
-      config[prop] = val;
+    if (value) {
+      config[prop] = value;
     }
   } // Return the config obj
 
 
   return config;
 }
-function getData(el, attr, fallback = false) {
-  return el.hasAttribute(`data-${attr}`) ? el.getAttribute(`data-${attr}`) : fallback;
-}
 function getPadding(value) {
   let padding; // Split the value by spaces if it's a string
 
@@ -1329,49 +1379,58 @@ function getModifiers(options) {
     }
   }];
 }
-function getPopover(trigger, settings) {
-  // Get the value of the popover trigger attribute
-  const id = trigger.getAttribute(`data-${settings.dataTrigger}`).trim();
+function getPopoverID(obj) {
+  // If it's a string
+  if (typeof obj === 'string') {
+    return obj;
+  } // If it's an HTML element
+  else if (typeof obj.hasAttribute === 'function') {
+    // If it's a popover trigger
+    if (obj.hasAttribute('aria-controls')) {
+      return obj.getAttribute('aria-controls');
+    } // If it's a popover tooltip trigger
+    else if (obj.hasAttribute('aria-describedby')) {
+      return obj.getAttribute('aria-describedby');
+    } // If it's a popover target
+    else if (obj.closest(this.settings.selectorPopover)) {
+      return obj.id;
+    } // Return false if no id was found
+    else return false;
+  } // If it has an ID property
+  else if (obj.id) {
+    return obj.id;
+  } // Return false if no id was found
+  else return false;
+}
+function getPopoverElements(query) {
+  const id = getPopoverID.call(this, query);
 
   if (id) {
-    // If trigger attribute value exists, return the querySelector element using
-    // the provided popover trigger attribute's value
-    return document.querySelector(`[data-${settings.dataPopover}="${id}"]`);
+    const trigger = document.querySelector(`[aria-controls="${id}"]`) || document.querySelector(`[aria-describedby="${id}"]`);
+    const target = document.querySelector(`#${id}`);
+
+    if (!trigger && !target) {
+      console.error('No popover elements found using the provided ID:', id);
+    } else if (!trigger) {
+      console.error('No popover trigger associated with the provided popover:', target);
+    } else if (!target) {
+      console.error('No popover associated with the provided popover trigger:', trigger);
+    }
+
+    if (!trigger || !target) {
+      return false;
+    } else {
+      return {
+        trigger,
+        target
+      };
+    }
   } else {
-    // If trigger attribute value doesn't exist, check if 
-    // - There is a nextElementSibling relative to the trigger
-    // - And it has the popover data attribute.
-    return trigger.nextElementSibling && trigger.nextElementSibling.hasAttribute(`data-${settings.dataPopover}`) ? // Return the element or false if the two checks fail
-    trigger.nextElementSibling : false;
+    console.error('Could not resolve the popover ID:', query);
+    return false;
   }
 }
 
-function open(popover) {
-  // Update state class
-  popover.target.classList.add(this.settings.stateActive); // Update a11y attributes
-
-  popover.trigger.setAttribute('aria-expanded', 'true'); // Update popover config
-
-  popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
-
-  popover.popper.setOptions({
-    placement: getData(popover.target, this.settings.dataPlacement, popover.config['placement']),
-    modifiers: [{
-      name: 'eventListeners',
-      enabled: true
-    }, ...getModifiers(popover.config)]
-  }); // Update popover's position
-
-  popover.popper.update(); // Update collection status with new state
-
-  const index = this.collection.findIndex(item => {
-    return item.target === popover.target;
-  });
-  this.collection[index].state = 'opened'; // Return the popover
-
-  return popover;
-}
-
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -3155,72 +3214,100 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-function register(trigger, target) {
-  // If no target is passed
-  if (!target) {
-    // Try and get the target
-    target = getPopover(trigger, this.settings); // If still no target is returned, log an error and return false
+function open(popover) {
+  // Update state class
+  popover.target.classList.add(this.settings.stateActive); // Update a11y attribute
 
-    if (!target) {
-      console.error('No popover associated with the provided trigger:', trigger);
-      return false;
-    }
-  } // Check if this item has already been registered in the collection
+  if (popover.trigger.hasAttribute('aria-controls')) {
+    popover.trigger.setAttribute('aria-expanded', 'true');
+  } // Update popover config
+
+
+  popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
 
+  popover.popper.setOptions({
+    placement: popover.config['placement'],
+    modifiers: [{
+      name: 'eventListeners',
+      enabled: true
+    }, ...getModifiers(popover.config)]
+  }); // Update popover position
 
-  const index = this.collection.findIndex(item => {
-    return item.trigger === trigger && item.target === target;
-  }); // Initiate popover variable
+  popover.popper.update(); // Update popover state
 
-  let popover; // Check if it already exists in collection
+  popover.state = 'opened'; // Return the popover
 
-  if (index >= 0) {
-    // Set popover as item from collection
-    popover = this.collection[index];
-  } else {
-    // Create popper instance
-    const popperInstance = createPopper(trigger, target); // Build popover object and push to collection array
+  return popover;
+}
 
-    popover = {
-      state: 'closed',
-      trigger: trigger,
-      target: target,
-      popper: popperInstance,
-      config: getConfig(target, this.settings)
-    }; // Add item to collection
+function register(trigger, target) {
+  // Deregister popover if it already exists in the collection
+  this.deregister(target.id); // Create popper instance
 
-    this.collection.push(popover);
-  } // Setup event listeners
+  const popperInstance = createPopper(trigger, target); // Save root this for use inside object & create methods API
+
+  const root = this;
+  const methods = {
+    open() {
+      open.call(root, this);
+    },
+
+    close() {
+      close.call(root, this);
+    },
+
+    deregister() {
+      deregister.call(root, this);
+    }
+
+  }; // Build popover object and push to collection array
+
+  const popover = _extends({
+    id: target.id,
+    state: 'closed',
+    trigger: trigger,
+    target: target,
+    popper: popperInstance,
+    config: getConfig(target, this.settings)
+  }, methods); // Setup event listeners
 
 
   registerEventListeners.call(this, popover); // Set initial state of popover
 
   if (popover.target.classList.contains(this.settings.stateActive)) {
-    this.open(popover);
+    popover.open();
     documentClick.call(this, popover);
   } else {
-    this.close(popover);
-  } // Return the popover object
+    popover.close();
+  } // Add item to collection
+
 
+  this.collection.push(popover); // Return the popover object
 
   return popover;
 }
 function deregister(popover) {
   // Check if this item has been registered in the collection
-  const index = this.collection.findIndex(item => {
-    return item.trigger === popover.trigger && item.target === popover.target;
-  }); // If the item exists in the collection
+  const index = this.collection.findIndex(entry => {
+    return entry.id === popover.id;
+  }); // If the entry exists in the collection
 
   if (index >= 0) {
-    // Close the popover
-    if (popover.state === 'opened') {
-      this.close(popover);
+    // Get the collection entry
+    const entry = this.collection[index]; // Close the collection entry if it's open
+
+    if (entry.state === 'opened') {
+      entry.close();
     } // Clean up the popper instance
 
 
-    popover.popper.destroy(); // Remove event listeners
+    entry.popper.destroy(); // Remove event listeners
 
-    deregisterEventListeners(popover); // Remove item from collection
+    deregisterEventListeners(entry); // Delete properties from collection entry
+
+    Object.getOwnPropertyNames(entry).forEach(prop => {
+      delete entry[prop];
+    }); // Remove entry from collection
 
     this.collection.splice(index, 1);
   } // Return the new collection
@@ -3232,7 +3319,7 @@ function registerEventListeners(popover) {
   // If event listeners aren't already setup
   if (!popover.__eventListeners) {
     // Add event listeners based on event type
-    const eventType = getData(popover.target, this.settings.dataEventType, popover.config['event']);
+    const eventType = popover.config['event'];
 
     if (eventType === 'hover') {
       // Setup event listeners object for hover
@@ -3293,31 +3380,13 @@ function deregisterEventListeners(popover) {
 
   return popover;
 }
-function registerCollection() {
-  // Get all the triggers
-  const triggers = document.querySelectorAll(`[data-${this.settings.dataTrigger}]`);
-  triggers.forEach(trigger => {
-    // Register the popover and save to collection array
-    this.register(trigger, false);
-  }); // Return the popover collection
-
-  return this.collection;
-}
-function deregisterCollection() {
-  // Loop through all items within the collection and pass them to deregister()
-  while (this.collection.length > 0) {
-    this.deregister(this.collection[0]);
-  } // Return the popover collection
 
-
-  return this.collection;
-}
-
-class Popover {
+class Popover extends Collection {
   constructor(options) {
+    super();
     this.defaults = defaults;
-    this.settings = _extends({}, this.defaults, options);
-    this.collection = [];
+    this.settings = _extends({}, this.defaults, options); // this.collection = [];
+
     this.memory = {
       trigger: null
     };
@@ -3327,9 +3396,11 @@ class Popover {
 
   init(options = null) {
     // Update settings with passed options
-    if (options) this.settings = _extends({}, this.settings, options); // Build the collections array with popover instances
+    if (options) this.settings = _extends({}, this.settings, options); // Get all the popovers
 
-    this.registerCollection(); // If eventListeners is enabled
+    const popovers = document.querySelectorAll(this.settings.selectorPopover); // Build the collections array with popover instances
+
+    this.registerCollection(popovers); // If eventListeners is enabled
 
     if (this.settings.eventListeners) {
       // Pass false to initEventListeners() since registerCollection()
@@ -3381,36 +3452,36 @@ class Popover {
    */
 
 
-  register(trigger, target = false) {
-    return register.call(this, trigger, target);
+  register(query) {
+    const els = getPopoverElements.call(this, query);
+    if (!els) return false;
+    return register.call(this, els.trigger, els.target);
   }
 
-  deregister(popover) {
+  deregister(query) {
+    const popover = this.get(getPopoverID(query));
+    if (!popover) return false;
     return deregister.call(this, popover);
   }
-
-  registerCollection() {
-    return registerCollection.call(this);
-  }
-
-  deregisterCollection() {
-    return deregisterCollection.call(this);
-  }
   /**
    * Change state functionality
    */
 
 
-  open(popover) {
-    return open.call(this, popover);
+  open(id) {
+    const popover = this.get(id);
+    if (!popover) return false;
+    return popover.open();
   }
 
-  close(popover) {
-    return close.call(this, popover);
-  }
-
-  closeAll() {
-    return closeAll.call(this);
+  close(id) {
+    if (id) {
+      const popover = this.get(id);
+      if (!popover) return false;
+      return popover.close();
+    } else {
+      return closeAll.call(this);
+    }
   }
 
 }