Merge pull request #70 from hay-kot/feat/implement-copy-button

feat: add copy button to viewer
This commit is contained in:
Dániel Szabó 2022-10-22 21:42:51 +03:00 committed by GitHub
commit 3e58ba325a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 6 deletions

View file

@ -80,6 +80,10 @@ impl Pasta {
pub fn content_not_highlighted(&self) -> String { pub fn content_not_highlighted(&self) -> String {
html_highlight(&self.content, "txt") html_highlight(&self.content, "txt")
} }
pub fn content_escaped(&self) -> String {
self.content.replace("`", "\\`").replace("$", "\\$")
}
} }
impl fmt::Display for Pasta { impl fmt::Display for Pasta {

View file

@ -16,13 +16,33 @@
<a href="/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a> <a href="/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
</div> </div>
<br> <br>
<div class="code-container">
<a role="button" id="copy-button" class="copy-button">
Copy
</a>
<div style="clear: both;"> <div style="clear: both;">
{% if args.highlightsyntax %} {% if args.highlightsyntax %}
<pre><code>{{pasta.content_syntax_highlighted()}}</code></pre> <pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre>
{%- else %} {%- else %}
<pre><code>{{pasta.content_not_highlighted()}}</code></pre> <pre><code id="code">{{pasta.content_not_highlighted()}}</code></pre>
{%- endif %} {%- endif %}
</div> </div>
</div>
<script>
const btn = document.getElementById("copy-button")
const content = `{{ pasta.content_escaped() }}`
btn.addEventListener("click", () => {
navigator.clipboard.writeText(content)
btn.innerHTML = "Copied"
setTimeout(() => {
btn.innerHTML = "Copy"
}, 1000)
})
</script>
<style> <style>
code-line { code-line {
counter-increment: listing; counter-increment: listing;
@ -48,6 +68,24 @@ code-line::before {
user-select: none; user-select: none;
} }
.code-container {
position: relative;
}
.hidden {
display: none;
}
.copy-button {
position: absolute;
background: transparent;
top: 0;
right: 0;
padding: 3px;
margin: 3px;
cursor: pointer;
}
</style> </style>
{% include "footer.html" %} {% include "footer.html" %}