fix

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

@@ -88,7 +88,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (window.GOVUK.globalBarInit) {
       window.GOVUK.globalBarInit.init()
     }
-    window.GOVUK.modules.startDelayedModules()
+    window.GOVUK.triggerEvent(window, 'cookie-consent')
   }
 
   CookieBanner.prototype.rejectCookieConsent = function () {

app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -0,0 +1,18 @@
+(function (root) {
+  'use strict'
+  window.GOVUK = window.GOVUK || {}
+
+  window.GOVUK.triggerEvent = function (element, eventName) {
+    var params = { bubbles: true, cancelable: true }
+    var event
+
+    if (typeof window.CustomEvent === 'function') {
+      event = new window.CustomEvent(eventName, params)
+    } else {
+      event = document.createEvent('CustomEvent')
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+    }
+
+    element.dispatchEvent(event)
+  }
+}(window))

app/assets/javascripts/govuk_publishing_components/modules.js

@@ -4,8 +4,6 @@
   var $ = global.jQuery
   var GOVUK = global.GOVUK || {}
   GOVUK.Modules = GOVUK.Modules || {}
-  var delayedAttribute = 'data-delayed'
-  var delayedEvent = 'delayed'
 
   GOVUK.modules = {
     find: function (container) {
@@ -70,41 +68,6 @@
       function capitaliseFirstLetter (string) {
         return string.charAt(0).toUpperCase() + string.slice(1)
       }
-    },
-
-    setupDelayedModules: function (that, el, startFunction) {
-      var consentCookie = window.GOVUK.getConsentCookie()
-
-      if (consentCookie && consentCookie.settings) {
-        that[startFunction]()
-      } else {
-        el.startModule = that[startFunction].bind(that)
-        el.setAttribute(delayedAttribute, true)
-        el.addEventListener(delayedEvent, function () {
-          this.startModule()
-        })
-      }
-    },
-
-    startDelayedModules: function () {
-      var delayed = document.querySelectorAll('[' + delayedAttribute + ']')
-      for (var i = 0; i < delayed.length; i++) {
-        window.GOVUK.modules.triggerEvent(delayed[i], delayedEvent)
-      }
-    },
-
-    triggerEvent: function (element, eventName) {
-      var params = { bubbles: true, cancelable: true }
-      var event
-
-      if (typeof window.CustomEvent === 'function') {
-        event = new window.CustomEvent(eventName, params)
-      } else {
-        event = document.createEvent('CustomEvent')
-        event.initCustomEvent(eventName, params.bubbles, params.cancelable)
-      }
-
-      element.dispatchEvent(event)
     }
   }
 

docs/javascript-modules.md

@@ -40,30 +40,32 @@ GOVUK.modules.start($container)
 
 Some modules might need cookie consent before doing anything. If a user consents to cookies on a page with such a module, that module should be started without the user having to reload the page.
 
-This can be achieved by structuring a module to call the `setupDelayedModules` function, as shown.
+This can be achieved by structuring a module to listen for the `cookie-consent` event. This event is fired by the cookie banner when the user consents to cookies.
 
 ```javascript
 AnExampleModule.prototype.start = function ($module) {
   this.$module = $module[0]
-  window.GOVUK.modules.setupDelayedModules(this, this.$module, 'startModule')
+  var consentCookie = window.GOVUK.getConsentCookie()
+
+  if (consentCookie && consentCookie.settings) {
+    this.startModule()
+  } else {
+    this.startModule = this.startModule.bind(this)
+    window.addEventListener('cookie-consent', this.startModule)
+  }  
 }
 
 AnExampleModule.prototype.startModule = function () {
+  window.removeEventListener('cookie-consent', this.startModule)
   // the rest of the module
 }
 ```
 
 This functionality runs like this:
 
-- page loads, `GOVUK.modules.start()` is called normally
-- modules requiring cookie consent call `setupDelayedModules`, passing the name of a function that initialises the rest of the module
-- if cookies have been consented, `setupDelayedModules` calls the function passed to it, and the module carries on
-- if cookies have not been consented, `setupDelayedModules` sets an attribute on the passed element and attaches an event listener to it, which would call the passed function
-
-When the user consents to cookies:
-
-- the cookie banner calls `startDelayedModules`, which finds any elements with the delayed attribute on them
-- `startDelayedModules` fires the event on each of those elements, which calls the passed function, which starts the module
+- page loads, `GOVUK.modules.start()` is called normally and modules requiring cookie consent check for cookie consent
+- if cookies have been consented, the module calls the rest of its code and carries on as normal
+- if cookies have not been consented, the listener is created and calls the rest of the module when the `cookie-consent` event is fired by the cookie banner
 
 ### Module structure
 

spec/javascripts/govuk_publishing_components/modules.spec.js

@@ -113,10 +113,11 @@ describe('GOVUK Modules', function () {
         this.element = element
       }
       TestCookieDependencyModule.prototype.init = function () {
-        this.$module = this.element
-        window.GOVUK.modules.setupDelayedModules(this, this.$module, 'startModule')
+        this.startModule = this.startModule.bind(this)
+        window.addEventListener('cookie-consent', this.startModule)
       }
       TestCookieDependencyModule.prototype.startModule = function () {
+        window.removeEventListener('cookie-consent', this.startModule)
         callbackFrontendModule(this.element)
       }
       GOVUK.Modules.TestCookieDependencyModule = TestCookieDependencyModule
@@ -192,7 +193,7 @@ describe('GOVUK Modules', function () {
 
       GOVUK.modules.start(container)
       expect(callbackFrontendModule.calls.count()).toBe(0)
-      GOVUK.modules.startDelayedModules()
+      window.GOVUK.triggerEvent(window, 'cookie-consent')
       expect(callbackFrontendModule.calls.count()).toBe(1)
     })
 
@@ -205,7 +206,7 @@ describe('GOVUK Modules', function () {
 
       GOVUK.modules.start(container)
       expect(callbackFrontendModule.calls.count()).toBe(0)
-      GOVUK.modules.startDelayedModules()
+      window.GOVUK.triggerEvent(window, 'cookie-consent')
       expect(callbackFrontendModule.calls.count()).toBe(2)
     })
   })