Added: copy text button
All checks were successful
Build and Deploy Zola Website / build_and_deploy (push) Successful in 28s
Build Zola Website / build (pull_request) Successful in 35s

This commit is contained in:
Filip Rojek 2024-10-15 11:11:08 +02:00
parent 1751b590aa
commit 2e5696f767
4 changed files with 52 additions and 0 deletions

View File

@ -36,6 +36,20 @@
margin: 2rem 0;
}
.copy-code-wrapper {
position: relative;
}
.copy-code {
position: absolute;
top: .5rem;
right: .5rem;
cursor: pointer;
background-color: #1b1f26;
padding: .3rem ;
border-radius: 5px;
}
@media (max-width: 768px) {
.project-wrapper {
max-width: 100%;

30
static/js/code-copy.js Normal file
View File

@ -0,0 +1,30 @@
let codes = document.querySelectorAll("pre")
codes.forEach(code => {
const elWrapper = document.createElement("div")
elWrapper.classList.add("copy-code-wrapper")
const el = document.createElement("span")
el.textContent = "Copy"
el.classList.add("copy-code")
elWrapper.appendChild(el)
code.parentNode.insertBefore(elWrapper, code)
let textContent = ""
code.childNodes.forEach(child => {
textContent += child.textContent;
})
elWrapper.addEventListener("click", (e) => {
e.preventDefault()
navigator.clipboard.writeText(textContent)
el.textContent = "Copied!"
setTimeout(() => {
el.textContent = "Copy"
}, 5000);
})
})

View File

@ -67,6 +67,9 @@
<script>
console.log("I heard that a cool frontend developer works for https://fofrweb.com")
</script>
{% block scripts %}
{% endblock scripts %}
</body>
</html>

View File

@ -4,6 +4,11 @@
<link rel="stylesheet" href="/project.css">
{% endblock styles %}
{% block scripts %}
<script src="/js/code-copy.js" defer></script>
{% endblock scripts %}
{% block content %}
<section class="project-wrapper flex-col">
<!--