Added: copy text button
This commit is contained in:
parent
1751b590aa
commit
2e5696f767
@ -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
30
static/js/code-copy.js
Normal 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);
|
||||
})
|
||||
})
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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">
|
||||
<!--
|
||||
|
Loading…
Reference in New Issue
Block a user