FEATURE Handling the share copy link and removing twitter

includes/utilities.php

@@ -325,7 +325,8 @@ function build_share_urls()
 	return array(
 		'Facebook' => $facebookUrl,
 		'Twitter-X' => $twitterUrl,
-		'Linkedin' => $linkedInUrl
+		'Linkedin' => $linkedInUrl,
+		'postUrl' => $postUrl
 	);
 }
 

resources/css/components/post-header.css

@@ -181,6 +181,7 @@
             transform: scale(1.02) !important;
           }
 
+          .copy-link,
           .share-link {
             @apply block w-7 h-7;
 
@@ -212,9 +213,29 @@
       img {
         @apply w-7 h-7 filter-none;
       }
+
+      &--copy-link {
+        @apply relative bg-transparent border-0 p-0 cursor-pointer;
+
+        .copy-feedback {
+          @apply absolute left-1/2 -translate-x-1/2 -bottom-8 bg-white text-primary px-3 py-1 rounded-md text-sm font-medium whitespace-nowrap z-50;
+          animation: fadeIn 0.3s ease-in-out;
         }
       }
     }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -5px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
 .article-meta__related-revue {
   flex-shrink: 1;
 }

resources/js/singles/share-button.ts

@@ -10,4 +10,27 @@ export default function handleShareButton() {
       shareButton.classList.remove('is-open');
     }
   });
+  handleCopyLinkButton();
+}
+
+function handleCopyLinkButton() {
+  const copyLinkButton = document.querySelector('.share-button--copy-link a');
+  if (!copyLinkButton) return;
+
+  copyLinkButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    const url = copyLinkButton.getAttribute('data-url');
+    if (!url) return;
+    navigator.clipboard.writeText(url);
+    const notyf = new Notyf({
+      duration: 4000,
+      ripple: false,
+      dismissible: true,
+      position: {
+        x: 'right',
+        y: 'top',
+      },
+    });
+    notyf.success('Lien copié !');
+  });
 }

template-parts/post-header.php

@@ -89,28 +89,24 @@ $likes_count = get_post_likes_count($post_id);
 					</button>
 					<button class="socials-buttons__button socials-buttons__button--share" data-share-url="<?php echo get_the_permalink(); ?>">
 						<img class="share-icon" src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-partager-social.svg" alt="">
-
-
 						Partager
-
 						<ul class="socials-buttons__share-links">
 							<li class="share-button share-button--facebook">
 								<a href='<?php echo  $shareUrls['Facebook'] ?>' class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "dynamiques") . "Facebook" ?>">
 									<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-facebook.svg' ?>" alt="">
 								</a>
 							</li>
-							<li class="share-button share-button--twitter-x">
+
-								<a href='<?php echo  $shareUrls['Twitter-X'] ?>' class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "dynamiques") . "Twitter-X" ?>">
-									<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-x.svg' ?>" alt="">
-								</a>
-							</li>
 							<li class="share-button share-button--linkedin">
 								<a href='<?php echo  $shareUrls['Linkedin'] ?>' class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "dynamiques") . "LinkedIn" ?>">
 									<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-linkedin.svg' ?>" alt="">
 								</a>
 							</li>
-
+							<li class="share-button share-button--copy-link">
-
+								<a class="share-link share-link--copy" data-url="<?php echo get_the_permalink(); ?>" title="<?php echo __("Copier le lien", "dynamiques") ?>">
+									<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-lien.svg' ?>" alt="">
+								</a>
+							</li>
 						</ul>
 					</button>
 				</div>