Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE HAndling the share button
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Nonimart 2025-09-17 17:34:30 +02:00
parent 4736df7fc2
commit 965a98e807
4 changed files with 104 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
resources/css/components/post-header.css
View File

@ -146,6 +146,66 @@
}
}
}
&--share {
.socials-buttons__share-links {
@apply max-w-0 opacity-0 overflow-hidden max-h-7;
transition: all 0.3s ease-in-out;
}
&.is-open .socials-buttons__share-links {
@apply max-w-[200px] opacity-100;
}
.share-icon {
@apply max-w-[200px];
}
&.is-open {
.share-icon {
@apply max-w-0 overflow-hidden;
}
.socials-buttons__share-links {
overflow: visible;
}
.share-button {
transform: scale(1) !important;
transition: transform 0.2s ease-in-out !important;
}
.share-button:hover {
transform: scale(1.02) !important;
}
.share-link {
@apply block w-7 h-7;
&:hover {
}
}
}
.share-link {
display: inline-block;
transition: transform 0.2s ease-in-out !important;
&:hover {
transform: scale(1.2) !important;
}
}
}
}
&__share-links {
@apply flex flex-wrap gap-2;
}
.share-link {
@apply transition-all duration-300;
&:after {
content: none;
}
img {
@apply w-7 h-7 filter-none;
}
}
}
}

14
resources/js/singles/share-button.ts Normal file
View File

@ -0,0 +1,14 @@
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');
console.log(isOpen);
if (!isOpen) {
shareButton.classList.add('is-open');
} else {
shareButton.classList.remove('is-open');
}
});
}

2
resources/js/singles/singles.ts
View File

@ -2,6 +2,7 @@ import handleIndexPanel from './index-panel';
import handleFootnoteFormat from './footnote-format';
import handleCiteButton from './cite-button';
import handleLikeButton from './like-button.ts';
import handleShareButton from './share-button.ts';
import { handleArticleToolbar } from './article-toolbar.ts';
import { handleRevueToolbar } from './revue-toolbar.ts';
@ -16,4 +17,5 @@ export default function singles(): void {
handleLikeButton();
handleArticleToolbar();
handleRevueToolbar();
handleShareButton();
}

56
template-parts/post-header.php
View File

@ -68,6 +68,10 @@ $likes_count = get_post_likes_count($post_id);
</div>
<?php endif; ?>
<div class="socials-buttons">
<?php
$shareUrls = build_share_urls();
write_log($shareUrls);
?>
<button class="socials-buttons__button socials-buttons__button--cite" <?php echo empty($citeReference) ? 'disabled' : ''; ?> title="<?php echo empty($citeReference) ? 'Citation non disponible' : 'Copier la citation'; ?>">
<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-citer-article.svg" alt="">
Citer
@ -79,38 +83,34 @@ $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 src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-partager-social.svg" alt="">
<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>
</ul>
</button>
</div>
</div>
</div>
</div>
</section>
<?php
$published = $args['published'] ?? null;
$modified = $args['modified'] ?? null;
$shareUrls = build_share_urls();
write_log($shareUrls);
?>
<div class="post-infos-capsule">
<ul class="post-infos-capsule__share">
<?php foreach ($shareUrls as $key => $shareUrl) : ?>
<li class="share-button share-button--<?php echo $key ?>">
<a href='<?php echo $shareUrl ?>' class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "homegrade-theme__texte-fonctionnel") . $key ?>">
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</section>