Waterfall changes

.github/workflows/tests.yml

@@ -0,0 +1,65 @@
+name: tests
+
+on:
+  push:
+    branches: [ "**" ]
+  pull_request:
+    branches: [ "**" ]
+
+jobs:
+  test:
+    name: tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies (lockfile)
+        if: ${{ hashFiles('package-lock.json') != '' }}
+        run: npm ci
+
+      - name: Install dependencies
+        if: ${{ hashFiles('package-lock.json') == '' }}
+        run: npm install
+
+      - name: Run tests with coverage
+        run: npx jest --runInBand --coverage --coverageReporters=text-summary --coverageReporters=lcov --coverageReporters=json-summary
+
+      - name: Upload coverage artifact
+        if: always() && hashFiles('coverage/coverage-summary.json') != ''
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage
+          path: coverage/**
+
+      - name: Add coverage summary to job summary
+        if: always() && hashFiles('coverage/coverage-summary.json') != ''
+        shell: bash
+        run: |
+          node <<'NODE'
+          const fs = require('fs');
+          const p = 'coverage/coverage-summary.json';
+          const out = process.env.GITHUB_STEP_SUMMARY;
+          if (!out) {
+            console.log('GITHUB_STEP_SUMMARY not set; skipping');
+            process.exit(0);
+          }
+          const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+          const c = s.total;
+          const lines = [
+            '## Coverage summary',
+            '',
+            `- Statements: ${c.statements.pct}% (${c.statements.covered}/${c.statements.total})`,
+            `- Branches: ${c.branches.pct}% (${c.branches.covered}/${c.branches.total})`,
+            `- Functions: ${c.functions.pct}% (${c.functions.covered}/${c.functions.total})`,
+            `- Lines: ${c.lines.pct}% (${c.lines.covered}/${c.lines.total})`,
+            '',
+          ];
+          fs.appendFileSync(out, lines.join('\n'));
+          NODE

.github/workflows/update-contributors.yml

@@ -0,0 +1,31 @@
+name: Update contributors in README
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+  schedule:
+    - cron: '0 6 * * 1' # Weekly, Mondays at 06:00 UTC
+
+jobs:
+  update-contributors:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Update contributors section in README
+        uses: akhilmhdh/contributors-readme-action@v2.3.11
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          image_size: 80
+          use_username: true
+          pr_merge: true
+          columns_per_row: 8
+          commit_message: 'docs(readme): update contributors [skip ci]'

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.vscode/
+coverage/

CONTRIBUTING.md

@@ -75,6 +75,17 @@ Testing
   - Test your changes thoroughly before submitting.
   - Add examples in the examples/ folder for any new functionality.
 ---
+
+## Contributors
+This project is made possible by:
+
+The contributor list (avatars + profile links) in `README.md` is updated automatically after merges to `main` via a GitHub Action. To appear there:
+1. Make at least one merged commit to the `main` branch (directly or via PR merge).
+2. Ensure your GitHub profile has a public avatar (default works fine).
+
+Inactive or bot accounts may be filtered out automatically.
+
+
 ## Join the Discussion
 Participate in ongoing discussions in [GitHub Discussions](https://github.com/TheCodeRaccoons/WebTricks/discussions).
 Share your feedback, ideas, and improvements.

Dist/Functional/CookieConsent.js

@@ -173,3 +173,10 @@ if (/complete|interactive|loaded/.test(document.readyState)) {
 } else {
     window.addEventListener('DOMContentLoaded', InitializeCookieConsent);
 }
+
+// Allow requiring this module in test environments
+try {
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = { CookieConsent, InitializeCookieConsent };
+    }
+} catch {}

Dist/Functional/CopyToClipboard.js

@@ -5,7 +5,7 @@ class CopyToClipboard {
         this.ctcTarget      = this.ctcContainer.querySelector(`[wt-copycb-element="target"]`) || null; 
         this.textTarget     = this.ctcTrigger.querySelector(`[wt-copycb-element="texttarget"]`) || null; 
         this.ctcDefaultTxt  = this.ctcTrigger.innerText;
-        this.textToCopy     = this.ctcTarget.innerText;
+        this.textToCopy     = this.ctcTarget ? this.ctcTarget.innerText : '';
         this.copiedTxt      = this.ctcTrigger.getAttribute("wt-copycb-message") || null;
         this.activeClass    = this.ctcTrigger.getAttribute('wt-copycb-active') || 'is-copy';
         this.timeOut        = this.ctcTrigger.getAttribute('wt-copycb-timeout') || 2000;
@@ -54,3 +54,10 @@ if (/complete|interactive|loaded/.test(document.readyState)) {
 } else {
     window.addEventListener('DOMContentLoaded', initializeCopyToClipboard);
 }
+
+// Allow requiring this module in test environments without affecting browser usage
+try {
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = { CopyToClipboard, InitializeCopyToClipboard: initializeCopyToClipboard };
+    }
+} catch {}

Dist/Functional/CountUp.js

@@ -45,3 +45,10 @@ if (/complete|interactive|loaded/.test(document.readyState)) {
 } else {
     window.addEventListener('DOMContentLoaded', InitializeCountUp);
 }
+
+// Allow requiring this module in test environments without affecting browser usage
+try {
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = { CountUp, InitializeCountUp };
+    }
+} catch {}

Dist/Functional/FormCheck.js

@@ -126,3 +126,10 @@ if (/complete|interactive|loaded/.test(document.readyState)) {
 } else { 
     window.addEventListener('DOMContentLoaded', initializeFormCheck)
 }
+
+// Allow requiring this module in test environments without affecting browser usage
+try {
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = { FormCheck, InitializeFormCheck: initializeFormCheck };
+    }
+} catch {}

Dist/Functional/FormatNumbers.js

@@ -85,3 +85,10 @@ if (/complete|interactive|loaded/.test(document.readyState)) {
 } else {
     window.addEventListener('DOMContentLoaded', InitializeFormatNumbers);
 }
+
+// Allow requiring this module in test environments without affecting browser usage
+try {
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = { NumberFormatter, InitializeFormatNumbers };
+    }
+} catch {}

Dist/Functional/Marquee.js

@@ -36,15 +36,21 @@ class Marquee {
 
     fillContainer() {
         let totalSize = this.calculateTotalSize();
-        const targetSize = this.parentSize * 1.5; 
+        const targetSize = this.parentSize * 1.5;
+        // Safety guards: avoid infinite loop if sizes cannot be measured (e.g., 0 widths in tests/SSR)
+        let iterations = 0;
+        const maxIterations = 200; // cap to a reasonable number
 
-        while (totalSize < targetSize) {
+        while (totalSize < targetSize && iterations < maxIterations) {
+            const beforeSize = totalSize;
             this.elements.forEach(el => {
                 const clone = el.cloneNode(true);
                 this.container.appendChild(clone);
             });
             this.elements = Array.from(this.container.children);
             totalSize = this.calculateTotalSize();
+            iterations++;
+            if (totalSize <= beforeSize) break; // cannot grow, abort to prevent infinite loop
         }
     }
 
@@ -135,3 +141,12 @@ if (/complete|interactive|loaded/.test(document.readyState)) {
 } else {
     window.addEventListener('DOMContentLoaded', InitializeMarquee);
 };
+
+// Allow requiring this module in test environments without affecting browser usage
+try {
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = { Marquee, InitializeMarquee };
+    }
+} catch {
+    // Suppress errors when module/module.exports are undefined (e.g., in browser environments).
+}