scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(WEB-233): make cookiebot more resilient

Browse Source
This commit is contained in:
Niclas Edenvin
2024-06-24 14:06:15 +02:00
parent 3b54aea6d7
commit 6b39f2d990
5 changed files with 125 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/[lang]/(live)/layout.tsx
View File

@@ -33,10 +33,7 @@ export default async function RootLayout({
return (
<html lang={params.lang}>
<head>
<Script
data-cookieconsent="ignore"
src="/_static/dist/js/cookie-bot.js?1705409331007"
/>
<Script data-cookieconsent="ignore" src="/_static/js/cookie-bot.js" />
<Script
strategy="beforeInteractive"
data-blockingmode="auto"

5
app/[lang]/(live-current)/layout.tsx
View File

@@ -39,10 +39,7 @@ export default async function RootLayout({
<link rel="stylesheet" href="/_static/css/core.css" />
{/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/_static/css/scandic.css" />
<Script
data-cookieconsent="ignore"
src="/_static/dist/js/cookie-bot.js?1705409331007"
/>
<Script data-cookieconsent="ignore" src="/_static/js/cookie-bot.js" />
<Script
strategy="beforeInteractive"
data-blockingmode="auto"

76
public/_static/dist/css/cookie-bot.css → public/_static/css/cookie-bot.css
View File

@@ -1,14 +1,14 @@
#CybotCookiebotDialog * {
body #CybotCookiebotDialog * {
font-family: Helvetica, Arial, sans-serif !important
}
#CybotCookiebotDialog,
#CybotCookiebotDialog * {
body #CybotCookiebotDialog,
body #CybotCookiebotDialog * {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
#CybotCookiebotDialog {
body #CybotCookiebotDialog {
border-radius: 0;
border: 0;
-webkit-box-shadow: 0 0 transparent;
@@ -25,69 +25,69 @@
overflow-y: auto
}
#CybotCookiebotDialog div,
#CybotCookiebotDialog h2 {
body #CybotCookiebotDialog div,
body #CybotCookiebotDialog h2 {
color: #333
}
#CybotCookiebotDialogBodyContent {
body #CybotCookiebotDialogBodyContent {
padding: 0 !important
}
#CybotCookiebotDialogBodyContentTitle {
body #CybotCookiebotDialogBodyContentTitle {
font-size: 1.375rem;
font-family: BrandonText-Black, Arial, Helvetica, sans-serif !important
}
div#CybotCookiebotDialogBodyContentText {
body div#CybotCookiebotDialogBodyContentText {
font-size: 1rem;
line-height: 1.4rem;
margin: 15px 0
}
#CybotCookiebotDialogDetailBody {
body #CybotCookiebotDialogDetailBody {
max-width: 100%;
padding: 0
}
#CybotCookiebotDialogDetailBodyContent {
body #CybotCookiebotDialogDetailBodyContent {
height: 160px
}
#CybotCookiebotDialogDetailBodyContentTextOverview {
body #CybotCookiebotDialogDetailBodyContentTextOverview {
max-width: 100%
}
#CybotCookiebotDialogDetailBodyContentCookieContainerTypeDetails {
body #CybotCookiebotDialogDetailBodyContentCookieContainerTypeDetails {
height: 155px;
max-height: 155px
}
#CybotCookiebotDialogBodyLevelButtonsSelectPane {
body #CybotCookiebotDialogBodyLevelButtonsSelectPane {
border: none;
padding: 0 0 30px
}
.CybotCookiebotDialogBodyLevelButtonWrapper {
body .CybotCookiebotDialogBodyLevelButtonWrapper {
margin: 20px 0 0 !important;
padding-right: 25px
}
.CybotCookiebotDialogBodyLevelButtonWrapper label {
body .CybotCookiebotDialogBodyLevelButtonWrapper label {
font-size: 13px !important;
padding-left: 20px !important;
background: url(/_static/img/icons/shared/checkbox_unselected.svg) no-repeat left 0 !important
}
input[type=checkbox].CybotCookiebotDialogBodyLevelButton:checked+label {
body input[type=checkbox].CybotCookiebotDialogBodyLevelButton:checked+label {
background: url(/_static/img/icons/shared/checkbox_selected.svg) no-repeat left 0 !important
}
input[type=checkbox].CybotCookiebotDialogBodyLevelButton.CybotCookiebotDialogBodyLevelButtonDisabled+label {
body input[type=checkbox].CybotCookiebotDialogBodyLevelButton.CybotCookiebotDialogBodyLevelButtonDisabled+label {
background: url(/_static/img/icons/shared/checkbox_disabled.svg) no-repeat left 0 !important
}
#CybotCookiebotDialogBodyLevelWrapper {
body #CybotCookiebotDialogBodyLevelWrapper {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-direction: column-reverse;
@@ -96,20 +96,20 @@ input[type=checkbox].CybotCookiebotDialogBodyLevelButton.CybotCookiebotDialogBod
padding: 0 0 5px
}
#CybotCookiebotDialogBodyLevelWrapper>div {
body #CybotCookiebotDialogBodyLevelWrapper>div {
padding: 0
}
#CybotCookiebotDialogBodyLevelButtons {
body #CybotCookiebotDialogBodyLevelButtons {
margin: 0 0 20px !important
}
#CybotCookiebotDialogBodyLevelButtonsTable {
body #CybotCookiebotDialogBodyLevelButtonsTable {
width: auto !important;
margin: 0 !important
}
#CybotCookiebotDialogBodyLevelDetailsWrapper {
body #CybotCookiebotDialogBodyLevelDetailsWrapper {
background: none;
border: 0;
width: auto;
@@ -118,7 +118,7 @@ input[type=checkbox].CybotCookiebotDialogBodyLevelButton.CybotCookiebotDialogBod
height: auto
}
a#CybotCookiebotDialogBodyLevelDetailsButton {
body a#CybotCookiebotDialogBodyLevelDetailsButton {
background: none !important;
outline: 0 none;
padding: 0 10px 0 0;
@@ -128,24 +128,24 @@ a#CybotCookiebotDialogBodyLevelDetailsButton {
height: auto
}
a#CybotCookiebotDialogBodyLevelDetailsButton:focus,
a#CybotCookiebotDialogBodyLevelDetailsButton:hover {
body a#CybotCookiebotDialogBodyLevelDetailsButton:focus,
body a#CybotCookiebotDialogBodyLevelDetailsButton:hover {
text-decoration: none;
color: #00838e
}
#CybotCookiebotDialogBodyLevelDetailsWrapper:after {
body #CybotCookiebotDialogBodyLevelDetailsWrapper:after {
margin-top: -7px;
background-position: 50%;
height: 14px
}
#CybotCookiebotDialogBodyLevelDetailsWrapper.active:after {
body #CybotCookiebotDialogBodyLevelDetailsWrapper.active:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
a.CybotCookiebotDialogBodyButton {
body a.CybotCookiebotDialogBodyButton {
width: auto !important;
padding: 5px 15px !important;
border-radius: 25px;
@@ -157,7 +157,7 @@ a.CybotCookiebotDialogBodyButton {
line-height: 1.375rem !important
}
#CybotCookiebotDialogBodyUnderlay {
body #CybotCookiebotDialogBodyUnderlay {
position: fixed;
bottom: 0;
top: 0;
@@ -167,30 +167,30 @@ a.CybotCookiebotDialogBodyButton {
}
@media(max-width: 739px) {
#CybotCookiebotDialog {
body #CybotCookiebotDialog {
width: 90% !important
}
a.CybotCookiebotDialogBodyButton {
body a.CybotCookiebotDialogBodyButton {
width: 100% !important
}
}
@media(min-width: 740px) {
#CybotCookiebotDialogBody {
body #CybotCookiebotDialogBody {
padding: 15px;
min-width: 560px
}
#CybotCookiebotDialogBodyContentTitle {
body #CybotCookiebotDialogBodyContentTitle {
font-size: 1.625rem
}
#CybotCookiebotDialogBodyLevelDetailsButton {
body #CybotCookiebotDialogBodyLevelDetailsButton {
font-size: 1rem
}
#CybotCookiebotDialogBodyLevelWrapper {
body #CybotCookiebotDialogBodyLevelWrapper {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-ms-flex-pack: justify;
@@ -200,13 +200,13 @@ a.CybotCookiebotDialogBodyButton {
padding: 0
}
#CybotCookiebotDialogBodyLevelButtons {
body #CybotCookiebotDialogBodyLevelButtons {
margin: 0 !important
}
}
@media(min-width: 940px) {
#CybotCookiebotDialog {
body #CybotCookiebotDialog {
max-width: 810px;
width: 810px !important
}

76
public/_static/dist/js/cookie-bot.js vendored
View File

@@ -1,76 +0,0 @@
window.addEventListener("CookiebotOnDialogDisplay", (function() {
document.querySelector("head").insertAdjacentHTML("beforeend", "<link type='text/css' href='/_static/dist/css/cookie-bot.css?1705919727669' rel='stylesheet' />");
var e = function(e) {
i = !!(e = !!e) || i;
var t = document.querySelector("#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection")
, o = document.querySelector("#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll");
t.style.display = "none" != t.style.display || e ? "none" : "block",
o.style.display = "none" == o.style.display || e ? "block" : "none"
};
document.querySelector("#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection").style.display = "none",
document.querySelector("#CybotCookiebotDialogBodyLevelDetailsWrapper").setAttribute("class", "custom-select");
var t = document.querySelector("#CybotCookiebotDialogBody")
, o = document.querySelector("#CybotCookiebotDialogBodyLevelWrapper");
t.insertBefore(document.querySelector("#CybotCookiebotDialogDetail"), o);
var n = document.querySelector("#CybotCookiebotDialogBodyLevelButtonsSelectPane");
t.insertBefore(n, o),
n.style.display = "none",
window.innerWidth > 740 && window.dispatchEvent(new Event("resize")),
document.querySelector("#CybotCookiebotDialogBodyLevelDetailsWrapper").addEventListener("click", (function() {
n.style.display = "none" == n.style.display ? "block" : "none";
var t = document.querySelector("#CybotCookiebotDialogBodyLevelDetailsWrapper").classList;
if (t.contains("active"))
t.remove("active"),
document.querySelector("#CybotCookiebotDialog").classList.remove("expanded"),
e(!0);
else {
t.add("active"),
document.querySelector("#CybotCookiebotDialog").classList.add("expanded"),
a();
var o = document.querySelectorAll(".CybotCookiebotDialogDetailBodyContentCookieTypeTableContainer");
if ("none" != o[0].parentElement.style.display)
for (var i = o[0].querySelector("table").clientWidth, l = 0; l < o.length; l++)
o[l].previousElementSibling.style.minWidth = i + "px",
o[l].style.minWidth = i + "px"
}
}
));
for (var i = !0, l = document.querySelectorAll("#CybotCookiebotDialogBodyLevelButtonsSelectPane input[type=checkbox]"), a = function() {
for (var t = !0, o = 0; o < l.length; o++)
l[o].checked || (t = !1);
i != t && (i = t,
e())
}, r = 0; r < l.length; r++)
l[r].addEventListener("change", a)
}
)),
window.addEventListener("load", (function() {
var e = document.querySelector("#CookieDeclarationChangeConsent > a")
, t = document.querySelector("#CookieDeclarationChangeConsent > span > a");
if (e)
switch (document.documentElement.lang) {
default:
e.text = "Change your consent",
t.text = "Withdraw your consent";
break;
case "sv":
e.text = "Ändra mitt samtycke",
t.text = "Ångra mitt samtycke";
break;
case "no":
e.text = "Trække dit samtykke tilbage",
t.text = "Trekk tilbake ditt samtykke";
break;
case "da":
e.text = "Ændre dit samtykke",
t.text = "Trække dit samtykke tilbage";
break;
case "de":
e.text = "Ihre Einwilligung ändern",
t.text = "Ihre Einwilligung zurückziehen";
break;
case "fi":
e.text = "Muuta hyväksyntäsi",
t.text = "Peru hyväksyntäsi"
}
}));

85
public/_static/js/cookie-bot.js Normal file
View File

@@ -0,0 +1,85 @@
/**
* Makes some brute force adjustments on the open cookiebot dialog and adds our own styling
*/
var fixCookieBotDialog = function() {
document.querySelector("head").insertAdjacentHTML("beforeend", "<link type='text/css' href='/_static/css/cookie-bot.css' rel='stylesheet' />");
var e = function(e) {
i = !!(e = !!e) || i;
var t = document.querySelector("#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection")
, o = document.querySelector("#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll");
t.style.display = "none" != t.style.display || e ? "none" : "block",
o.style.display = "none" == o.style.display || e ? "block" : "none"
};
document.querySelector("#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection").style.display = "none",
document.querySelector("#CybotCookiebotDialogBodyLevelDetailsWrapper").setAttribute("class", "custom-select");
var t = document.querySelector("#CybotCookiebotDialogBody")
, o = document.querySelector("#CybotCookiebotDialogBodyLevelWrapper");
t.insertBefore(document.querySelector("#CybotCookiebotDialogDetail"), o);
var n = document.querySelector("#CybotCookiebotDialogBodyLevelButtonsSelectPane");
t.insertBefore(n, o),
n.style.display = "none",
window.innerWidth > 740 && window.dispatchEvent(new Event("resize")),
document.querySelector("#CybotCookiebotDialogBodyLevelDetailsWrapper").addEventListener("click", (function() {
n.style.display = "none" == n.style.display ? "block" : "none";
var t = document.querySelector("#CybotCookiebotDialogBodyLevelDetailsWrapper").classList;
if (t.contains("active"))
t.remove("active"),
document.querySelector("#CybotCookiebotDialog").classList.remove("expanded"),
e(!0);
else {
t.add("active"),
document.querySelector("#CybotCookiebotDialog").classList.add("expanded"),
a();
var o = document.querySelectorAll(".CybotCookiebotDialogDetailBodyContentCookieTypeTableContainer");
if ("none" != o[0].parentElement.style.display)
for (var i = o[0].querySelector("table").clientWidth, l = 0; l < o.length; l++)
o[l].previousElementSibling.style.minWidth = i + "px",
o[l].style.minWidth = i + "px"
}
}
));
for (var i = !0, l = document.querySelectorAll("#CybotCookiebotDialogBodyLevelButtonsSelectPane input[type=checkbox]"), a = function() {
for (var t = !0, o = 0; o < l.length; o++)
l[o].checked || (t = !1);
i != t && (i = t,
e())
}, r = 0; r < l.length; r++)
l[r].addEventListener("change", a)
};
window.addEventListener("CookiebotOnDialogDisplay", fixCookieBotDialog);
// If the cookiebot dialog was opened before this file was run we run the fix function "manually"
if (document.querySelector("#CybotCookiebotDialog")) {
fixCookieBotDialog();
}
window.addEventListener("load", (function() {
var e = document.querySelector("#CookieDeclarationChangeConsent > a")
, t = document.querySelector("#CookieDeclarationChangeConsent > span > a");
if (e)
switch (document.documentElement.lang) {
default:
e.text = "Change your consent",
t.text = "Withdraw your consent";
break;
case "sv":
e.text = "Ändra mitt samtycke",
t.text = "Ångra mitt samtycke";
break;
case "no":
e.text = "Trække dit samtykke tilbage",
t.text = "Trekk tilbake ditt samtykke";
break;
case "da":
e.text = "Ændre dit samtykke",
t.text = "Trække dit samtykke tilbage";
break;
case "de":
e.text = "Ihre Einwilligung ändern",
t.text = "Ihre Einwilligung zurückziehen";
break;
case "fi":
e.text = "Muuta hyväksyntäsi",
t.text = "Peru hyväksyntäsi"
}
}));