fix(#831): checkboxes display when user accept or deny cookies (#856)

Orange-OpenSource · Oct 28, 2021 · 18fb2da · 18fb2da
1 parent 71a95e3
commit 18fb2da
Showing 1 changed file with 48 additions and 12 deletions.
diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js
@@ -38,19 +38,55 @@
     alert.querySelector('.tarteaucitronDeny').innerHTML = tarteaucitron.lang.denyAll
   }, { once: true })
 
-  window.addEventListener('tac.open_panel', function () {
-    document.querySelectorAll('#tarteaucitronServices_api button').forEach(function (button) {
-      button.classList.add('btn', 'btn-sm', 'ms-2')
-    })
-  }, { once: true })
+  window.addEventListener('tac.open_panel',
+    function () {
+      document.querySelectorAll('#tarteaucitronServices_api button').forEach(function (button) {
+        button.classList.add('btn', 'btn-sm', 'ms-2')
+      })
+      var allowConsentButton = document.querySelector('#tarteaucitronAllAllowed')
+      var denyConsentButton = document.querySelector('#tarteaucitronAllDenied')
+      var checkboxes = document.querySelectorAll('.form-check-input')
 
-  document.addEventListener('googletagmanager_added', function () {
-    var ask = document.querySelector('#googletagmanagerLine .tarteaucitronAsk')
-    var choiceEvent = 'tarteaucitron.userInterface.respond(document.getElementById(\'googletagmanagerAllowed\'),document.getElementById(\'googletagmanagerAllowed\').checked);'
-    var toggle = document.createRange().createContextualFragment('<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="' + choiceEvent + '"><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label></div>')
-    ask.innerHTML = ''
-    ask.append(toggle)
-  }, { once: true })
+      allowConsentButton.addEventListener('click', function () {
+        for (var i = 0; i < checkboxes.length; i++) {
+          if (!checkboxes.checked) {
+            checkboxes[i].checked = true
+          }
+        }
+      })
+      denyConsentButton.addEventListener('click', function () {
+        for (var i = 0; i < checkboxes.length; i++) {
+          if (checkboxes.checked !== true) {
+            checkboxes[i].checked = false
+          }
+        }
+      })
+    },
+    { once: true }
+  )
+
+  document.addEventListener(
+    'googletagmanager_added',
+    function () {
+      var ask = document.querySelector(
+        '#googletagmanagerLine .tarteaucitronAsk'
+      )
+      var choiceEvent =
+        'tarteaucitron.userInterface.respond(document.getElementById(\'googletagmanagerAllowed\'),document.getElementById(\'googletagmanagerAllowed\').checked);'
+      var toggle = document
+        .createRange()
+        .createContextualFragment(
+          '<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="' +
+            choiceEvent +
+            '"' +
+            ((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1] === '!googletagmanager=true' ? 'checked' : '') +
+            '><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label></div>'
+        )
+      ask.innerHTML = ''
+      ask.append(toggle)
+    },
+    { once: true }
+  )
 })()
 
 if (typeof tarteaucitron !== 'undefined') {