jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #129 from mearashadowfax/fix-clipboardjs

Browse source 
Fix ClipboardJS not defined
This commit is contained in:
Emil Gulamov 2024-07-02 18:05:29 +04:00 • committed by GitHub
commit 926bb98d0e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 39 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/ui/buttons/SocialShare.astro
View file

@ -1,7 +1,10 @@
---
import Icon from "@components/ui/icons/Icon.astro";
// Destructure the properties from Astro.props
const { pageTitle, title = Astro.currentLocale === "fr" ? "Partager" : "Share", } = Astro.props;
const {
pageTitle,
title = Astro.currentLocale === "fr" ? "Partager" : "Share",
} = Astro.props;
// Define TypeScript interface for the properties
interface Props {
@ -88,7 +91,7 @@ const socialPlatforms: SocialPlatform[] = [
</svg>
<svg
class="js-clipboard-success text-neutral-700 dark:text-neutral-300 hidden h-4 w-4"
class="js-clipboard-success hidden h-4 w-4 text-neutral-700 dark:text-neutral-300"
width="24"
height="24"
viewBox="0 0 24 24"
@ -111,42 +114,55 @@ const socialPlatforms: SocialPlatform[] = [
<!-- https://clipboardjs.com/ -->
<script>
import "@preline/dropdown/index.js";
import "clipboard/dist/clipboard.min.js";
</script>
<script is:inline>
<script>
import ClipboardJS from "clipboard";
// Initialization of Clipboard
(function () {
window.addEventListener("load", () => {
const $clipboards = document.querySelectorAll(".js-clipboard");
$clipboards.forEach((el) => {
const clipboards =
document.querySelectorAll<HTMLElement>(".js-clipboard");
clipboards.forEach((el) => {
const clipboard = new ClipboardJS(el, {
text: () => {
return window.location.href;
},
});
clipboard.on("success", () => {
const $default = el.querySelector(".js-clipboard-default");
const $success = el.querySelector(".js-clipboard-success");
const $successText = el.querySelector(".js-clipboard-success-text");
const defaultElement = el.querySelector<HTMLElement>(
".js-clipboard-default"
);
const successElement = el.querySelector<HTMLElement>(
".js-clipboard-success"
);
const successTextElement = el.querySelector<HTMLElement>(
".js-clipboard-success-text"
);
const successText = el.dataset.clipboardSuccessText || "";
let oldSuccessText;
let oldSuccessText: string | undefined;
if ($successText) {
oldSuccessText = $successText.textContent;
$successText.textContent = successText;
}
if ($default && $success) {
$default.style.display = "none";
$success.style.display = "block";
if (successTextElement) {
oldSuccessText = successTextElement.textContent || "";
successTextElement.textContent = successText;
}
setTimeout(function () {
if ($successText && oldSuccessText)
$successText.textContent = oldSuccessText;
if ($default && $success) {
$success.style.display = "";
$default.style.display = "";
if (defaultElement && successElement) {
defaultElement.style.display = "none";
successElement.style.display = "block";
}
setTimeout(() => {
if (successTextElement && oldSuccessText !== undefined) {
successTextElement.textContent = oldSuccessText;
}
if (defaultElement && successElement) {
successElement.style.display = "";
defaultElement.style.display = "";
}
}, 800);
});