diff --git a/web/public/js/mobile.js b/web/public/js/mobile.js index 2929202..30dbbc5 100644 --- a/web/public/js/mobile.js +++ b/web/public/js/mobile.js @@ -5,8 +5,10 @@ const composePost = document.querySelector(".js-compose-post"); if (composePost) { const composeButton = document.querySelector(".js-publish-button"); + const letterCounter = document.querySelector(".js-letter-count"); composePost.addEventListener("focus", () => { composeButton.style.display = "block"; + letterCounter.style.display = "block"; }); } diff --git a/web/public/js/shared.js b/web/public/js/shared.js index dc91851..6414c6a 100644 --- a/web/public/js/shared.js +++ b/web/public/js/shared.js @@ -58,3 +58,26 @@ window.onerror = (message, _url, _lineNo, _columnNo, error) => { encodeURIComponent(error.stack), }); }; + +/** + * Letter counter + */ + +const letterCounter = document.querySelector(".js-letter-count"); +if (letterCounter) { + let parent = letterCounter.parentElement; + if (parent.tagName != "FORM") parent = parent.parentElement; + const textarea = parent.querySelector("textarea"); + const submit = parent.querySelector("input[type=submit]"); + const countLetters = () => { + const left = 140 - textarea.value.length; + letterCounter.textContent = left.toString(); + if (left < 0) { + submit.setAttribute("disabled", "disabled"); + } else { + submit.removeAttribute("disabled"); + } + }; + textarea.addEventListener("keyup", countLetters); + countLetters(); +} diff --git a/web/public/shared.css b/web/public/shared.css index 491eb16..e6a6bb4 100644 --- a/web/public/shared.css +++ b/web/public/shared.css @@ -57,6 +57,12 @@ button.button-yellow { button.button-yellow:hover { background: #ddb904; } +button[disabled], +input[type="submit"][disabled] { + background: #eee; + border: 1px solid #999; + color: #999; +} input[type="text"], input[type="email"], @@ -382,3 +388,10 @@ h2 { height: 100vh; } } + +.letter-count { + text-align: right; + font-size: 24px; + color: #ccc; + font-weight: bold; +} diff --git a/web/views/desktop/home.ejs b/web/views/desktop/home.ejs index 958a6ef..3c98a0b 100644 --- a/web/views/desktop/home.ejs +++ b/web/views/desktop/home.ejs @@ -19,7 +19,8 @@ -