Display 140 limit on home and profile posts

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";
   });
 }
 

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();
+}

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;
+}

web/views/desktop/home.ejs

@@ -19,7 +19,8 @@
       </div>
     </div>
 
-    <form action="/publish" method="POST" style="padding-top: 20px;">
+    <form action="/publish" method="POST">
+      <div class="letter-count js-letter-count">140</div>
       <textarea name="message" class="compose-post" placeholder="Post something on your wall..."></textarea>
       <div class="reverse-columns" style="margin-top: 10px">
         <input type="submit" value="Publish" />

web/views/desktop/profile.ejs

@@ -32,7 +32,8 @@
       </div>
     </div>
 
-    <form action="<%= profileUrl(profile.id, "/publish") %>" method="POST" style="padding-top: 20px;">
+    <form action="<%= profileUrl(profile.id, "/publish") %>" method="POST">
+      <div class="letter-count js-letter-count">140</div>
       <textarea name="message" class="compose-post" placeholder="Write something to <%= profile.name %>..."></textarea>
       <div class="reverse-columns" style="margin-top: 10px">
         <input type="submit" value="Publish" />

web/views/mobile/home.ejs

@@ -10,7 +10,8 @@
 <% if (posts.length > 0) { %>
   <form action="/publish" method="POST" style="padding: 0px 8px 5px 8px;">
     <textarea name="message" class="compose-post js-compose-post" placeholder="Post something on your wall..."></textarea>
-    <div class="reverse-columns">
+    <div class="columns" style="justify-content: space-between; align-items: center;">
+      <div class="letter-count js-letter-count" style="display: none">140</div>
       <input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
     </div>
   </form>

web/views/mobile/profile.ejs

@@ -38,7 +38,8 @@
     <% if (posts.length > 0) { %>
       <form action="<%= profileUrl(profile.id, "/publish") %>" method="POST" style="padding: 0px 8px 5px 8px;">
         <textarea name="message" class="compose-post js-compose-post" placeholder="Write something to <%= profile.name %>..."></textarea>
-        <div class="reverse-columns">
+        <div class="columns" style="justify-content: space-between; align-items: center;">
+          <div class="letter-count js-letter-count" style="display: none">140</div>
           <input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
         </div>
       </form>