FEATURE Big toolbar refactor to handle share like and cita buttons directly from carhop theme
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Nonimart
parent
7066a193d5
commit
aee37d0d64
|
|
@ -1 +1,37 @@
|
|||
#login h1 a,.login h1 a{background-image:url(../resources/img/logo_client.svg);height:100px;width:300px;background-size:300px 100px;background-repeat:no-repeat;padding-bottom:10px}#wp-submit{--tw-border-opacity:1;border-color:rgb(19 111 99/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(19 111 99/var(--tw-bg-opacity))}#backtoblog a,#nav a{--tw-text-opacity:1;color:rgb(19 111 99/var(--tw-text-opacity))}#loginform{border:none}.wp-pwd span{--tw-text-opacity:1;color:rgb(19 111 99/var(--tw-text-opacity))}
|
||||
body {
|
||||
/* @apply bg-primary; */
|
||||
}
|
||||
|
||||
#login h1 a,
|
||||
.login h1 a {
|
||||
background-image: url("../resources/img/logo_client.svg");
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
background-size: 300px 100px;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#wp-submit {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(19 111 99 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(19 111 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
#nav a,
|
||||
#backtoblog a {
|
||||
/* color: var(--red) !important; */
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(19 111 99 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
#loginform {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wp-pwd span {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(19 111 99 / var(--tw-text-opacity));
|
||||
/* color: var(--red) !important; */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,25 +3,22 @@ interface RevueAuthorsResponse {
|
|||
}
|
||||
|
||||
export default function singleRevue(): void {
|
||||
const isSingleRevue: HTMLElement | null =
|
||||
document.querySelector('.page--single-revue');
|
||||
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');
|
||||
const revueElement: HTMLElement | null = document.querySelector('.page--single-revue');
|
||||
if (!revueElement) {
|
||||
return null;
|
||||
}
|
||||
return revueElement.getAttribute('data-revue-id');
|
||||
return revueElement.getAttribute('data-post-id');
|
||||
}
|
||||
|
||||
function handleAuthorsButton(): void {
|
||||
const authorsButton: HTMLButtonElement | null =
|
||||
document.querySelector('.authors-button');
|
||||
const authorsButton: HTMLButtonElement | null = document.querySelector('.authors-button');
|
||||
if (authorsButton) {
|
||||
authorsButton.addEventListener('click', () => {
|
||||
hydrateRevueAuthors();
|
||||
|
|
@ -35,25 +32,18 @@ async function hydrateRevueAuthors(): Promise<void> {
|
|||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}`
|
||||
`/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}`,
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`HTTP error! status: ${response.status}`
|
||||
);
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const revueAuthors: RevueAuthorsResponse =
|
||||
await response.json();
|
||||
const revueAuthors: RevueAuthorsResponse = await response.json();
|
||||
|
||||
const authorsList: HTMLElement | null =
|
||||
document.querySelector('.authors-list');
|
||||
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
|
||||
);
|
||||
console.error('Failed to fetch and hydrate revue authors:', error);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
// =============================================================================
|
||||
// TYPE DECLARATIONS
|
||||
// =============================================================================
|
||||
|
||||
declare var Notyf: any;
|
||||
|
||||
// =============================================================================
|
||||
// UTILITY FUNCTIONS
|
||||
// =============================================================================
|
||||
|
||||
function getPostType() {
|
||||
const isSingleArticle = document.querySelector('.page--single-articles');
|
||||
const isSingleRevue = document.querySelector('.page--single-revue');
|
||||
if (isSingleArticle) {
|
||||
return 'article';
|
||||
} else if (isSingleRevue) {
|
||||
return 'revue';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getPostId() {
|
||||
const postType = getPostType();
|
||||
if (!postType) return;
|
||||
const postId =
|
||||
postType === 'article'
|
||||
? document.querySelector('.page--single-articles')?.getAttribute('data-article-id')
|
||||
: document.querySelector('.page--single-revue')?.getAttribute('data-revue-id');
|
||||
return postId;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// LIKE TRACKING FUNCTIONS
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Clé localStorage pour stocker les posts likés
|
||||
*/
|
||||
const LIKED_POSTS_KEY = 'dynamiques_liked_posts';
|
||||
|
||||
/**
|
||||
* Récupère la liste des posts likés depuis localStorage
|
||||
*/
|
||||
function getLikedPosts(): string[] {
|
||||
try {
|
||||
const likedPosts = localStorage.getItem(LIKED_POSTS_KEY);
|
||||
return likedPosts ? JSON.parse(likedPosts) : [];
|
||||
} catch (error) {
|
||||
console.error('Erreur lecture localStorage:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajoute un post à la liste des posts likés
|
||||
*/
|
||||
function addLikedPost(postId: string): void {
|
||||
try {
|
||||
const likedPosts = getLikedPosts();
|
||||
if (!likedPosts.includes(postId)) {
|
||||
likedPosts.push(postId);
|
||||
localStorage.setItem(LIKED_POSTS_KEY, JSON.stringify(likedPosts));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur sauvegarde localStorage:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifie si un post a déjà été liké
|
||||
*/
|
||||
function isPostLiked(postId: string): boolean {
|
||||
const likedPosts = getLikedPosts();
|
||||
return likedPosts.includes(postId);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// LIKE API FUNCTIONS
|
||||
// =============================================================================
|
||||
|
||||
async function likePost(postId: string): Promise<boolean> {
|
||||
// Vérifier si le post a déjà été liké
|
||||
if (isPostLiked(postId)) {
|
||||
console.log(`Post ${postId} déjà liké !`);
|
||||
showAlreadyLikedMessage();
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/wp-json/dynamiques-datas/v1/build/articles/like`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
post_id: postId,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
console.log(`Post ${postId} liké ! Nouveau total: ${data.likes_count} likes`);
|
||||
|
||||
// Sauvegarder le like dans localStorage
|
||||
addLikedPost(postId);
|
||||
|
||||
// Mettre à jour l'interface utilisateur
|
||||
updateLikeDisplay(data.likes_count);
|
||||
updateLikeButtonState();
|
||||
|
||||
// Afficher message de succès
|
||||
showLikeSuccessMessage(data.likes_count);
|
||||
|
||||
return true;
|
||||
} else {
|
||||
console.error('Erreur API:', data);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du like:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// UI UPDATE FUNCTIONS
|
||||
// =============================================================================
|
||||
|
||||
function updateLikeDisplay(likesCount: number) {
|
||||
// Mettre à jour l'affichage du compteur de likes dans l'interface
|
||||
const likeCountElement = document.querySelector('.socials-buttons .likes-count');
|
||||
const likeButton = document.querySelector('.socials-buttons__button--like');
|
||||
|
||||
if (likeCountElement && likeButton) {
|
||||
likeButton.setAttribute('data-likes-count', `${likesCount}`);
|
||||
likeButton.classList.add('is-disabled');
|
||||
likeCountElement.textContent = `${likesCount}`;
|
||||
}
|
||||
}
|
||||
|
||||
function updateLikeButtonState() {
|
||||
const postId = getPostId();
|
||||
const likeButton = document.querySelector('.socials-buttons__button--like');
|
||||
if (!postId || !likeButton) return;
|
||||
|
||||
const hasAlreadyLiked = isPostLiked(postId);
|
||||
if (hasAlreadyLiked) {
|
||||
const actionText = likeButton.querySelector('.button-action-text');
|
||||
if (actionText) {
|
||||
actionText.textContent = 'Déjà liké';
|
||||
}
|
||||
likeButton.setAttribute('title', 'Déjà liké !');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!hasAlreadyLiked) {
|
||||
likeButton.classList.remove('is-disabled');
|
||||
}
|
||||
}
|
||||
|
||||
function updateLikesCountIndicator() {
|
||||
const likesCountIndicator = likeButton.querySelector('.likes-count');
|
||||
const likesCount = likeButton.getAttribute('data-likes-count');
|
||||
|
||||
if (likesCount && likesCountIndicator) {
|
||||
likesCountIndicator.textContent = `${parseInt(likesCount) + 1}`;
|
||||
}
|
||||
}
|
||||
|
||||
function showAlreadyLikedMessage() {
|
||||
const notyf = new Notyf({
|
||||
duration: 3000,
|
||||
ripple: false,
|
||||
dismissible: true,
|
||||
types: [
|
||||
{
|
||||
type: 'error',
|
||||
background: '#ff6b6b',
|
||||
icon: {
|
||||
className: 'notyf__icon--error',
|
||||
tagName: 'i',
|
||||
// Pas de text personnalisé pour garder l'icône d'erreur par défaut
|
||||
},
|
||||
},
|
||||
],
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'top',
|
||||
},
|
||||
});
|
||||
|
||||
notyf.error(' Vous avez déjà liké ce post ! ❤️');
|
||||
}
|
||||
|
||||
function showLikeSuccessMessage(likesCount: number) {
|
||||
const notyf = new Notyf({
|
||||
duration: 2000,
|
||||
ripple: false,
|
||||
dismissible: true,
|
||||
types: [
|
||||
{
|
||||
type: 'success',
|
||||
background: '#10B981',
|
||||
icon: {
|
||||
className: 'notyf__icon--success',
|
||||
tagName: 'i',
|
||||
text: '❤️',
|
||||
},
|
||||
},
|
||||
],
|
||||
position: {
|
||||
x: 'right',
|
||||
y: 'top',
|
||||
},
|
||||
});
|
||||
|
||||
notyf.success(
|
||||
`Merci pour votre like ! <br>Total: ${likesCount} like${likesCount > 1 ? 's' : ''}`
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MAIN INITIALIZATION FUNCTION
|
||||
// =============================================================================
|
||||
|
||||
export default function handleLikeButton(): void {
|
||||
const likeButton: HTMLElement | null = document.querySelector(
|
||||
'.socials-buttons .socials-buttons__button--like'
|
||||
);
|
||||
const postType = getPostType();
|
||||
const postId = getPostId();
|
||||
if (!postType || !postId || !likeButton) return;
|
||||
|
||||
updateLikeButtonState();
|
||||
|
||||
// Ajouter l'événement click
|
||||
likeButton.addEventListener('click', async (e) => {
|
||||
e.preventDefault(); // Empêcher comportement par défaut
|
||||
|
||||
const hasAlreadyLiked = isPostLiked(postId);
|
||||
if (hasAlreadyLiked) return showAlreadyLikedMessage();
|
||||
// Désactiver temporairement le bouton pour éviter les clics multiples
|
||||
likeButton.style.pointerEvents = 'none';
|
||||
|
||||
const success = await likePost(postId);
|
||||
|
||||
// Réactiver le bouton
|
||||
setTimeout(() => {
|
||||
likeButton.style.pointerEvents = 'auto';
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
export default function handleSearchRevue() {
|
||||
const searchRevue = document.querySelector(
|
||||
'.page--single-revue .sidebar .search-field input'
|
||||
'.page--single-revue .sidebar .search-field input',
|
||||
) as HTMLInputElement;
|
||||
const contentArea = document.querySelector('.page--single-revue .content-area') as HTMLElement;
|
||||
const currentRevueId = document
|
||||
.querySelector('.page--single-revue')
|
||||
?.getAttribute('data-revue-id') as string;
|
||||
?.getAttribute('data-post-id') as string;
|
||||
const revueToolbarButtons = document.querySelectorAll(
|
||||
'.page--single-revue .revue-toolbar button'
|
||||
'.page--single-revue .revue-toolbar button',
|
||||
) as NodeListOf<HTMLButtonElement>;
|
||||
|
||||
if (!searchRevue || !contentArea) return;
|
||||
|
||||
const resetSearchButton = document.querySelector(
|
||||
'.page--single-revue .sidebar .search-field .reset-search-button'
|
||||
'.page--single-revue .sidebar .search-field .reset-search-button',
|
||||
) as HTMLButtonElement;
|
||||
if (!resetSearchButton) return;
|
||||
|
||||
|
|
@ -41,8 +41,8 @@ export default function handleSearchRevue() {
|
|||
try {
|
||||
const response = await fetch(
|
||||
`/wp-json/dynamiques-datas/v1/build/revues/${currentRevueId}/articles?search=${encodeURIComponent(
|
||||
searchValue
|
||||
)}`
|
||||
searchValue,
|
||||
)}`,
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
export default function handleShareButton() {
|
||||
const shareButton = document.querySelector('.socials-buttons__button--share');
|
||||
if (!shareButton) return;
|
||||
|
||||
shareButton.addEventListener('click', () => {
|
||||
const isOpen = shareButton.classList.contains('is-open');
|
||||
if (!isOpen) {
|
||||
shareButton.classList.add('is-open');
|
||||
} else {
|
||||
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é !');
|
||||
});
|
||||
}
|
||||
|
|
@ -16,11 +16,8 @@ export default function singles(): void {
|
|||
|
||||
handleIndexPanel();
|
||||
handleFootnoteFormat();
|
||||
handleCiteButton();
|
||||
handleLikeButton();
|
||||
handleArticleToolbar();
|
||||
handleRevueToolbar();
|
||||
handleShareButton();
|
||||
handleArticleReader();
|
||||
handleSearchRevue();
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ get_header();
|
|||
$revueID = get_field('related_revue', get_the_ID());
|
||||
?>
|
||||
|
||||
<div class="page-single page--single-articles" data-article-id="<?php echo get_the_ID(); ?>">
|
||||
<div class="page-single page--single-articles" data-post-id="<?php echo get_the_ID(); ?>" data-post-type="article">
|
||||
<?php if (have_posts()) : ?>
|
||||
<?php while (have_posts()) : the_post(); ?>
|
||||
<?php get_template_part(
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ $articles = get_field('articles', $current_issue->ID);
|
|||
?>
|
||||
|
||||
|
||||
<div class="page-single page--single-revue" data-revue-id="<?php echo get_the_ID(); ?>">
|
||||
<div class="page-single page--single-revue" data-post-id="<?php echo get_the_ID(); ?>" data-post-type="revue">
|
||||
<?php if (have_posts()) : ?>
|
||||
<?php while (have_posts()) : the_post(); ?>
|
||||
|
||||
|
|
|
|||
58
template-tutorial.php
Normal file
58
template-tutorial.php
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<?php
|
||||
/* Template Name: Tutoriel */
|
||||
get_header();
|
||||
|
||||
?>
|
||||
|
||||
<div class="page-single page--single-articles single-articles" data-post-id="<?php echo get_the_ID(); ?>">
|
||||
<?php if (have_posts()) : ?>
|
||||
<?php while (have_posts()) : the_post(); ?>
|
||||
<div class="content-wrapper" data-active-tab="article">
|
||||
<aside class="sidebar">
|
||||
<div class="search-field">
|
||||
<input type="text" placeholder="Rechercher">
|
||||
</div>
|
||||
|
||||
|
||||
<?php get_template_part('template-parts/articles/article-tags'); ?>
|
||||
<?php get_template_part('template-parts/articles/index-panel'); ?>
|
||||
</aside>
|
||||
|
||||
<div class="content-area">
|
||||
|
||||
<?php get_template_part('template-parts/articles/article-references', null, array(
|
||||
'postId' => get_the_ID()
|
||||
)); ?>
|
||||
<?php get_template_part('template-parts/articles/article-authors', null, array(
|
||||
'postId' => get_the_ID()
|
||||
)); ?>
|
||||
|
||||
<?php get_template_part('template-parts/articles/article-informations', null, array(
|
||||
'revueID' => $revueID
|
||||
)); ?>
|
||||
|
||||
<?php get_template_part('template-parts/revues/table-matiere-revue', null, array(
|
||||
'revueID' => $revueID
|
||||
)); ?>
|
||||
|
||||
<?php get_template_part('template-parts/articles/article-content', null, array(
|
||||
'ID' => get_the_ID()
|
||||
)); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- #### RECOMMANDATIONS #### -->
|
||||
<?php echo do_blocks('<!-- wp:dynamiques-blocks/nos-recommandations /-->'); ?>
|
||||
|
||||
<!-- #### EXPLORE TAGS #### -->
|
||||
<?php get_template_part('template-parts/components/explore-tags'); ?>
|
||||
|
||||
<!-- #### INFOLETTRE #### -->
|
||||
<?php get_template_part('template-parts/components/subscribe-infolettre'); ?>
|
||||
|
||||
<?php endwhile; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
Loading…
Reference in New Issue
Block a user