From dd7202cfd256cd926bd000689f2d14cedf1e85b0 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Mon, 17 Oct 2022 14:59:50 +0100 Subject: [PATCH 1/4] Rebase Hide this Page component --- .../hide-this-page/hide-this-page.mjs | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/govuk/components/hide-this-page/hide-this-page.mjs b/src/govuk/components/hide-this-page/hide-this-page.mjs index 76127008ef..4599b14b4f 100644 --- a/src/govuk/components/hide-this-page/hide-this-page.mjs +++ b/src/govuk/components/hide-this-page/hide-this-page.mjs @@ -6,6 +6,7 @@ function HideThisPage ($module) { this.$button = $module.querySelector('.govuk-hide-this-page__button') this.$updateSpan = null this.$indicatorContainer = null + this.$overlay = null this.escCounter = 0 this.escTimerActive = false } @@ -65,7 +66,16 @@ HideThisPage.prototype.updateIndicator = function () { } HideThisPage.prototype.exitPage = function (e) { - // we don't do anything with this just yet + if (typeof e !== 'undefined' && e.target) { + e.preventDefault() + } + + // Blank the page + this.$overlay = document.createElement('div') + this.$overlay.className = 'govuk-hide-this-page-overlay' + document.body.appendChild(this.$overlay) + + window.location.href = this.firstButton.href } HideThisPage.prototype.handleEscKeypress = function (e) { @@ -100,6 +110,15 @@ HideThisPage.prototype.setEscTimer = function () { } } +HideThisPage.prototype.syncOverlayVisibility = function () { + // If there is no overlay, don't do anything + if (!this.$overlay) { return } + + // If there is, remove the element and references to it + this.$overlay.remove() + this.$overlay = null +} + HideThisPage.prototype.init = function () { this.buildIndicator() this.initUpdateSpan() @@ -110,6 +129,15 @@ HideThisPage.prototype.init = function () { document.addEventListener('keyup', this.handleEscKeypress.bind(this), true) document.body.dataset.govukFrontendHideThisPageEsc = true } + + // When the page is restored after navigating 'back' in some browsers the + // blank overlay remains present, rendering the page unusable. Here, we check + // to see if it's present on page (re)load, and remove it if so. + if ('onpageshow' in window) { + window.addEventListener('pageshow', this.syncOverlayVisibility.bind(this)) + } else { + window.addEventListener('DOMContentLoaded', this.syncOverlayVisibility.bind(this)) + } } export default HideThisPage From 2339c146fcb4a9be7481fa51f63e637b6da82c12 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Fri, 28 Oct 2022 15:06:35 +0100 Subject: [PATCH 2/4] First pass EtP ghosting spike --- src/govuk/components/hide-this-page/_index.scss | 10 ++++++++++ src/govuk/components/hide-this-page/hide-this-page.mjs | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/govuk/components/hide-this-page/_index.scss b/src/govuk/components/hide-this-page/_index.scss index 680137bc96..bbd03661cc 100644 --- a/src/govuk/components/hide-this-page/_index.scss +++ b/src/govuk/components/hide-this-page/_index.scss @@ -58,4 +58,14 @@ display: none; } } + + .govuk-hide-this-page-overlay { + position: fixed; + z-index: 9999; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: govuk-colour("white"); + } } diff --git a/src/govuk/components/hide-this-page/hide-this-page.mjs b/src/govuk/components/hide-this-page/hide-this-page.mjs index 4599b14b4f..c0674d8693 100644 --- a/src/govuk/components/hide-this-page/hide-this-page.mjs +++ b/src/govuk/components/hide-this-page/hide-this-page.mjs @@ -88,7 +88,7 @@ HideThisPage.prototype.handleEscKeypress = function (e) { if (this.escCounter >= 3) { this.escCounter = 0 this.$updateSpan.innerText = 'Exit this page activated' - window.location.href = this.$button.href + this.exitPage() } else { this.$updateSpan.innerText = 'Exit this Page key press ' + this.escCounter + ' of 3' } From ef2c9663383e69f5531e076f250769d7db53c6e1 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Mon, 28 Nov 2022 10:19:28 +0000 Subject: [PATCH 3/4] Rebase ghost page branch, fix merge weirdness --- src/govuk/components/hide-this-page/hide-this-page.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/hide-this-page/hide-this-page.mjs b/src/govuk/components/hide-this-page/hide-this-page.mjs index c0674d8693..4d2745a597 100644 --- a/src/govuk/components/hide-this-page/hide-this-page.mjs +++ b/src/govuk/components/hide-this-page/hide-this-page.mjs @@ -75,7 +75,7 @@ HideThisPage.prototype.exitPage = function (e) { this.$overlay.className = 'govuk-hide-this-page-overlay' document.body.appendChild(this.$overlay) - window.location.href = this.firstButton.href + window.location.href = this.$button.href } HideThisPage.prototype.handleEscKeypress = function (e) { @@ -129,7 +129,7 @@ HideThisPage.prototype.init = function () { document.addEventListener('keyup', this.handleEscKeypress.bind(this), true) document.body.dataset.govukFrontendHideThisPageEsc = true } - + // When the page is restored after navigating 'back' in some browsers the // blank overlay remains present, rendering the page unusable. Here, we check // to see if it's present on page (re)load, and remove it if so. From 41521f51bcb0efdafab7ac24cdb6e65b38e5b695 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Mon, 28 Nov 2022 10:21:39 +0000 Subject: [PATCH 4/4] Rename overlay class --- src/govuk/components/hide-this-page/_index.scss | 2 +- src/govuk/components/hide-this-page/hide-this-page.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/hide-this-page/_index.scss b/src/govuk/components/hide-this-page/_index.scss index bbd03661cc..97b134f25f 100644 --- a/src/govuk/components/hide-this-page/_index.scss +++ b/src/govuk/components/hide-this-page/_index.scss @@ -59,7 +59,7 @@ } } - .govuk-hide-this-page-overlay { + .govuk-hide-this-page__overlay { position: fixed; z-index: 9999; top: 0; diff --git a/src/govuk/components/hide-this-page/hide-this-page.mjs b/src/govuk/components/hide-this-page/hide-this-page.mjs index 4d2745a597..561293a0c3 100644 --- a/src/govuk/components/hide-this-page/hide-this-page.mjs +++ b/src/govuk/components/hide-this-page/hide-this-page.mjs @@ -72,7 +72,7 @@ HideThisPage.prototype.exitPage = function (e) { // Blank the page this.$overlay = document.createElement('div') - this.$overlay.className = 'govuk-hide-this-page-overlay' + this.$overlay.className = 'govuk-hide-this-page__overlay' document.body.appendChild(this.$overlay) window.location.href = this.$button.href