vrembem 3.0.5 → 3.0.8

package/dev/scripts.umd.js

@@ -611,27 +611,23 @@
       enable = true;
     }
 
-    function getStore() {
-      var value = localStorage.getItem(key);
-      return value ? JSON.parse(value) : {};
-    }
-
-    function setStore(obj) {
-      localStorage.setItem(key, JSON.stringify(obj));
-    }
-
-    return new Proxy(getStore(), {
-      set: function set(target, property, value) {
-        target[property] = value;
-        if (enable) setStore(target);
-        return true;
+    var local = localStorage.getItem(key);
+    var store = local ? JSON.parse(local) : {};
+    return {
+      get: function get(prop) {
+        return prop ? store[prop] : store;
       },
-      deleteProperty: function deleteProperty(target, property) {
-        delete target[property];
-        if (enable) setStore(target);
-        return true;
+      set: function set(prop, value) {
+        if (value) {
+          store[prop] = value;
+        } else {
+          delete store[prop];
+        }
+
+        if (enable) localStorage.setItem(key, JSON.stringify(store));
+        return store;
       }
-    });
+    };
   }
 
   /**
@@ -971,7 +967,8 @@
         if (index >= 0) {
           var _temp7 = function _temp7() {
             // Remove entry from local store.
-            delete _this2.store[_entry.id]; // Unmount the MatchMedia functionality.
+            _this2.store.set(_entry.id); // Unmount the MatchMedia functionality.
+
 
             _entry.unmountBreakpoint(); // Delete properties from collection entry.
 
@@ -1003,12 +1000,12 @@
     }
   };
 
-  function L() {
+  function g() {
     return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
   }
 
   function getBreakpoint(drawer) {
-    var prefix = L();
+    var prefix = g();
     var bp = drawer.getAttribute("data-" + this.settings.dataBreakpoint);
 
     if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
@@ -1092,9 +1089,9 @@
       var _this2 = this;
 
       var _temp3 = function () {
-        if (_this2.store[entry.id]) {
+        if (_this2.store.get(entry.id)) {
           var _temp4 = function () {
-            if (_this2.store[entry.id] === 'opened') {
+            if (_this2.store.get(entry.id) === 'opened') {
               return Promise.resolve(entry.open(false, false)).then(function () {});
             } else {
               return Promise.resolve(entry.close(false, false)).then(function () {});
@@ -1273,9 +1270,9 @@
 
       entry.dialog.setAttribute('aria-modal', 'true'); // If there isn't a stored state but also has the opened state class...
 
-      if (!_this4.store[entry.id] && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
+      if (!_this4.store.get(entry.id) && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
         // Save the opened state in local store.
-        _this4.store[entry.id] = 'opened';
+        _this4.store.set(entry.id, 'opened');
       } // Modal drawer defaults to closed state.
 
 
@@ -1396,7 +1393,7 @@
             __state = value; // Save 'opened' and 'closed' states to store if mode is inline.
 
             if (value === 'opened' || value === 'closed') {
-              if (this.mode === 'inline') root.store[this.id] = this.state;
+              if (this.mode === 'inline') root.store.set(this.id, this.state);
             }
           },
 
@@ -1689,14 +1686,6 @@
     }
   }
 
-  function updateStackIndex(stack) {
-    stack.forEach(function (entry, index) {
-      entry.el.style.zIndex = null;
-      var value = getComputedStyle(entry.el)['z-index'];
-      entry.el.style.zIndex = parseInt(value) + index + 1;
-    });
-  }
-
   var handleClick$1 = function handleClick(event) {
     try {
       var _this2 = this;
@@ -1790,15 +1779,8 @@
             if (close && _entry.state === 'opened') {
               return Promise.resolve(_entry.close(false)).then(function () {});
             } else {
-              // Get index of modal in stack array.
-              var stackIndex = _this2.stack.findIndex(function (item) {
-                return item.id === _entry.id;
-              }); // Remove modal from stack array.
-
-
-              if (stackIndex >= 0) {
-                _this2.stack.splice(stackIndex, 1);
-              }
+              // Remove modal from stack.
+              _this2.stack.remove(_entry);
             }
           }();
 
@@ -1841,32 +1823,17 @@
       var config = _extends({}, _this2.settings, modal.settings); // Add transition parameter to configuration.
 
 
-      if (transition !== undefined) config.transition = transition; // Check if modal is already in the stack.
-
-      var index = _this2.stack.findIndex(function (entry) {
-        return entry.id === modal.id;
-      }); // If modal is already open.
+      if (transition !== undefined) config.transition = transition; // Maybe add modal to top of stack.
 
-
-      if (index >= 0) {
-        // Remove modal from stack array.
-        _this2.stack.splice(index, 1); // Move back to end of stack.
-
-
-        _this2.stack.push(modal);
-      } // If modal is closed.
+      _this2.stack.moveToTop(modal); // If modal is closed.
 
 
       var _temp4 = function () {
         if (modal.state === 'closed') {
           // Update modal state.
-          modal.state = 'opening'; // Apply z-index styles based on stack length.
-
-          modal.el.style.zIndex = null;
-          var value = getComputedStyle(modal.el)['z-index'];
-          modal.el.style.zIndex = parseInt(value) + _this2.stack.length + 1; // Store modal in stack array.
+          modal.state = 'opening'; // Add modal to stack.
 
-          _this2.stack.push(modal); // Run the open transition.
+          _this2.stack.add(modal); // Run the open transition.
 
 
           return Promise.resolve(openTransition(modal.el, config)).then(function () {
@@ -1906,15 +1873,8 @@
           document.activeElement.blur(); // Run the close transition.
 
           return Promise.resolve(closeTransition(modal.el, config)).then(function () {
-            // Remove z-index styles.
-            modal.el.style.zIndex = null; // Get index of modal in stack array.
-
-            var index = _this2.stack.findIndex(function (entry) {
-              return entry.id === modal.id;
-            }); // Remove modal from stack array.
-
-
-            _this2.stack.splice(index, 1); // Update focus if the focus param is true.
+            // Remove modal from stack.
+            _this2.stack.remove(modal); // Update focus if the focus param is true.
 
 
             if (focus) {
@@ -1946,7 +1906,7 @@
       var _this2 = this;
 
       var result = [];
-      return Promise.resolve(Promise.all(_this2.stack.map(function (modal) {
+      return Promise.resolve(Promise.all(_this2.stack.value.map(function (modal) {
         try {
           var _temp3 = function _temp3() {
             modal.trigger = null;
@@ -2128,6 +2088,70 @@
     }
   };
 
+  function stack(settings) {
+    var stackArray = [];
+    return {
+      get value() {
+        return [].concat(stackArray);
+      },
+
+      get top() {
+        return stackArray[stackArray.length - 1];
+      },
+
+      updateIndex: function updateIndex() {
+        stackArray.forEach(function (entry, index) {
+          entry.el.style.zIndex = null;
+          var value = getComputedStyle(entry.el)['z-index'];
+          entry.el.style.zIndex = parseInt(value) + index + 1;
+        });
+      },
+      updateGlobalState: function updateGlobalState$1() {
+        updateGlobalState(this.top, settings);
+
+        this.updateIndex();
+      },
+      add: function add(entry) {
+        // Apply z-index styles based on stack length.
+        entry.el.style.zIndex = null;
+        var value = getComputedStyle(entry.el)['z-index'];
+        entry.el.style.zIndex = parseInt(value) + stackArray.length + 1; // Move back to end of stack.
+
+        stackArray.push(entry); // Update the global state.
+
+        this.updateGlobalState();
+      },
+      remove: function remove(entry) {
+        // Get the index of the entry.
+        var index = stackArray.findIndex(function (item) {
+          return item.id === entry.id;
+        }); // If entry is in stack...
+
+        if (index >= 0) {
+          // Remove z-index styles.
+          entry.el.style.zIndex = null; // Remove entry from stack array.
+
+          stackArray.splice(index, 1); // Update the global state.
+
+          this.updateGlobalState();
+        }
+      },
+      moveToTop: function moveToTop(entry) {
+        // Get the index of the entry.
+        var index = stackArray.findIndex(function (item) {
+          return item.id === entry.id;
+        }); // If entry is in stack...
+
+        if (index >= 0) {
+          // Remove entry from stack array.
+          stackArray.splice(index, 1); // Add entry back to top of stack.
+
+          this.add(entry);
+        }
+      }
+    };
+  }
+
   var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
 
   var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
@@ -2150,20 +2174,9 @@
       _this.defaults = defaults$1;
       _this.settings = _extends({}, _this.defaults, options);
       _this.trigger = null;
-      _this.focusTrap = new FocusTrap(); // Setup a proxy for stack array.
-
-      _this.stack = new Proxy([], {
-        set: function set(target, property, value) {
-          target[property] = value; // Update global state if stack length changed.
-
-          if (property === 'length') {
-            updateGlobalState(_this.active, _this.settings);
-            updateStackIndex(_this.stack);
-          }
+      _this.focusTrap = new FocusTrap(); // Setup stack module.
 
-          return true;
-        }
-      });
+      _this.stack = stack(_this.settings);
       _classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleClick)[_handleClick] = handleClick$1.bind(_assertThisInitialized(_this));
       _classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(_assertThisInitialized(_this));
       if (_this.settings.autoInit) _this.init();
@@ -2277,7 +2290,7 @@
     _createClass(Modal, [{
       key: "active",
       get: function get() {
-        return this.stack[this.stack.length - 1];
+        return this.stack.top;
       }
     }]);
 
@@ -2313,7 +2326,7 @@
 
     for (var prop in config) {
       // Get the CSS variable property values.
-      var prefix = L();
+      var prefix = g();
       var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj.
 
       if (value) {