marquee

keithamus · langermank · keithamus · commit 23aae0e0a489 · 2022-12-02T08:54:22.000Z
Co-authored-by: langermank &lt;langermank@gmail.com&gt;
diff --git a/examples/index.html b/examples/index.html
@@ -5,11 +5,11 @@
     <title>custom-element demo</title>
   </head>
   <body>
-    <custom-element></custom-element>
+    <marquee-text duration="1s"><p>Hello World This is 24 Web Components</p></marquee-text>
 
     <script type="module">
       // import 'https://unpkg.com/@github/custom-element-boilerplate@latest/dist/custom-element.js'
-      import '../src/custom-element.ts'
+      import '../src/marquee-text-element.ts'
     </script>
   </body>
 </html>
diff --git a/src/custom-element.ts b/src/custom-element.ts
diff --git a/src/marquee-text-element.ts b/src/marquee-text-element.ts
@@ -0,0 +1,64 @@
+class MarqueeTextElement extends HTMLElement {
+  static observedAttributes = ['duration']
+
+  
+  #renderRoot = this.attachShadow({mode: 'open'})
+
+  get duration() {
+    const value = this.getAttribute('duration')
+    return value
+  }
+
+  set duration(value: string) {
+    this.setAttribute('duration', value)
+  }
+
+  attributeChangedCallback(name: 'duration', oldValue: null|string, newValue: null|string) {
+    if (oldValue === newValue) return
+    if (newValue === null) return
+    if (newValue) this.style.setProperty('--animation-duration', newValue)
+  }
+
+  connectedCallback(): void {
+    this.#renderRoot.innerHTML = `
+    <style>
+      @keyframes marqueeeee {
+        0% {
+          translate: -100%;
+        }
+        100% {
+          translate: 100vw;
+        }
+      }
+      :host slot {
+        animation: var(--animation-duration, 5s) linear infinite marqueeeee;
+        display: inline-block;
+      }
+      :host {
+        overflow: hidden;
+        max-width: 100vw;
+        display: block;
+      }
+      @media (prefers-reduced-motion) {
+        :host slot {
+          animation: none;
+        }
+      }
+    </style>
+    <slot></slot>
+    `
+  }
+}
+
+declare global {
+  interface Window {
+    MarqueeTextElement: typeof MarqueeTextElement
+  }
+}
+
+export default MarqueeTextElement
+
+if (!window.customElements.get('marquee-text')) {
+  window.MarqueeTextElement = MarqueeTextElement
+  window.customElements.define('marquee-text', MarqueeTextElement)
+}
