add character count for inputs and textareas

js/10-base.js

@@ -120,6 +120,40 @@ Liberapay.init = function() {
     $('button[data-action="reload"]').on('click', function() {
         location.reload();
     });
+
+    // Add remaining length indicator on page load
+    $('input[maxlength], textarea[maxlength]').each(function() {
+        var $this = $(this)
+        var maxLength = $this.attr('maxlength');
+        var dataMaxlengthMsg = $this.data('maxlengthMsg');
+        $this.data('maxlength', maxLength);
+        $this.removeAttr('maxlength');
+        maxLength = $this.data('maxlength');
+        var remainingLength = maxLength - $this.val().length;
+        $this.after("<span class='remaining-length'>" + remainingLength + "</span>");
+
+        // Style remaining length indicator
+        $('.remaining-length').each(function() {
+            $(this).css({
+                'float': 'right',
+                'margin-right': '5px'
+            });
+        });
+
+        // Update remaining length dynamically
+        $this.on('focus input', function() {
+            var $this = $(this)
+            var maxLength = $this.data('maxlength');
+            var remainingLength = maxLength - $this.val().length;
+            $this.siblings("span[class='remaining-length']").first().text(remainingLength);
+
+            if (remainingLength < 0) {
+                $this.get(0).setCustomValidity(dataMaxlengthMsg);
+            } else {
+                $this.get(0).setCustomValidity('');
+            }
+        });
+    });
 };
 
 $(function(){ Liberapay.init(); });

www/%username/edit/statement.spt

@@ -148,6 +148,7 @@ subhead = _("Descriptions")
         <div class="form-group">
         <input name="summary" class="form-control" size=60
                maxlength="{{ constants.SUMMARY_MAX_SIZE }}"
+               data-maxlength-msg="{{ _('Maximum length is {0}.', constants.SUMMARY_MAX_SIZE) }}"
                placeholder="{{ _('Short description in {language}', language=locale.Language(lang)) }}"
                value="{{ summary }}" lang="{{ lang }}" />
         </div>

www/%username/edit/username.spt

@@ -58,6 +58,7 @@ subhead = _("Username")
             <input name="username" class="form-control"
                    value="{{ _username }}" required
                    maxlength="{{ constants.USERNAME_MAX_SIZE }}"
+                   data-maxlength-msg="{{ _('Maximum length is {0}.', constants.USERNAME_MAX_SIZE) }}"
                    placeholder="{{ _('Username') }}"/>
             <p class="help-block">{{
                 _("Maximum length is {0}.", constants.USERNAME_MAX_SIZE) + " " +
@@ -77,6 +78,7 @@ subhead = _("Username")
             <input name="public_name" class="form-control"
                    value="{{ participant.public_name or '' }}"
                    maxlength="{{ constants.PUBLIC_NAME_MAX_SIZE }}"
+                   data-maxlength-msg="{{ _('Maximum length is {0}.', constants.PUBLIC_NAME_MAX_SIZE) }}"
                    placeholder="{{ _('Name') }}"/>
             <p class="help-block">{{
                 _("Maximum length is {0}.", constants.PUBLIC_NAME_MAX_SIZE) + " " +

www/about/teams.spt

@@ -95,7 +95,9 @@ title = _("Teams")
     <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
 
     <div class="form-group">
-    <input class="form-control" name="name" size=30 maxlength="{{ constants.USERNAME_MAX_SIZE }}"
+    <input class="form-control" name="name" size=30 
+           maxlength="{{ constants.USERNAME_MAX_SIZE }}"
+           data-maxlength-msg="{{ _('Maximum length is {0}.', constants.USERNAME_MAX_SIZE) }}"
            placeholder="{{ _('Name of the team') }}" />
     </div>
     <div class="form-group">

www/for/%name/edit.spt

@@ -98,7 +98,8 @@ title = _("{0} community settings", c.name)
             "Short description in {language}", language=locale.Language(lang)
         ) }}</label>
         <input class="form-control" name="subtitle" value="{{ subtitle or '' }}"
-               id="subtitle" maxlength="{{ c.subtitle_maxlength }}" lang="{{ lang }}" />
+               id="subtitle" maxlength="{{ c.subtitle_maxlength }}" lang="{{ lang }}" 
+               data-maxlength-msg="{{ _('Maximum length is {0}.', c.subtitle_maxlength) }}" />
         <p class="help-block">{{ _(
             "Maximum length is {0}.", c.subtitle_maxlength
         ) }}</p>
@@ -110,6 +111,7 @@ title = _("{0} community settings", c.name)
         ) }}</label>
         <textarea class="form-control vertical-resize" name="sidebar" rows=10
                   id="sidebar" maxlength="{{ c.sidebar_maxlength }}" lang="{{ lang }}"
+                  data-maxlength-msg="{{ _('Maximum length is {0}.', c.sidebar_maxlength) }}"
             >{{ sidebar or '' }}</textarea>
         <p class="help-block">
             {{ _("Maximum length is {0}.", c.sidebar_maxlength) }}

www/for/new.spt

@@ -43,7 +43,8 @@ title = _("Start a new community")
     <label>
         <span>{{ _("Name") }}</span>
         <input class="form-control" name="name" value="{{ name }}"
-               required maxlength="{{ name_maxlength }}" />
+               required maxlength="{{ name_maxlength }}"
+               data-maxlength-msg="{{ _('Maximum length is {0}.', name_maxlength ) }}" />
         <p class="help-block">{{ _(
             "Use underscores (_) instead of spaces. All unicode alphanumeric "
             "characters are allowed, as well as dots (.) and dashes (-)."