Merge pull request #6 from scottish-government-design-system/dsp-785

dsp-785 Add js-enabled script
scottish-government-design-system · Jul 22, 2024 · c47ea9d · c47ea9d
2 parents d8705f4 + 551789e
commit c47ea9d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/govuk-prototype-kit.config.json b/govuk-prototype-kit.config.json
@@ -9,6 +9,10 @@
     {
     "path": "/src/scripts/designsystem-templates.js",
     "type": "module"
+    },
+    {
+    "path": "/src/scripts/js-enabled.js",
+    "type": "module"
     }
   ],
   "nunjucksPaths": [

diff --git a/src/nunjucks/sg-prototype-templates/layouts/_base-layout.njk b/src/nunjucks/sg-prototype-templates/layouts/_base-layout.njk
@@ -23,6 +23,7 @@
         <meta name="msapplication-TileColor" content="#0065bd">
         <meta name="theme-color" content="#ffffff">
 		{% endblock %}
+        <script src="{{ assetPathTemplates }}/scripts/js-enabled.js"></script>
     </head>
     <body{%- if bodyClasses %} class="{{ bodyClasses }}"{% endif %}>
         <div class="ds_skip-links">
@@ -143,18 +144,18 @@
             {% endblock %}
         </div>
         {% block bodyEnd %}
-            {% for scriptConfig in pluginConfig.scripts %}
-            {% if scriptConfig.src === '/plugin-assets/%40scottish-government-design-system%2Fprototype-templates/src/scripts/designsystem-templates.js' %}
-                {# Skip script from this plugin as it will be included at the end #}
-            {% else %}
-                {% if scriptConfig.type|length %}
+            {%- for scriptConfig in pluginConfig.scripts %}
+            {%- if (scriptConfig.src === '/plugin-assets/%40scottish-government-design-system%2Fprototype-templates/src/scripts/designsystem-templates.js')
+               or (scriptConfig.src === '/plugin-assets/%40scottish-government-design-system%2Fprototype-templates/src/scripts/js-enabled.js') -%}
+                {# Skip scripts from this plugin as it will be included at the end #}
+            {%- else -%}
+                {%- if scriptConfig.type|length -%}
                     <script type="{{scriptConfig.type}}" src="{{scriptConfig.src}}"></script>
-                {% else %}
+                {%- else -%}
                     <script src="{{scriptConfig.src}}"></script>
-                {% endif %}
-            {% endif %}
-            {% endfor %}
-
+                {% endif -%}
+            {%- endif -%}
+            {%- endfor -%} 
             {# Load script from this plugin last which initialises window.DS #}
             <script src="{{ assetPathTemplates }}/scripts/designsystem-templates.js"></script>
         {% endblock %}

diff --git a/src/scripts/js-enabled.js b/src/scripts/js-enabled.js
@@ -0,0 +1,4 @@
+(function () {
+    const htmlClass = document.documentElement.getAttribute('class') || '';
+    document.documentElement.setAttribute('class', (htmlClass ? htmlClass + ' ' : '') + 'js-enabled');
+})();