Skip to content

Commit e4012ed

Browse files
davidjamesstonedavidjamesstone
authored
Clientside JS (#94)
* Remove semicolons * Remove configureEnginePlugin from exports * Split up application.js * Rename to preview-close-link * Remove file-upload from webpack * Export an init function from js files * Remove file upload from package.json * Remove inline script from file-upload * Update package-lock.json * Add shared client js file
1 parent 2742d3c commit e4012ed

11 files changed

Lines changed: 126 additions & 823 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 714 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,9 @@
1414
"import": "./.server/server/plugins/engine/index.js",
1515
"default": "./.server/server/plugins/engine/index.js"
1616
},
17-
"./application.js": "./.server/client/javascripts/application.js",
18-
"./application.min.js": "./.public/javascripts/application.min.js",
19-
"./application.min.js.map": "./.public/javascripts/application.min.js.map",
20-
"./file-upload.js": "./.server/client/javascripts/file-upload.js",
21-
"./file-upload.min.js": "./.public/javascripts/file-upload.min.js",
22-
"./file-upload.min.js.map": "./.public/javascripts/file-upload.min.js.map",
23-
"./application.min.css": "./.public/stylesheets/application.min.css",
17+
"./shared.js": "./.server/client/javascripts/shared.js",
18+
"./shared.min.js": "./.public/javascripts/shared.min.js",
19+
"./shared.min.js.map": "./.public/javascripts/shared.min.js.map",
2420
"./file-form-service.js": "./.server/server/utils/file-form-service.js",
2521
"./controllers/*": "./.server/server/plugins/engine/pageControllers/*",
2622
"./components": "./.server/server/plugins/engine/components/index.js",

‎src/client/javascripts/application.js‎

Lines changed: 2 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,3 @@
1-
import {
2-
Button,
3-
CharacterCount,
4-
Checkboxes,
5-
ErrorSummary,
6-
Header,
7-
NotificationBanner,
8-
Radios,
9-
SkipLink,
10-
createAll
11-
} from 'govuk-frontend'
1+
import { initAll } from '~/src/client/javascripts/shared.js'
122

13-
createAll(Button)
14-
createAll(CharacterCount)
15-
createAll(Checkboxes)
16-
createAll(ErrorSummary)
17-
createAll(Header)
18-
createAll(NotificationBanner)
19-
createAll(Radios)
20-
createAll(SkipLink)
21-
22-
// Show preview close link via `rel="opener"`
23-
if (window.opener) {
24-
const $closeLink = document.querySelector('.js-preview-banner-close')
25-
26-
$closeLink?.removeAttribute('hidden')
27-
$closeLink?.addEventListener('click', (event) => {
28-
event.preventDefault()
29-
window.close()
30-
})
31-
}
32-
33-
/**
34-
* Initialise autocomplete
35-
* @param {HTMLSelectElement | null} $select
36-
* @param {(config: object) => void} init
37-
*/
38-
function initAutocomplete($select, init) {
39-
if (!$select) {
40-
return
41-
}
42-
43-
const config = {
44-
id: $select.id,
45-
selectElement: $select
46-
}
47-
48-
init(config)
49-
50-
/** @type {HTMLInputElement | null} */
51-
const $input = document.querySelector(`#${config.id}`)
52-
53-
// Allowed values for input
54-
const inputValues = [...$select.options].map((option) => option.text)
55-
56-
// Reset select when input value is not allowed
57-
$input?.addEventListener('blur', () => {
58-
if (!$input.value || !inputValues.includes($input.value)) {
59-
$select.value = ''
60-
}
61-
})
62-
}
63-
64-
// Find all autocompletes
65-
const $autocompletes = document.querySelectorAll(
66-
`[data-module="govuk-accessible-autocomplete"]`
67-
)
68-
69-
// Lazy load autocomplete component
70-
if ($autocompletes.length) {
71-
// @ts-expect-error -- No types available
72-
import('accessible-autocomplete')
73-
.then((component) => {
74-
const { default: accessibleAutocomplete } = component
75-
76-
// Initialise each autocomplete
77-
$autocompletes.forEach(($module) =>
78-
initAutocomplete(
79-
$module.querySelector('select'),
80-
accessibleAutocomplete.enhanceSelectElement
81-
)
82-
)
83-
})
84-
85-
// eslint-disable-next-line no-console
86-
.catch(console.error)
87-
}
3+
initAll()

‎src/client/javascripts/autocomplete.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* Initialise autocomplete
3+
* @param {HTMLSelectElement | null} $select
4+
* @param {(config: object) => void} init
5+
*/
6+
function initAutocomplete($select, init) {
7+
if (!$select) {
8+
return
9+
}
10+
11+
const config = {
12+
id: $select.id,
13+
selectElement: $select
14+
}
15+
16+
init(config)
17+
18+
/** @type {HTMLInputElement | null} */
19+
const $input = document.querySelector(`#${config.id}`)
20+
21+
// Allowed values for input
22+
const inputValues = [...$select.options].map((option) => option.text)
23+
24+
// Reset select when input value is not allowed
25+
$input?.addEventListener('blur', () => {
26+
if (!$input.value || !inputValues.includes($input.value)) {
27+
$select.value = ''
28+
}
29+
})
30+
}
31+
32+
export function initAllAutocomplete() {
33+
// Find all autocompletes
34+
const $autocompletes = document.querySelectorAll(
35+
`[data-module="govuk-accessible-autocomplete"]`
36+
)
37+
38+
// Lazy load autocomplete component
39+
if ($autocompletes.length) {
40+
// @ts-expect-error -- No types available
41+
import('accessible-autocomplete')
42+
.then((component) => {
43+
const { default: accessibleAutocomplete } = component
44+
45+
// Initialise each autocomplete
46+
$autocompletes.forEach(($module) =>
47+
initAutocomplete(
48+
$module.querySelector('select'),
49+
accessibleAutocomplete.enhanceSelectElement
50+
)
51+
)
52+
})
53+
54+
// eslint-disable-next-line no-console
55+
.catch(console.error)
56+
}
57+
}

‎src/client/javascripts/file-upload.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -369,7 +369,7 @@ function handleAjaxFormSubmission(
369369
return true
370370
}
371371

372-
export function initFileUpload() {
372+
function initUpload() {
373373
const form = document.querySelector('form:has(input[type="file"])')
374374
/** @type {HTMLInputElement | null} */
375375
const fileInput = form ? form.querySelector('input[type="file"]') : null
@@ -440,3 +440,11 @@ export function initFileUpload() {
440440
)
441441
})
442442
}
443+
444+
export function initFileUpload() {
445+
if (document.readyState === 'loading') {
446+
document.addEventListener('DOMContentLoaded', initUpload)
447+
} else {
448+
initUpload()
449+
}
450+
}

‎src/client/javascripts/govuk.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {
2+
Button,
3+
CharacterCount,
4+
Checkboxes,
5+
ErrorSummary,
6+
Header,
7+
NotificationBanner,
8+
Radios,
9+
SkipLink,
10+
createAll
11+
} from 'govuk-frontend'
12+
13+
export function initAllGovuk() {
14+
createAll(Button)
15+
createAll(CharacterCount)
16+
createAll(Checkboxes)
17+
createAll(ErrorSummary)
18+
createAll(Header)
19+
createAll(NotificationBanner)
20+
createAll(Radios)
21+
createAll(SkipLink)
22+
}

‎src/client/javascripts/preview-close-link.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export function initPreviewCloseLink() {
2+
// Show preview close link via `rel="opener"`
3+
if (window.opener) {
4+
const $closeLink = document.querySelector('.js-preview-banner-close')
5+
6+
$closeLink?.removeAttribute('hidden')
7+
$closeLink?.addEventListener('click', (event) => {
8+
event.preventDefault()
9+
window.close()
10+
})
11+
}
12+
}

‎src/client/javascripts/shared.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { initAllAutocomplete as initAllAutocompleteImp } from '~/src/client/javascripts/autocomplete.js'
2+
import { initFileUpload as initFileUploadImp } from '~/src/client/javascripts/file-upload.js'
3+
import { initAllGovuk as initAllGovukImp } from '~/src/client/javascripts/govuk.js'
4+
import { initPreviewCloseLink as initPreviewCloseLinkImp } from '~/src/client/javascripts/preview-close-link.js'
5+
6+
export const initAllGovuk = initAllGovukImp
7+
export const initAllAutocomplete = initAllAutocompleteImp
8+
export const initFileUpload = initFileUploadImp
9+
export const initPreviewCloseLink = initPreviewCloseLinkImp
10+
11+
export function initAll() {
12+
initAllGovuk()
13+
initAllAutocomplete()
14+
initFileUpload()
15+
initPreviewCloseLink()
16+
}

‎src/server/plugins/engine/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
import * as filters from '~/src/server/plugins/nunjucks/filters/index.js'
1212

1313
export { getPageHref } from '~/src/server/plugins/engine/helpers.js'
14-
export { configureEnginePlugin } from '~/src/server/plugins/engine/configureEnginePlugin.js'
1514
export { context } from '~/src/server/plugins/nunjucks/context.js'
1615

1716
const globals = {

‎src/server/plugins/engine/views/file-upload.html‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,4 @@
2929
{{ super() }}
3030

3131
<div class="govuk-summary-list-container"></div>
32-
33-
{% endblock %}
34-
35-
{% block bodyEnd %}
36-
{{ super() }}
37-
<script type="module" nonce="{{ cspNonce }}">
38-
import { initFileUpload } from '{{ getDxtAssetPath("file-upload.js") }}';
39-
if (document.readyState === 'loading') {
40-
document.addEventListener('DOMContentLoaded', initFileUpload);
41-
} else {
42-
initFileUpload();
43-
}
44-
</script>
4532
{% endblock %}

0 commit comments

Comments
 (0)