FEATURE Handlign cite button

resources/css/pages/singles.css

@@ -3,6 +3,10 @@
     @apply px-8;
   }
 
+  #cite-reference {
+    @apply hidden;
+  }
+
   .tags__title {
     @apply text-lg uppercase font-semibold mt-0 my-4 nunito;
   }

resources/js/app.ts

@@ -6,6 +6,7 @@ import alternatePictures from './alternate-pictures';
 import { searchBarInit } from './search-bar';
 import singlesInit from './singles/singles';
 import archivesInit from './archives/archives';
+import handleCiteButton from './singles/cite-button';
 
 window.addEventListener('load', function () {
   menuInit();
@@ -16,4 +17,5 @@ window.addEventListener('load', function () {
   searchBarInit();
   singlesInit();
   archivesInit();
+  handleCiteButton();
 });

resources/js/singles/cite-button.ts

@@ -0,0 +1,52 @@
+export default 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);
+        });
+    }
+  });
+}

template-parts/components/posts/social-buttons.php

@@ -2,11 +2,13 @@
 $currentPostType = get_post_type();
 $shareUrls = build_share_urls();
 $handleCitation = post_type_supports($currentPostType, 'carhop-citations') ?? false;
+$citeReference = get_field('cite_reference', get_the_ID());
+// write_log($handleCitation);
 ?>
 
 
 <div class="socials-buttons">
-	<?php if ($handleCitation) : ?>
+	<?php if ($handleCitation && !empty($citeReference)) : ?>
 		<button class="socials-buttons__button socials-buttons__button--cite" <?php echo empty($citeReference) ? 'disabled' : ''; ?> title="<?php echo empty($citeReference) ? 'Citation non disponible' : 'Copier la citation'; ?>">
 			<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-citer-article.svg" alt="">
 			Citer