From afd3fe57813eb91d06cb86e7df2f7f207b0895de Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 16 Dec 2019 17:03:42 +0000
Subject: [PATCH] Include details JS

---
 app/assets/javascripts/modules/all.mjs | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/app/assets/javascripts/modules/all.mjs b/app/assets/javascripts/modules/all.mjs
index 7940c17df..7041044d3 100644
--- a/app/assets/javascripts/modules/all.mjs
+++ b/app/assets/javascripts/modules/all.mjs
@@ -7,6 +7,21 @@
 // Exported items will be added to the window.GOVUK namespace.
 // For example, `export { Frontend }` will assign `Frontend` to `window.Frontend`
 import Header from 'govuk-frontend/components/header/header';
+import Details from 'govuk-frontend/components/details/details';
+
+/**
+ * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
+ * This seems to fail in IE8, requires more investigation.
+ * See: https://github.com/imagitama/nodelist-foreach-polyfill
+ */
+function nodeListForEach (nodes, callback) {
+  if (window.NodeList.prototype.forEach) {
+    return nodes.forEach(callback)
+  }
+  for (var i = 0; i < nodes.length; i++) {
+    callback.call(window, nodes[i], i, nodes);
+  }
+}
 
 // Copy of the initAll function from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/all.js
 // except it only includes, and initialises, the components used by this application.
@@ -18,6 +33,12 @@ function initAll (options) {
   // Defaults to the entire document if nothing is set.
   var scope = typeof options.scope !== 'undefined' ? options.scope : document
 
+  // Find all global details elements to enhance.
+  var $details = scope.querySelectorAll('details')
+  nodeListForEach($details, function ($detail) {
+    new Details($detail).init()
+  })
+
   // Find first header module to enhance.
   var $toggleButton = scope.querySelector('[data-module="header"]')
   new Header($toggleButton).init()
@@ -26,6 +47,7 @@ function initAll (options) {
 // Create separate namespace for GOVUK Frontend.
 var Frontend = {
   "Header": Header,
+  "Details": Details,
   "initAll": initAll
 }