vrembem 3.0.5 → 3.0.8

package/dev/scripts.esm.js

@@ -606,27 +606,23 @@ function localStore(key, enable) {
     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;
     }
-  });
+  };
 }
 
 /**
@@ -966,7 +962,8 @@ var deregister$2 = function deregister(obj, close) {
       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.
 
@@ -998,12 +995,12 @@ var deregister$2 = function deregister(obj, close) {
   }
 };
 
-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]) {
@@ -1087,9 +1084,9 @@ var initialState = function initialState(entry) {
     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 () {});
@@ -1268,9 +1265,9 @@ var toModal = function toModal(entry) {
 
     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.
 
 
@@ -1391,7 +1388,7 @@ var register$2 = function register(el, dialog) {
           __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);
           }
         },
 
@@ -1684,14 +1681,6 @@ function updateFocusState() {
   }
 }
 
-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;
@@ -1785,15 +1774,8 @@ var deregister$1 = function deregister(obj, close) {
           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);
           }
         }();
 
@@ -1836,32 +1818,17 @@ var open$1 = function open(query, transition, focus) {
     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 () {
@@ -1901,15 +1868,8 @@ var close$1 = function close(query, transition, focus) {
         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) {
@@ -1941,7 +1901,7 @@ var closeAll$1 = function closeAll(exclude, transition) {
     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;
@@ -2123,6 +2083,70 @@ var register$1 = function register(el, dialog) {
   }
 };
 
+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");
@@ -2145,20 +2169,9 @@ var Modal = /*#__PURE__*/function (_Collection) {
     _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();
@@ -2272,7 +2285,7 @@ var Modal = /*#__PURE__*/function (_Collection) {
   _createClass(Modal, [{
     key: "active",
     get: function get() {
-      return this.stack[this.stack.length - 1];
+      return this.stack.top;
     }
   }]);
 
@@ -2308,7 +2321,7 @@ function getConfig(el, settings) {
 
   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) {