vrembem 3.0.5 → 3.0.8

package/dev/scripts.modern.js

@@ -297,27 +297,25 @@ function getPrefix() {
 }
 
 function localStore(key, enable = true) {
-  function getStore() {
-    const value = localStorage.getItem(key);
-    return value ? JSON.parse(value) : {};
-  }
+  const local = localStorage.getItem(key);
+  const store = local ? JSON.parse(local) : {};
+  return {
+    get(prop) {
+      return prop ? store[prop] : store;
+    },
 
-  function setStore(obj) {
-    localStorage.setItem(key, JSON.stringify(obj));
-  }
+    set(prop, value) {
+      if (value) {
+        store[prop] = value;
+      } else {
+        delete store[prop];
+      }
 
-  return new Proxy(getStore(), {
-    set: (target, property, value) => {
-      target[property] = value;
-      if (enable) setStore(target);
-      return true;
-    },
-    deleteProperty: (target, property) => {
-      delete target[property];
-      if (enable) setStore(target);
-      return true;
+      if (enable) localStorage.setItem(key, JSON.stringify(store));
+      return store;
     }
-  });
+
+  };
 }
 
 /**
@@ -631,7 +629,7 @@ async function deregister$2(obj, close = true) {
     } // Remove entry from local store.
 
 
-    delete this.store[entry.id]; // Unmount the MatchMedia functionality.
+    this.store.set(entry.id); // Unmount the MatchMedia functionality.
 
     entry.unmountBreakpoint(); // Delete properties from collection entry.
 
@@ -646,12 +644,12 @@ async function deregister$2(obj, close = true) {
   return this.collection;
 }
 
-function L() {
+function g() {
   return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
 }
 
 function getBreakpoint(drawer) {
-  const prefix = L();
+  const prefix = g();
   const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
 
   if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
@@ -735,9 +733,9 @@ async function initialState(entry) {
   //  1. If a store state is available, restore from local store.
   //  2. If opened state class is set, set state to opened.
   //  3. Else, initialize default state.
-  if (this.store[entry.id]) {
+  if (this.store.get(entry.id)) {
     // Restore drawers to saved inline state.
-    if (this.store[entry.id] === 'opened') {
+    if (this.store.get(entry.id) === 'opened') {
       await entry.open(false, false);
     } else {
       await entry.close(false, false);
@@ -895,9 +893,9 @@ async function toModal(entry) {
 
   entry.dialog.setAttribute('aria-modal', 'true'); // If there isn't a stored state but also has the opened state class...
 
-  if (!this.store[entry.id] && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
+  if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
     // Save the opened state in local store.
-    this.store[entry.id] = 'opened';
+    this.store.set(entry.id, 'opened');
   } // Modal drawer defaults to closed state.
 
 
@@ -978,7 +976,7 @@ async function register$2(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);
       }
     },
 
@@ -1233,14 +1231,6 @@ function updateFocusState() {
   }
 }
 
-function updateStackIndex(stack) {
-  stack.forEach((entry, index) => {
-    entry.el.style.zIndex = null;
-    const value = getComputedStyle(entry.el)['z-index'];
-    entry.el.style.zIndex = parseInt(value) + index + 1;
-  });
-}
-
 async function handleClick$1(event) {
   // If an open or replace button was clicked, open or replace the modal.
   let trigger = event.target.closest(`[data-${this.settings.dataOpen}], [data-${this.settings.dataReplace}]`);
@@ -1297,14 +1287,8 @@ async function deregister$1(obj, close = true) {
     if (close && entry.state === 'opened') {
       await entry.close(false);
     } else {
-      // Get index of modal in stack array.
-      const stackIndex = this.stack.findIndex(item => {
-        return item.id === entry.id;
-      }); // Remove modal from stack array.
-
-      if (stackIndex >= 0) {
-        this.stack.splice(stackIndex, 1);
-      }
+      // Remove modal from stack.
+      this.stack.remove(entry);
     } // Return teleported modal if a reference has been set.
 
 
@@ -1331,29 +1315,15 @@ async function open$1(query, transition, focus = true) {
   const config = _extends({}, this.settings, modal.settings); // Add transition parameter to configuration.
 
 
-  if (transition !== undefined) config.transition = transition; // Check if modal is already in the stack.
-
-  const index = this.stack.findIndex(entry => {
-    return entry.id === modal.id;
-  }); // If modal is already open.
-
-  if (index >= 0) {
-    // Remove modal from stack array.
-    this.stack.splice(index, 1); // Move back to end of stack.
-
-    this.stack.push(modal);
-  } // If modal is closed.
+  if (transition !== undefined) config.transition = transition; // Maybe add modal to top of stack.
 
+  this.stack.moveToTop(modal); // If modal is closed.
 
   if (modal.state === 'closed') {
     // Update modal state.
-    modal.state = 'opening'; // Apply z-index styles based on stack length.
-
-    modal.el.style.zIndex = null;
-    const value = getComputedStyle(modal.el)['z-index'];
-    modal.el.style.zIndex = parseInt(value) + this.stack.length + 1; // Store modal in stack array.
+    modal.state = 'opening'; // Add modal to stack.
 
-    this.stack.push(modal); // Run the open transition.
+    this.stack.add(modal); // Run the open transition.
 
     await openTransition(modal.el, config); // Update modal state.
 
@@ -1389,15 +1359,9 @@ async function close$1(query, transition, focus = true) {
 
     document.activeElement.blur(); // Run the close transition.
 
-    await closeTransition(modal.el, config); // Remove z-index styles.
-
-    modal.el.style.zIndex = null; // Get index of modal in stack array.
-
-    const index = this.stack.findIndex(entry => {
-      return entry.id === modal.id;
-    }); // Remove modal from stack array.
+    await closeTransition(modal.el, config); // Remove modal from stack.
 
-    this.stack.splice(index, 1); // Update focus if the focus param is true.
+    this.stack.remove(modal); // Update focus if the focus param is true.
 
     if (focus) {
       updateFocusState.call(this);
@@ -1418,7 +1382,7 @@ async function close$1(query, transition, focus = true) {
 
 async function closeAll$1(exclude, transition) {
   const result = [];
-  await Promise.all(this.stack.map(async modal => {
+  await Promise.all(this.stack.value.map(async modal => {
     if (exclude && exclude === modal.id) {
       Promise.resolve();
     } else {
@@ -1552,6 +1516,74 @@ async function register$1(el, dialog) {
   return entry;
 }
 
+function stack(settings) {
+  const stackArray = [];
+  return {
+    get value() {
+      return [...stackArray];
+    },
+
+    get top() {
+      return stackArray[stackArray.length - 1];
+    },
+
+    updateIndex() {
+      stackArray.forEach((entry, index) => {
+        entry.el.style.zIndex = null;
+        const value = getComputedStyle(entry.el)['z-index'];
+        entry.el.style.zIndex = parseInt(value) + index + 1;
+      });
+    },
+
+    updateGlobalState() {
+      updateGlobalState(this.top, settings);
+      this.updateIndex();
+    },
+
+    add(entry) {
+      // Apply z-index styles based on stack length.
+      entry.el.style.zIndex = null;
+      const 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(entry) {
+      // Get the index of the entry.
+      const index = stackArray.findIndex(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(entry) {
+      // Get the index of the entry.
+      const index = stackArray.findIndex(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");
@@ -1570,27 +1602,16 @@ class Modal extends 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: (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(this, _handleClick)[_handleClick] = handleClick$1.bind(this);
     _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(this);
     if (this.settings.autoInit) this.init();
   }
 
   get active() {
-    return this.stack[this.stack.length - 1];
+    return this.stack.top;
   }
 
   async init(options) {
@@ -1697,7 +1718,7 @@ function getConfig(el, settings) {
 
   for (const prop in config) {
     // Get the CSS variable property values.
-    const prefix = L();
+    const prefix = g();
     const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim(); // If a value was found, replace the default in config obj.
 
     if (value) {