Julien Riou
042b6fce48
All checks were successful
/ pre-commit (push) Successful in 1m17s
- Remove the Monaco Editor because it was to heavy and hard to integrate - Use Ace instead - Use the lowercase identifier for languages (ex: "Text" -> "text") - Select automatically the default language in the drop down to create a note (like the expiration) - Add `ace_directory` to serve assets from a local folder instead of a CDN Signed-off-by: Julien Riou <julien@riou.xyz>
112 lines
No EOL
4.9 KiB
HTML
112 lines
No EOL
4.9 KiB
HTML
{{define "index"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="light">
|
|
|
|
{{block "head" .}}{{end}}
|
|
|
|
<body>
|
|
{{block "header" .}}{{end}}
|
|
|
|
<form id="form" action="/create" method="post" enctype="multipart/form-data">
|
|
<div class="container mb-4">
|
|
<p class="fs-4">New note</p>
|
|
</div>
|
|
<div class="container text-center justify-content-center w-75 mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-1">
|
|
<label class="col-form-label col-form-label-sm" for="password">Password</label>
|
|
</div>
|
|
<div class="col">
|
|
<input type="password" pattern="^[a-zA-Z0-9]{16,256}$"
|
|
title="Letters and numbers with length from 16 to 256" class="form-control" id="password"
|
|
name="password">
|
|
</div>
|
|
<div class="col-1">
|
|
<input type="checkbox" class="form-check-input" for="no-password" id="no-password"
|
|
value="no-password" name="no-password">
|
|
<label class="col-form-label col-form-label-sm" for="no-password">No password</label>
|
|
</div>
|
|
<div class="col-1">
|
|
<input type="checkbox" class="form-check-input" for="delete-after-read" id="delete-after-read"
|
|
value="delete-after-read" name="delete-after-read">
|
|
<label class="col-form-label col-form-label-sm" for="delete-after-read">Delete after read</label>
|
|
</div>
|
|
{{if .EnableUploadFileButton}}
|
|
<div class="col">
|
|
<input type="file" class="form-control" for="file" id="file" name="file" accept="text/plain" />
|
|
</div>
|
|
{{end}}
|
|
<div class="col">
|
|
<select class="form-select" aria-label="Expiration" id="expiration" name="expiration">
|
|
<option disabled>Expiration</option>
|
|
{{range $exp := .Expirations}}
|
|
<option {{ if eq $exp $.Expiration }}selected="selected" {{end}} value="{{$exp}}">
|
|
{{HumanDuration $exp}}</option>
|
|
{{end}}
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<select class="form-select" aria-label="Language" id="language" name="language">
|
|
<option disabled>Language</option>
|
|
{{range $language := .Languages}}
|
|
<option {{ if eq $language $.Language }}selected="selected" {{end}}value="{{lower .}}">
|
|
{{$language}}</option>
|
|
{{end}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mb-4">
|
|
<div class="row">
|
|
<div id="editor" name="editor" class="form-control"
|
|
style="height: 300px; resize: vertical; overflow: auto;"></div>
|
|
<input type="hidden" id="content" />
|
|
</div>
|
|
</div>
|
|
<div class="container mb-4">
|
|
<div class="row text-center justify-content-center">
|
|
<div class="col-1">
|
|
<button type="submit" id="submit" class="btn btn-success">Create</button>
|
|
</div>
|
|
</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");
|
|
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
|
|
editor.setTheme("ace/theme/github_light_default");
|
|
} else {
|
|
editor.setTheme("ace/theme/github_dark");
|
|
}
|
|
|
|
// Syntax highlighting
|
|
document.getElementById("language").addEventListener("change", (e) => {
|
|
if (e.target.value != "") {
|
|
editor.getSession().setMode("ace/mode/" + e.target.value);
|
|
}
|
|
});
|
|
|
|
// 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")
|
|
}
|
|
});
|
|
|
|
// Copy content on submit
|
|
document.getElementById("form").addEventListener("formdata", (e) => {
|
|
e.formData.append('content', editor.getValue());
|
|
});
|
|
</script>
|
|
</form>
|
|
|
|
{{block "footer" .}}{{end}}
|
|
</body>
|
|
|
|
</html>
|
|
{{end}} |