mirror/pasty
1
0
Fork 0
mirror of https://github.com/lus/pasty.git synced 2023-08-10 21:13:09 +03:00
Code Issues Projects Releases Wiki Activity

Show character and line count (#33)

Browse Source
This commit is contained in:
Lukas Schulte Pelkum 2022-01-30 15:22:38 +01:00
parent 7a8d8e1573
commit 75fa0621e4
No known key found for this signature in database
GPG Key ID: 408DA7CA81DB885C
5 changed files with 39 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/assets/css/style.css
View File

@ -266,6 +266,21 @@ html.embedded #footer, body.embedded #footer {
border-radius: 10px; border-radius: 10px;
} }
.container #content_length_container {
position: fixed;
right: 30px;
bottom: 60px;
padding: 10px 15px;
background-color: #222222;
border-radius: 10px;
}
.container #content_length_container span {
background-color: #111111;
padding: 5px 10px;
border-radius: 10px;
}
#footer { #footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;

2
web/assets/css/style.css.map
View File

File diff suppressed because one or more lines are too long

13
web/assets/css/style.scss
View File

@ -222,6 +222,19 @@ html, body {
border-radius: 10px; border-radius: 10px;
} }
} }
& #content_length_container {
position: fixed;
right: 30px;
bottom: 60px;
padding: 10px 15px;
background-color: #222222;
border-radius: 10px;
& span {
background-color: #111111;
padding: 5px 10px;
border-radius: 10px;
}
}
} }
#footer { #footer {

7
web/assets/js/modules/state.js
View File

@ -11,6 +11,9 @@ const INPUT_ELEMENT = document.getElementById("input");
const LIFETIME_CONTAINER_ELEMENT = document.getElementById("lifetime_container"); const LIFETIME_CONTAINER_ELEMENT = document.getElementById("lifetime_container");
const CHARACTER_AMOUNT_ELEMENT = document.getElementById("characters");
const LINES_AMOUNT_ELEMENT = document.getElementById("lines");
const BUTTONS_DEFAULT_ELEMENT = document.getElementById("buttons_default"); const BUTTONS_DEFAULT_ELEMENT = document.getElementById("buttons_default");
const BUTTON_NEW_ELEMENT = document.getElementById("btn_new"); const BUTTON_NEW_ELEMENT = document.getElementById("btn_new");
const BUTTON_SAVE_ELEMENT = document.getElementById("btn_save"); const BUTTON_SAVE_ELEMENT = document.getElementById("btn_save");
@ -112,6 +115,7 @@ export async function initialize() {
INPUT_ELEMENT.addEventListener("input", () => { INPUT_ELEMENT.addEventListener("input", () => {
updateLineNumbers(INPUT_ELEMENT.value); updateLineNumbers(INPUT_ELEMENT.value);
if (BUTTON_SAVE_ELEMENT.hasAttribute("disabled") && INPUT_ELEMENT.value.length > 0) { if (BUTTON_SAVE_ELEMENT.hasAttribute("disabled") && INPUT_ELEMENT.value.length > 0) {
BUTTON_SAVE_ELEMENT.removeAttribute("disabled"); BUTTON_SAVE_ELEMENT.removeAttribute("disabled");
} }
@ -147,6 +151,9 @@ function updateCode() {
} }
function updateLineNumbers(content) { function updateLineNumbers(content) {
CHARACTER_AMOUNT_ELEMENT.innerText = content.length;
LINES_AMOUNT_ELEMENT.innerText = content.split(/\n/).length;
if (content == "") { if (content == "") {
LINE_NUMBERS_ELEMENT.innerHTML = "<span>></span>"; LINE_NUMBERS_ELEMENT.innerHTML = "<span>></span>";
return; return;

3
web/index.html
View File

@ -113,6 +113,9 @@
<div id="lifetime_container" class="hidden"> <div id="lifetime_container" class="hidden">
Lifetime: <span id="lifetime">loading...</span> Lifetime: <span id="lifetime">loading...</span>
</div> </div>
<div id="content_length_container">
<span id="characters">0</span> characters, <span id="lines">0</span> lines
</div>
<div id="linenos"><span>></span></div> <div id="linenos"><span>></span></div>
<div id="content"> <div id="content">
<div id="code"></div> <div id="code"></div>