PrivateCoffee/wp-duckbehaviorjournal
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add DOI copy-to-clipboard functionality

Browse source 
Introduced a new JavaScript file to handle the DOI copy-to-clipboard feature. Updated the 'single-article.php' template to include a clickable DOI link that copies the DOI to the clipboard and displays a confirmation message. Enhances user convenience by simplifying the process of copying DOIs.
This commit is contained in:
Kumi 2024-06-20 15:24:22 +02:00
parent ac0a7eb942
commit 3bd51e66ed
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 38 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/js/clipboard.js Normal file
View file

@ -0,0 +1,22 @@
document.addEventListener("DOMContentLoaded", function () {
const doiLink = document.getElementById("doi-link");
const doiCopyMessage = document.getElementById("doi-copy-message");
doiLink.addEventListener("click", function (event) {
event.preventDefault();
const doi = doiLink.getAttribute("data-doi");
const fullDoiUrl = `${window.location.origin}/${doi}`;
navigator.clipboard.writeText(fullDoiUrl).then(
function () {
doiCopyMessage.style.display = "inline";
setTimeout(function () {
doiCopyMessage.style.display = "none";
}, 2000);
},
function () {
alert("Failed to copy DOI to clipboard.");
}
);
});
});

26
single-article.php
View file

@ -16,19 +16,23 @@
} }
?> ?>
<p class="text-muted"> <p class="text-muted">
<strong>DOI:</strong> <?php echo esc_html(get_post_meta(get_the_ID(), 'article_doi', true)); ?> <strong>DOI:</strong>
<a href="#" id="doi-link" data-doi="<?php echo esc_attr(get_post_meta(get_the_ID(), 'article_doi', true)); ?>">
<?php echo esc_html(get_post_meta(get_the_ID(), 'article_doi', true)); ?>
</a>
<span id="doi-copy-message" style="display: none; color: green; margin-left: 10px;"><?php _e('Copied!', 'duck-behavior-journal'); ?></span>
</p> </p>
<p class="text-muted"> <p class="text-muted">
<strong>Status:</strong> <?php <strong>Status:</strong> <?php
$terms = get_the_terms(get_the_ID(), 'publication_status'); $terms = get_the_terms(get_the_ID(), 'publication_status');
if (!empty($terms) && !is_wp_error($terms)) { if (!empty($terms) && !is_wp_error($terms)) {
$term_list = array(); $term_list = array();
foreach ($terms as $term) { foreach ($terms as $term) {
$term_list[] = $term->name; $term_list[] = $term->name;
} }
echo implode(', ', $term_list); echo implode(', ', $term_list);
} }
?> ?>
</p> </p>
<?php if (false && has_post_thumbnail()) : ?> <?php if (false && has_post_thumbnail()) : ?>
<img src="<?php the_post_thumbnail_url(); ?>" class="img-fluid mb-4" alt="<?php the_title(); ?>"> <img src="<?php the_post_thumbnail_url(); ?>" class="img-fluid mb-4" alt="<?php the_title(); ?>">
@ -40,4 +44,6 @@
</div> </div>
</section> </section>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/clipboard.js"></script>
<?php get_footer(); ?> <?php get_footer(); ?>