From 6efb8a29c5ee4daf1b190bbeaa9fc39a623ba51d Mon Sep 17 00:00:00 2001 From: Nonimart Date: Fri, 20 Jun 2025 15:01:41 +0200 Subject: [PATCH] REFACTOR Switching from JS files to TS files --- resources/js/{app.js => app.ts} | 4 +- resources/js/{header.js => header.ts} | 0 resources/js/single-revue.js | 58 ------------------------ resources/js/single-revue.ts | 59 +++++++++++++++++++++++++ resources/js/singles.ts | 63 +++++++++++++++++++++++++++ 5 files changed, 125 insertions(+), 59 deletions(-) rename resources/js/{app.js => app.ts} (73%) rename resources/js/{header.js => header.ts} (100%) delete mode 100644 resources/js/single-revue.js create mode 100644 resources/js/single-revue.ts create mode 100644 resources/js/singles.ts diff --git a/resources/js/app.js b/resources/js/app.ts similarity index 73% rename from resources/js/app.js rename to resources/js/app.ts index 0264083..96b517c 100644 --- a/resources/js/app.js +++ b/resources/js/app.ts @@ -1,6 +1,8 @@ import menuInit from './header'; import singleRevue from './single-revue'; +import singlesInit from './singles'; + window.addEventListener('DOMContentLoaded', function () { menuInit(); - singleRevue(); + singlesInit(); }); diff --git a/resources/js/header.js b/resources/js/header.ts similarity index 100% rename from resources/js/header.js rename to resources/js/header.ts diff --git a/resources/js/single-revue.js b/resources/js/single-revue.js deleted file mode 100644 index 2d8c6fd..0000000 --- a/resources/js/single-revue.js +++ /dev/null @@ -1,58 +0,0 @@ -export default function singleRevue() { - const isSingleRevue = document.querySelector( - '.page--single-revue' - ); - if (!isSingleRevue) return; - - handleButtons(); - hydrateRevueAuthors(); - handleAuthorsButton(); -} -function getRevueID() { - const revueID = document - .querySelector('.page--single-revue') - .getAttribute('data-revue-id'); - return revueID ?? null; -} - -function handleAuthorsButton() { - const authorsButton = document.querySelector( - '.authors-button' - ); - authorsButton.addEventListener('click', () => { - hydrateRevueAuthors(); - }); -} -function handleButtons() { - const socialsButtons = document.querySelectorAll( - '.socials-buttons__button' - ); - - const shareButton = document.querySelector( - '.socials-buttons__button--share' - ); - shareButton.addEventListener('click', () => { - // const url = window.location.href; - // const title = document.title; - // const text = 'Check out this article: ' + url; - // const shareUrl = - // 'https://www.facebook.com/sharer/sharer.php?u=' + - // encodeURIComponent(url); - // window.open(shareUrl, '_blank'); - }); -} - -async function hydrateRevueAuthors() { - const revueID = getRevueID(); - if (!revueID) return; - - const response = await fetch( - `/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}` - ); - const revueAuthors = await response.json(); - // console.log(revueAuthors); - - const authorsList = - document.querySelector('.authors-list'); - authorsList.innerHTML = revueAuthors.html_template; -} diff --git a/resources/js/single-revue.ts b/resources/js/single-revue.ts new file mode 100644 index 0000000..e232cf4 --- /dev/null +++ b/resources/js/single-revue.ts @@ -0,0 +1,59 @@ +interface RevueAuthorsResponse { + html_template: string; +} + +export default function singleRevue(): void { + const isSingleRevue: HTMLElement | null = + document.querySelector('.page--single-revue'); + if (!isSingleRevue) return; + + hydrateRevueAuthors(); + handleAuthorsButton(); +} +function getRevueID(): string | null { + const revueElement: HTMLElement | null = + document.querySelector('.page--single-revue'); + if (!revueElement) { + return null; + } + return revueElement.getAttribute('data-revue-id'); +} + +function handleAuthorsButton(): void { + const authorsButton: HTMLButtonElement | null = + document.querySelector('.authors-button'); + if (authorsButton) { + authorsButton.addEventListener('click', () => { + hydrateRevueAuthors(); + }); + } +} + +async function hydrateRevueAuthors(): Promise { + const revueID = getRevueID(); + if (!revueID) return; + + try { + const response = await fetch( + `/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}` + ); + if (!response.ok) { + throw new Error( + `HTTP error! status: ${response.status}` + ); + } + const revueAuthors: RevueAuthorsResponse = + await response.json(); + + const authorsList: HTMLElement | null = + document.querySelector('.authors-list'); + if (authorsList) { + authorsList.innerHTML = revueAuthors.html_template; + } + } catch (error) { + console.error( + 'Failed to fetch and hydrate revue authors:', + error + ); + } +} diff --git a/resources/js/singles.ts b/resources/js/singles.ts new file mode 100644 index 0000000..e5250c2 --- /dev/null +++ b/resources/js/singles.ts @@ -0,0 +1,63 @@ +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; + + handleCiteButton(); +} + +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) { + console.log('fallback'); + + navigator.clipboard + .writeText(textToCopy) + .then(() => { + const notyf = new Notyf({ + duration: 1000, + ripple: false, + dismissible: true, + types: [ + { + type: 'success', + icon: { + className: 'notyf__icon--success', + tagName: 'i', + }, + }, + ], + position: { + x: 'right', + y: 'top', + }, + }); + notyf.success('Citation copiée !'); + }) + .catch((err) => { + console.error('Failed to copy text: ', err); + }); + } + }); +}