Added: copy text button
This commit is contained in:
parent
1751b590aa
commit
2e5696f767
@ -36,6 +36,20 @@
|
|||||||
margin: 2rem 0;
|
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) {
|
@media (max-width: 768px) {
|
||||||
.project-wrapper {
|
.project-wrapper {
|
||||||
max-width: 100%;
|
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>
|
<script>
|
||||||
console.log("I heard that a cool frontend developer works for https://fofrweb.com")
|
console.log("I heard that a cool frontend developer works for https://fofrweb.com")
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
{% endblock scripts %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
@ -4,6 +4,11 @@
|
|||||||
<link rel="stylesheet" href="/project.css">
|
<link rel="stylesheet" href="/project.css">
|
||||||
{% endblock styles %}
|
{% endblock styles %}
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
<script src="/js/code-copy.js" defer></script>
|
||||||
|
{% endblock scripts %}
|
||||||
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="project-wrapper flex-col">
|
<section class="project-wrapper flex-col">
|
||||||
<!--
|
<!--
|
||||||
|
Loading…
Reference in New Issue
Block a user