@teleporthq/react-components - npm Package Compare versions

Comparing version 1.0.7-alpha-11 to 1.0.7-alpha-12

dist/animate-on-reveal.umd.js

@@ -9,2 +9,8 @@ (function(global, factory) {
       super();
+      if (!this.firstElementChild) {
+        return;
+      }
+      this.nodeToObserve = this.findObservableNodeFromTree(
+        this.firstElementChild
+      );
       this.intersectionObserver = new IntersectionObserver(
@@ -33,7 +39,7 @@ (entries) => {
     connectedCallback() {
-      const firstChild = this.firstElementChild;
-      if (firstChild) {
-        firstChild.style.animationPlayState = "paused";
+      if (!this.nodeToObserve) {
+        return;
       }
-      this.intersectionObserver.observe(this.firstElementChild);
+      this.nodeToObserve.style.animationPlayState = "paused";
+      this.intersectionObserver.observe(this.nodeToObserve);
     }
@@ -43,27 +49,40 @@ disconnectedCallback() {
     }
+    findObservableNodeFromTree(node) {
+      const style = window.getComputedStyle(node);
+      if (style.getPropertyValue("display") !== "contents") {
+        return node;
+      }
+      const children = node.children;
+      for (let i = 0; i < children.length; i++) {
+        const descendant = this.findObservableNodeFromTree(children[i]);
+        if (descendant) {
+          return descendant;
+        }
+      }
+      return null;
+    }
     attributeChangedCallback(name) {
-      const firstChild = this.firstElementChild;
       switch (name) {
         case "animation":
-          if (this.getAttribute(name)) {
-            firstChild.style.animationName = this.getAttribute("animation");
-          }
+          this.nodeToObserve.style.animationName = this.getAttribute("animation") || "";
           break;
         case "duration":
-          firstChild.style.animationDuration = this.getAttribute(name) || "0s";
+          this.nodeToObserve.style.animationDuration = this.getAttribute(name) || "0s";
           break;
         case "delay":
-          firstChild.style.animationDelay = this.getAttribute(name) || "0s";
+          this.nodeToObserve.style.animationDelay = this.getAttribute(name) || "0s";
           break;
         case "easing":
-          firstChild.style.animationTimingFunction = this.getAttribute(name) || "ease";
+          this.nodeToObserve.style.animationTimingFunction = this.getAttribute(name) || "ease";
           break;
         case "iteration":
-          firstChild.style.animationIterationCount = this.getAttribute(name) || "1";
+          this.nodeToObserve.style.animationIterationCount = this.getAttribute(name) || "1";
           break;
         case "direction":
-          firstChild.style.animationDirection = this.getAttribute(name) || "normal";
+          this.nodeToObserve.style.animationDirection = this.getAttribute(name) || "normal";
           break;
         case "revealed":
-          firstChild.style.animationPlayState = this.hasAttribute("revealed") ? "running" : "paused";
+          this.nodeToObserve.style.animationPlayState = this.hasAttribute(
+            "revealed"
+          ) ? "running" : "paused";
           break;
@@ -70,0 +89,0 @@ }

dist/react-components.js

@@ -131,2 +131,8 @@ import dayjs from 'dayjs';
     super();
+    if (!this.firstElementChild) {
+      return;
+    }
+    this.nodeToObserve = this.findObservableNodeFromTree(
+      this.firstElementChild
+    );
     this.intersectionObserver = new IntersectionObserver(
@@ -155,7 +161,7 @@ (entries) => {
   connectedCallback() {
-    const firstChild = this.firstElementChild;
-    if (firstChild) {
-      firstChild.style.animationPlayState = "paused";
+    if (!this.nodeToObserve) {
+      return;
     }
-    this.intersectionObserver.observe(this.firstElementChild);
+    this.nodeToObserve.style.animationPlayState = "paused";
+    this.intersectionObserver.observe(this.nodeToObserve);
   }
@@ -165,27 +171,40 @@ disconnectedCallback() {
   }
+  findObservableNodeFromTree(node) {
+    const style = window.getComputedStyle(node);
+    if (style.getPropertyValue("display") !== "contents") {
+      return node;
+    }
+    const children = node.children;
+    for (let i = 0; i < children.length; i++) {
+      const descendant = this.findObservableNodeFromTree(children[i]);
+      if (descendant) {
+        return descendant;
+      }
+    }
+    return null;
+  }
   attributeChangedCallback(name) {
-    const firstChild = this.firstElementChild;
     switch (name) {
       case "animation":
-        if (this.getAttribute(name)) {
-          firstChild.style.animationName = this.getAttribute("animation");
-        }
+        this.nodeToObserve.style.animationName = this.getAttribute("animation") || "";
         break;
       case "duration":
-        firstChild.style.animationDuration = this.getAttribute(name) || "0s";
+        this.nodeToObserve.style.animationDuration = this.getAttribute(name) || "0s";
         break;
       case "delay":
-        firstChild.style.animationDelay = this.getAttribute(name) || "0s";
+        this.nodeToObserve.style.animationDelay = this.getAttribute(name) || "0s";
         break;
       case "easing":
-        firstChild.style.animationTimingFunction = this.getAttribute(name) || "ease";
+        this.nodeToObserve.style.animationTimingFunction = this.getAttribute(name) || "ease";
         break;
       case "iteration":
-        firstChild.style.animationIterationCount = this.getAttribute(name) || "1";
+        this.nodeToObserve.style.animationIterationCount = this.getAttribute(name) || "1";
         break;
       case "direction":
-        firstChild.style.animationDirection = this.getAttribute(name) || "normal";
+        this.nodeToObserve.style.animationDirection = this.getAttribute(name) || "normal";
         break;
       case "revealed":
-        firstChild.style.animationPlayState = this.hasAttribute("revealed") ? "running" : "paused";
+        this.nodeToObserve.style.animationPlayState = this.hasAttribute(
+          "revealed"
+        ) ? "running" : "paused";
         break;
@@ -192,0 +211,0 @@ }

package.json

 {
   "name": "@teleporthq/react-components",
-  "version": "1.0.7-alpha-11",
+  "version": "1.0.7-alpha-12",
   "description": "",
@@ -59,2 +59,3 @@ "main": "dist/react-components.js",
     "jsdom": "^22.1.0",
+    "prettier": "^3.2.3",
     "pretty-quick": "^3.1.3",
@@ -61,0 +62,0 @@ "react": "^17.0.2",

No alert changes

Improved metrics

Total package byte prevSize

40260

increased by5.82%

Lines of code

1174

increased by7.31%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes