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.");
}
);
});
});

8
single-article.php
View file

@ -16,7 +16,11 @@
}
?>
<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 class="text-muted">
<strong>Status:</strong> <?php
@ -40,4 +44,6 @@
</div>
</section>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/clipboard.js"></script>
<?php get_footer(); ?>