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 ( return (
<html lang={params.lang}> <html lang={params.lang}>
<head> <head>
<Script <Script data-cookieconsent="ignore" src="/_static/js/cookie-bot.js" />
data-cookieconsent="ignore"
src="/_static/dist/js/cookie-bot.js?1705409331007"
/>
<Script <Script
strategy="beforeInteractive" strategy="beforeInteractive"
data-blockingmode="auto" 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" /> <link rel="stylesheet" href="/_static/css/core.css" />
{/* eslint-disable-next-line @next/next/no-css-tags */} {/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/_static/css/scandic.css" /> <link rel="stylesheet" href="/_static/css/scandic.css" />
<Script <Script data-cookieconsent="ignore" src="/_static/js/cookie-bot.js" />
data-cookieconsent="ignore"
src="/_static/dist/js/cookie-bot.js?1705409331007"
/>
<Script <Script
strategy="beforeInteractive" strategy="beforeInteractive"
data-blockingmode="auto" 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 font-family: Helvetica, Arial, sans-serif !important
} }
#CybotCookiebotDialog, body #CybotCookiebotDialog,
#CybotCookiebotDialog * { body #CybotCookiebotDialog * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box box-sizing: border-box
} }
#CybotCookiebotDialog { body #CybotCookiebotDialog {
border-radius: 0; border-radius: 0;
border: 0; border: 0;
-webkit-box-shadow: 0 0 transparent; -webkit-box-shadow: 0 0 transparent;
@@ -25,69 +25,69 @@
overflow-y: auto overflow-y: auto
} }
#CybotCookiebotDialog div, body #CybotCookiebotDialog div,
#CybotCookiebotDialog h2 { body #CybotCookiebotDialog h2 {
color: #333 color: #333
} }
#CybotCookiebotDialogBodyContent { body #CybotCookiebotDialogBodyContent {
padding: 0 !important padding: 0 !important
} }
#CybotCookiebotDialogBodyContentTitle { body #CybotCookiebotDialogBodyContentTitle {
font-size: 1.375rem; font-size: 1.375rem;
font-family: BrandonText-Black, Arial, Helvetica, sans-serif !important font-family: BrandonText-Black, Arial, Helvetica, sans-serif !important
} }
div#CybotCookiebotDialogBodyContentText { body div#CybotCookiebotDialogBodyContentText {
font-size: 1rem; font-size: 1rem;
line-height: 1.4rem; line-height: 1.4rem;
margin: 15px 0 margin: 15px 0
} }
#CybotCookiebotDialogDetailBody { body #CybotCookiebotDialogDetailBody {
max-width: 100%; max-width: 100%;
padding: 0 padding: 0
} }
#CybotCookiebotDialogDetailBodyContent { body #CybotCookiebotDialogDetailBodyContent {
height: 160px height: 160px
} }
#CybotCookiebotDialogDetailBodyContentTextOverview { body #CybotCookiebotDialogDetailBodyContentTextOverview {
max-width: 100% max-width: 100%
} }
#CybotCookiebotDialogDetailBodyContentCookieContainerTypeDetails { body #CybotCookiebotDialogDetailBodyContentCookieContainerTypeDetails {
height: 155px; height: 155px;
max-height: 155px max-height: 155px
} }
#CybotCookiebotDialogBodyLevelButtonsSelectPane { body #CybotCookiebotDialogBodyLevelButtonsSelectPane {
border: none; border: none;
padding: 0 0 30px padding: 0 0 30px
} }
.CybotCookiebotDialogBodyLevelButtonWrapper { body .CybotCookiebotDialogBodyLevelButtonWrapper {
margin: 20px 0 0 !important; margin: 20px 0 0 !important;
padding-right: 25px padding-right: 25px
} }
.CybotCookiebotDialogBodyLevelButtonWrapper label { body .CybotCookiebotDialogBodyLevelButtonWrapper label {
font-size: 13px !important; font-size: 13px !important;
padding-left: 20px !important; padding-left: 20px !important;
background: url(/_static/img/icons/shared/checkbox_unselected.svg) no-repeat left 0 !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 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 background: url(/_static/img/icons/shared/checkbox_disabled.svg) no-repeat left 0 !important
} }
#CybotCookiebotDialogBodyLevelWrapper { body #CybotCookiebotDialogBodyLevelWrapper {
display: -ms-flexbox !important; display: -ms-flexbox !important;
display: flex !important; display: flex !important;
-ms-flex-direction: column-reverse; -ms-flex-direction: column-reverse;
@@ -96,20 +96,20 @@ input[type=checkbox].CybotCookiebotDialogBodyLevelButton.CybotCookiebotDialogBod
padding: 0 0 5px padding: 0 0 5px
} }
#CybotCookiebotDialogBodyLevelWrapper>div { body #CybotCookiebotDialogBodyLevelWrapper>div {
padding: 0 padding: 0
} }
#CybotCookiebotDialogBodyLevelButtons { body #CybotCookiebotDialogBodyLevelButtons {
margin: 0 0 20px !important margin: 0 0 20px !important
} }
#CybotCookiebotDialogBodyLevelButtonsTable { body #CybotCookiebotDialogBodyLevelButtonsTable {
width: auto !important; width: auto !important;
margin: 0 !important margin: 0 !important
} }
#CybotCookiebotDialogBodyLevelDetailsWrapper { body #CybotCookiebotDialogBodyLevelDetailsWrapper {
background: none; background: none;
border: 0; border: 0;
width: auto; width: auto;
@@ -118,7 +118,7 @@ input[type=checkbox].CybotCookiebotDialogBodyLevelButton.CybotCookiebotDialogBod
height: auto height: auto
} }
a#CybotCookiebotDialogBodyLevelDetailsButton { body a#CybotCookiebotDialogBodyLevelDetailsButton {
background: none !important; background: none !important;
outline: 0 none; outline: 0 none;
padding: 0 10px 0 0; padding: 0 10px 0 0;
@@ -128,24 +128,24 @@ a#CybotCookiebotDialogBodyLevelDetailsButton {
height: auto height: auto
} }
a#CybotCookiebotDialogBodyLevelDetailsButton:focus, body a#CybotCookiebotDialogBodyLevelDetailsButton:focus,
a#CybotCookiebotDialogBodyLevelDetailsButton:hover { body a#CybotCookiebotDialogBodyLevelDetailsButton:hover {
text-decoration: none; text-decoration: none;
color: #00838e color: #00838e
} }
#CybotCookiebotDialogBodyLevelDetailsWrapper:after { body #CybotCookiebotDialogBodyLevelDetailsWrapper:after {
margin-top: -7px; margin-top: -7px;
background-position: 50%; background-position: 50%;
height: 14px height: 14px
} }
#CybotCookiebotDialogBodyLevelDetailsWrapper.active:after { body #CybotCookiebotDialogBodyLevelDetailsWrapper.active:after {
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
transform: rotate(180deg) transform: rotate(180deg)
} }
a.CybotCookiebotDialogBodyButton { body a.CybotCookiebotDialogBodyButton {
width: auto !important; width: auto !important;
padding: 5px 15px !important; padding: 5px 15px !important;
border-radius: 25px; border-radius: 25px;
@@ -157,7 +157,7 @@ a.CybotCookiebotDialogBodyButton {
line-height: 1.375rem !important line-height: 1.375rem !important
} }
#CybotCookiebotDialogBodyUnderlay { body #CybotCookiebotDialogBodyUnderlay {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
top: 0; top: 0;
@@ -167,30 +167,30 @@ a.CybotCookiebotDialogBodyButton {
} }
@media(max-width: 739px) { @media(max-width: 739px) {
#CybotCookiebotDialog { body #CybotCookiebotDialog {
width: 90% !important width: 90% !important
} }
a.CybotCookiebotDialogBodyButton { body a.CybotCookiebotDialogBodyButton {
width: 100% !important width: 100% !important
} }
} }
@media(min-width: 740px) { @media(min-width: 740px) {
#CybotCookiebotDialogBody { body #CybotCookiebotDialogBody {
padding: 15px; padding: 15px;
min-width: 560px min-width: 560px
} }
#CybotCookiebotDialogBodyContentTitle { body #CybotCookiebotDialogBodyContentTitle {
font-size: 1.625rem font-size: 1.625rem
} }
#CybotCookiebotDialogBodyLevelDetailsButton { body #CybotCookiebotDialogBodyLevelDetailsButton {
font-size: 1rem font-size: 1rem
} }
#CybotCookiebotDialogBodyLevelWrapper { body #CybotCookiebotDialogBodyLevelWrapper {
-ms-flex-direction: row-reverse; -ms-flex-direction: row-reverse;
flex-direction: row-reverse; flex-direction: row-reverse;
-ms-flex-pack: justify; -ms-flex-pack: justify;
@@ -200,13 +200,13 @@ a.CybotCookiebotDialogBodyButton {
padding: 0 padding: 0
} }
#CybotCookiebotDialogBodyLevelButtons { body #CybotCookiebotDialogBodyLevelButtons {
margin: 0 !important margin: 0 !important
} }
} }
@media(min-width: 940px) { @media(min-width: 940px) {
#CybotCookiebotDialog { body #CybotCookiebotDialog {
max-width: 810px; max-width: 810px;
width: 810px !important 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"
}
}));