coller/src/server/templates/note.html

129 lines
No EOL
5.3 KiB
HTML

{{define "note"}}
{{if ne .Err nil}}
{{block "error" .}}{{end}}
{{else}}
<div class="container mb-4">
<div class="d-flex flex-wrap py-2">
<span class="fs-4 d-flex mb-3 mb-md-0 me-md-auto text-decoration-none">Note {{.Note.ID}}</span>
<ul class="nav nav-pills align-items-center">
<li class="nav-item">
<button type="button" class="btn btn-link" id="copier">copier</button>
</li>
<li class="nav-item">
<button type="button" class="btn btn-link" id="curl">curl</button>
</li>
<li class="nav-item px-2">
<a href="" id="rawURL">raw</a>
<script>document.getElementById("rawURL").href = window.location.href.replace(".html", "");</script>
</li>
<li class="nav-item px-2">
{{.Note.Language}}
</li>
{{if eq .Note.DeleteAfterRead false}}
<li class="nav-item px-2">
expires in {{HumanDuration (TimeDiff .Note.ExpiresAt)}}
</li>
{{end}}
</ul>
</div>
<script>
var password = "{{ .Password }}";
var encryptionKey = window.location.hash.substr(1);
</script>
<div id="copierContainer" style="display: none;" class="alert alert-info alert-dismissible" role="alert">
<p>Access the note with <strong>copier</strong>:</p>
<pre id="copierCommand" style="border: 1px solid;" class="p-2"></pre>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" id="copierClose">
<span aria-hidden="true"></span>
</button>
</div>
<script>
var copierCommand = "copier";
var copierOpts = "";
if (password != "") {
copierOpts += " -password '" + password + "'";
}
copierCommand += copierOpts + " " + window.location.origin + "/{{ .Note.ID }}";
if (encryptionKey != "") {
copierCommand += "#" + encryptionKey;
}
document.getElementById("copierCommand").innerText = copierCommand;
document.getElementById("copier").addEventListener("click", () => {
document.getElementById("copierContainer").style.display = "";
});
document.getElementById("copierClose").addEventListener("click", () => {
document.getElementById("copierContainer").style.display = "none";
});
</script>
<div id="curlContainer" style="display: none;" class="alert alert-info alert-dismissible" role="alert">
<p>Access the note with <strong>curl</strong>:</p>
<pre id="curlCommand" style="border: 1px solid;" class="p-2"></pre>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" id="curlClose">
<span aria-hidden="true"></span>
</button>
</div>
<script>
var curlCommand = "curl";
var curlData = {};
if (encryptionKey != "") {
curlData.encryption_key = encryptionKey;
};
if (password != "") {
curlData.password = window.btoa(password);
}
var payload = JSON.stringify(curlData);
if (payload != "{}") {
curlCommand += " -XPOST -d '" + payload + "'";
}
curlCommand += " " + window.location.origin + "/api/note/{{ .Note.ID }}";
document.getElementById("curlCommand").innerText = curlCommand;
document.getElementById("curl").addEventListener("click", () => {
document.getElementById("curlContainer").style.display = "";
});
document.getElementById("curlClose").addEventListener("click", () => {
document.getElementById("curlContainer").style.display = "none";
});
</script>
{{if .DisableEditor}}
<div class="row">
<pre class="border px-3 pt-3" style="min-height: 300px; resize: vertical; overflow: auto;">
{{string .Note.Content}}
</pre>
</div>
{{else}}
<div class="row">
<div id="editor" name="editor" class="form-control"
style="min-height: 300px; resize: vertical; overflow: auto;">
</div>
</div>
<script
src="{{if .AceDirectory}}/static/ace-builds{{else}}https://cdn.jsdelivr.net/npm/ace-builds@1.43.3{{end}}/src-noconflict/ace.js"
type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setValue("{{string .Note.Content}}");
editor.setReadOnly(true);
editor.getSession().setMode("ace/mode/{{.Note.Language}}");
editor.getSession().selection.clearSelection();
editor.setOptions({ maxLines: Infinity });
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
editor.setTheme("ace/theme/github_light_default");
} else {
editor.setTheme("ace/theme/github_dark");
}
// Dark mode
document.getElementById("lightSwitch").addEventListener("click", () => {
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
editor.setTheme("ace/theme/github_light_default")
} else if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
editor.setTheme("ace/theme/github_dark")
}
});
</script>
{{end}}
</div>
{{end}}
{{end}}