mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 19:03:30 -05:00
fbc4abf85d
Text messages have a maximum length, which we tell the users. We
shouldn’t expect people to count the characters in the message
themselves.
This commit borrows [the word counter from the Digital Marketplace
frontend toolkit](9d17690de5/toolkit/javascripts/word-counter.js)
and adapts it to count characters instead.
Things I’m still not sure about with this:
- what should it say when the message goes over the length of one text
message
- what’s the interaction with placeholders, which will change the length
of the message
This commit also adds a line to the pricing page which explains that
service name counts towards the length of the message.
40 lines
902 B
JavaScript
40 lines
902 B
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
Modules.CharacterCount = function() {
|
|
|
|
this.start = function(component) {
|
|
|
|
var getCharacterCount = () =>
|
|
($textarea.val()).length;
|
|
|
|
var getLengthOfOneMessage = () =>
|
|
160 - (serviceName + ': ').length;
|
|
|
|
var $component = $(component);
|
|
|
|
var serviceName = $component.data('service-name');
|
|
|
|
var $textarea = $('textarea', $component)
|
|
.eq(0)
|
|
.on('change keyup paste', () => $counter.html(`
|
|
${getCharacterCount()} of ${getLengthOfOneMessage()} characters
|
|
`));
|
|
|
|
$component
|
|
.append($counter = $(`
|
|
<p class="textbox-character-count"
|
|
role="status" aria-live="polite" aria-relevant="text"
|
|
id="word-count-${$textarea.prop('name')}"
|
|
/>
|
|
`));
|
|
|
|
$textarea
|
|
.trigger('change');
|
|
|
|
};
|
|
|
|
};
|
|
|
|
})(window.GOVUK.Modules);
|