refactor: cards, datepicker removed jquery and adapted tests

Author: wuda-io

docs/js/materialize.js

@@ -7,7 +7,7 @@
         <h3 class="header">Date Picker</h3>
         <p>The datepicker allows users to select a date from an interactive calendar.</p>
         <div class="input-field">
-          <input id="birthdate" type="text" class="datepicker">
+          <input id="birthdate" type="text" class="datepicker" placeholder=" ">
           <label for="birthdate">Birthdate</label>
         </div>
         <pre><code class="language-markup">

pug/page-contents/pickers_content.html

@@ -1,15 +1,6 @@
-
-/**
- * @typedef {Object} Bounding
- * @property {Number} left  left offset coordinate
- * @property {Number} top  top offset coordinate
- * @property {Number} width
- * @property {Number} height
- */
-export class Bounding
-{
-    public left: number;     
-    public top: number;
-    public width: number;
-    public height: number;
+export class Bounding {
+  public left: number; // left offset coordinate
+  public top: number;
+  public width: number;
+  public height: number;
 }

src/bounding.ts

@@ -3,37 +3,52 @@ import anim from "animejs";
 export class Cards {
 
   static Init() {
-    document.querySelectorAll('.card').forEach((card: HTMLElement) => {
-      const cardReveal = <HTMLElement|null>Array.from(card.children).find(elem => elem.classList.contains('card-reveal'));
-      if (!cardReveal) return;
-      const initialOverflow = getComputedStyle(card).overflow;
-      // Close Card
-      const closeArea = cardReveal.querySelector('.card-reveal .card-title');
-      closeArea?.addEventListener('click', e => {
-        anim({
-          targets: cardReveal,
-          translateY: 0,
-          duration: 225,
-          easing: 'easeInOutQuad',
-          complete: (anim) => {
-            cardReveal.style.display = 'none';
-            card.style.overflow = initialOverflow;
+
+    document.addEventListener("DOMContentLoaded", () => {
+      document.body.addEventListener('click', e => {
+        const trigger = <HTMLElement>e.target;
+
+        const card: HTMLElement = trigger.closest('.card');
+        if (!card) return;
+
+        const cardReveal = <HTMLElement|null>Array.from(card.children).find(elem => elem.classList.contains('card-reveal'));
+        if (!cardReveal) return;
+        const initialOverflow = getComputedStyle(card).overflow;
+
+        // Close Card        
+        const closeArea = cardReveal.querySelector('.card-reveal .card-title');
+        if (trigger === closeArea || closeArea.contains(trigger)) {
+          anim({
+            targets: cardReveal,
+            translateY: 0,
+            duration: 225,
+            easing: 'easeInOutQuad',
+            complete: (anim) => {
+              cardReveal.style.display = 'none';
+              card.style.overflow = initialOverflow;
+            }
+          });
+        };
+        
+        // Reveal Card
+        const activators = card.querySelectorAll('.activator');
+        activators.forEach(activator => {
+          if (trigger === activator || activator.contains(trigger)) {
+            card.style.overflow = 'hidden';
+            cardReveal.style.display = 'block';
+            anim({
+              targets: cardReveal,
+              translateY: '-100%',
+              duration: 300,
+              easing: 'easeInOutQuad'
+            });
           }
         });
-      });
-      // Reveal Card
-      const activators = card.querySelectorAll('.activator');
-      activators.forEach(activator => activator.addEventListener('click', e => {
-        card.style.overflow = 'hidden';
-        cardReveal.style.display = 'block';
-        anim({
-          targets: cardReveal,
-          translateY: '-100%',
-          duration: 300,
-          easing: 'easeInOutQuad'
-        });
-      }));
+        
+
+      });     
     });
+
   }  
 }