✨ ajout des customElements

Author: mckenziearts

resources/js/elements/Confetti.js

@@ -0,0 +1,16 @@
+import confetti from 'canvas-confetti'
+import { windowHeight } from '@helpers/window.js'
+
+export class Confetti extends HTMLElement {
+  connectedCallback () {
+    const rect = this.getBoundingClientRect()
+    const y = (rect.top + rect.height / 2) / windowHeight()
+    confetti({
+      particleCount: 100,
+      zIndex: 3000,
+      spread: 90,
+      disableForReducedMotion: true,
+      origin: { y }
+    })
+  }
+}

resources/js/elements/TimeAgo.js

@@ -0,0 +1,102 @@
+const terms = [
+  {
+    time: 45,
+    divide: 60,
+    text: "moins d'une minute"
+  },
+  {
+    time: 90,
+    divide: 60,
+    text: 'environ une minute'
+  },
+  {
+    time: 45 * 60,
+    divide: 60,
+    text: '%d minutes'
+  },
+  {
+    time: 90 * 60,
+    divide: 60 * 60,
+    text: 'environ une heure'
+  },
+  {
+    time: 24 * 60 * 60,
+    divide: 60 * 60,
+    text: '%d heures'
+  },
+  {
+    time: 42 * 60 * 60,
+    divide: 24 * 60 * 60,
+    text: 'environ un jour'
+  },
+  {
+    time: 30 * 24 * 60 * 60,
+    divide: 24 * 60 * 60,
+    text: '%d jours'
+  },
+  {
+    time: 45 * 24 * 60 * 60,
+    divide: 24 * 60 * 60 * 30,
+    text: 'environ un mois'
+  },
+  {
+    time: 365 * 24 * 60 * 60,
+    divide: 24 * 60 * 60 * 30,
+    text: '%d mois'
+  },
+  {
+    time: 365 * 1.5 * 24 * 60 * 60,
+    divide: 24 * 60 * 60 * 365,
+    text: 'environ un an'
+  },
+  {
+    time: Infinity,
+    divide: 24 * 60 * 60 * 365,
+    text: '%d ans'
+  }
+]
+
+/**
+ * Custom element permettant d'afficher une date de manière relative
+ *
+ * @property {number} timer
+ */
+export class TimeAgo extends HTMLElement {
+  connectedCallback () {
+    const timestamp = parseInt(this.getAttribute('time'), 10) * 1000
+    const date = new Date(timestamp)
+    this.updateText(date)
+  }
+
+  disconnectedCallback () {
+    window.clearTimeout(this.timer)
+  }
+
+  updateText (date) {
+    const seconds = (new Date().getTime() - date.getTime()) / 1000
+    let term = null
+    const prefix = this.getAttribute('prefix')
+    for (term of terms) {
+      if (Math.abs(seconds) < term.time) {
+        break
+      }
+    }
+    if (seconds >= 0) {
+      this.innerHTML = `${prefix || 'il y a'} ${term.text.replace('%d', Math.round(seconds / term.divide))}`
+    } else {
+      this.innerHTML = `${prefix || 'dans'} ${term.text.replace('%d', Math.round(Math.abs(seconds) / term.divide))}`
+    }
+    let nextTick = Math.abs(seconds) % term.divide
+    if (nextTick === 0) {
+      nextTick = term.divide
+    }
+    if (nextTick > 2147482) {
+      return
+    }
+    this.timer = window.setTimeout(() => {
+      window.requestAnimationFrame(() => {
+        this.updateText(date)
+      })
+    }, 1000 * nextTick)
+  }
+}

resources/js/elements/TimeCountdown.js

@@ -0,0 +1,47 @@
+const DAY = 1000 * 60 * 60 * 24
+const HOUR = 1000 * 60 * 60
+const MINUTE = 1000 * 60
+
+export class TimeCountdown extends HTMLElement {
+  connectedCallback () {
+    const timestamp = parseInt(this.getAttribute('time'), 10) * 1000
+    const date = new Date(timestamp)
+    this.updateText(date)
+  }
+
+  disconnectedCallback () {
+    window.clearTimeout(this.timer)
+  }
+
+  updateText (date) {
+    const now = new Date().getTime()
+    const distance = date - now
+    const days = Math.floor(distance / DAY)
+    const hours = Math.floor((distance % DAY) / HOUR)
+    const minutes = Math.floor((distance % HOUR) / MINUTE)
+    const seconds = Math.floor((distance % MINUTE) / 1000)
+    if (distance < 0) {
+      this.innerText = ''
+      return ''
+    }
+    let timeInterval = 1000
+    if (days > 0) {
+      this.innerText = `${days}j ${hours}h`
+      timeInterval = HOUR
+    } else if (hours > 0) {
+      this.innerText = `${hours}h ${minutes}m`
+      timeInterval = MINUTE
+    } else {
+      this.innerText = `${minutes}m ${seconds}s`
+    }
+    if (distance > 0) {
+      this.timer = window.setTimeout(() => {
+        if (window.requestAnimationFrame) {
+          window.requestAnimationFrame(() => this.updateText(date))
+        } else {
+          this.updateText(date)
+        }
+      }, timeInterval)
+    }
+  }
+}

resources/js/elements/index.js

@@ -0,0 +1,10 @@
+import preactCustomElement from '@helpers/preact.js'
+import { Comments } from '@components/Comments.jsx'
+import { Confetti } from './Confetti.js'
+import { TimeAgo } from './TimeAgo.js'
+import { TimeCountdown } from './TimeCountdown.js'
+
+customElements.define('con-fetti', Confetti)
+customElements.define('time-ago', TimeAgo)
+customElements.define('time-countdown', TimeCountdown)
+preactCustomElement('comments-area', Comments, ['target'])