@vrembem/core - npm Package Compare versions

Comparing version 4.0.0-next.1 to 4.0.0-next.2

dev/index.js

@@ -275,3 +275,5 @@ var __accessCheck = (obj, member, msg) => {
       el.classList.add(settings.stateOpening);
-      el.addEventListener("transitionend", function _f() {
+      el.addEventListener("transitionend", function _f(event) {
+        if (event.target != el)
+          return;
         el.classList.add(settings.stateOpened);
@@ -294,3 +296,5 @@ el.classList.remove(settings.stateOpening);
       el.classList.remove(settings.stateOpened);
-      el.addEventListener("transitionend", function _f() {
+      el.addEventListener("transitionend", function _f(event) {
+        if (event.target != el)
+          return;
         el.classList.remove(settings.stateClosing);
@@ -297,0 +301,0 @@ el.classList.add(settings.stateClosed);

dist/index.js

@@ -5,3 +5,3 @@ var b = (t, e, n) => {
 };
-var o = (t, e, n) => (b(t, e, "read from private field"), n ? n.call(t) : e.get(t)), f = (t, e, n) => {
+var o = (t, e, n) => (b(t, e, "read from private field"), n ? n.call(t) : e.get(t)), h = (t, e, n) => {
   if (e.has(t))
@@ -11,23 +11,23 @@ throw TypeError("Cannot add the same private member more than once");
 }, a = (t, e, n, i) => (b(t, e, "write to private field"), i ? i.call(t, n) : e.set(t, n), n);
-var r;
+var l;
 class $ {
   constructor(e, n) {
-    f(this, r, void 0);
-    this.value = e, a(this, r, n), this.mql = null;
+    h(this, l, void 0);
+    this.value = e, a(this, l, n), this.mql = null;
   }
   get handler() {
-    return o(this, r);
+    return o(this, l);
   }
   // Unmount existing handler before setting a new one.
   set handler(e) {
-    this.mql && (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", o(this, r)) : this.mql.removeListener(o(this, r))), a(this, r, e);
+    this.mql && (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", o(this, l)) : this.mql.removeListener(o(this, l))), a(this, l, e);
   }
   mount(e, n) {
-    return e && (this.value = e), n && a(this, r, n), this.value ? (this.mql = window.matchMedia(`(min-width: ${this.value})`), typeof this.mql.addEventListener == "function" ? this.mql.addEventListener("change", o(this, r)) : this.mql.addListener(o(this, r)), o(this, r).call(this, this.mql), this) : this;
+    return e && (this.value = e), n && a(this, l, n), this.value ? (this.mql = window.matchMedia(`(min-width: ${this.value})`), typeof this.mql.addEventListener == "function" ? this.mql.addEventListener("change", o(this, l)) : this.mql.addListener(o(this, l)), o(this, l).call(this, this.mql), this) : this;
   }
   unmount() {
-    return this.mql ? (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", o(this, r)) : this.mql.removeListener(o(this, r)), this.value = null, a(this, r, null), this.mql = null, this) : this;
+    return this.mql ? (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", o(this, l)) : this.mql.removeListener(o(this, l)), this.value = null, a(this, l, null), this.mql = null, this) : this;
   }
 }
-r = new WeakMap();
+l = new WeakMap();
 class T {
@@ -44,4 +44,4 @@ constructor() {
       const i = this.collection[n];
-      Object.getOwnPropertyNames(i).forEach((l) => {
-        delete i[l];
+      Object.getOwnPropertyNames(i).forEach((r) => {
+        delete i[r];
       }), this.collection.splice(n, 1);
@@ -87,15 +87,15 @@ }
 ];
-var h, d, u;
+var f, d, u;
 class x {
   constructor(e = null, n = "[data-focus]") {
-    f(this, h, void 0);
-    f(this, d, void 0);
-    f(this, u, void 0);
-    this.el = e, this.selectorFocus = n, a(this, d, p.bind(this)), a(this, u, g.bind(this));
+    h(this, f, void 0);
+    h(this, d, void 0);
+    h(this, u, void 0);
+    this.el = e, this.selectorFocus = n, a(this, d, g.bind(this)), a(this, u, p.bind(this));
   }
   get focusable() {
-    return o(this, h);
+    return o(this, f);
   }
   set focusable(e) {
-    a(this, h, e), o(this, h).length ? (document.removeEventListener("keydown", o(this, u)), document.addEventListener("keydown", o(this, d))) : (document.removeEventListener("keydown", o(this, d)), document.addEventListener("keydown", o(this, u)));
+    a(this, f, e), o(this, f).length ? (document.removeEventListener("keydown", o(this, u)), document.addEventListener("keydown", o(this, d))) : (document.removeEventListener("keydown", o(this, d)), document.addEventListener("keydown", o(this, u)));
   }
@@ -118,13 +118,13 @@ get focusableFirst() {
   getFocusable(e = this.el) {
-    const n = [], i = document.activeElement, l = e.scrollTop;
+    const n = [], i = document.activeElement, r = e.scrollTop;
     return e.querySelectorAll(v.join(",")).forEach((m) => {
       m.focus(), document.activeElement === m && n.push(m);
-    }), e.scrollTop = l, i.focus(), n;
+    }), e.scrollTop = r, i.focus(), n;
   }
 }
-h = new WeakMap(), d = new WeakMap(), u = new WeakMap();
-function p(t) {
+f = new WeakMap(), d = new WeakMap(), u = new WeakMap();
+function g(t) {
   (t.key === "Tab" || t.keyCode === 9) && (t.shiftKey ? (document.activeElement === this.focusableFirst || document.activeElement === this.el) && (t.preventDefault(), this.focusableLast.focus()) : (document.activeElement === this.focusableLast || document.activeElement === this.el) && (t.preventDefault(), this.focusableFirst.focus()));
 }
-function g(t) {
+function p(t) {
   (t.key === "Tab" || t.keyCode === 9) && t.preventDefault();
@@ -142,7 +142,7 @@ }
   return {
-    get(l) {
-      return l ? i[l] : i;
+    get(r) {
+      return r ? i[r] : i;
     },
-    set(l, c) {
-      return c ? i[l] = c : delete i[l], e && localStorage.setItem(t, JSON.stringify(i)), i;
+    set(r, c) {
+      return c ? i[r] = c : delete i[r], e && localStorage.setItem(t, JSON.stringify(i)), i;
     }
@@ -152,4 +152,4 @@ };
 function O(t, e, n) {
-  const i = e.nodeType === Node.COMMENT_NODE, l = e.nodeType === Node.ELEMENT_NODE;
-  if (e = i || l ? e : document.querySelector(e), i && (n = "after"), !e)
+  const i = e.nodeType === Node.COMMENT_NODE, r = e.nodeType === Node.ELEMENT_NODE;
+  if (e = i || r ? e : document.querySelector(e), i && (n = "after"), !e)
     throw new Error(`Not a valid teleport reference: '${e}'`);
@@ -162,8 +162,8 @@ if (typeof e[n] != "function")
 const S = (t, e) => new Promise((n) => {
-  e.transition ? (t.classList.remove(e.stateClosed), t.classList.add(e.stateOpening), t.addEventListener("transitionend", function i() {
-    t.classList.add(e.stateOpened), t.classList.remove(e.stateOpening), n(t), this.removeEventListener("transitionend", i);
+  e.transition ? (t.classList.remove(e.stateClosed), t.classList.add(e.stateOpening), t.addEventListener("transitionend", function i(r) {
+    r.target == t && (t.classList.add(e.stateOpened), t.classList.remove(e.stateOpening), n(t), this.removeEventListener("transitionend", i));
   })) : (t.classList.add(e.stateOpened), t.classList.remove(e.stateClosed), n(t));
 }), F = (t, e) => new Promise((n) => {
-  e.transition ? (t.classList.add(e.stateClosing), t.classList.remove(e.stateOpened), t.addEventListener("transitionend", function i() {
-    t.classList.remove(e.stateClosing), t.classList.add(e.stateClosed), n(t), this.removeEventListener("transitionend", i);
+  e.transition ? (t.classList.add(e.stateClosing), t.classList.remove(e.stateOpened), t.addEventListener("transitionend", function i(r) {
+    r.target == t && (t.classList.remove(e.stateClosing), t.classList.add(e.stateClosed), n(t), this.removeEventListener("transitionend", i));
   })) : (t.classList.add(e.stateClosed), t.classList.remove(e.stateOpened), n(t));
@@ -170,0 +170,0 @@ });

package.json

 {
   "name": "@vrembem/core",
   "description": "Shared variables, functions and mixins for Vrembem components.",
-  "version": "4.0.0-next.1",
+  "version": "4.0.0-next.2",
   "license": "MIT",
@@ -6,0 +6,0 @@ "type": "module",

src/js/transition.js

 export const openTransition = (el, settings) => {
   return new Promise((resolve) => {
+    // Check if transitions are enabled.
     if (settings.transition) {
+      // Toggle classes for opening transition.
       el.classList.remove(settings.stateClosed);
       el.classList.add(settings.stateOpening);
-      el.addEventListener('transitionend', function _f() {
+
+      // Add event listener for when the transition is finished.
+      el.addEventListener('transitionend', function _f(event) {
+        // Prevent child transition bubbling from firing this event.
+        if (event.target != el) return;
+
+        // Toggle final opened state classes.
         el.classList.add(settings.stateOpened);
         el.classList.remove(settings.stateOpening);
+
+        // Resolve the promise and remove the event listener.
         resolve(el);
@@ -13,2 +23,3 @@ this.removeEventListener('transitionend', _f);
     } else {
+      // Toggle final opened state classes and resolve the promise.
       el.classList.add(settings.stateOpened);
@@ -23,8 +34,18 @@ el.classList.remove(settings.stateClosed);
   return new Promise((resolve) => {
+    // Check if transitions are enabled.
     if (settings.transition) {
+      // Toggle classes for closing transition.
       el.classList.add(settings.stateClosing);
       el.classList.remove(settings.stateOpened);
-      el.addEventListener('transitionend', function _f() {
+
+      // Add event listener for when the transition is finished.
+      el.addEventListener('transitionend', function _f(event) {
+        // Prevent child transition bubbling from firing this event.
+        if (event.target != el) return;
+        
+        // Toggle final closed state classes.
         el.classList.remove(settings.stateClosing);
         el.classList.add(settings.stateClosed);
+
+        // Resolve the promise and remove the event listener.
         resolve(el);
@@ -34,2 +55,3 @@ this.removeEventListener('transitionend', _f);
     } else {
+      // Toggle final closed state classes and resolve the promise.
       el.classList.add(settings.stateClosed);
@@ -36,0 +58,0 @@ el.classList.remove(settings.stateOpened);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166576

increased by3.17%

Lines of code

1494

increased by1.63%

No dependency changes