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