window.postMessage({ trigger: "startCounting" }, "*"); does not trigger

Question

i have a rolodex counter that i need at times to trigger the animation via posting a message

it does not work, instead of the two digits animating counting, only a single digits flickers without ending.

even on the console window.postMessage({ trigger: "startCounting" }, "*"); generates the same unwanted effect

i tried manipulating the animation, simplifying various actions all yielded the same result the code snippet

console.log("Version 1.77 - Explicit Viewport Trigger Integration");

class RolodexCounterElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  // Specify the observed attributes
  static get observedAttributes() {
    return ["start-value", "end-value", "duration", "font-size", "font-family", "font-weight", "color"];
  }

  // Handle attribute changes
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute changed: ${name} from ${oldValue} to ${newValue}`);
    if (oldValue !== newValue) {
      this.updateComponent(); // Re-render component with new attributes
    }
  }

  connectedCallback() {
    console.log("Rolodex Counter connected to DOM");

    // Initial render
    this.updateComponent();

    // Elements
    const numbersContainer = this.shadowRoot.querySelector(".frm-elmnt-numbers");

    // Intersection Observer for viewport trigger
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          console.log("Element entered viewport: triggering animation");
          numbersContainer.classList.add("animation");
        } else {
          numbersContainer.classList.remove("animation");
        }
      });
    });

    // Start observing the custom element
    observer.observe(this);

    // Debugging trigger for manual testing
    window.addEventListener("message", (event) => {
      if (event.data.trigger === "startCounting") {
        console.log("Manual trigger received");
        numbersContainer.classList.add("animation");
      }
    });
  }

  updateComponent() {
    const startValue = parseInt(this.getAttribute("start-value")) || 0;
    const endValue = parseInt(this.getAttribute("end-value")) || 99;
    const duration = parseInt(this.getAttribute("duration")) || 4000;
    const fontSize = this.getAttribute("font-size") || "7.5rem";
    const fontFamily = this.getAttribute("font-family") || "'Graphik', sans-serif";
    const fontWeight = this.getAttribute("font-weight") || "300";
    const color = this.getAttribute("color") || "#2e2e38";

    console.log("Attributes:", { startValue, endValue, duration, fontSize, fontFamily, fontWeight, color });

    // Template
    const template = `
            
                
                    
                
                %
            
            
        `;

    this.shadowRoot.innerHTML = template;

    // Elements
    const numbersContainer = this.shadowRoot.querySelector(".frm-elmnt-numbers");
    const percentElement = this.shadowRoot.querySelector(".frm-elmnt-percent");

    // Generate Numbers
    const steps = endValue - startValue + 1;
    const numbers = Array.from({ length: steps }, (_, i) => startValue + i);
    numbersContainer.innerHTML = numbers.map((num) => `${num}`).join("");

    console.log("Generated numbers:", numbers);

    // Calculate Positions
    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
    const lineHeight = parseFloat(getComputedStyle(numbersContainer).fontSize);
    const remConversion = lineHeight / rootFontSize;
    const finalPosition = `-${(steps - 1) * remConversion}rem`;
    const overshootPosition = `-${(steps - 1) * remConversion + 0.3}rem`;

    numbersContainer.style.setProperty("--final-position", finalPosition);
    numbersContainer.style.setProperty("--overshoot-position", overshootPosition);

    // Align Percent Sign
    const enforceAlignment = () => {
      const numbersHeight = numbersContainer.offsetHeight;
      const percentHeight = percentElement.offsetHeight;
      const topAdjustment = Math.min((numbersHeight - percentHeight) / 2, 0);
      percentElement.style.top = `${topAdjustment}px`;
    };

    enforceAlignment();
    window.addEventListener("resize", enforceAlignment);
  }
}

customElements.define("rolodex-counter-element", RolodexCounterElement);

window.postMessage({ trigger: "startCounting" }, "*"); does not trigger

Answers (1)

Related Questions

window.postMessage({ trigger: &quot;startCounting&quot; }, &quot;*&quot;); does not trigger

Answers (1)

Related Questions

window.postMessage({ trigger: "startCounting" }, "*"); does not trigger