Include details JS

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
 }