Merge pull request #70 from hay-kot/feat/implement-copy-button
feat: add copy button to viewer
This commit is contained in:
commit
3e58ba325a
2 changed files with 48 additions and 6 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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" %}
|
||||||
|
|
Loading…
Reference in a new issue