schrottkatze/karton
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 2 Packages Wiki Activity

add copy button to viewer

Browse source
This commit is contained in:
Hayden 2022-09-30 21:37:26 -08:00
parent 3ca89291dc
commit 1e8b17bb89
1 changed files with 37 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
templates/pasta.html
View file

@ -16,13 +16,31 @@
<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 style="clear: both;"> <div class="code-container">
{% if args.highlightsyntax %} <button id="copy-button" class="copy-button">
<pre><code>{{pasta.content_syntax_highlighted()}}</code></pre> <svg id="copy-icon" style="width:24px;height:24px" viewBox="0 0 24 24">
{%- else %} <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
<pre><code>{{pasta.content_not_highlighted()}}</code></pre> </svg>
{%- endif %} </button>
<div style="clear: both;">
{% if args.highlightsyntax %}
<pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre>
{%- else %}
<pre><code id="code">{{pasta.content_not_highlighted()}}</code></pre>
{%- endif %}
</div>
</div> </div>
<script>
const btn = document.getElementById("copy-icon")
const content = `{{ pasta.content }}`
btn.addEventListener("click", () => {
navigator.clipboard.writeText(content)
})
</script>
<style> <style>
code-line { code-line {
counter-increment: listing; counter-increment: listing;
@ -48,6 +66,19 @@ code-line::before {
user-select: none; user-select: none;
} }
.code-container {
position: relative;
}
.copy-button {
position: absolute;
background: transparent;
top: 0;
right: 0;
padding: 8px;
margin: 5px;
}
</style> </style>
{% include "footer.html" %} {% include "footer.html" %}