FEATURE Handling single components behaviour

resources/js/singles/singles.ts

@@ -0,0 +1,94 @@
+import handleIndexPanels from './index-panel';
+
+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;
+
+  injectIdToNativeTitles();
+
+  handleIndexPanels();
+  handleCiteButton();
+  handleSmoothScrollToTitle();
+}
+
+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) {
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          const notyf = new Notyf({
+            duration: 4000,
+            ripple: false,
+            dismissible: true,
+            types: [
+              {
+                type: 'success',
+                icon: {
+                  className: 'notyf__icon--success',
+                  tagName: 'i',
+                },
+              },
+            ],
+            position: {
+              x: 'right',
+              y: 'top',
+            },
+          });
+          notyf.success(
+            'Citation copiée dans le presse-papiers ! <br> Vous pouvez maintenant la coller dans votre document.'
+          );
+        })
+        .catch((err) => {
+          console.error('Failed to copy text: ', err);
+        });
+    }
+  });
+}
+
+function injectIdToNativeTitles(): void {
+  const titles = document.querySelectorAll('.content-area h2, .content-area h3');
+  titles.forEach((title) => {
+    const titleText = title.textContent || '';
+    const slug = titleText
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/\s+/g, '-')
+      .replace(/[^\w-]+/g, '');
+    title.setAttribute('id', slug);
+  });
+}
+
+function handleSmoothScrollToTitle(): void {
+  const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
+  for (const title of sommaireTitles) {
+    title.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      const target = title.getAttribute('href');
+      if (!target) return;
+
+      const targetElement = document.querySelector(target);
+      if (!targetElement) return;
+
+      targetElement.scrollIntoView({ behavior: 'smooth' });
+    });
+  }
+}