govuk_publishing_components 24.13.1 → 24.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 15de2a7069f2588081fe6c47aa3a00d2065ef3ea1b130eff26e734d87d2fcffd
-  data.tar.gz: 9484988fa1937a271d6b1ec1ef8eb1abb269f09210e381a10fd849845b3119af
+  metadata.gz: 83c35c9f2649e67c8a1afb3c98c6c6017eecfd762eae1d96c1cd695d03907af3
+  data.tar.gz: 7a2cab9a09d767a5b60d2b725b3dbb4219acd03ff06fc64d3410be04e8902b28
 SHA512:
-  metadata.gz: 4a567edf053fbee4026e12f16b2a524c12dece336511aa52f7e297c3ca4509bb4112241367bca17fa65957063b9e3b4495a12bd9a8be13f168807decedd136bb
-  data.tar.gz: 804e96f0141c830fdb51dd1f2db135affdbf90f98c511b26a46addf2735947d04732ac5773af6aa326ca88d14a02d91f289cfdb43e922d969d736dd67289912d
+  metadata.gz: b4f467944c4c94230b55ab05a1fb75b26dcc561bccd253a67f61176ad5240f914011dfe602097a544b43886b7cf4f6cfd0821c8828bfc145489acfb752b696b7
+  data.tar.gz: c7113db1463f8a20ffd3071851280fb26e4b0ee1874fea5a2300aecb283e817cabdb75762f34aed367569f23cc7fafbba4f5f9ef1b6bc5b495e9397df44eca01

data/app/assets/javascripts/govuk_publishing_components/analytics/analytics.js

@@ -41,7 +41,9 @@
     // we ignore the possibility of there being campaign variables in the
     // anchor because we wouldn't know how to detect and parse them if they
     // were present
-    return this.pii.stripPIIFromString(location.href.substring(location.origin.length).split('#')[0])
+    // IE can't access window.location.origin, so we have to do this slightly complex thing
+    var root = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '')
+    return this.pii.stripPIIFromString(location.href.substring(root.length).split('#')[0])
   }
 
   Analytics.prototype.trackPageview = function (path, title, options) {

data/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js

@@ -33,6 +33,8 @@
 
     if (window.devicePixelRatio) {
       customDimensions.dimension11 = window.devicePixelRatio
+    } else {
+      customDimensions.dimension11 = window.screen.deviceXDPI / window.screen.logicalXDPI
     }
 
     return customDimensions

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -7,15 +7,12 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function GemAccordion () { }
-
-  GemAccordion.prototype.start = function ($module) {
-    this.$module = $module[0]
+  function GemAccordion ($module) {
+    this.$module = $module
     this.sectionClass = 'gem-c-accordion__section'
     this.moduleId = this.$module.getAttribute('id')
     this.sections = this.$module.querySelectorAll('.' + this.sectionClass)
     this.openAllButton = ''
-    this.browserSupportsSessionStorage = helper.checkForSessionStorage()
     this.controlsClass = 'gem-c-accordion__controls'
     this.openAllClass = 'gem-c-accordion__open-all'
     this.openAllTextClass = 'gem-c-accordion__open-all-text'
@@ -39,6 +36,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text')
     this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text')
     this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden')
+  }
+
+  GemAccordion.prototype.init = function () {
+    this.browserSupportsSessionStorage = helper.checkForSessionStorage()
 
     // Indicate that JavaScript has worked
     this.$module.classList.add('gem-c-accordion--active')

data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js

@@ -6,14 +6,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
 window.GOVUK.Modules.Checkboxes = window.GOVUKFrontend;
 
 (function (Modules) {
-  function GovukCheckboxes () { }
-
-  GovukCheckboxes.prototype.start = function ($module) {
-    this.$module = $module[0]
+  function GovukCheckboxes ($module) {
+    this.$module = $module
     this.$checkboxes = this.$module.querySelectorAll('input[type=checkbox]')
     this.$nestedCheckboxes = this.$module.querySelectorAll('[data-nested=true] input[type=checkbox]')
     this.$exclusiveCheckboxes = this.$module.querySelectorAll('[data-exclusive=true] input[type=checkbox]')
+  }
 
+  GovukCheckboxes.prototype.init = function () {
     this.applyAriaControlsAttributes(this.$module)
 
     for (var i = 0; i < this.$checkboxes.length; i++) {
@@ -33,7 +33,9 @@ window.GOVUK.Modules.Checkboxes = window.GOVUKFrontend;
     if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
       // Where checkboxes are manipulated externally in finders, `suppressAnalytics`
       // is passed to prevent duplicate GA events.
-      if (!event.detail || (event.detail && event.detail.suppressAnalytics !== true)) {
+      // use Oliver Steele's Nested Object Access Pattern https://hackernoon.com/accessing-nested-objects-in-javascript-f02f1bd6387f
+      var allowAnalytics = ((event || {}).detail || {}).suppressAnalytics !== true
+      if (allowAnalytics) {
         var $checkbox = event.target
         var category = $checkbox.getAttribute('data-track-category')
         if (category) {
@@ -100,11 +102,11 @@ window.GOVUK.Modules.Checkboxes = window.GOVUKFrontend;
     var $exclusiveOption = $checkboxes.querySelector('input[type=checkbox][data-exclusive]')
     var $nonExclusiveOptions = $checkboxes.querySelectorAll('input[type=checkbox]:not([data-exclusive])')
 
-    if ($currentCheckbox.dataset.exclusive === 'true' && $currentCheckbox.checked === true) {
+    if ($currentCheckbox.getAttribute('data-exclusive') === 'true' && $currentCheckbox.checked === true) {
       for (var i = 0; i < $nonExclusiveOptions.length; i++) {
         $nonExclusiveOptions[i].checked = false
       }
-    } else if ($currentCheckbox.dataset.exclusive !== 'true' && $currentCheckbox.checked === true) {
+    } else if ($currentCheckbox.getAttribute('data-exclusive') !== 'true' && $currentCheckbox.checked === true) {
       if ($exclusiveOption) {
         $exclusiveOption.checked = false
       }

data/app/assets/javascripts/govuk_publishing_components/components/contextual-guidance.js

@@ -2,22 +2,21 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function ContextualGuidance () { }
-
-  ContextualGuidance.prototype.start = function ($module) {
-    this.$module = $module[0]
+  function ContextualGuidance ($module) {
+    this.$module = $module
     this.$guidance = this.$module.querySelector('.gem-c-contextual-guidance__wrapper')
     this.$inputId = this.$guidance.getAttribute('for')
     this.$input = this.$module.querySelector('#' + this.$inputId)
+  }
+
+  ContextualGuidance.prototype.init = function () {
     if (!this.$input) return
     this.$input.addEventListener('focus', this.handleFocus.bind(this))
   }
 
   ContextualGuidance.prototype.handleFocus = function (event) {
     this.hideAllGuidance()
-    if (!event.target.dataset.contextualGuidanceHideOnly) {
-      this.$guidance.style.display = 'block'
-    }
+    this.$guidance.style.display = 'block'
   }
 
   ContextualGuidance.prototype.hideAllGuidance = function () {

data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -2,18 +2,18 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function CookieBanner () { }
+  function CookieBanner ($module) {
+    this.$module = $module
+    this.$module.cookieBanner = document.querySelector('.gem-c-cookie-banner')
+    this.$module.cookieBannerConfirmationMessage = this.$module.querySelector('.gem-c-cookie-banner__confirmation')
+    this.$module.cookieBannerConfirmationMessageText = this.$module.querySelector('.gem-c-cookie-banner__confirmation-message')
+  }
 
-  CookieBanner.prototype.start = function ($module) {
-    this.$module = $module[0]
+  CookieBanner.prototype.init = function () {
     this.$module.hideCookieMessage = this.hideCookieMessage.bind(this)
     this.$module.showConfirmationMessage = this.showConfirmationMessage.bind(this)
     this.$module.setCookieConsent = this.setCookieConsent.bind(this)
     this.$module.rejectCookieConsent = this.rejectCookieConsent.bind(this)
-
-    this.$module.cookieBanner = document.querySelector('.gem-c-cookie-banner')
-    this.$module.cookieBannerConfirmationMessage = this.$module.querySelector('.gem-c-cookie-banner__confirmation')
-    this.$module.cookieBannerConfirmationMessageText = this.$module.querySelector('.gem-c-cookie-banner__confirmation-message')
     this.setupCookieMessage()
   }
 

data/app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js

@@ -2,23 +2,24 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function CopyToClipboard () { }
-
-  CopyToClipboard.prototype.start = function ($module) {
-    this.$module = $module[0]
+  function CopyToClipboard ($module) {
+    this.$module = $module
+    this.$input = this.$module.querySelector('.gem-c-input')
+    this.$copyButton = this.$module.querySelector('.gem-c-button')
+  }
 
-    var input = this.$module.querySelector('.gem-c-input')
-    var copyButton = this.$module.querySelector('.gem-c-button')
+  CopyToClipboard.prototype.init = function () {
+    if (!this.$input || !this.$copyButton) return
 
-    input.addEventListener('click', function () {
-      input.select()
-    })
+    this.$input.addEventListener('click', function () {
+      this.$input.select()
+    }.bind(this))
 
-    copyButton.addEventListener('click', function (event) {
+    this.$copyButton.addEventListener('click', function (event) {
       event.preventDefault()
-      input.select()
+      this.$input.select()
       document.execCommand('copy')
-    })
+    }.bind(this))
   }
 
   Modules.CopyToClipboard = CopyToClipboard

data/app/assets/javascripts/govuk_publishing_components/components/details.js

@@ -5,26 +5,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
 window.GOVUK.Modules.Details = window.GOVUKFrontend;
 
 (function (Modules) {
-  function GovukDetails () { }
-
-  GovukDetails.prototype.start = function ($module) {
-    this.$module = $module[0]
-
-    var customTrackLabel = this.$module.getAttribute('data-track-label')
+  function GovukDetails ($module) {
+    this.$module = $module
+    this.customTrackLabel = this.$module.getAttribute('data-track-label')
+    this.detailsClick = this.$module.querySelector('[data-details-track-click]')
+  }
 
-    // If a custom label has been provided, we can simply call the tracking module
-    if (customTrackLabel) {
+  GovukDetails.prototype.init = function () {
+    if (this.customTrackLabel) { // If a custom label has been provided, we can simply call the tracking module
       var trackDetails = new window.GOVUK.Modules.GemTrackClick()
-      trackDetails.start($module)
-    } else {
-      // If no custom label is set, we use the open/close status as the label
-      var detailsClick = this.$module.querySelector('[data-details-track-click]')
-
-      if (detailsClick) {
-        detailsClick.addEventListener('click', function (event) {
-          this.trackDefault(this.$module)
-        }.bind(this))
-      }
+      trackDetails.start($(this.$module))
+    } else if (this.detailsClick) { // If no custom label is set, we use the open/close status as the label
+      this.detailsClick.addEventListener('click', function (event) {
+        this.trackDefault(this.$module)
+      }.bind(this))
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/components/feedback.js

@@ -3,244 +3,242 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
-
-  Modules.Feedback = function () {
-    this.start = function ($element) {
-      this.element = $element[0]
-      this.somethingIsWrongForm = this.element.querySelector('#something-is-wrong')
-      this.surveyForm = this.element.querySelector('#page-is-not-useful')
-      this.prompt = this.element.querySelector('.js-prompt')
-      this.forms = this.element.querySelectorAll('.js-feedback-form')
-      this.toggleForms = this.element.querySelectorAll('.js-toggle-form')
-      this.closeForms = this.element.querySelectorAll('.js-close-form')
-      this.activeForm = false
-      this.pageIsUsefulButton = this.element.querySelector('.js-page-is-useful')
-      this.pageIsNotUsefulButton = this.element.querySelector('.js-page-is-not-useful')
-      this.somethingIsWrongButton = this.element.querySelector('.js-something-is-wrong')
-      this.promptQuestions = this.element.querySelectorAll('.js-prompt-questions')
-      this.promptSuccessMessage = this.element.querySelector('.js-prompt-success')
-      this.surveyWrapper = this.element.querySelector('#survey-wrapper')
+  function Feedback ($module) {
+    this.$module = $module
+    this.somethingIsWrongForm = this.$module.querySelector('#something-is-wrong')
+    this.surveyForm = this.$module.querySelector('#page-is-not-useful')
+    this.prompt = this.$module.querySelector('.js-prompt')
+    this.forms = this.$module.querySelectorAll('.js-feedback-form')
+    this.toggleForms = this.$module.querySelectorAll('.js-toggle-form')
+    this.closeForms = this.$module.querySelectorAll('.js-close-form')
+    this.activeForm = false
+    this.pageIsUsefulButton = this.$module.querySelector('.js-page-is-useful')
+    this.pageIsNotUsefulButton = this.$module.querySelector('.js-page-is-not-useful')
+    this.somethingIsWrongButton = this.$module.querySelector('.js-something-is-wrong')
+    this.promptQuestions = this.$module.querySelectorAll('.js-prompt-questions')
+    this.promptSuccessMessage = this.$module.querySelector('.js-prompt-success')
+    this.surveyWrapper = this.$module.querySelector('#survey-wrapper')
+    this.jshiddenClass = 'js-hidden'
+  }
 
-      var thisModule = this
-      var jshiddenClass = 'js-hidden'
+  Feedback.prototype.init = function () {
+    this.setInitialAriaAttributes()
+    this.setHiddenValues()
 
-      setInitialAriaAttributes()
-      setHiddenValues()
+    for (var j = 0; j < this.toggleForms.length; j++) {
+      this.toggleForms[j].addEventListener('click', function (e) {
+        e.preventDefault()
+        var el = e.target
+        this.toggleForm(el.getAttribute('aria-controls'))
+        this.trackEvent(this.getTrackEventParams(el))
+        this.updateAriaAttributes(el)
+      }.bind(this))
+    }
 
-      for (var j = 0; j < this.toggleForms.length; j++) {
-        this.toggleForms[j].addEventListener('click', function (e) {
-          e.preventDefault()
-          var el = e.target
-          toggleForm(el.getAttribute('aria-controls'))
-          trackEvent(getTrackEventParams(el))
-          updateAriaAttributes(el)
-        })
-      }
+    for (var i = 0; i < this.closeForms.length; i++) {
+      this.closeForms[i].addEventListener('click', function (e) {
+        e.preventDefault()
+        var el = e.target
+        var formToToggle = el.getAttribute('aria-controls')
+        this.toggleForm(formToToggle)
+        this.trackEvent(this.getTrackEventParams(el))
+        this.setInitialAriaAttributes()
+        this.revealInitialPrompt()
+        var refocusClass = '.js-' + formToToggle
+        this.$module.querySelector(refocusClass).focus()
+      }.bind(this))
+    }
 
-      for (var i = 0; i < this.closeForms.length; i++) {
-        this.closeForms[i].addEventListener('click', function (e) {
-          e.preventDefault()
-          var el = e.target
-          var formToToggle = el.getAttribute('aria-controls')
-          toggleForm(formToToggle)
-          trackEvent(getTrackEventParams(el))
-          setInitialAriaAttributes()
-          revealInitialPrompt()
-          var refocusClass = '.js-' + formToToggle
-          thisModule.element.querySelector(refocusClass).focus()
-        })
+    this.pageIsUsefulButton.addEventListener('click', function (e) {
+      e.preventDefault()
+      this.trackEvent(this.getTrackEventParams(this.pageIsUsefulButton))
+      this.showFormSuccess()
+      this.revealInitialPrompt()
+    }.bind(this))
+
+    this.pageIsNotUsefulButton.addEventListener('click', function (e) {
+      var gaClientId
+      var dummyGaClientId = '111111111.1111111111'
+      if (window.GOVUK.cookie('_ga') === null || window.GOVUK.cookie('_ga') === '') {
+        gaClientId = dummyGaClientId
+      } else {
+        gaClientId = window.GOVUK.cookie('_ga').split('.').slice(-2).join('.')
       }
-
-      this.pageIsUsefulButton.addEventListener('click', function (e) {
-        e.preventDefault()
-        trackEvent(getTrackEventParams(thisModule.pageIsUsefulButton))
-        showFormSuccess()
-        revealInitialPrompt()
-      })
-
-      this.pageIsNotUsefulButton.addEventListener('click', function (e) {
-        var gaClientId
-        var dummyGaClientId = '111111111.1111111111'
-        if (window.GOVUK.cookie('_ga') === null || window.GOVUK.cookie('_ga') === '') {
-          gaClientId = dummyGaClientId
-        } else {
-          gaClientId = window.GOVUK.cookie('_ga').split('.').slice(-2).join('.')
-        }
-        setHiddenValuesNotUsefulForm(gaClientId)
-      })
-
-      // much of the JS needed to support sending the form contents via this script is
-      // unsupported by IE, even IE11. This check causes IE to not intercept form submits
-      // and let them happen normally, which is handled already by the backend
-      if (typeof window.URLSearchParams === 'function') {
-        for (var f = 0; f < this.forms.length; f++) {
-          this.forms[f].addEventListener('submit', function (e) {
-            e.preventDefault()
-            var $form = e.target
-            var xhr = new XMLHttpRequest()
-            var url = $form.getAttribute('action')
-            var params = new FormData($form)
-            params = new URLSearchParams(params).toString()
-
-            xhr.open('POST', url, true)
-            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
-
-            xhr.onreadystatechange = function () {
-              if (xhr.readyState === 4 && xhr.status === 200) {
-                trackEvent(getTrackEventParams($form))
-                showFormSuccess(xhr.message)
-                revealInitialPrompt()
-                setInitialAriaAttributes()
-                thisModule.activeForm.classList.toggle(jshiddenClass)
-              } else {
-                showError(xhr)
-                enableSubmitFormButton($form)
-              }
+      this.setHiddenValuesNotUsefulForm(gaClientId)
+    }.bind(this))
+
+    // much of the JS needed to support sending the form contents via this script is
+    // unsupported by IE, even IE11. This check causes IE to not intercept form submits
+    // and let them happen normally, which is handled already by the backend
+    if (typeof window.URLSearchParams === 'function') {
+      for (var f = 0; f < this.forms.length; f++) {
+        this.forms[f].addEventListener('submit', function (e) {
+          e.preventDefault()
+          var $form = e.target
+          var xhr = new XMLHttpRequest()
+          var url = $form.getAttribute('action')
+          var params = new FormData($form)
+          params = new URLSearchParams(params).toString()
+
+          xhr.open('POST', url, true)
+          xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
+
+          xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+              this.trackEvent(this.getTrackEventParams($form))
+              this.showFormSuccess(xhr.message)
+              this.revealInitialPrompt()
+              this.setInitialAriaAttributes()
+              this.activeForm.classList.toggle(this.jshiddenClass)
+            } else {
+              this.showError(xhr)
+              this.enableSubmitFormButton($form)
             }
+          }.bind(this)
 
-            disableSubmitFormButton($form)
-            xhr.send(params)
-          })
-        }
+          this.disableSubmitFormButton($form)
+          xhr.send(params)
+        }.bind(this))
       }
+    }
+  }
 
-      function disableSubmitFormButton ($form) {
-        var formButton = $form.querySelector('[type="submit"]')
-        formButton.setAttribute('disabled', true)
-      }
+  Feedback.prototype.disableSubmitFormButton = function ($form) {
+    var formButton = $form.querySelector('[type="submit"]')
+    formButton.setAttribute('disabled', true)
+  }
 
-      function enableSubmitFormButton ($form) {
-        var formButton = $form.querySelector('[type="submit"]')
-        formButton.removeAttribute('disabled')
-      }
+  Feedback.prototype.enableSubmitFormButton = function ($form) {
+    var formButton = $form.querySelector('[type="submit"]')
+    formButton.removeAttribute('disabled')
+  }
 
-      function setInitialAriaAttributes () {
-        for (var i = 0; i < thisModule.forms.length; i++) {
-          thisModule.forms[i].setAttribute('aria-hidden', true)
-        }
-        thisModule.pageIsNotUsefulButton.setAttribute('aria-expanded', false)
-        thisModule.somethingIsWrongButton.setAttribute('aria-expanded', false)
-      }
+  Feedback.prototype.setInitialAriaAttributes = function () {
+    for (var i = 0; i < this.forms.length; i++) {
+      this.forms[i].setAttribute('aria-hidden', true)
+    }
+    this.pageIsNotUsefulButton.setAttribute('aria-expanded', false)
+    this.somethingIsWrongButton.setAttribute('aria-expanded', false)
+  }
 
-      function setHiddenValues () {
-        var javascriptEnabled = document.createElement('input')
-        javascriptEnabled.setAttribute('type', 'hidden')
-        javascriptEnabled.setAttribute('name', 'javascript_enabled')
-        javascriptEnabled.setAttribute('value', true)
-        thisModule.somethingIsWrongForm.appendChild(javascriptEnabled)
-
-        var referrer = document.createElement('input')
-        referrer.setAttribute('type', 'hidden')
-        referrer.setAttribute('name', 'referrer')
-        referrer.setAttribute('value', document.referrer || 'unknown')
-        thisModule.somethingIsWrongForm.appendChild(referrer)
-        thisModule.somethingIsWrongForm.invalidInfoError = [
-          '<h2>Sorry, we’re unable to send your message as you haven’t given us any information.</h2>',
-          ' <p>Please tell us what you were doing or what went wrong</p>'
-        ].join('')
-      }
+  Feedback.prototype.setHiddenValues = function () {
+    var javascriptEnabled = document.createElement('input')
+    javascriptEnabled.setAttribute('type', 'hidden')
+    javascriptEnabled.setAttribute('name', 'javascript_enabled')
+    javascriptEnabled.setAttribute('value', true)
+    this.somethingIsWrongForm.appendChild(javascriptEnabled)
+
+    var referrer = document.createElement('input')
+    referrer.setAttribute('type', 'hidden')
+    referrer.setAttribute('name', 'referrer')
+    referrer.setAttribute('value', document.referrer || 'unknown')
+    this.somethingIsWrongForm.appendChild(referrer)
+    this.somethingIsWrongForm.invalidInfoError = [
+      '<h2>Sorry, we’re unable to send your message as you haven’t given us any information.</h2>',
+      ' <p>Please tell us what you were doing or what went wrong</p>'
+    ].join('')
+  }
 
-      function setHiddenValuesNotUsefulForm (gaClientId) {
-        var currentPathName = window.location.pathname.replace(/[^\s=?&]+(?:@|%40)[^\s=?&]+/, '[email]')
-        var finalPathName = encodeURI(currentPathName)
-        thisModule.surveyForm.invalidInfoError = [
-          '<h2>Sorry, we’re unable to send your message as you haven’t given us a valid email address.</h2>',
-          ' <p>Enter an email address in the correct format, like name@example.com</p>'
-        ].join('')
-        if (document.querySelectorAll('[name="email_survey_signup[ga_client_id]"]').length === 0) {
-          var hiddenInput = document.createElement('input')
-          hiddenInput.setAttribute('type', 'hidden')
-          hiddenInput.setAttribute('name', 'email_survey_signup[ga_client_id]')
-          hiddenInput.setAttribute('value', gaClientId || '0')
-          thisModule.surveyForm.appendChild(hiddenInput)
-        }
-
-        if (document.querySelectorAll('.gem-c-feedback__email-link#take-survey').length === 0) {
-          var takeSurvey = document.createElement('a')
-          takeSurvey.setAttribute('href', 'https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=' + finalPathName + '&amp;gcl=' + gaClientId)
-          takeSurvey.setAttribute('class', 'gem-c-feedback__email-link govuk-link')
-          takeSurvey.setAttribute('id', 'take-survey')
-          takeSurvey.setAttribute('target', '_blank')
-          takeSurvey.setAttribute('rel', 'noopener noreferrer')
-          takeSurvey.innerHTML = 'Don’t have an email address?'
-          thisModule.surveyWrapper.appendChild(takeSurvey)
-        }
-      }
+  Feedback.prototype.setHiddenValuesNotUsefulForm = function (gaClientId) {
+    var currentPathName = window.location.pathname.replace(/[^\s=?&]+(?:@|%40)[^\s=?&]+/, '[email]')
+    var finalPathName = encodeURI(currentPathName)
+    this.surveyForm.invalidInfoError = [
+      '<h2>Sorry, we’re unable to send your message as you haven’t given us a valid email address.</h2>',
+      ' <p>Enter an email address in the correct format, like name@example.com</p>'
+    ].join('')
+    if (document.querySelectorAll('[name="email_survey_signup[ga_client_id]"]').length === 0) {
+      var hiddenInput = document.createElement('input')
+      hiddenInput.setAttribute('type', 'hidden')
+      hiddenInput.setAttribute('name', 'email_survey_signup[ga_client_id]')
+      hiddenInput.setAttribute('value', gaClientId || '0')
+      this.surveyForm.appendChild(hiddenInput)
+    }
 
-      function updateAriaAttributes (linkClicked) {
-        linkClicked.setAttribute('aria-expanded', true)
-        var controls = linkClicked.getAttribute('aria-controls')
-        var ariaControls = document.querySelector('#' + controls)
-        ariaControls.setAttribute('aria-hidden', false)
-      }
+    if (document.querySelectorAll('.gem-c-feedback__email-link#take-survey').length === 0) {
+      var takeSurvey = document.createElement('a')
+      takeSurvey.setAttribute('href', 'https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=' + finalPathName + '&amp;gcl=' + gaClientId)
+      takeSurvey.setAttribute('class', 'gem-c-feedback__email-link govuk-link')
+      takeSurvey.setAttribute('id', 'take-survey')
+      takeSurvey.setAttribute('target', '_blank')
+      takeSurvey.setAttribute('rel', 'noopener noreferrer')
+      takeSurvey.innerHTML = 'Don’t have an email address?'
+      this.surveyWrapper.appendChild(takeSurvey)
+    }
+  }
 
-      function toggleForm (formId) {
-        thisModule.activeForm = thisModule.element.querySelector('#' + formId)
-        thisModule.activeForm.classList.toggle(jshiddenClass)
-        thisModule.prompt.classList.toggle(jshiddenClass)
+  Feedback.prototype.updateAriaAttributes = function (linkClicked) {
+    linkClicked.setAttribute('aria-expanded', true)
+    var controls = linkClicked.getAttribute('aria-controls')
+    var ariaControls = document.querySelector('#' + controls)
+    ariaControls.setAttribute('aria-hidden', false)
+  }
 
-        var formIsVisible = !thisModule.activeForm.classList.contains(jshiddenClass)
+  Feedback.prototype.toggleForm = function (formId) {
+    this.activeForm = this.$module.querySelector('#' + formId)
+    this.activeForm.classList.toggle(this.jshiddenClass)
+    this.prompt.classList.toggle(this.jshiddenClass)
 
-        if (formIsVisible) {
-          thisModule.activeForm.querySelector('.gem-c-input').focus()
-        } else {
-          thisModule.activeForm = false
-        }
-      }
+    var formIsVisible = !this.activeForm.classList.contains(this.jshiddenClass)
 
-      function getTrackEventParams ($node) {
-        return {
-          category: $node.getAttribute('data-track-category'),
-          action: $node.getAttribute('data-track-action')
-        }
-      }
+    if (formIsVisible) {
+      this.activeForm.querySelector('.gem-c-input').focus()
+    } else {
+      this.activeForm = false
+    }
+  }
 
-      function trackEvent (trackEventParams) {
-        if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-          window.GOVUK.analytics.trackEvent(trackEventParams.category, trackEventParams.action)
-        }
-      }
+  Feedback.prototype.getTrackEventParams = function ($node) {
+    return {
+      category: $node.getAttribute('data-track-category'),
+      action: $node.getAttribute('data-track-action')
+    }
+  }
 
-      function showError (error) {
-        var genericError = [
-          '<h2>Sorry, we’re unable to receive your message right now.</h2>',
-          ' <p>If the problem persists, we have other ways for you to provide',
-          ' feedback on the <a href="/contact/govuk">contact page</a>.</p>'
-        ].join('')
-        // if the response is not a 404 or 500, show the error message if it exists
-        // otherwise show the generic message
-        if ('response' in error) {
-          if (typeof error.response === 'object' && error.response !== null) {
-            error = error.response.message === 'email survey sign up failure' ? genericError : error.response.message
-          } else {
-            error = genericError
-          }
-        } else if (error.status === 422) {
-          // there's clobbering by nginx on all 422 requests, which is why the response returns a rendered html page instead of the expected JSON
-          // this is a temporary workaround to ensure that we are displaying relevant error messages to the users
-          error = thisModule.activeForm.invalidInfoError || genericError
-        } else {
-          error = genericError
-        }
-        var $errors = thisModule.activeForm.querySelector('.js-errors')
-        $errors.innerHTML = error
-        $errors.classList.remove(jshiddenClass)
-        $errors.focus()
-      }
+  Feedback.prototype.trackEvent = function (trackEventParams) {
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      window.GOVUK.analytics.trackEvent(trackEventParams.category, trackEventParams.action)
+    }
+  }
 
-      function showFormSuccess () {
-        for (var i = 0; i < thisModule.promptQuestions.length; i++) {
-          thisModule.promptQuestions[i].classList.add(jshiddenClass)
-        }
-        thisModule.promptSuccessMessage.classList.remove(jshiddenClass)
-        thisModule.promptSuccessMessage.focus()
+  Feedback.prototype.showError = function (error) {
+    var genericError = [
+      '<h2>Sorry, we’re unable to receive your message right now.</h2>',
+      ' <p>If the problem persists, we have other ways for you to provide',
+      ' feedback on the <a href="/contact/govuk">contact page</a>.</p>'
+    ].join('')
+    // if the response is not a 404 or 500, show the error message if it exists
+    // otherwise show the generic message
+    if ('response' in error) {
+      if (typeof error.response === 'object' && error.response !== null) {
+        error = error.response.message === 'email survey sign up failure' ? genericError : error.response.message
+      } else {
+        error = genericError
       }
+    } else if (error.status === 422) {
+      // there's clobbering by nginx on all 422 requests, which is why the response returns a rendered html page instead of the expected JSON
+      // this is a temporary workaround to ensure that we are displaying relevant error messages to the users
+      error = this.activeForm.invalidInfoError || genericError
+    } else {
+      error = genericError
+    }
+    var $errors = this.activeForm.querySelector('.js-errors')
+    $errors.innerHTML = error
+    $errors.classList.remove(this.jshiddenClass)
+    $errors.focus()
+  }
 
-      function revealInitialPrompt () {
-        thisModule.prompt.classList.remove(jshiddenClass)
-        thisModule.prompt.focus()
-      }
+  Feedback.prototype.showFormSuccess = function () {
+    for (var i = 0; i < this.promptQuestions.length; i++) {
+      this.promptQuestions[i].classList.add(this.jshiddenClass)
     }
+    this.promptSuccessMessage.classList.remove(this.jshiddenClass)
+    this.promptSuccessMessage.focus()
   }
+
+  Feedback.prototype.revealInitialPrompt = function () {
+    this.prompt.classList.remove(this.jshiddenClass)
+    this.prompt.focus()
+  }
+
+  Modules.Feedback = Feedback
 })(window.GOVUK.Modules)