Allow modules to start after cookie consent

[andysellick]

What

Allow cookie consent dependent modules to be initialised immediately when the user consents to cookies, so the page doesn't have to be reloaded first. This is done by creating an event listener for delayed modules, which is then triggered by the cookie banner, which continues module execution.

Full details of how this works are documented in an update to javascript-modules.md.

Why

We have a new feature on the bank holidays page where users can save their location, but this is done with cookies and so we don't show this feature unless cookies are accepted. Currently if you accept cookies on that page the feature doesn't appear until the page is reloaded.

This feature is an experiment, so it may not be continued, but I suspect that as we move towards a more personalised GOV.UK we will increasingly need the ability to initialise code like this on a page only after cookie consent is given.

Visual Changes

None.

Trello card: https://trello.com/c/QweAgiPc/693-bank-holidays-experiment-things-to-clean-up

[alex-ju]

Thank you for persevering with this, Andy! My comment on the approach is briefly that we shouldn't need to alter the modules system or create delayed scripts. We can rely solely on events, as they naturally happen. The cookie banner emits user consent; a script listens to this event and carries on with setting up the script.

My reason for suggesting this approach is to prevent introducing complexity in the modules system which might be replaced in future if we move to a world where each component initialises itself when added to the DOM, potentially using the lifecycle callbacks.

[alex-ju]

Cookie banner could trigger the event itself (requires the if/else statement to make sure it works in IE, as you did in modules.js L97-L107, but I have simplified it below for illustrative purpose)

Suggested change

	window.GOVUK.modules.startDelayedModules()
	event = new window.CustomEvent('cookie-consent', { bubbles: true, cancelable: true })
	element.dispatchEvent(event)

Then in the script (for now I get that we only need this for the Bank Holiday trial anyway)

SaveBankHolidayNation.prototype.start = function ($module) {
  this.$module = $module[0]
  if (consentCookie && consentCookie.settings) {
    this.setup()
  } else {
    window.addEventListener('cookie-consent', this.setup())
  }
}

SaveBankHolidayNation.prototype.setup() {
  // set things up to save location
}

[andysellick]

Thanks @alex-ju that makes sense. I've rewritten it according to your suggestion. I was originally trying to make this be as flexible as possible and make sure that as little code was duplicated as possible by putting it into the modules code, but that's a good point, this is only for one thing and actually it's a lot cleaner this way.

Just need to rebase and check a few things and it should be ready for a re-review.

[andysellick]

Okay, all done. Percy seems to have failed but I think it's still good to go.

[alex-ju]

Nice one!