diff --git a/js/10-base.js b/js/10-base.js index b39fa9a81f..16c8bd0709 100644 --- a/js/10-base.js +++ b/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("" + remainingLength + ""); + + // 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(); }); diff --git a/www/%username/edit/statement.spt b/www/%username/edit/statement.spt index 7ebc071c8f..0df0f5fbfd 100644 --- a/www/%username/edit/statement.spt +++ b/www/%username/edit/statement.spt @@ -148,6 +148,7 @@ subhead = _("Descriptions")
diff --git a/www/%username/edit/username.spt b/www/%username/edit/username.spt index b9c8b26727..ce89e977a9 100644 --- a/www/%username/edit/username.spt +++ b/www/%username/edit/username.spt @@ -58,6 +58,7 @@ subhead = _("Username")

{{ _("Maximum length is {0}.", constants.USERNAME_MAX_SIZE) + " " + @@ -77,6 +78,7 @@ subhead = _("Username")

{{ _("Maximum length is {0}.", constants.PUBLIC_NAME_MAX_SIZE) + " " + diff --git a/www/about/teams.spt b/www/about/teams.spt index 7a6da769b7..fa549fb150 100644 --- a/www/about/teams.spt +++ b/www/about/teams.spt @@ -95,7 +95,9 @@ title = _("Teams")

-
diff --git a/www/for/%name/edit.spt b/www/for/%name/edit.spt index 7bb83a7c36..dd57557a65 100644 --- a/www/for/%name/edit.spt +++ b/www/for/%name/edit.spt @@ -98,7 +98,8 @@ title = _("{0} community settings", c.name) "Short description in {language}", language=locale.Language(lang) ) }} + id="subtitle" maxlength="{{ c.subtitle_maxlength }}" lang="{{ lang }}" + data-maxlength-msg="{{ _('Maximum length is {0}.', c.subtitle_maxlength) }}" />

{{ _( "Maximum length is {0}.", c.subtitle_maxlength ) }}

@@ -110,6 +111,7 @@ title = _("{0} community settings", c.name) ) }}

{{ _("Maximum length is {0}.", c.sidebar_maxlength) }} diff --git a/www/for/new.spt b/www/for/new.spt index f144229fd6..8426d9d291 100644 --- a/www/for/new.spt +++ b/www/for/new.spt @@ -43,7 +43,8 @@ title = _("Start a new community")

{{ _( "Use underscores (_) instead of spaces. All unicode alphanumeric " "characters are allowed, as well as dots (.) and dashes (-)."