-
Notifications
You must be signed in to change notification settings - Fork 14
/
input-confirm.js
47 lines (39 loc) · 1.64 KB
/
input-confirm.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
'use strict'
const { slugify, removeIndefiniteArticles } = require('@govuk-pay/pay-js-commons').nunjucksFilters
// Polyfills introduced as a temporary fix to make Smoketests pass. See PP-3489
require('./polyfills')
module.exports = () => {
const inputs = Array.prototype.slice.call(document.querySelectorAll('[data-confirmation]'))
inputs.forEach(input => {
input.addEventListener('input', confirmInput, false)
if (input.dataset.confirmationDisplay === 'onload') {
confirmInput({target: input})
}
})
function confirmInput (e) {
const input = e.target
// using slugify and also stripping out the (in)definite article (the/a/an)
let value = input.dataset.confirmationFilter === 'slugify' ? slugify(removeIndefiniteArticles(input.value)) : input.value
const confirmationId = `${input.id}-confirmation`
const confirmationPrepend = input.dataset.confirmationPrepend || ''
let confirmation = document.getElementById(confirmationId)
if (!confirmation) {
confirmation = document.createElement('div')
confirmation.innerHTML = `
<div id="${confirmationId}" class="govuk-inset-text input-confirm">
<h3 class="govuk-heading-s govuk-!-margin-bottom-2">${input.dataset.confirmationTitle}</h3>
<p class="govuk-body">
${input.dataset.confirmationLabel}<span class="input-confirmation"></span>
</p>
</div>`
input.closest('.govuk-form-group').after(confirmation)
}
if (value === '') {
confirmation.remove()
} else {
document
.querySelector(`#${confirmationId} .input-confirmation`)
.innerText = confirmationPrepend + value
}
}
}