From 6e3af3ebfb8b22bc1712df3732cf5010066052e3 Mon Sep 17 00:00:00 2001 From: Dan Henri Date: Sun, 10 Jul 2022 21:47:26 +0900 Subject: [PATCH 1/5] add character count for inputs and textareas --- js/10-base.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/js/10-base.js b/js/10-base.js index b39fa9a81f..afee11f0e7 100644 --- a/js/10-base.js +++ b/js/10-base.js @@ -120,6 +120,31 @@ Liberapay.init = function() { $('button[data-action="reload"]').on('click', function() { location.reload(); }); + + // Create dynamic hint based on remaining length + $('input[maxlength], textarea[maxlength]').on('focus input', function() { + if (!maxLength) { + var maxLength = $(this).attr('maxlength'); + $(this).data('maxLength', maxLength); + $(this).removeAttr('maxLength'); + } + + var maxLength = $(this).data('maxLength'); + var remainingLength = maxLength - $(this).val().length; + var helpBlock = $(this).siblings('.help-block'); + + if ($(this).val().length) { + helpBlock.text(function (index, value) { + return value.slice(value.indexOf('.') + 1); + }); + helpBlock.prepend(remainingLength + ' characters remaing.'); + } else { + helpBlock.text(function (index, value) { + return value.slice(value.indexOf('.') + 1); + }); + helpBlock.prepend('Maximum length is ' + maxLength + '.'); + } + }); }; $(function(){ Liberapay.init(); }); From 0275404fe756d9b53c65ce77af6245e29e2305e4 Mon Sep 17 00:00:00 2001 From: Dan Henri Date: Thu, 11 Aug 2022 19:58:25 +1000 Subject: [PATCH 2/5] reformatted code and added validation system --- js/10-base.js | 55 ++++++++++++++++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/js/10-base.js b/js/10-base.js index afee11f0e7..36ac8cf886 100644 --- a/js/10-base.js +++ b/js/10-base.js @@ -121,28 +121,43 @@ Liberapay.init = function() { location.reload(); }); - // Create dynamic hint based on remaining length - $('input[maxlength], textarea[maxlength]').on('focus input', function() { - if (!maxLength) { - var maxLength = $(this).attr('maxlength'); - $(this).data('maxLength', maxLength); - $(this).removeAttr('maxLength'); - } - - var maxLength = $(this).data('maxLength'); - var remainingLength = maxLength - $(this).val().length; - var helpBlock = $(this).siblings('.help-block'); + // Selector for inputs and text areas with max lengths + var $maxLengthTextAreas = $('input[maxlength], textarea[maxlength]'); + + // Add remaining length indicator on page load + $maxLengthTextAreas.each(function() { + var $this = $(this) + var maxLength = $this.attr('maxlength'); + $this.data('maxLength', maxLength); + $this.removeAttr('maxLength'); + + maxLength = $this.data('maxLength'); + var remainingLength = maxLength - $this.val().length; + $this.after("" + remainingLength + ""); + }); - if ($(this).val().length) { - helpBlock.text(function (index, value) { - return value.slice(value.indexOf('.') + 1); - }); - helpBlock.prepend(remainingLength + ' characters remaing.'); + // Style remaining length indicator + $('.remaining-length').each(function() { + $(this).css({ + 'float': 'right', + 'margin-right': '5px' + }); + }) + + // Update remaining length dynamically + $maxLengthTextAreas.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); + + var constraintPattern = '^[\\s\\S]{1,'+ maxLength +'}$'; + var constraint = new RegExp(constraintPattern, ''); + + if (constraint.test($this.val())) { + $this.get(0).setCustomValidity(''); } else { - helpBlock.text(function (index, value) { - return value.slice(value.indexOf('.') + 1); - }); - helpBlock.prepend('Maximum length is ' + maxLength + '.'); + $this.get(0).setCustomValidity('too many characters'); } }); }; From 054438b5c2e99b81d03e3d9f0de8ea37a6a8a674 Mon Sep 17 00:00:00 2001 From: Dan Henri Date: Sat, 13 Aug 2022 20:29:20 +1000 Subject: [PATCH 3/5] combine code into single block --- js/10-base.js | 48 ++++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/js/10-base.js b/js/10-base.js index 36ac8cf886..abfc96a374 100644 --- a/js/10-base.js +++ b/js/10-base.js @@ -122,10 +122,10 @@ Liberapay.init = function() { }); // Selector for inputs and text areas with max lengths - var $maxLengthTextAreas = $('input[maxlength], textarea[maxlength]'); + // var $maxLengthTextAreas = $('input[maxlength], textarea[maxlength]'); // Add remaining length indicator on page load - $maxLengthTextAreas.each(function() { + $('input[maxlength], textarea[maxlength]').each(function() { var $this = $(this) var maxLength = $this.attr('maxlength'); $this.data('maxLength', maxLength); @@ -134,31 +134,31 @@ Liberapay.init = function() { 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' + // Style remaining length indicator + $('.remaining-length').each(function() { + $(this).css({ + 'float': 'right', + 'margin-right': '5px' + }); }); - }) - - // Update remaining length dynamically - $maxLengthTextAreas.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); - var constraintPattern = '^[\\s\\S]{1,'+ maxLength +'}$'; - var constraint = new RegExp(constraintPattern, ''); - - if (constraint.test($this.val())) { - $this.get(0).setCustomValidity(''); - } else { - $this.get(0).setCustomValidity('too many characters'); - } + // 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); + + var constraintPattern = '^[\\s\\S]{1,'+ maxLength +'}$'; + var constraint = new RegExp(constraintPattern, ''); + + if (constraint.test($this.val())) { + $this.get(0).setCustomValidity(''); + } else { + $this.get(0).setCustomValidity('too many characters'); + } + }); }); }; From 9a10111cacb30563539400f90cdb5c1e8e47b390 Mon Sep 17 00:00:00 2001 From: Dan Henri Date: Sat, 13 Aug 2022 20:33:18 +1000 Subject: [PATCH 4/5] simplify constraint --- js/10-base.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/js/10-base.js b/js/10-base.js index abfc96a374..72351a445c 100644 --- a/js/10-base.js +++ b/js/10-base.js @@ -120,9 +120,6 @@ Liberapay.init = function() { $('button[data-action="reload"]').on('click', function() { location.reload(); }); - - // Selector for inputs and text areas with max lengths - // var $maxLengthTextAreas = $('input[maxlength], textarea[maxlength]'); // Add remaining length indicator on page load $('input[maxlength], textarea[maxlength]').each(function() { @@ -149,14 +146,11 @@ Liberapay.init = function() { var maxLength = $this.data('maxLength'); var remainingLength = maxLength - $this.val().length; $this.siblings("span[class='remaining-length']").first().text(remainingLength); - - var constraintPattern = '^[\\s\\S]{1,'+ maxLength +'}$'; - var constraint = new RegExp(constraintPattern, ''); - if (constraint.test($this.val())) { - $this.get(0).setCustomValidity(''); - } else { + if (remainingLength < 0) { $this.get(0).setCustomValidity('too many characters'); + } else { + $this.get(0).setCustomValidity(''); } }); }); From b35349d20b40c9b275d5ace01c57b848d70c3044 Mon Sep 17 00:00:00 2001 From: Dan Henri Date: Tue, 16 Aug 2022 21:00:41 +1000 Subject: [PATCH 5/5] add error message to html --- js/10-base.js | 12 ++++++------ www/%username/edit/statement.spt | 1 + www/%username/edit/username.spt | 2 ++ www/about/teams.spt | 4 +++- www/for/%name/edit.spt | 4 +++- www/for/new.spt | 3 ++- 6 files changed, 17 insertions(+), 9 deletions(-) diff --git a/js/10-base.js b/js/10-base.js index 72351a445c..16c8bd0709 100644 --- a/js/10-base.js +++ b/js/10-base.js @@ -125,10 +125,10 @@ Liberapay.init = function() { $('input[maxlength], textarea[maxlength]').each(function() { var $this = $(this) var maxLength = $this.attr('maxlength'); - $this.data('maxLength', maxLength); - $this.removeAttr('maxLength'); - - maxLength = $this.data('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 + ""); @@ -143,12 +143,12 @@ Liberapay.init = function() { // Update remaining length dynamically $this.on('focus input', function() { var $this = $(this) - var maxLength = $this.data('maxLength'); + 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('too many characters'); + $this.get(0).setCustomValidity(dataMaxlengthMsg); } else { $this.get(0).setCustomValidity(''); } 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 (-)."