From 978b8681a164ade968430ea9143790cc29a9c3eb Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Mon, 7 Oct 2019 12:41:50 +0100 Subject: [PATCH 1/4] Make count message required MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The count message always exists (since 7b534bf). This PR makes the markup for it required, instead of giving the option to add it with JS since the user needs to be informed of the limit in the number of characters they can type in even if JS doesn’t run. The count message DOM element is now defined at the top of the module with the other required DOM elements. We check whether the textarea is present before using its id to find the count message - the check prevents a DOM search error for `$textarea.id` if the script is run without component markup being present present on the page. --- src/govuk/components/character-count/character-count.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/character-count/character-count.js b/src/govuk/components/character-count/character-count.js index b7e421294b..df11a1ea21 100644 --- a/src/govuk/components/character-count/character-count.js +++ b/src/govuk/components/character-count/character-count.js @@ -5,6 +5,9 @@ import '../../vendor/polyfills/Element/prototype/classList' function CharacterCount ($module) { this.$module = $module this.$textarea = $module.querySelector('.govuk-js-character-count') + if (this.$textarea) { + this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]') + } } CharacterCount.prototype.defaults = { @@ -17,7 +20,9 @@ CharacterCount.prototype.init = function () { // Check for module var $module = this.$module var $textarea = this.$textarea - if (!$textarea) { + var $countMessage = this.$countMessage + + if (!$textarea || !$countMessage) { return } @@ -132,7 +137,7 @@ CharacterCount.prototype.checkIfValueChanged = function () { CharacterCount.prototype.updateCountMessage = function () { var countElement = this.$textarea var options = this.options - var countMessage = this.countMessage + var countMessage = this.$countMessage // Determine the remaining number of characters/words var currentLength = this.count(countElement.value) From 2f0dae40baa02f05c04a1c42a79b47ab5cfb4a6e Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Mon, 7 Oct 2019 13:00:16 +0100 Subject: [PATCH 2/4] Remove redundant code, move code for moving element in DOM MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This removes the branching logic and the code that added the count message markup dynamically in `createCountMessage()`. It’s worth nothing that the code inside the block hasn’t been executed since 7b534bf. As using the character count with the count message markup removed has never been part of the public API, removing this functionality is not considered a breaking change. The original code for checking/creating the count message markup [moves it in the DOM](/src/govuk/components/character-count/character-count.js@f481811#L104) to be inside `govuk-form-group`. This was probably useful when the message markup was created dynamically. This PR retains the bit of code that moves the element for backwards compatibility. It’s important that the count message markup is inside `govuk-form-group` so that it gets wrapped within the error block. However we should look to remove moving it with JS and instead change the component markup so that the count message markup is inside `govuk-form-group`. This would be a breaking change so shall leave it for now and create an issue. --- .../character-count/character-count.js | 28 +++---------------- 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/src/govuk/components/character-count/character-count.js b/src/govuk/components/character-count/character-count.js index df11a1ea21..8d62ca2954 100644 --- a/src/govuk/components/character-count/character-count.js +++ b/src/govuk/components/character-count/character-count.js @@ -26,6 +26,10 @@ CharacterCount.prototype.init = function () { return } + // We move count message right after the field + // Kept for backwards compatibility + $textarea.insertAdjacentElement('afterend', $countMessage) + // Read options set using dataset ('data-' values) this.options = this.getDataset($module) @@ -43,9 +47,6 @@ CharacterCount.prototype.init = function () { return } - // Generate and reference message - var boundCreateCountMessage = this.createCountMessage.bind(this) - this.countMessage = boundCreateCountMessage() // If there's a maximum length defined and the count message exists if (this.countMessage) { @@ -90,27 +91,6 @@ CharacterCount.prototype.count = function (text) { return length } -// Generate count message and bind it to the input -// returns reference to the generated element -CharacterCount.prototype.createCountMessage = function () { - var countElement = this.$textarea - var elementId = countElement.id - // Check for existing info count message - var countMessage = document.getElementById(elementId + '-info') - // If there is no existing info count message we add one right after the field - if (elementId && !countMessage) { - countElement.insertAdjacentHTML('afterend', '') - this.describedBy = countElement.getAttribute('aria-describedby') - this.describedByInfo = this.describedBy + ' ' + elementId + '-info' - countElement.setAttribute('aria-describedby', this.describedByInfo) - countMessage = document.getElementById(elementId + '-info') - } else { - // If there is an existing info count message we move it right after the field - countElement.insertAdjacentElement('afterend', countMessage) - } - return countMessage -} - // Bind input propertychange to the elements and update based on the change CharacterCount.prototype.bindChangeEvents = function () { var $textarea = this.$textarea From 587b6271700f73bfb9030d6c9e0ac0b81aaecc40 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 26 Sep 2019 12:09:12 +0100 Subject: [PATCH 3/4] Remove unnecessary check for count message Count message markup is now required so this check is not necessary. --- .../character-count/character-count.js | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/govuk/components/character-count/character-count.js b/src/govuk/components/character-count/character-count.js index 8d62ca2954..52c1887f96 100644 --- a/src/govuk/components/character-count/character-count.js +++ b/src/govuk/components/character-count/character-count.js @@ -47,20 +47,16 @@ CharacterCount.prototype.init = function () { return } + // Remove hard limit if set + $module.removeAttribute('maxlength') - // If there's a maximum length defined and the count message exists - if (this.countMessage) { - // Remove hard limit if set - $module.removeAttribute('maxlength') + // Bind event changes to the textarea + var boundChangeEvents = this.bindChangeEvents.bind(this) + boundChangeEvents() - // Bind event changes to the textarea - var boundChangeEvents = this.bindChangeEvents.bind(this) - boundChangeEvents() - - // Update count message - var boundUpdateCountMessage = this.updateCountMessage.bind(this) - boundUpdateCountMessage() - } + // Update count message + var boundUpdateCountMessage = this.updateCountMessage.bind(this) + boundUpdateCountMessage() } // Read data attributes From eabd70b3a5b5d26071a79c559add771175b3e9d5 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 2 Oct 2019 13:05:26 +0100 Subject: [PATCH 4/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b395ce149..d924d23835 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ Align ‘Warning text’ icon with first line of the content fixing [#1352](http - [Pull request #1587: Fix height and alignment issue within header in Chrome 76+](https://github.com/alphagov/govuk-frontend/pull/1587) - [Pull request #1589: Remove role="button" from header button](https://github.com/alphagov/govuk-frontend/pull/1589) - [Pull request #1595: Do not output conditionally revealed content for radios or checkboxes when it's empty](https://github.com/alphagov/govuk-frontend/pull/1595) +- [Pull request #1594: Refactor handling of count message in character count Javascript](https://github.com/alphagov/govuk-frontend/pull/1594) ## 3.2.0 (Feature release)