From ceef53af4c755a4e28d64b9c204c78aac15eedf1 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Thu, 20 Jul 2023 07:40:57 +0100 Subject: [PATCH] Consolidate GOV.UK Frontend into application scripts We need to ensure that only `initAll()` on example pages suppresses auto focus --- lib/metalsmith.js | 9 ++------- src/javascripts/application-example.mjs | 13 +++++++++++++ src/javascripts/application.mjs | 5 +++++ .../{example.mjs => components/example-page.mjs} | 4 +++- src/javascripts/govuk-frontend.mjs | 12 ------------ src/styles/page-template/block-areas/index.njk | 2 +- src/styles/page-template/custom/index.njk | 2 +- src/styles/page-template/default/index.njk | 2 +- views/layouts/_generic.njk | 1 - views/layouts/layout-example-full-page-govuk.njk | 3 +-- views/layouts/layout-example-full-page.njk | 3 +-- views/layouts/layout-example.njk | 3 +-- 12 files changed, 29 insertions(+), 30 deletions(-) create mode 100644 src/javascripts/application-example.mjs rename src/javascripts/{example.mjs => components/example-page.mjs} (93%) delete mode 100644 src/javascripts/govuk-frontend.mjs diff --git a/lib/metalsmith.js b/lib/metalsmith.js index cfce2dc89b..32ab52fa19 100644 --- a/lib/metalsmith.js +++ b/lib/metalsmith.js @@ -163,14 +163,9 @@ module.exports = metalsmith done() }) - // build the entrypoint for application specific JavaScript + // build the entrypoints for application specific JavaScript .use(rollup('javascripts/application.mjs')) - - // build GOV.UK Frontend JavaScript - .use(rollup('javascripts/govuk-frontend.mjs')) - - // build the entrypoint for example specific JavaScript - .use(rollup('javascripts/example.mjs')) + .use(rollup('javascripts/application-example.mjs')) // add hash to files in production .use((files, metalsmith, done) => { diff --git a/src/javascripts/application-example.mjs b/src/javascripts/application-example.mjs new file mode 100644 index 0000000000..abcb0bdd98 --- /dev/null +++ b/src/javascripts/application-example.mjs @@ -0,0 +1,13 @@ +import { initAll } from 'govuk-frontend' + +import ExamplePage from './components/example-page.mjs' + +// Initialise GOV.UK Frontend +initAll({ + // Auto focusing the error summary and notification banner is not useful + // when used in examples, and causes the viewport to scroll + errorSummary: { disableAutoFocus: true }, + notificationBanner: { disableAutoFocus: true } +}) + +new ExamplePage(document).init() diff --git a/src/javascripts/application.mjs b/src/javascripts/application.mjs index 2e96adc6bd..078cf557e3 100644 --- a/src/javascripts/application.mjs +++ b/src/javascripts/application.mjs @@ -1,3 +1,5 @@ +import { initAll } from 'govuk-frontend' + import Analytics from './components/analytics.mjs' import BackToTop from './components/back-to-top.mjs' import CookieBanner from './components/cookie-banner.mjs' @@ -11,6 +13,9 @@ import OptionsTable from './components/options-table.mjs' import Search from './components/search.mjs' import AppTabs from './components/tabs.mjs' +// Initialise GOV.UK Frontend +initAll() + // Initialise cookie banner var $cookieBanner = document.querySelector('[data-module="govuk-cookie-banner"]') new CookieBanner($cookieBanner).init() diff --git a/src/javascripts/example.mjs b/src/javascripts/components/example-page.mjs similarity index 93% rename from src/javascripts/example.mjs rename to src/javascripts/components/example-page.mjs index 08e08eeb83..710ec3df74 100644 --- a/src/javascripts/example.mjs +++ b/src/javascripts/components/example-page.mjs @@ -1,6 +1,7 @@ function ExamplePage ($module) { this.$module = $module } + ExamplePage.prototype.init = function () { var $module = this.$module if (!$module) { @@ -9,6 +10,7 @@ ExamplePage.prototype.init = function () { var $form = $module.querySelector('form[action="/form-handler"]') this.preventFormSubmission($form) } + ExamplePage.prototype.preventFormSubmission = function ($form) { // we should only have one form per example if (!$form) { @@ -19,4 +21,4 @@ ExamplePage.prototype.preventFormSubmission = function ($form) { }) } -new ExamplePage(document).init() +export default ExamplePage diff --git a/src/javascripts/govuk-frontend.mjs b/src/javascripts/govuk-frontend.mjs deleted file mode 100644 index 82ae24143c..0000000000 --- a/src/javascripts/govuk-frontend.mjs +++ /dev/null @@ -1,12 +0,0 @@ -import { initAll } from 'govuk-frontend' - -initAll({ - // auto focusing the error summary and notification banner is not useful - // when used in examples, and causes the viewport to scroll - errorSummary: { - disableAutoFocus: true - }, - notificationBanner: { - disableAutoFocus: true - } -}) diff --git a/src/styles/page-template/block-areas/index.njk b/src/styles/page-template/block-areas/index.njk index fd1ff00288..c1639f62b5 100644 --- a/src/styles/page-template/block-areas/index.njk +++ b/src/styles/page-template/block-areas/index.njk @@ -81,7 +81,7 @@ stylesheets: block: bodyEnd {{ super() }} {# Since we’re not extending the Design System layout we need to add this manually #} - + {%- endblock %} diff --git a/src/styles/page-template/custom/index.njk b/src/styles/page-template/custom/index.njk index a09d28010c..81076eb2e7 100644 --- a/src/styles/page-template/custom/index.njk +++ b/src/styles/page-template/custom/index.njk @@ -149,6 +149,6 @@ ignoreInSitemap: true {% endblock %} {% block bodyEnd %} - + {% endblock %} diff --git a/src/styles/page-template/default/index.njk b/src/styles/page-template/default/index.njk index 3c1d368a88..ab54fc22f2 100644 --- a/src/styles/page-template/default/index.njk +++ b/src/styles/page-template/default/index.njk @@ -14,6 +14,6 @@ layout: false {% endblock %} {% block bodyEnd %} - + {% endblock %} diff --git a/views/layouts/_generic.njk b/views/layouts/_generic.njk index 8ee2364403..7420ad854d 100644 --- a/views/layouts/_generic.njk +++ b/views/layouts/_generic.njk @@ -37,6 +37,5 @@ {% block footer %}{% endblock %} {% block bodyEnd %} - {% endblock %} diff --git a/views/layouts/layout-example-full-page-govuk.njk b/views/layouts/layout-example-full-page-govuk.njk index d4f7db98b2..74bafa4534 100644 --- a/views/layouts/layout-example-full-page-govuk.njk +++ b/views/layouts/layout-example-full-page-govuk.njk @@ -22,7 +22,6 @@ {{ contents | safe }} {% endblock %} {% block bodyEnd %} - - + {% endblock %} diff --git a/views/layouts/layout-example-full-page.njk b/views/layouts/layout-example-full-page.njk index 6939e8df09..440cce9093 100644 --- a/views/layouts/layout-example-full-page.njk +++ b/views/layouts/layout-example-full-page.njk @@ -24,7 +24,6 @@ {{ contents | safe }} {% endblock %} {% block bodyEnd %} - - + {% endblock %} diff --git a/views/layouts/layout-example.njk b/views/layouts/layout-example.njk index 5676b7ebe6..440bbf6ada 100644 --- a/views/layouts/layout-example.njk +++ b/views/layouts/layout-example.njk @@ -35,8 +35,7 @@ {% endblock %} {% block bodyEnd %} - - + {% endblock %}