From 294a50df03a5fdec73e099cce493fde4f215698b Mon Sep 17 00:00:00 2001
From: Phil Ricketts <812139+replete@users.noreply.github.com>
Date: Fri, 9 Aug 2024 01:46:58 +0100
Subject: [PATCH] Extend browser support with dialog polyfill
---
README.md | 44 ++++++++++++++++-------------
dist/biscuitman.css | 14 ++++++---
dist/biscuitman.js | 22 +++++++++++++--
dist/biscuitman.min.css | 2 +-
dist/biscuitman.min.js | 2 +-
dist/biscuitman.withcss.js | 36 ++++++++++++++++++-----
dist/biscuitman.withcss.min.js | 2 +-
dist/esm/biscuitman.min.mjs | 2 +-
dist/esm/biscuitman.mjs | 22 +++++++++++++--
dist/esm/biscuitman.withcss.min.mjs | 2 +-
dist/esm/biscuitman.withcss.mjs | 36 ++++++++++++++++++-----
index-esm.html | 4 +--
index.html | 2 +-
package.json | 2 +-
run.js | 14 ++++-----
src/biscuitman.css | 15 +++++++---
src/biscuitman.js | 22 ++++++++++++++-
src/biscuitman.mjs | 21 +++++++++++++-
18 files changed, 197 insertions(+), 67 deletions(-)
diff --git a/README.md b/README.md
index 6ecd33b..336c4f4 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
#### [View demo](https://replete.github.io/biscuitman)
-100kB+ seemed too heavy for a cookie popup so I wrote this. It's currently < 4kB gz/br, including CSS. It's designed to be as small as possible with an adequate featureset for basic website cookie consent.
+100kB+ seemed too heavy for a cookie popup so I wrote this. It's around 4kB gz/br, including CSS. It's designed to be as small as possible with an adequate featureset for basic website cookie consent.
- Stores consent in `localStorage`, exposes in `window.Consent` and through custom events fired on `document`
- Handles consent granulated by custom sections (e.g. essential, performance, analytics...)
@@ -21,16 +21,10 @@
- include optional link in any text
- CSS classes on `` element for consents
- Progressively enhanced CSS
-- Ideal experience browser support (targeted via browserlist string `>= 2%, last 2 years`):
- - Chrome/Edge 105+ (should be fine in many earlier versions, TBD)
- - Safari 15.4+
- - Firefox 121+ (should be fine in many earlier versions, TBD)
- - If JS fails in an old browser, it will probably be fixable by updating `browserlist` in `package.json` then rebuilding
- - (Will be tested more definitively with browserstack at some point)
- - source styles use CSS Nesting which is explicitly processed out for compatibility
+- Dialog polyfill loads as required (see [Browser Support](#browser-support))
- Experimental ESM version included `biscuitman.mjs` (see [ESM demo](https://replete.github.io/biscuitman/index-esm.html))
- Preliminary e2e tests:
-
+ ([failing due to GTM.js bug](https://github.com/replete/biscuitman/issues/4), pass locally)
## How to use
[View demo](https://replete.github.io/biscuitman) for a more detailed example
@@ -74,6 +68,7 @@
// more: '(Show more)', // Show more button text
// noCookies: 'No cookies to display', // Displayed in expanded sections within modal
// acceptNonEU: false, // When enabled biscuitman checks browser locale timezone to see if it matches EU, if not it will auto consent
+ //dialogPolyfillUrl: '//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js' // extends browser support, overridable if you want to self-host. Grab the .css too, and host in the same place.
message: 'By clicking "Accept All", you agree to the use of cookies for improving browsing, providing personalized ads or content, and analyzing traffic. {link}',
// {link} inside any configuration string will be replaced with an link
@@ -151,7 +146,7 @@ I've included an ESM version as an alternative packaging format. Longterm it's b
## Theme CSS
-It's easy enough to theme the included styles by overriding CSS variables. They are shortened for filsize savings, but straightforward:
+It's easy enough to theme the included styles by overriding CSS variables. They are shortened but straightforward:
```css
/* hacker mode */
@@ -185,15 +180,22 @@ html.bm-show::after {
## Browser Support
-With browserlist, we're targeting `">= 2%, last 2 years"`. This project is tested with BrowserStack. The earliest versions tested working are:
+With browserlist, we're targeting `">= 2%, last 2 years"`. The earliest versions tested working are:
- Chrome/Edge/Opera: 85+ (released June 2020)
- Firefox: 98+ (released March 2022)
-- Safari Desktop+iOS: 15.4+ (released March 2022)
- - I couldn't easily test 15.0-15.3, 14.1 is broken though
+- Safari (inc iOS): 15.4+ (released March 2022)
- Samsung Internet: 14+ (released April 2021)
-Currently if this is used in a browser that breaks interactivity (e.g. Safari 14.1, released April 2021), the site is unusable. It might be worth catching errors for unsupported browsers and removing the UI altogether for these extreme edge cases of users not updating their browsers.
+With `v0.3.19`, a [polyfill for dialog](https://github.com/GoogleChrome/dialog-polyfill) is loaded as necessary, extending the support to include these browsers (tested):
+
+- Safari (inc iOS): 13.1+ (released March 2020)
+- Firefox: 77+ (released June 2020)
+- Firefox Android: 79+ (released August 2020)
+
+If you need to support earlier than these browsers, you will need to start loading polyfills for missing javascript features, starting with `String.prototype.replaceAll`. [Cloudflare's polyfill CDN site](https://cdnjs.cloudflare.com/polyfill) will help you generate a package which will need to load before biscuitman.
+
+This project is tested with BrowserStack.
## Globals
- `biscuitman` – configuration object, must be `window.biscuitman` (`biscuitman.create(options)` for ESM version)
@@ -213,10 +215,12 @@ Currently if this is used in a browser that breaks interactivity (e.g. Safari 14
- `bmOpen()` – Opens My Consent Settings modal (you might want to link this on your Privacy policy or footer nav)
- example usage: ` Update my consent settings`
+The ESM version currently does still use some globals.
+
## CSS Classes
- `biscuitman` on UI container
-- `bm-{sectionName}`, `bm-no-{sectionName}`, `bm-show` on ``
+- `bm-{sectionName}`, `bm-no-{sectionName}`, `bm-show` and sometimes `bm-dialog-polyfill` on ``
- `--bm-height` CSS variable written to ``
## Events
@@ -241,22 +245,22 @@ document.addEventListener('biscuitman:open', (e) => {
## Development
-`npm run dev` fires up a browsersync dev server on `https://localhost:3000`.
+`npm run dev` fires up a browserSync development server on `https://localhost:3000`.
-We need to use `https://` to be able to delete Secure cookies.
+We need `https://` active to be able to delete Secure cookies.
### Fix NET::ERR_CERT_AUTHORITY_INVALID error
-This isn't a problem for testing the UI, but is a problem for the tests running headless browsers. To fix this:
+To prevent invalid certificate warnings, you can generate a local SSL key with `mkcert`:
- Install `mkcert` ([Installation instructions](https://github.com/FiloSottile/mkcert#installation)) and then run:
-- run `npm run makecerts`, to create `server.crt` and `server.key` for browserSync
+- run `npm run makecerts`, to generate `server.crt` and `server.key` for browserSync dev server
- if you're using another solution for local SSL certs, generate `server.crt` and `server.key` manually and place them in the root
Visiting `https://localhost:3000` should now work without warnings.
### Building
-`npm run build` - creates project distributes via `run.js` a custom build script requiring `Node v20`
+`npm run build` - creates project distributes via `run.js`, a custom build script requiring `Node v20`
### Tests
Jest is set up with puppeteer to run some integration tests. We're using `@swc/jest`'s rust implementation of jest to speed things up. This is only chromium for now, but at some point it would be good to implement browserStack selenium tests to automate browser compatibility checks.
diff --git a/dist/biscuitman.css b/dist/biscuitman.css
index 3ffa77e..d4c6db4 100644
--- a/dist/biscuitman.css
+++ b/dist/biscuitman.css
@@ -1,4 +1,4 @@
-/*! biscuitman.js 0.3.18 */
+/*! biscuitman.js 0.3.19 */
.biscuitman {
--ui: 0, 0, 0;
--tx: #444;
@@ -16,7 +16,7 @@
box-shadow: 0 -2px 10px #00000029;
}
-html.bm-show .biscuitman {
+.bm-show .biscuitman {
display: block;
}
@@ -175,7 +175,7 @@ html.bm-show .biscuitman {
.biscuitman .bm-dialog > b:after {
content: "";
- background: linear-gradient(180deg, var(--bg) 20%, transparent);
+ background: linear-gradient(180deg, var(--bg) 20%, #fff0);
pointer-events: none;
z-index: 1;
width: 100%;
@@ -188,7 +188,7 @@ html.bm-show .biscuitman {
.biscuitman .bm-dialog nav:after {
content: "";
- background: linear-gradient(0deg, var(--bg) 20%, transparent);
+ background: linear-gradient(0deg, var(--bg) 20%, #fff0);
pointer-events: none;
width: 100%;
height: 25px;
@@ -385,3 +385,9 @@ html.bm-show .biscuitman {
.biscuitman label input {
opacity: 0;
}
+
+.bm-dialog-polyfill .biscuitman dialog {
+ position: fixed;
+ top: 50%;
+ transform: translateY(-50%);
+}
diff --git a/dist/biscuitman.js b/dist/biscuitman.js
index b4a710e..59ddfd0 100644
--- a/dist/biscuitman.js
+++ b/dist/biscuitman.js
@@ -1,4 +1,4 @@
-/*! biscuitman.js 0.3.18 */
+/*! biscuitman.js 0.3.19 */
((d, w, O, h, bm)=>{
const defaults = {
key: 'myconsent',
@@ -18,7 +18,8 @@
info: '',
more: 'Show more',
noCookies: 'No cookies to display',
- acceptNonEU: false
+ acceptNonEU: false,
+ dialogPolyfillUrl: '//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js'
};
const o = {
...defaults,
@@ -82,6 +83,7 @@
`.replaceAll('{link}', `${o.linkText}`);
ui.querySelectorAll('button').forEach((b)=>b.addEventListener('click', buttonHandler));
dialog = ui.querySelector('dialog');
+ if (!dialog.showModal || !dialog.close) loadDialogPolyfill();
dialog.addEventListener('close', closeModalHandler);
dialog.addEventListener('cancel', cancelModalHandler);
const moreLink = ui.querySelector('.more');
@@ -235,7 +237,7 @@
});
clearStorages();
insertScripts();
- dialog.close();
+ if (dialog.open) dialog.close();
displayUI(false);
}
function insertScripts() {
@@ -312,4 +314,18 @@
});
openModal();
};
+ function loadDialogPolyfill() {
+ // https://github.com/GoogleChrome/dialog-polyfill
+ h.classList.add('bm-dialog-polyfill');
+ const script = d.createElement('script');
+ script.src = o.dialogPolyfillUrl;
+ script.onload = ()=>{
+ w.dialogPolyfill.registerDialog(dialog);
+ };
+ d.head.appendChild(script);
+ const link = d.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = o.dialogPolyfillUrl.slice(0, -2) + 'css';
+ d.head.appendChild(link);
+ }
})(document, window, Object, document.documentElement, 'biscuitman');
diff --git a/dist/biscuitman.min.css b/dist/biscuitman.min.css
index 1e75147..927f1e6 100644
--- a/dist/biscuitman.min.css
+++ b/dist/biscuitman.min.css
@@ -1 +1 @@
-/*! biscuitman.js 0.3.18 */.biscuitman{--ui:0,0,0;--tx:#444;--bg:#fff;--c:#105d89;background:var(--bg);box-sizing:border-box;z-index:3;width:100%;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:none;position:fixed;bottom:0;box-shadow:0 -2px 10px #00000029}html.bm-show .biscuitman{display:block}.biscuitman *{box-sizing:border-box;color:var(--tx);margin:0;padding:0;font-family:inherit;font-size:16px;line-height:1.4em}.biscuitman:has([open]){transform:translateY(100%)}.biscuitman article{padding:0;position:relative}@media (min-width:770px){.biscuitman article{padding-right:calc(max(300px,30vw) + 20px)}.biscuitman article nav{width:30vw;min-width:300px;position:absolute;bottom:50%;right:0;transform:translateY(50%)}}.biscuitman article p{color:var(--tx);margin:10px 0;font-size:13px}@media (min-width:575px){.biscuitman article p{font-size:14px}}.biscuitman button{background:var(--bg);border:2px solid var(--c);color:var(--c);cursor:pointer;border-radius:3px;margin-top:10px;padding:.8em;font-size:13px;line-height:1em}.biscuitman button[data-id=accept]{background:var(--c);color:var(--bg)!important}.biscuitman button[data-id=close]{color:rgba(var(--ui),.5);opacity:.6;-webkit-user-select:none;user-select:none;z-index:2;background:0 0;border:none;outline:none;padding:10px;font-size:24px;line-height:1em;position:absolute;top:0;right:10px}.biscuitman button[disabled]{display:none}.biscuitman button:hover{opacity:.8}@media (min-width:576px){.biscuitman nav{flex-direction:row-reverse;gap:10px;width:100%;display:flex}.biscuitman nav button{flex-grow:1;margin-bottom:0}}@media (max-width:575px){.biscuitman nav{flex-direction:column;flex-grow:1;display:flex}}.biscuitman dialog{background:var(--bg);border:0;width:100%;max-width:100%;height:100%;max-height:100%}@media (min-width:576px){.biscuitman dialog{border-radius:10px;width:90vw;max-width:860px;max-height:80vh;margin:auto;box-shadow:0 0 8px #0000004d}}@media (min-width:576px) and (min-height:1134px){.biscuitman dialog{max-height:950px}}.biscuitman dialog nav{justify-self:flex-end;position:relative}.biscuitman .bm-dialog{flex-direction:column;height:100%;padding:20px;display:flex}.biscuitman .bm-dialog b{padding-bottom:8px;position:relative}.biscuitman .bm-dialog>b:after{content:"";background:linear-gradient(180deg,var(--bg)20%,transparent);pointer-events:none;z-index:1;width:100%;height:25px;margin-bottom:-24px;position:absolute;bottom:0;left:0}.biscuitman .bm-dialog nav:after{content:"";background:linear-gradient(0deg,var(--bg)20%,transparent);pointer-events:none;width:100%;height:25px;position:absolute;top:-24px;left:0}.biscuitman .bm-sections{scrollbar-color:rgba(var(--ui),.2)var(--bg);flex-shrink:1;height:100%;padding:15px 0;position:relative;overflow-y:scroll}@media (min-width:576px){.biscuitman .bm-sections{margin-right:-18px;padding-right:4px}}.biscuitman .bm-sections>p{padding-right:30px;font-size:13px;line-height:18px}@media (min-width:576px){.biscuitman .bm-sections>p{font-size:14px}}.biscuitman .bm-sections>p span{font-size:inherit;padding-bottom:5px;display:inline-block}.biscuitman .bm-sections>p .more~span{display:none}.biscuitman a{font-size:inherit;color:var(--c);cursor:pointer;text-decoration:none;display:inline-block}.biscuitman a:hover{text-decoration:underline}.biscuitman section{margin-bottom:10px;position:relative}.biscuitman section:first-of-type{margin-top:10px}.biscuitman details{border:1px solid rgba(var(--ui),.2);border-radius:5px;padding:10px;list-style:none;box-shadow:0 2px 4px #0000001a}.biscuitman details[open] summary b:after{margin:-3px 0 0 -2px;transform:rotate(45deg)scale(.3)}.biscuitman summary{cursor:pointer;flex-direction:column;width:100%;padding:5px 80px 10px 10px;list-style:none;display:flex;position:relative}.biscuitman summary b{margin-bottom:3px}.biscuitman summary b:after{content:"";border:5px solid rgba(var(--ui),.4);border-top-color:#0000;border-left-color:#0000;border-radius:2px;width:1em;height:1em;margin:-2px 0 0 -4px;display:block;transform:rotate(-45deg)scale(.3)}.biscuitman summary p{color:var(--tx);font-size:14px}.biscuitman summary>*{display:inline-flex}.biscuitman summary::marker{display:none}.biscuitman summary::-webkit-details-marker{display:none}.biscuitman dl{background:rgba(var(--ui),.08);margin:10px;padding:10px;display:flex}.biscuitman dl dt,.biscuitman dl dd{color:var(--tx);font-size:12px}.biscuitman dl dt{min-width:120px;padding-right:30px;font-weight:700}.biscuitman label{--height:1.2em;--width:2.3em;--gap:2px;height:var(--height);width:var(--width);background-color:rgba(var(--ui),.3);border-radius:var(--height);margin-top:-2px;display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%);font-size:20px!important}.biscuitman label:before{content:"";background:var(--bg);height:calc(var(--height) - calc(var(--gap)*2));width:calc(var(--height) - calc(var(--gap)*2));height:var(--height);width:var(--height);left:var(--gap);transform-origin:50%;border-radius:100%;display:block;position:absolute;top:50%;left:0;transform:translateY(-50%)scale(.8)}.biscuitman label.checked{background-color:var(--c)}.biscuitman label.checked:before{left:auto;right:0}.biscuitman label:has(:focus-visible){outline:auto highlight}.biscuitman label.disabled.checked{opacity:.5}.biscuitman label input{opacity:0}
\ No newline at end of file
+/*! biscuitman.js 0.3.19 */.biscuitman{--ui:0,0,0;--tx:#444;--bg:#fff;--c:#105d89;background:var(--bg);box-sizing:border-box;z-index:3;width:100%;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:none;position:fixed;bottom:0;box-shadow:0 -2px 10px #00000029}.bm-show .biscuitman{display:block}.biscuitman *{box-sizing:border-box;color:var(--tx);margin:0;padding:0;font-family:inherit;font-size:16px;line-height:1.4em}.biscuitman:has([open]){transform:translateY(100%)}.biscuitman article{padding:0;position:relative}@media (min-width:770px){.biscuitman article{padding-right:calc(max(300px,30vw) + 20px)}.biscuitman article nav{width:30vw;min-width:300px;position:absolute;bottom:50%;right:0;transform:translateY(50%)}}.biscuitman article p{color:var(--tx);margin:10px 0;font-size:13px}@media (min-width:575px){.biscuitman article p{font-size:14px}}.biscuitman button{background:var(--bg);border:2px solid var(--c);color:var(--c);cursor:pointer;border-radius:3px;margin-top:10px;padding:.8em;font-size:13px;line-height:1em}.biscuitman button[data-id=accept]{background:var(--c);color:var(--bg)!important}.biscuitman button[data-id=close]{color:rgba(var(--ui),.5);opacity:.6;-webkit-user-select:none;user-select:none;z-index:2;background:0 0;border:none;outline:none;padding:10px;font-size:24px;line-height:1em;position:absolute;top:0;right:10px}.biscuitman button[disabled]{display:none}.biscuitman button:hover{opacity:.8}@media (min-width:576px){.biscuitman nav{flex-direction:row-reverse;gap:10px;width:100%;display:flex}.biscuitman nav button{flex-grow:1;margin-bottom:0}}@media (max-width:575px){.biscuitman nav{flex-direction:column;flex-grow:1;display:flex}}.biscuitman dialog{background:var(--bg);border:0;width:100%;max-width:100%;height:100%;max-height:100%}@media (min-width:576px){.biscuitman dialog{border-radius:10px;width:90vw;max-width:860px;max-height:80vh;margin:auto;box-shadow:0 0 8px #0000004d}}@media (min-width:576px) and (min-height:1134px){.biscuitman dialog{max-height:950px}}.biscuitman dialog nav{justify-self:flex-end;position:relative}.biscuitman .bm-dialog{flex-direction:column;height:100%;padding:20px;display:flex}.biscuitman .bm-dialog b{padding-bottom:8px;position:relative}.biscuitman .bm-dialog>b:after{content:"";background:linear-gradient(180deg,var(--bg)20%,#fff0);pointer-events:none;z-index:1;width:100%;height:25px;margin-bottom:-24px;position:absolute;bottom:0;left:0}.biscuitman .bm-dialog nav:after{content:"";background:linear-gradient(0deg,var(--bg)20%,#fff0);pointer-events:none;width:100%;height:25px;position:absolute;top:-24px;left:0}.biscuitman .bm-sections{scrollbar-color:rgba(var(--ui),.2)var(--bg);flex-shrink:1;height:100%;padding:15px 0;position:relative;overflow-y:scroll}@media (min-width:576px){.biscuitman .bm-sections{margin-right:-18px;padding-right:4px}}.biscuitman .bm-sections>p{padding-right:30px;font-size:13px;line-height:18px}@media (min-width:576px){.biscuitman .bm-sections>p{font-size:14px}}.biscuitman .bm-sections>p span{font-size:inherit;padding-bottom:5px;display:inline-block}.biscuitman .bm-sections>p .more~span{display:none}.biscuitman a{font-size:inherit;color:var(--c);cursor:pointer;text-decoration:none;display:inline-block}.biscuitman a:hover{text-decoration:underline}.biscuitman section{margin-bottom:10px;position:relative}.biscuitman section:first-of-type{margin-top:10px}.biscuitman details{border:1px solid rgba(var(--ui),.2);border-radius:5px;padding:10px;list-style:none;box-shadow:0 2px 4px #0000001a}.biscuitman details[open] summary b:after{margin:-3px 0 0 -2px;transform:rotate(45deg)scale(.3)}.biscuitman summary{cursor:pointer;flex-direction:column;width:100%;padding:5px 80px 10px 10px;list-style:none;display:flex;position:relative}.biscuitman summary b{margin-bottom:3px}.biscuitman summary b:after{content:"";border:5px solid rgba(var(--ui),.4);border-top-color:#0000;border-left-color:#0000;border-radius:2px;width:1em;height:1em;margin:-2px 0 0 -4px;display:block;transform:rotate(-45deg)scale(.3)}.biscuitman summary p{color:var(--tx);font-size:14px}.biscuitman summary>*{display:inline-flex}.biscuitman summary::marker{display:none}.biscuitman summary::-webkit-details-marker{display:none}.biscuitman dl{background:rgba(var(--ui),.08);margin:10px;padding:10px;display:flex}.biscuitman dl dt,.biscuitman dl dd{color:var(--tx);font-size:12px}.biscuitman dl dt{min-width:120px;padding-right:30px;font-weight:700}.biscuitman label{--height:1.2em;--width:2.3em;--gap:2px;height:var(--height);width:var(--width);background-color:rgba(var(--ui),.3);border-radius:var(--height);margin-top:-2px;display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%);font-size:20px!important}.biscuitman label:before{content:"";background:var(--bg);height:calc(var(--height) - calc(var(--gap)*2));width:calc(var(--height) - calc(var(--gap)*2));height:var(--height);width:var(--height);left:var(--gap);transform-origin:50%;border-radius:100%;display:block;position:absolute;top:50%;left:0;transform:translateY(-50%)scale(.8)}.biscuitman label.checked{background-color:var(--c)}.biscuitman label.checked:before{left:auto;right:0}.biscuitman label:has(:focus-visible){outline:auto highlight}.biscuitman label.disabled.checked{opacity:.5}.biscuitman label input{opacity:0}.bm-dialog-polyfill .biscuitman dialog{position:fixed;top:50%;transform:translateY(-50%)}
\ No newline at end of file
diff --git a/dist/biscuitman.min.js b/dist/biscuitman.min.js
index 6100e80..b1c495f 100644
--- a/dist/biscuitman.min.js
+++ b/dist/biscuitman.min.js
@@ -1 +1 @@
-/*! biscuitman.js 0.3.18 */((e,t,o,a,n)=>{let s;let i={key:"myconsent",global:"Consent",force:!1,enableMore:!0,sections:["essential"],title:"Your privacy matters",message:"We use cookies",settings:"Settings",reject:"Reject All",accept:"Accept All",save:"Save My Settings",settingsTitle:"My Consent Settings",info:"",more:"Show more",noCookies:"No cookies to display",acceptNonEU:!1,...t.biscuitman},c=e.createElement("div"),l=()=>{a.style.setProperty("--bm-height",`${c.offsetHeight}px`)},r=e=>{a.classList.toggle("bm-show",e),l()},d=()=>{let{consentTime:e,...t}=f();for(let[n,s]of(e||(t=o.fromEntries(i.sections.slice(1).map(e=>[e,!1]))),o.entries(t)))a.classList.toggle(`bm-${n}`,s),a.classList.toggle(`bm-no-${n}`,!s)};function m(e){let t=e.target.dataset.id;switch($("button",{id:t}),t){case"accept":E(!0);break;case"close":s.close();break;case"settings":b();break;case"save":E();break;case"reject":E(!1)}}function p(){$("close")}function u(e){i.force&&e.preventDefault()}function b(){$("open"),s.showModal()}function $(t,o){let a=`${n}:${t}`,s={...void 0!==o&&o,time:+new Date};e.dispatchEvent(new CustomEvent(a,s)),console.debug(a,s)}let f=()=>t[i.global]||{};function g(e){t[i.global]=e,d()}function v(e,t){for(let o in e)e[o]&&!1===t[o]&&$("revoke",{section:o})}function k(){try{return JSON.parse(localStorage.getItem(i.key))}catch(e){return console.error(e),localStorage.removeItem(i.key),{}}}function h(){let t=o.fromEntries(o.entries(localStorage)),a=o.fromEntries(e.cookie.split("; ").map(e=>e.split("="))),{consentTime:n,...s}=k()||i.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[n,c]of o.entries(s)){if(c)continue;let s=o.keys(i[`${n}Cookies`]||{});for(let n of(s.filter(e=>e.endsWith("*")).map(e=>{o.keys({...a,...t}).map(t=>{t.startsWith(e.slice(0,-1))&&s.push(t)})}),s)){if(a[n]){let t=`${n}=;expires=Thu, 01 Jan 1970 00:00:01 UTC;path=/;`;e.cookie=t,e.cookie=`${t}domain=${location.hostname};`,e.cookie=`${t}domain=.${location.hostname};`,$("delete",{cookie:n})}t[n]&&(localStorage.removeItem(n),$("delete",{localStorage:n}))}}}function E(e){let t=void 0===e,o={consentTime:+new Date};i.sections.forEach(a=>{if("essential"===a)return!1;let n=c.querySelector(`[data-s=${a}]`),s=t?n.checked:e;o[a]=s,t||(n.checked=e)}),v(f(),o),g(o),localStorage.setItem(i.key,JSON.stringify(o)),$("save",{data:o}),h(),y(),s.close(),r(!1)}function y(){e.querySelectorAll("script[data-consent]").forEach(t=>{if(!f()[t.dataset.consent])return!1;let o=e.createElement("script");for(let{name:e,value:a}of t.attributes)e.startsWith("data-")||"type"===e||o.setAttribute(e,a);o.setAttribute("type",t.dataset.type||"text/javascript"),t.src||(o.textContent=t.textContent),t.parentNode.replaceChild(o,t),$("inject",{el:t,...t.id&&{id:t.id}}),t.src&&""!==t.textContent.trim()&&o.addEventListener("load",()=>{let a=e.createElement("script");a.textContent=t.textContent,t.id&&(a.id=t.id+"-after"),o.insertAdjacentElement("afterend",a),$("inject",{el:a,parent:t,...a.id&&{id:a.id}})})})}g(k()||{});let T=Intl.DateTimeFormat().resolvedOptions().timeZone,S=/^(GMT|UTC)$/.test(T)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(T);i.acceptNonEU&&!S&&(E(!0),r(!1)),function(){c.classList.add(n),c.innerHTML=`${i.title}
${i.message}
`.replaceAll("{link}",`${i.linkText}`),c.querySelectorAll("button").forEach(e=>e.addEventListener("click",m)),(s=c.querySelector("dialog")).addEventListener("close",p),s.addEventListener("cancel",u);let a=c.querySelector(".more");a&&a.addEventListener("click",a.remove),c.querySelectorAll("[data-s]").forEach(e=>e.addEventListener("change",t=>{e.parentElement.classList.toggle("checked",t.target.checked)})),e.body.appendChild(c),t.addEventListener("resize",l)}(),h(),t[i.global].consentTime?(r(!1),y()):(r(!0),i.force&&b()),t.bmInvalidate=()=>{$("invalidate",{data:f()}),v({}),E(!1),g({}),localStorage.removeItem(i.key),r(!0)},t.bmUpdate=()=>{$("update",{data:f()}),b()}})(document,window,Object,document.documentElement,"biscuitman");
\ No newline at end of file
+/*! biscuitman.js 0.3.19 */((e,t,o,a,i)=>{let n;let l={key:"myconsent",global:"Consent",force:!1,enableMore:!0,sections:["essential"],title:"Your privacy matters",message:"We use cookies",settings:"Settings",reject:"Reject All",accept:"Accept All",save:"Save My Settings",settingsTitle:"My Consent Settings",info:"",more:"Show more",noCookies:"No cookies to display",acceptNonEU:!1,dialogPolyfillUrl:"//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js",...t.biscuitman},s=e.createElement("div"),c=()=>{a.style.setProperty("--bm-height",`${s.offsetHeight}px`)},r=e=>{a.classList.toggle("bm-show",e),c()},d=()=>{let{consentTime:e,...t}=g();for(let[i,n]of(e||(t=o.fromEntries(l.sections.slice(1).map(e=>[e,!1]))),o.entries(t)))a.classList.toggle(`bm-${i}`,n),a.classList.toggle(`bm-no-${i}`,!n)};function p(e){let t=e.target.dataset.id;switch(b("button",{id:t}),t){case"accept":k(!0);break;case"close":n.close();break;case"settings":f();break;case"save":k();break;case"reject":k(!1)}}function m(){b("close")}function u(e){l.force&&e.preventDefault()}function f(){b("open"),n.showModal()}function b(t,o){let a=`${i}:${t}`,n={...void 0!==o&&o,time:+new Date};e.dispatchEvent(new CustomEvent(a,n)),console.debug(a,n)}let g=()=>t[l.global]||{};function $(e){t[l.global]=e,d()}function h(e,t){for(let o in e)e[o]&&!1===t[o]&&b("revoke",{section:o})}function v(){try{return JSON.parse(localStorage.getItem(l.key))}catch(e){return console.error(e),localStorage.removeItem(l.key),{}}}function y(){let t=o.fromEntries(o.entries(localStorage)),a=o.fromEntries(e.cookie.split("; ").map(e=>e.split("="))),{consentTime:i,...n}=v()||l.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[i,s]of o.entries(n)){if(s)continue;let n=o.keys(l[`${i}Cookies`]||{});for(let i of(n.filter(e=>e.endsWith("*")).map(e=>{o.keys({...a,...t}).map(t=>{t.startsWith(e.slice(0,-1))&&n.push(t)})}),n)){if(a[i]){let t=`${i}=;expires=Thu, 01 Jan 1970 00:00:01 UTC;path=/;`;e.cookie=t,e.cookie=`${t}domain=${location.hostname};`,e.cookie=`${t}domain=.${location.hostname};`,b("delete",{cookie:i})}t[i]&&(localStorage.removeItem(i),b("delete",{localStorage:i}))}}}function k(e){let t=void 0===e,o={consentTime:+new Date};l.sections.forEach(a=>{if("essential"===a)return!1;let i=s.querySelector(`[data-s=${a}]`),n=t?i.checked:e;o[a]=n,t||(i.checked=e)}),h(g(),o),$(o),localStorage.setItem(l.key,JSON.stringify(o)),b("save",{data:o}),y(),E(),n.open&&n.close(),r(!1)}function E(){e.querySelectorAll("script[data-consent]").forEach(t=>{if(!g()[t.dataset.consent])return!1;let o=e.createElement("script");for(let{name:e,value:a}of t.attributes)e.startsWith("data-")||"type"===e||o.setAttribute(e,a);o.setAttribute("type",t.dataset.type||"text/javascript"),t.src||(o.textContent=t.textContent),t.parentNode.replaceChild(o,t),b("inject",{el:t,...t.id&&{id:t.id}}),t.src&&""!==t.textContent.trim()&&o.addEventListener("load",()=>{let a=e.createElement("script");a.textContent=t.textContent,t.id&&(a.id=t.id+"-after"),o.insertAdjacentElement("afterend",a),b("inject",{el:a,parent:t,...a.id&&{id:a.id}})})})}$(v()||{});let T=Intl.DateTimeFormat().resolvedOptions().timeZone,S=/^(GMT|UTC)$/.test(T)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(T);l.acceptNonEU&&!S&&(k(!0),r(!1)),function(){s.classList.add(i),s.innerHTML=`${l.title}