Add the character counter next to the Post button (#152)

activities/views/compose.py

@@ -30,6 +30,19 @@ class Compose(FormView):
                     "autofocus": "autofocus",
                     "maxlength": Config.lazy_system_value("post_length"),
                     "placeholder": "What's on your mind?",
+                    "_": f"""
+                    on load or input
+                        set characters to my.value.trim().length
+                        put { Config.system.post_length } - characters into #character-counter
+
+                        if characters > { Config.system.post_length } then
+                            set #character-counter's style.color to 'var(--color-text-error)'
+                            add [@disabled=] to #post-button
+                        else
+                            set #character-counter's style.color to ''
+                            remove @disabled from #post-button
+                        end
+                    """,
                 },
             )
         )

activities/views/timelines.py

@@ -20,6 +20,19 @@ class Home(FormView):
             widget=forms.Textarea(
                 attrs={
                     "placeholder": "What's on your mind?",
+                    "_": f"""
+                    on load or input
+                        set characters to my.value.trim().length
+                        put { Config.system.post_length } - characters into #character-counter
+
+                        if characters > { Config.system.post_length } then
+                            set #character-counter's style.color to 'var(--color-text-error)'
+                            add [@disabled=] to #post-button
+                        else
+                            set #character-counter's style.color to ''
+                            remove @disabled from #post-button
+                        end
+                    """,
                 },
             )
         )

static/css/style.css

@@ -93,11 +93,13 @@ td a {
     --color-text-dull: #99a;
     --color-text-main: #fff;
     --color-text-link: rgb(176, 194, 206);
+    --color-text-error: #f44336;
 
     --color-input-border: #000;
     --color-input-border-active: #444b5d;
     --color-button-main: #444b5d;
     --color-button-main-hover: #515d7c;
+    --color-button-disabled: #7c9c97;
     --color-bg3: #444b5d;
 }
 
@@ -666,6 +668,11 @@ button.toggle,
     background: var(--color-bg-main);
 }
 
+button[disabled],
+.button[disabled] {
+    background: var(--color-button-disabled);
+}
+
 button.left,
 .button.left {
     float: left;

templates/activities/_menu.html

@@ -60,8 +60,9 @@
         {{ form.content_warning }}
         <input type="hidden" name="visibility" value="{{ config_identity.default_post_visibility }}">
         <div class="buttons">
+            <span id="character-counter">{{ config.post_length }}</span>
             <span class="button toggle" _="on click toggle .enabled then toggle .hidden on #id_content_warning">CW</span>
-            <button>{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
+            <button id="post-button">{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
         </div>
     </form>
 {% endif %}

templates/activities/compose.html

@@ -34,7 +34,8 @@
             {% endif %}
         </fieldset>
         <div class="buttons">
-            <button>{% if post %}Save Edits{% elif config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
+            <span id="character-counter">{{ config.post_length }}</span>
+            <button id="post-button">{% if post %}Save Edits{% elif config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
         </div>
     </form>
 {% endblock %}