Add character count to toot forms

brutaldon/static/css/brutaldon-dark.css

@@ -172,3 +172,18 @@ emoji-link
     95% {left: 120%;}
     to {left: 100%;}
 }
+
+#status_count
+{
+    margin-left: 90%;
+    margin-top: 1rem;
+    background-color: #888;
+    color: #FFF;
+    float: right;
+    padding: 0.5ex;
+    border-radius: 5px;
+    min-height: 1.5rem;
+    min-width: 1.5rem;
+    font-size: 0.8em;
+    text-align: right;
+}

brutaldon/static/css/brutaldon.css

@@ -143,3 +143,18 @@ emoji-link
     95% {left: 120%;}
     to {left: 100%;}
 }
+
+#status_count
+{
+    margin-left: 90%;
+    margin-top: 1rem;
+    background-color: #888;
+    color: #FFF;
+    float: right;
+    padding: 0.5ex;
+    border-radius: 5px;
+    min-height: 1.5rem;
+    min-width: 1.5rem;
+    font-size: 0.8em;
+    text-align: right;
+}

brutaldon/static/js/brutaldon-enhancements.js

@@ -130,3 +130,19 @@ function fileButtonUpdaters()
     };
 
 }
+
+function characterCountSetup()
+{
+    $("#status_count").text(characterCount());
+    $("#id_status").keyup(function(){
+        $("#status_count").text(characterCount());
+    });
+    $("#id_spoiler_text").keyup(function(){
+        $("#status_count").text(characterCount());
+    });
+}
+
+function characterCount()
+{
+    return $("#id_status").val().length + $("#id_spoiler_text").val().length;
+}

brutaldon/templates/main/post_minimal_partial.html

@@ -19,6 +19,7 @@
         <div class="control">
             {% render_field form.status class+="textarea is-primary mousetrap" rows="3" %}
         </div>
+        <div id="status_count"></div>
     </div>
 
     <div class="field has-addons">
@@ -38,4 +39,9 @@
             </a>
         </div>
     </div>
+    {% if not preferences.theme.is_brutalist %}
+        <script type="application/javascript">
+         Intercooler.ready(characterCountSetup);
+        </script>
+    {% endif %}
 </form>

brutaldon/templates/main/post_partial.html

@@ -26,6 +26,7 @@
     <div class="control">
         {% render_field form.status class+="textarea mousetrap is-primary" rows="4" %}
     </div>
+    <div id="status_count"></div>
 </div>
 
 <div class="field">
@@ -130,6 +131,7 @@
     <script type="application/javascript">
      fileButtonUpdaters();
      Intercooler.ready(fileButtonUpdaters);
+     Intercooler.ready(characterCountSetup);
     </script>
 {% endif %}
             </form>