mirror of
https://github.com/JustKato/FreePad.git
synced 2026-02-23 15:50:46 +02:00
+ Maximum pad length
+ Configurable maximum pad length + Refresh pad + Archive pad + Archives in local client storage + Download pad
This commit is contained in:
@@ -28,10 +28,12 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function goToPad() {
|
||||
// Go to the next apd
|
||||
window.location.href = "/" + document.getElementById(`pad-name`).value;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="why mb-4">
|
||||
|
||||
@@ -1,11 +1,25 @@
|
||||
{{ template "inc/header.html" .}}
|
||||
|
||||
<style>
|
||||
|
||||
#pad-content {
|
||||
height: 16rem;
|
||||
}
|
||||
|
||||
#archive-selection-example {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var maximumPadSize = Number({{.maximumPadSize}});
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
||||
<main id="main-card" class="container rounded mt-5 shadow-sm">
|
||||
@@ -17,7 +31,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<textarea name="pad-content" id="pad-content" onchange="sendMyData(this)" onkeydown="updateStatus(`Not Saved`, `text-warning`); toggleWritingWatch(this)" class="form-control">{{.post_content}}</textarea>
|
||||
<h2 class="mb-4">{{.title}}</h2>
|
||||
|
||||
<textarea maxlength="{{.maximumPadSize}}" name="pad-content" id="pad-content" onchange="sendMyData(this)" onkeydown="updateStatus(`Not Saved`, `text-warning`); toggleWritingWatch(this)" class="form-control">{{.post_content}}</textarea>
|
||||
|
||||
<div id="pad-status" class="my-4 row">
|
||||
<div class="col-md-12 col-lg-4 col-xl-4" title="Status">
|
||||
@@ -56,7 +72,57 @@
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="text-muted py-5 text-center">
|
||||
<div id="pad-options" class="row">
|
||||
<div class="col-md-12 col-lg-4 col-xl-4">
|
||||
<button type="button" class="btn btn-secondary btn-md w-100" title="Refresh the contents of the pad" onclick="window.location.reload()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"></path>
|
||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"></path>
|
||||
</svg>
|
||||
Refresh Pad
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0">
|
||||
<button type="button" class="btn btn-secondary btn-md w-100" title="Download the contents into a text file" onclick="window.pad.downloadPadContents();">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
|
||||
<path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
|
||||
<path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"></path>
|
||||
</svg>
|
||||
Download Pad
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title="Archive the current state of the pad">
|
||||
<div class="btn-group w-100" role="group">
|
||||
<button type="button" class="btn btn-secondary btn-md w-100 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
|
||||
<path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
Archive Pad
|
||||
</button>
|
||||
<ul class="dropdown-menu w-100" id="archives-selection">
|
||||
<li class="dropdown-item" onclick="saveLocalArchive()" id="do-archive-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
|
||||
<path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
<span class="archive-date">
|
||||
Archive Current
|
||||
</span>
|
||||
</li>
|
||||
<li class="dropdown-item archive-selection" id="archive-selection-example">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
|
||||
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
|
||||
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
|
||||
</svg>
|
||||
<span class="archive-date">
|
||||
DATE
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-muted py-5 text-center border-top mt-4">
|
||||
<p class="mb-1">
|
||||
FreePad by <a href="https://justkato.me/">©Kato Twofold</a>
|
||||
</p>
|
||||
@@ -70,75 +136,16 @@
|
||||
{{ template "inc/theme-toggle.html" .}}
|
||||
</body>
|
||||
|
||||
<script src="/static/js/fileSaver.js"></script>
|
||||
<script src="/static/js/pad.js"></script>
|
||||
<script src="/static/js/pad-scripts.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
function sendMyData(el) {
|
||||
const formData = new FormData();
|
||||
|
||||
// Check if the writing watch was sending something already
|
||||
if ( !!window.writingWatch ) {
|
||||
// Clear old timeout
|
||||
clearTimeout(window.writingWatch);
|
||||
}
|
||||
|
||||
el.setAttribute(`readonly`, `1`);
|
||||
|
||||
formData.set("content", el.value);
|
||||
|
||||
updateStatus(`Attempting to save...`, `text-warning`);
|
||||
|
||||
fetch(window.location.href.toString(), {
|
||||
body: formData,
|
||||
method: "post",
|
||||
})
|
||||
.then( resp => {
|
||||
resp.json()
|
||||
.then( e => {
|
||||
document.getElementById(`last_modified_`).value = e.pad.last_modified;
|
||||
updateStatus(`Succesfully Saved`, `text-success`);
|
||||
})
|
||||
.catch( err => {
|
||||
updateStatus(`Failed to Save`, `text-error`);
|
||||
console.error(err);
|
||||
})
|
||||
})
|
||||
.catch( err => {
|
||||
updateStatus(`Failed to Save`, `text-error`);
|
||||
console.error(err);
|
||||
})
|
||||
.finally( () => {
|
||||
el.removeAttribute(`readonly`);
|
||||
})
|
||||
}
|
||||
|
||||
function toggleWritingWatch(el) {
|
||||
|
||||
// Check if the writing watch was sending something already
|
||||
if ( !!window.writingWatch ) {
|
||||
// Clear old timeout
|
||||
clearTimeout(window.writingWatch);
|
||||
}
|
||||
|
||||
// Set a timeout for the action
|
||||
window.writingWatch = setTimeout( () => {
|
||||
// Send out the data
|
||||
sendMyData(el)
|
||||
}, 750)
|
||||
|
||||
}
|
||||
|
||||
function updateStatus(txt, cls) {
|
||||
|
||||
const loading_status = document.getElementById(`loading_status`)
|
||||
|
||||
loading_status.value = txt;
|
||||
loading_status.classList.remove("text-danger", "text-warning", "text-success", "text-white", "text-primary");
|
||||
loading_status.classList.add(cls);
|
||||
}
|
||||
|
||||
document.addEventListener(`DOMContentLoaded`, e => {
|
||||
document.getElementById(`pad-content`).focus();
|
||||
})
|
||||
window.pad = new Pad({{.title}}, {{.last_modified}});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{{ template "inc/footer.html" .}}
|
||||
Reference in New Issue
Block a user