vrembem 1.38.0 → 1.39.0

package/dev/scripts.js

@@ -351,14 +351,6 @@ var closeTransition = function closeTransition(el, settings) {
   });
 };
 
-var breakpoints = {
-  xs: '480px',
-  sm: '620px',
-  md: '760px',
-  lg: '990px',
-  xl: '1380px'
-};
-
 var index = {
   __proto__: null,
   setInert: setInert,
@@ -376,8 +368,7 @@ var index = {
   removeClass: removeClass,
   toggleClass: toggleClass,
   openTransition: openTransition,
-  closeTransition: closeTransition,
-  breakpoints: breakpoints
+  closeTransition: closeTransition
 };
 
 function _extends() {
@@ -495,7 +486,7 @@ var defaults$2 = {
   selectorInert: null,
   selectorOverflow: null,
   // Feature toggles
-  breakpoints: breakpoints,
+  breakpoints: null,
   customEventPrefix: 'drawer:',
   eventListeners: true,
   stateSave: true,
@@ -557,6 +548,7 @@ var Breakpoint = /*#__PURE__*/function () {
   function Breakpoint(parent) {
     this.mediaQueryLists = [];
     this.parent = parent;
+    this.prefix = this.getVariablePrefix();
     this.__check = this.check.bind(this);
   }
 
@@ -569,7 +561,9 @@ var Breakpoint = /*#__PURE__*/function () {
     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);
@@ -625,6 +619,25 @@ var Breakpoint = /*#__PURE__*/function () {
     }
   };
 
+  _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;
 }();
 
@@ -1301,7 +1314,8 @@ function getConfig(el, settings) {
 
   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;