REFACTOR Switching from JS files to TS files

resources/js/app.ts

@@ -1,6 +1,8 @@
 import menuInit from './header';
 import singleRevue from './single-revue';
+import singlesInit from './singles';
+
 window.addEventListener('DOMContentLoaded', function () {
   menuInit();
-  singleRevue();
+  singlesInit();
 });

resources/js/single-revue.js

@@ -1,58 +0,0 @@
-export default function singleRevue() {
-  const isSingleRevue = document.querySelector(
-    '.page--single-revue'
-  );
-  if (!isSingleRevue) return;
-
-  handleButtons();
-  hydrateRevueAuthors();
-  handleAuthorsButton();
-}
-function getRevueID() {
-  const revueID = document
-    .querySelector('.page--single-revue')
-    .getAttribute('data-revue-id');
-  return revueID ?? null;
-}
-
-function handleAuthorsButton() {
-  const authorsButton = document.querySelector(
-    '.authors-button'
-  );
-  authorsButton.addEventListener('click', () => {
-    hydrateRevueAuthors();
-  });
-}
-function handleButtons() {
-  const socialsButtons = document.querySelectorAll(
-    '.socials-buttons__button'
-  );
-
-  const shareButton = document.querySelector(
-    '.socials-buttons__button--share'
-  );
-  shareButton.addEventListener('click', () => {
-    // const url = window.location.href;
-    // const title = document.title;
-    // const text = 'Check out this article: ' + url;
-    // const shareUrl =
-    //   'https://www.facebook.com/sharer/sharer.php?u=' +
-    //   encodeURIComponent(url);
-    // window.open(shareUrl, '_blank');
-  });
-}
-
-async function hydrateRevueAuthors() {
-  const revueID = getRevueID();
-  if (!revueID) return;
-
-  const response = await fetch(
-    `/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}`
-  );
-  const revueAuthors = await response.json();
-  // console.log(revueAuthors);
-
-  const authorsList =
-    document.querySelector('.authors-list');
-  authorsList.innerHTML = revueAuthors.html_template;
-}

resources/js/single-revue.ts

@@ -0,0 +1,59 @@
+interface RevueAuthorsResponse {
+  html_template: string;
+}
+
+export default function singleRevue(): void {
+  const isSingleRevue: HTMLElement | null =
+    document.querySelector('.page--single-revue');
+  if (!isSingleRevue) return;
+
+  hydrateRevueAuthors();
+  handleAuthorsButton();
+}
+function getRevueID(): string | null {
+  const revueElement: HTMLElement | null =
+    document.querySelector('.page--single-revue');
+  if (!revueElement) {
+    return null;
+  }
+  return revueElement.getAttribute('data-revue-id');
+}
+
+function handleAuthorsButton(): void {
+  const authorsButton: HTMLButtonElement | null =
+    document.querySelector('.authors-button');
+  if (authorsButton) {
+    authorsButton.addEventListener('click', () => {
+      hydrateRevueAuthors();
+    });
+  }
+}
+
+async function hydrateRevueAuthors(): Promise<void> {
+  const revueID = getRevueID();
+  if (!revueID) return;
+
+  try {
+    const response = await fetch(
+      `/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}`
+    );
+    if (!response.ok) {
+      throw new Error(
+        `HTTP error! status: ${response.status}`
+      );
+    }
+    const revueAuthors: RevueAuthorsResponse =
+      await response.json();
+
+    const authorsList: HTMLElement | null =
+      document.querySelector('.authors-list');
+    if (authorsList) {
+      authorsList.innerHTML = revueAuthors.html_template;
+    }
+  } catch (error) {
+    console.error(
+      'Failed to fetch and hydrate revue authors:',
+      error
+    );
+  }
+}

resources/js/singles.ts

@@ -0,0 +1,63 @@
+export default function singles(): void {
+  const isSingleRevue: HTMLElement | null =
+    document.querySelector('.page--single-revue');
+  const isSingleArticle: HTMLElement | null =
+    document.querySelector('.page--single-articles');
+  if (!isSingleRevue && !isSingleArticle) return;
+
+  handleCiteButton();
+}
+
+function handleCiteButton(): void {
+  const citeButton: HTMLElement | null =
+    document.querySelector(
+      '.socials-buttons__button--cite'
+    );
+  const citeReference: HTMLElement | null =
+    document.querySelector('#cite-reference');
+  if (!citeButton || !citeReference) return;
+
+  if (!window.isSecureContext) {
+    citeButton.setAttribute('disabled', 'true');
+    citeButton.setAttribute(
+      'title',
+      'Vous devez utiliser un navigation sécurisé (https) pour copier la citation'
+    );
+  }
+
+  citeButton.addEventListener('click', () => {
+    const textToCopy = citeReference.textContent;
+    if (!textToCopy) return;
+
+    if (navigator.clipboard && window.isSecureContext) {
+      console.log('fallback');
+
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          const notyf = new Notyf({
+            duration: 1000,
+            ripple: false,
+            dismissible: true,
+            types: [
+              {
+                type: 'success',
+                icon: {
+                  className: 'notyf__icon--success',
+                  tagName: 'i',
+                },
+              },
+            ],
+            position: {
+              x: 'right',
+              y: 'top',
+            },
+          });
+          notyf.success('Citation copiée !');
+        })
+        .catch((err) => {
+          console.error('Failed to copy text: ', err);
+        });
+    }
+  });
+}