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) diff --git a/src/govuk/components/character-count/character-count.js b/src/govuk/components/character-count/character-count.js index b7e421294b..52c1887f96 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,10 +20,16 @@ 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 } + // 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) @@ -38,23 +47,16 @@ CharacterCount.prototype.init = function () { return } - // Generate and reference message - var boundCreateCountMessage = this.createCountMessage.bind(this) - this.countMessage = boundCreateCountMessage() + // 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 @@ -85,27 +87,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 @@ -132,7 +113,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)