vrembem 1.38.0 → 1.39.0

package/dev/scripts.modern.js

@@ -329,14 +329,6 @@ const closeTransition = (el, settings) => {
   });
 };
 
-const breakpoints = {
-  xs: '480px',
-  sm: '620px',
-  md: '760px',
-  lg: '990px',
-  xl: '1380px'
-};
-
 var index = {
   __proto__: null,
   setInert: setInert,
@@ -354,8 +346,7 @@ var index = {
   removeClass: removeClass,
   toggleClass: toggleClass,
   openTransition: openTransition,
-  closeTransition: closeTransition,
-  breakpoints: breakpoints
+  closeTransition: closeTransition
 };
 
 function _extends() {
@@ -456,7 +447,7 @@ var defaults$2 = {
   selectorInert: null,
   selectorOverflow: null,
   // Feature toggles
-  breakpoints: breakpoints,
+  breakpoints: null,
   customEventPrefix: 'drawer:',
   eventListeners: true,
   stateSave: true,
@@ -510,6 +501,7 @@ class Breakpoint {
   constructor(parent) {
     this.mediaQueryLists = [];
     this.parent = parent;
+    this.prefix = this.getVariablePrefix();
     this.__check = this.check.bind(this);
   }
 
@@ -518,7 +510,7 @@ class Breakpoint {
     drawers.forEach(drawer => {
       const id = drawer.getAttribute(`data-${this.parent.settings.dataDrawer}`);
       const key = drawer.getAttribute(`data-${this.parent.settings.dataBreakpoint}`);
-      const bp = this.parent.settings.breakpoints[key] ? this.parent.settings.breakpoints[key] : key;
+      const bp = this.getBreakpoint(key);
       const mql = window.matchMedia('(min-width:' + bp + ')');
       this.match(mql, drawer);
       mql.addEventListener('change', this.__check);
@@ -563,6 +555,25 @@ class Breakpoint {
     }
   }
 
+  getBreakpoint(key) {
+    let breakpoint = key;
+
+    if (this.parent.settings.breakpoints && this.parent.settings.breakpoints[key]) {
+      breakpoint = this.parent.settings.breakpoints[key];
+    } else if (getComputedStyle(document.body).getPropertyValue(this.prefix + key)) {
+      breakpoint = getComputedStyle(document.body).getPropertyValue(this.prefix + key);
+    }
+
+    return breakpoint;
+  }
+
+  getVariablePrefix() {
+    let prefix = '--';
+    prefix += getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
+    prefix += 'breakpoint-';
+    return prefix;
+  }
+
 }
 
 function handlerClick$2(event) {
@@ -1147,7 +1158,8 @@ function getConfig(el, settings) {
 
   for (const prop in config) {
     // Get the CSS variable property values
-    const val = styles.getPropertyValue(`--popover-${prop}`).trim(); // If a value was found, replace the default in config obj
+    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
 
     if (val) {
       config[prop] = val;