vrembem 1.38.0 → 1.39.0

package/dev/scripts.umd.js

@@ -356,14 +356,6 @@
     });
   };
 
-  var breakpoints = {
-    xs: '480px',
-    sm: '620px',
-    md: '760px',
-    lg: '990px',
-    xl: '1380px'
-  };
-
   var index = {
     __proto__: null,
     setInert: setInert,
@@ -381,8 +373,7 @@
     removeClass: removeClass,
     toggleClass: toggleClass,
     openTransition: openTransition,
-    closeTransition: closeTransition,
-    breakpoints: breakpoints
+    closeTransition: closeTransition
   };
 
   function _extends() {
@@ -500,7 +491,7 @@
     selectorInert: null,
     selectorOverflow: null,
     // Feature toggles
-    breakpoints: breakpoints,
+    breakpoints: null,
     customEventPrefix: 'drawer:',
     eventListeners: true,
     stateSave: true,
@@ -562,6 +553,7 @@
     function Breakpoint(parent) {
       this.mediaQueryLists = [];
       this.parent = parent;
+      this.prefix = this.getVariablePrefix();
       this.__check = this.check.bind(this);
     }
 
@@ -574,7 +566,9 @@
       drawers.forEach(function (drawer) {
         var id = drawer.getAttribute("data-" + _this.parent.settings.dataDrawer);
         var key = drawer.getAttribute("data-" + _this.parent.settings.dataBreakpoint);
-        var bp = _this.parent.settings.breakpoints[key] ? _this.parent.settings.breakpoints[key] : key;
+
+        var bp = _this.getBreakpoint(key);
+
         var mql = window.matchMedia('(min-width:' + bp + ')');
 
         _this.match(mql, drawer);
@@ -630,6 +624,25 @@
       }
     };
 
+    _proto.getBreakpoint = function getBreakpoint(key) {
+      var 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;
+    };
+
+    _proto.getVariablePrefix = function getVariablePrefix() {
+      var prefix = '--';
+      prefix += getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
+      prefix += 'breakpoint-';
+      return prefix;
+    };
+
     return Breakpoint;
   }();
 
@@ -1306,7 +1319,8 @@
 
     for (var prop in config) {
       // Get the CSS variable property values
-      var val = styles.getPropertyValue("--popover-" + prop).trim(); // If a value was found, replace the default in config obj
+      var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
+      var val = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
 
       if (val) {
         config[prop] = val;