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")
{{ _("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")
{{ _( "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")