🎨 Move cookiebar JS to webpack bundle

No more inline script and CSP shenanigans.
open-formulieren · May 10, 2024 · cc2dbb9 · cc2dbb9
1 parent 5628866
commit cc2dbb9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/src/openforms/js/public.js b/src/openforms/js/public.js
@@ -1,3 +1,5 @@
+import {showCookieBar} from 'django-cookie-consent';
+
 import 'components/auth-mode';
 import {onLoaded} from 'utils/dom';
 
@@ -12,8 +14,33 @@ const registerPrintHandler = () => {
   });
 };
 
+const initCookieBar = () => {
+  const templateNode = document.getElementById('cookie-consent__cookie-bar');
+  if (!templateNode) return;
+
+  const {varName, statusUrl} = templateNode.dataset;
+  showCookieBar({
+    statusUrl,
+    templateSelector: '#cookie-consent__cookie-bar',
+    cookieGroupsSelector: '#cookie-consent__cookie-groups',
+    acceptSelector: '.cookie-notice__accept',
+    declineSelector: '.cookie-notice__decline',
+    insertBefore: '#cookie-consent__cookie-bar',
+    onAccept: groups => {
+      const isAnalyticsEnabled = groups.find(group => group.varname === varName);
+      if (!isAnalyticsEnabled) return;
+      const analyticsTemplateNodes = document.querySelectorAll('.analytics-scripts');
+      analyticsTemplateNodes.forEach(templateNode => {
+        const clone = templateNode.content.cloneNode(true);
+        templateNode.parentNode.insertBefore(clone, templateNode);
+      });
+    },
+  });
+};
+
 const init = () => {
   registerPrintHandler();
+  initCookieBar();
 };
 
 onLoaded(init);
diff --git a/src/openforms/templates/includes/cookie-notice.html b/src/openforms/templates/includes/cookie-notice.html
@@ -1,14 +1,17 @@
-{% load i18n static cookie_consent_tags %}
+{% load i18n cookie_consent_tags %}
 
-{% static "cookie_consent/cookiebar.module.js" as cookiebar_src %}
 {% url 'cookie_consent_cookie_group_list' as manage_url %}
 {% url 'cookie_consent_status' as status_url %}
 
 {% if request.path != manage_url %}
 
     {% all_cookie_groups 'cookie-consent__cookie-groups' %}
 
-    <template id="cookie-consent__cookie-bar">
+    <template
+        id="cookie-consent__cookie-bar"
+        data-var-name="{{ analytics_varname }}"
+        data-status-url="{{ status_url }}"
+    >
         <section class="cookie-notice" aria-label="{% trans 'Cookie notice' %}">
 
             <span class="cookie-notice__text">
@@ -36,26 +39,4 @@
             </div>
         </section>
     </template>
-
-    <script type="module" nonce="{{ request.csp_nonce }}">
-        import {showCookieBar} from '{{ cookiebar_src }}';
-        const varName = '{{ analytics_varname|escapejs }}';
-        showCookieBar({
-          statusUrl: '{{ status_url|escapejs }}',
-          templateSelector: '#cookie-consent__cookie-bar',
-          cookieGroupsSelector: '#cookie-consent__cookie-groups',
-          acceptSelector: '.cookie-notice__accept',
-          declineSelector: '.cookie-notice__decline',
-          insertBefore: '#cookie-consent__cookie-bar',
-          onAccept: (groups) => {
-            const isAnalyticsEnabled = groups.find(group => group.varname === varName);
-            if (!isAnalyticsEnabled) return;
-            const analyticsTemplateNodes = document.querySelectorAll('.analytics-scripts');
-            analyticsTemplateNodes.forEach(templateNode => {
-                const clone = templateNode.content.cloneNode(true);
-                templateNode.parentNode.insertBefore(clone, templateNode);
-            })
-          },
-        });
-    </script>
 {% endif %}