From 2397132e3adfd513c1e9730e8069d1b03f16053f Mon Sep 17 00:00:00 2001 From: Phil Ricketts <812139+replete@users.noreply.github.com> Date: Mon, 12 Aug 2024 00:50:57 +0100 Subject: [PATCH] Fix event payload. Shorten event names. Improve polyfill loading. --- README.md | 86 ++++++++++++++++------------- dist/biscuitman.css | 2 +- dist/biscuitman.js | 8 ++- dist/biscuitman.min.css | 2 +- dist/biscuitman.min.js | 2 +- dist/biscuitman.withcss.js | 10 ++-- dist/biscuitman.withcss.min.js | 2 +- dist/esm/biscuitman.min.mjs | 2 +- dist/esm/biscuitman.mjs | 12 +++- dist/esm/biscuitman.withcss.min.mjs | 2 +- dist/esm/biscuitman.withcss.mjs | 14 +++-- index-esm.html | 54 ++++++++---------- index.html | 61 +++++++++----------- package.json | 2 +- run.js | 5 +- src/biscuitman.js | 4 +- src/biscuitman.mjs | 5 +- 17 files changed, 141 insertions(+), 132 deletions(-) diff --git a/README.md b/README.md index 36d2c19..4e31e1c 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 around 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 compressed including CSS, designed to be as small as possible and versatile enough for basic website 'cookie' consent management. - 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...) @@ -22,7 +22,6 @@ - CSS classes on `` element for consents - Progressively enhanced CSS - Experimental ESM version included `biscuitman.mjs` (see [ESM demo](https://replete.github.io/biscuitman/index-esm.html)) -- This project is tested with BrowserStack. ## How to use [View demo](https://replete.github.io/biscuitman) for a more detailed example @@ -121,7 +120,7 @@ While you have the option to enable or disable some or all of these cookies, not ## Experimental ESM version -I've included an ESM version as an alternative packaging format. Longterm it's better to not have two versions, so this may or not become the main version. Consider it an alternate packaging format at this point. +ESM version supplied as an alternative packaging format. Long-term it's better to not have two versions, so this may or not become the main version. Consider it an alternate packaging format at this point. [see ESM demo](https://replete.github.io/biscuitman/index-esm.html) ```html @@ -186,45 +185,51 @@ With browserlist, we're targeting `">= 2%, last 2 years"`. The earliest versions ### Extend browser support with Dialog polyfill -Include this script _after_ biscuitman.js to extend browser support to: +Include this script alongside the biscuitman config to extend browser support to: - Safari (inc iOS) 13.1+ (released March 2020) - Firefox 77+ (released June 2020) - Firefox Android 79+ (released August 2020) ```html - ``` ### Extend browser support even further with javascript polyfills -You can extend support to these browsers, by including this script _before_ biscuitman.js: +You can extend support to these browsers, by including the following script _before_ biscuitman.js: - Safari 11.1+ (released Jan 2018) -- Firefox 55+ (released August 2017) -- Chrome 60+ (released July 2017) +- Safari iOS 11.3+ (released Mar 2018) +- Firefox 55+ (released Aug 2017) +- Chrome 60+ (released Jul 2017) ```html ``` -If you need to support earlier than these browsers, you will need to start loading polyfills for missing javascript features. +Obviously a third party hosted polyfill is not good for performance, so in this scenario you'd want to self-host the `replaceAll` and `Object.fromEntries` polyfills. + +This does not apply to the ESM version, the support for ESM more like 2020. + +If you need to support earlier than these browsers, biscuitman would need to be compiled for an earlier javascript target as things like the spread operator are unsupported in earlier versions, which is possible by specifying an earlier `browserlist` target in package.json. ## Globals - `biscuitman` – configuration object, must be `window.biscuitman` (`biscuitman.create(options)` for ESM version) @@ -254,22 +259,25 @@ The ESM version currently does still use some globals. ## Events -Custom events prefixed with `biscuitman:` are fired on `document`. The easiest way to see how events work is to view the `console.debug()` calls in the [demo](https://replete.github.io/biscuitman). -- `biscuitman:open` => `{time: 1718915128298}` modal opened -- `biscuitman:close` => `{time: 1718915128298}` modal closed -- `biscuitman:button` => `{id: "settings", time: 1718915128298}` button clicked -- `biscuitman:save` => `{data: {consentTime: 1718914784624, advertisement:true, advertisement: fal..}, time: 1718914784624}` consent choice saved -- `biscuitman:inject` => `{el: $Element, parent?: $Element, id?: 'script-id', time: 1718914784624}` script injected to DOM. if parent exists, it's a new tag inserted after a `src` script loaded which also had text content (a 'dependent' script = tidier convenient markup) -- `biscuitman:invalidate` => `{data: {...consentObjectJustDeleted}, time: 1718915128298}` consent invalidated -- `biscuitman:revoke` => `{section: 'analytics', time: 1718914784624}` returns section that was revoked if updated consent changed from true to false -- `biscuitman:update` => `{data: {...currentConsentObject}, time: 1718914784624}` returns current consent object and time -- `biscuitman:delete` => `{localStorage|cookie: 'cookieName', time: 1718914784624}` fires when consent is rejected or invalidated and cookies/localStorage entries are deleted +Custom events prefixed with `bm:` are fired on `document`. The easiest way to see how events work is to view the `console.debug()` calls in the [demo](https://replete.github.io/biscuitman). +- `bm:open` => `{time: 1718915128298}` modal opened +- `bm:close` => `{time: 1718915128298}` modal closed +- `bm:button` => `{id: "settings", time: 1718915128298}` button clicked +- `bm:save` => `{data: {consentTime: 1718914784624, advertisement:true, advertisement: fal..}, time: 1718914784624}` consent choice saved +- `bm:inject` => `{el: $Element, parent?: $Element, id?: 'script-id', time: 1718914784624}` script injected to DOM. if parent exists, it's a new tag inserted after a `src` script loaded which also had text content (a 'dependent' script = tidier convenient markup) +- `bm:invalidate` => `{data: {...consentObjectJustDeleted}, time: 1718915128298}` consent invalidated +- `bm:revoke` => `{section: 'analytics', time: 1718914784624}` returns section that was revoked if updated consent changed from true to false +- `bm:update` => `{data: {...currentConsentObject}, time: 1718914784624}` returns current consent object and time +- `bm:delete` => `{localStorage|cookie: 'cookieName', time: 1718914784624}` fires when consent is rejected or invalidated and cookies/localStorage entries are deleted You can watch for these events like this: ```js -document.addEventListener('biscuitman:open', (e) => { - console.log('modal opened') -}, true); +document.addEventListener('bm:save', ({ detail }) => { + let { data, time } = detail + console.log(data) +}) + +TODO: Switch to `postMessage` to support web workers. ``` ## Development diff --git a/dist/biscuitman.css b/dist/biscuitman.css index c8d9535..1bc2a05 100644 --- a/dist/biscuitman.css +++ b/dist/biscuitman.css @@ -1,4 +1,4 @@ -/*! biscuitman.js 0.3.20 */ +/*! biscuitman.js 0.4.0 */ .biscuitman { --ui: 0, 0, 0; --tx: #444; diff --git a/dist/biscuitman.js b/dist/biscuitman.js index c8f4d91..0a438f6 100644 --- a/dist/biscuitman.js +++ b/dist/biscuitman.js @@ -1,4 +1,4 @@ -/*! biscuitman.js 0.3.20 */ +/*! biscuitman.js 0.4.0 */ ((d, w, O, h, bm)=>{ const defaults = { key: 'myconsent', @@ -145,12 +145,14 @@ dialog.showModal(); } function dispatch(eventName, data) { - const name = `${bm}:${eventName}`; + const name = `bm:${eventName}`; const payload = { ...data !== undefined && data, time: +new Date() }; - d.dispatchEvent(new CustomEvent(name, payload)); + d.dispatchEvent(new CustomEvent(name, { + detail: payload + })); console.debug(name, payload); } // Data: diff --git a/dist/biscuitman.min.css b/dist/biscuitman.min.css index 1c7353d..ef0bbaf 100644 --- a/dist/biscuitman.min.css +++ b/dist/biscuitman.min.css @@ -1 +1 @@ -/*! biscuitman.js 0.3.20 */.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 +/*! biscuitman.js 0.4.0 */.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 c692311..2fd12ed 100644 --- a/dist/biscuitman.min.js +++ b/dist/biscuitman.min.js @@ -1 +1 @@ -/*! biscuitman.js 0.3.20 */((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.open&&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}

${i.settingsTitle}

${i.message}

${i.info.split("\n").map((e,t,o)=>`${e}${o.length>1&&i.enableMore&&0==t?`${i.more}`:""}`).join("")}

${i.sections.map(e=>{let t=f()[e],a="essential"===e,s=a?"disabled":"",c=a?"checked":"";void 0!==t&&(c=t?"checked":"");let l=i[`${e}Cookies`];return`
${i[`${e}Title`]}

${i[`${e}Message`]}

${l?o.entries(l).map(e=>{let[t,o]=e;return`
${t}
${o}
`}).join(""):`
${i.noCookies}
`}
`}).join("")}
`.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.4.0 */((e,t,o,a,n)=>{let i;let s={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}=$();for(let[n,i]of(e||(t=o.fromEntries(s.sections.slice(1).map(e=>[e,!1]))),o.entries(t)))a.classList.toggle(`bm-${n}`,i),a.classList.toggle(`bm-no-${n}`,!i)};function m(e){let t=e.target.dataset.id;switch(f("button",{id:t}),t){case"accept":E(!0);break;case"close":i.close();break;case"settings":b();break;case"save":E();break;case"reject":E(!1)}}function p(){f("close")}function u(e){s.force&&e.preventDefault()}function b(){f("open"),i.showModal()}function f(t,o){let a=`bm:${t}`,n={...void 0!==o&&o,time:+new Date};e.dispatchEvent(new CustomEvent(a,{detail:n})),console.debug(a,n)}let $=()=>t[s.global]||{};function g(e){t[s.global]=e,d()}function v(e,t){for(let o in e)e[o]&&!1===t[o]&&f("revoke",{section:o})}function k(){try{return JSON.parse(localStorage.getItem(s.key))}catch(e){return console.error(e),localStorage.removeItem(s.key),{}}}function h(){let t=o.fromEntries(o.entries(localStorage)),a=o.fromEntries(e.cookie.split("; ").map(e=>e.split("="))),{consentTime:n,...i}=k()||s.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[n,c]of o.entries(i)){if(c)continue;let i=o.keys(s[`${n}Cookies`]||{});for(let n of(i.filter(e=>e.endsWith("*")).map(e=>{o.keys({...a,...t}).map(t=>{t.startsWith(e.slice(0,-1))&&i.push(t)})}),i)){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};`,f("delete",{cookie:n})}t[n]&&(localStorage.removeItem(n),f("delete",{localStorage:n}))}}}function E(e){let t=void 0===e,o={consentTime:+new Date};s.sections.forEach(a=>{if("essential"===a)return!1;let n=c.querySelector(`[data-s=${a}]`),i=t?n.checked:e;o[a]=i,t||(n.checked=e)}),v($(),o),g(o),localStorage.setItem(s.key,JSON.stringify(o)),f("save",{data:o}),h(),y(),i.open&&i.close(),r(!1)}function y(){e.querySelectorAll("script[data-consent]").forEach(t=>{if(!$()[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),f("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),f("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);s.acceptNonEU&&!S&&(E(!0),r(!1)),function(){c.classList.add(n),c.innerHTML=`
${s.title}

${s.message}

${s.settingsTitle}

${s.message}

${s.info.split("\n").map((e,t,o)=>`${e}${o.length>1&&s.enableMore&&0==t?`${s.more}`:""}`).join("")}

${s.sections.map(e=>{let t=$()[e],a="essential"===e,i=a?"disabled":"",c=a?"checked":"";void 0!==t&&(c=t?"checked":"");let l=s[`${e}Cookies`];return`
${s[`${e}Title`]}

${s[`${e}Message`]}

${l?o.entries(l).map(e=>{let[t,o]=e;return`
${t}
${o}
`}).join(""):`
${s.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${s.linkText}`),c.querySelectorAll("button").forEach(e=>e.addEventListener("click",m)),(i=c.querySelector("dialog")).addEventListener("close",p),i.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[s.global].consentTime?(r(!1),y()):(r(!0),s.force&&b()),t.bmInvalidate=()=>{f("invalidate",{data:$()}),v({}),E(!1),g({}),localStorage.removeItem(s.key),r(!0)},t.bmUpdate=()=>{f("update",{data:$()}),b()}})(document,window,Object,document.documentElement,"biscuitman"); \ No newline at end of file diff --git a/dist/biscuitman.withcss.js b/dist/biscuitman.withcss.js index c4f1a91..f99b1b9 100644 --- a/dist/biscuitman.withcss.js +++ b/dist/biscuitman.withcss.js @@ -1,4 +1,4 @@ -/*! biscuitman.js 0.3.20 */ +/*! biscuitman.js 0.4.0 */ ((d, w, O, h, bm)=>{ const defaults = { key: 'myconsent', @@ -145,12 +145,14 @@ dialog.showModal(); } function dispatch(eventName, data) { - const name = `${bm}:${eventName}`; + const name = `bm:${eventName}`; const payload = { ...data !== undefined && data, time: +new Date() }; - d.dispatchEvent(new CustomEvent(name, payload)); + d.dispatchEvent(new CustomEvent(name, { + detail: payload + })); console.debug(name, payload); } // Data: @@ -316,7 +318,7 @@ ; ((d)=>{ let css=d.createElement('style'); - css.textContent=`/*! biscuitman.js 0.3.20 */ + css.textContent=`/*! biscuitman.js 0.4.0 */ .biscuitman { --ui: 0, 0, 0; --tx: #444; diff --git a/dist/biscuitman.withcss.min.js b/dist/biscuitman.withcss.min.js index 9ccf890..d1f2520 100644 --- a/dist/biscuitman.withcss.min.js +++ b/dist/biscuitman.withcss.min.js @@ -1 +1 @@ -/*! biscuitman.js 0.3.20 */((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.open&&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}

${i.settingsTitle}

${i.message}

${i.info.split("\n").map((e,t,o)=>`${e}${o.length>1&&i.enableMore&&0==t?`${i.more}`:""}`).join("")}

${i.sections.map(e=>{let t=f()[e],a="essential"===e,s=a?"disabled":"",c=a?"checked":"";void 0!==t&&(c=t?"checked":"");let l=i[`${e}Cookies`];return`
${i[`${e}Title`]}

${i[`${e}Message`]}

${l?o.entries(l).map(e=>{let[t,o]=e;return`
${t}
${o}
`}).join(""):`
${i.noCookies}
`}
`}).join("")}
`.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");;((d)=>{let c=d.createElement('style');c.textContent=`/*! biscuitman.js 0.3.20 */.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%)}`;d.head.appendChild(c)})(document); \ No newline at end of file +/*! biscuitman.js 0.4.0 */((e,t,o,a,n)=>{let i;let s={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}=$();for(let[n,i]of(e||(t=o.fromEntries(s.sections.slice(1).map(e=>[e,!1]))),o.entries(t)))a.classList.toggle(`bm-${n}`,i),a.classList.toggle(`bm-no-${n}`,!i)};function m(e){let t=e.target.dataset.id;switch(f("button",{id:t}),t){case"accept":E(!0);break;case"close":i.close();break;case"settings":b();break;case"save":E();break;case"reject":E(!1)}}function p(){f("close")}function u(e){s.force&&e.preventDefault()}function b(){f("open"),i.showModal()}function f(t,o){let a=`bm:${t}`,n={...void 0!==o&&o,time:+new Date};e.dispatchEvent(new CustomEvent(a,{detail:n})),console.debug(a,n)}let $=()=>t[s.global]||{};function g(e){t[s.global]=e,d()}function v(e,t){for(let o in e)e[o]&&!1===t[o]&&f("revoke",{section:o})}function k(){try{return JSON.parse(localStorage.getItem(s.key))}catch(e){return console.error(e),localStorage.removeItem(s.key),{}}}function h(){let t=o.fromEntries(o.entries(localStorage)),a=o.fromEntries(e.cookie.split("; ").map(e=>e.split("="))),{consentTime:n,...i}=k()||s.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[n,c]of o.entries(i)){if(c)continue;let i=o.keys(s[`${n}Cookies`]||{});for(let n of(i.filter(e=>e.endsWith("*")).map(e=>{o.keys({...a,...t}).map(t=>{t.startsWith(e.slice(0,-1))&&i.push(t)})}),i)){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};`,f("delete",{cookie:n})}t[n]&&(localStorage.removeItem(n),f("delete",{localStorage:n}))}}}function E(e){let t=void 0===e,o={consentTime:+new Date};s.sections.forEach(a=>{if("essential"===a)return!1;let n=c.querySelector(`[data-s=${a}]`),i=t?n.checked:e;o[a]=i,t||(n.checked=e)}),v($(),o),g(o),localStorage.setItem(s.key,JSON.stringify(o)),f("save",{data:o}),h(),y(),i.open&&i.close(),r(!1)}function y(){e.querySelectorAll("script[data-consent]").forEach(t=>{if(!$()[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),f("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),f("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);s.acceptNonEU&&!S&&(E(!0),r(!1)),function(){c.classList.add(n),c.innerHTML=`
${s.title}

${s.message}

${s.settingsTitle}

${s.message}

${s.info.split("\n").map((e,t,o)=>`${e}${o.length>1&&s.enableMore&&0==t?`${s.more}`:""}`).join("")}

${s.sections.map(e=>{let t=$()[e],a="essential"===e,i=a?"disabled":"",c=a?"checked":"";void 0!==t&&(c=t?"checked":"");let l=s[`${e}Cookies`];return`
${s[`${e}Title`]}

${s[`${e}Message`]}

${l?o.entries(l).map(e=>{let[t,o]=e;return`
${t}
${o}
`}).join(""):`
${s.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${s.linkText}`),c.querySelectorAll("button").forEach(e=>e.addEventListener("click",m)),(i=c.querySelector("dialog")).addEventListener("close",p),i.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[s.global].consentTime?(r(!1),y()):(r(!0),s.force&&b()),t.bmInvalidate=()=>{f("invalidate",{data:$()}),v({}),E(!1),g({}),localStorage.removeItem(s.key),r(!0)},t.bmUpdate=()=>{f("update",{data:$()}),b()}})(document,window,Object,document.documentElement,"biscuitman");;((d)=>{let c=d.createElement('style');c.textContent=`/*! biscuitman.js 0.4.0 */.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%)}`;d.head.appendChild(c)})(document); \ No newline at end of file diff --git a/dist/esm/biscuitman.min.mjs b/dist/esm/biscuitman.min.mjs index 889cdb9..cd8a817 100644 --- a/dist/esm/biscuitman.min.mjs +++ b/dist/esm/biscuitman.min.mjs @@ -1 +1 @@ -/*! biscuitman.js 0.3.20 */let e,t,o;let{document:n,window:a,Object:i}=globalThis,s=n.documentElement,c="biscuitman",l={},r={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},d=document.createElement("div"),u=()=>{s.style.setProperty("--bm-height",`${d.offsetHeight}px`)},p=e=>{s.classList.toggle("bm-show",e),u()},m=()=>{let{consentTime:e,...o}=h();for(let[n,a]of(e||(o=i.fromEntries(t.sections.slice(1).map(e=>[e,!1]))),i.entries(o)))s.classList.toggle(`bm-${n}`,a),s.classList.toggle(`bm-no-${n}`,!a)};function f(e){let t=e.target.dataset.id;switch(v("button",{id:t}),t){case"accept":C(!0);break;case"close":o.close();break;case"settings":g();break;case"save":C();break;case"reject":C(!1)}}function b(){v("close")}function $(e){t.force&&e.preventDefault()}function g(){v("open"),o.showModal()}function v(e,t){let o=`${c}:${e}`,a={...void 0!==t&&t,time:+new Date};n.dispatchEvent(new CustomEvent(o,a)),console.debug(o,a),l[o]&&l[o].forEach(e=>e(a))}let h=()=>a[t.global]||{};function k(e){a[t.global]=e,m()}let E=e=>!!h()[e];function y(e,t){for(let o in e)e[o]&&!1===t[o]&&v("revoke",{section:o})}function T(){try{return JSON.parse(localStorage.getItem(t.key))}catch(e){return console.error(e),localStorage.removeItem(t.key),{}}}function S(){let e=i.fromEntries(i.entries(localStorage)),o=i.fromEntries(n.cookie.split("; ").map(e=>e.split("="))),{consentTime:a,...s}=T()||t.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[a,c]of i.entries(s)){if(c)continue;let s=i.keys(t[`${a}Cookies`]||{});for(let t of(s.filter(e=>e.endsWith("*")).map(t=>{i.keys({...o,...e}).map(e=>{e.startsWith(t.slice(0,-1))&&s.push(e)})}),s)){if(o[t]){let e=`${t}=;expires=Thu, 01 Jan 1970 00:00:01 UTC;path=/;`;n.cookie=e,n.cookie=`${e}domain=${location.hostname};`,n.cookie=`${e}domain=.${location.hostname};`,v("delete",{cookie:t})}e[t]&&(localStorage.removeItem(t),v("delete",{localStorage:t}))}}}function C(e){let n=void 0===e,a={consentTime:+new Date};t.sections.forEach(t=>{if("essential"===t)return!1;let o=d.querySelector(`[data-s=${t}]`),i=n?o.checked:e;a[t]=i,n||(o.checked=e)}),y(h(),a),k(a),localStorage.setItem(t.key,JSON.stringify(a)),v("save",{data:a}),S(),j(),o.open&&o.close(),p(!1)}function j(){n.querySelectorAll("script[data-consent]").forEach(e=>{if(!h()[e.dataset.consent])return!1;let t=n.createElement("script");for(let{name:o,value:n}of e.attributes)o.startsWith("data-")||"type"===o||t.setAttribute(o,n);t.setAttribute("type",e.dataset.type||"text/javascript"),e.src||(t.textContent=e.textContent),e.parentNode.replaceChild(t,e),v("inject",{el:e,...e.id&&{id:e.id}}),e.src&&""!==e.textContent.trim()&&t.addEventListener("load",()=>{let o=n.createElement("script");o.textContent=e.textContent,e.id&&(o.id=e.id+"-after"),t.insertAdjacentElement("afterend",o),v("inject",{el:o,parent:e,...o.id&&{id:o.id}})})})}export default{create:function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e)return e;t={...r,...s};let m=a.bmInvalidate=()=>{v("invalidate",{data:h()}),y({}),C(!1),k({}),localStorage.removeItem(t.key),p(!0)},L=a.bmUpdate=()=>{v("update",{data:h()}),g()};return k(T()||{}),function(){let e=Intl.DateTimeFormat().resolvedOptions().timeZone,o=/^(GMT|UTC)$/.test(e)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(e);t.acceptNonEU&&!o&&(C(!0),p(!1))}(),function(){d.classList.add("biscuitman"),d.innerHTML=`
${t.title}

${t.message}

${t.settingsTitle}

${t.message}

${t.info.split("\n").map((e,o,n)=>`${e}${n.length>1&&t.enableMore&&0==o?`${t.more}`:""}`).join("")}

${t.sections.map(e=>{let o=h()[e],n="essential"===e,a=n?"disabled":"",s=n?"checked":"";void 0!==o&&(s=o?"checked":"");let l=t[`${e}Cookies`];return`
${t[`${e}Title`]}

${t[`${e}Message`]}

${l?i.entries(l).map(e=>{let[t,o]=e;return`
${t}
${o}
`}).join(""):`
${t.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${t.linkText}`),d.querySelectorAll("button").forEach(e=>e.addEventListener("click",f)),(o=d.querySelector("dialog")).addEventListener("close",b),o.addEventListener("cancel",$);let e=d.querySelector(".more");e&&e.addEventListener("click",e.remove),d.querySelectorAll("[data-s]").forEach(e=>e.addEventListener("change",t=>{e.parentElement.classList.toggle("checked",t.target.checked)})),n.body.appendChild(d),a.addEventListener("resize",u)}(),S(),a[t.global].consentTime?(p(!1),j()):(p(!0),t.force&&g()),e={consent:E,invalidate:m,update:L,on:(t,o)=>{let n=`${c}:${t}`;return l[n]||(l[n]=[]),l[n].push(o),e},off:(e,t)=>{let o=`${c}:${e}`;l[o]&&(l[o]=l[o].filter(e=>e!==t))}}}}; \ No newline at end of file +/*! biscuitman.js 0.4.0 */let e,t,o;let{document:n,window:a,Object:i}=globalThis,s=n.documentElement,c="biscuitman",l={},r={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},d=document.createElement("div"),u=()=>{s.style.setProperty("--bm-height",`${d.offsetHeight}px`)},m=e=>{s.classList.toggle("bm-show",e),u()},p=()=>{let{consentTime:e,...o}=h();for(let[n,a]of(e||(o=i.fromEntries(t.sections.slice(1).map(e=>[e,!1]))),i.entries(o)))s.classList.toggle(`bm-${n}`,a),s.classList.toggle(`bm-no-${n}`,!a)};function f(e){let t=e.target.dataset.id;switch(v("button",{id:t}),t){case"accept":C(!0);break;case"close":o.close();break;case"settings":g();break;case"save":C();break;case"reject":C(!1)}}function b(){v("close")}function $(e){t.force&&e.preventDefault()}function g(){v("open"),o.showModal()}function v(e,t){let o=`bm:${e}`,a={...void 0!==t&&t,time:+new Date};n.dispatchEvent(new CustomEvent(o,{detail:a})),console.debug(o,a),l[o]&&l[o].forEach(e=>e(a))}let h=()=>a[t.global]||{};function k(e){a[t.global]=e,p()}let E=e=>!!h()[e];function y(e,t){for(let o in e)e[o]&&!1===t[o]&&v("revoke",{section:o})}function T(){try{return JSON.parse(localStorage.getItem(t.key))}catch(e){return console.error(e),localStorage.removeItem(t.key),{}}}function S(){let e=i.fromEntries(i.entries(localStorage)),o=i.fromEntries(n.cookie.split("; ").map(e=>e.split("="))),{consentTime:a,...s}=T()||t.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[a,c]of i.entries(s)){if(c)continue;let s=i.keys(t[`${a}Cookies`]||{});for(let t of(s.filter(e=>e.endsWith("*")).map(t=>{i.keys({...o,...e}).map(e=>{e.startsWith(t.slice(0,-1))&&s.push(e)})}),s)){if(o[t]){let e=`${t}=;expires=Thu, 01 Jan 1970 00:00:01 UTC;path=/;`;n.cookie=e,n.cookie=`${e}domain=${location.hostname};`,n.cookie=`${e}domain=.${location.hostname};`,v("delete",{cookie:t})}e[t]&&(localStorage.removeItem(t),v("delete",{localStorage:t}))}}}function C(e){let n=void 0===e,a={consentTime:+new Date};t.sections.forEach(t=>{if("essential"===t)return!1;let o=d.querySelector(`[data-s=${t}]`),i=n?o.checked:e;a[t]=i,n||(o.checked=e)}),y(h(),a),k(a),localStorage.setItem(t.key,JSON.stringify(a)),v("save",{data:a}),S(),j(),o.open&&o.close(),m(!1)}function j(){n.querySelectorAll("script[data-consent]").forEach(e=>{if(!h()[e.dataset.consent])return!1;let t=n.createElement("script");for(let{name:o,value:n}of e.attributes)o.startsWith("data-")||"type"===o||t.setAttribute(o,n);t.setAttribute("type",e.dataset.type||"text/javascript"),e.src||(t.textContent=e.textContent),e.parentNode.replaceChild(t,e),v("inject",{el:e,...e.id&&{id:e.id}}),e.src&&""!==e.textContent.trim()&&t.addEventListener("load",()=>{let o=n.createElement("script");o.textContent=e.textContent,e.id&&(o.id=e.id+"-after"),t.insertAdjacentElement("afterend",o),v("inject",{el:o,parent:e,...o.id&&{id:o.id}})})})}export default{create:function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e)return e;t={...r,...s};let p=a.bmInvalidate=()=>{v("invalidate",{data:h()}),y({}),C(!1),k({}),localStorage.removeItem(t.key),m(!0)},L=a.bmUpdate=()=>{v("update",{data:h()}),g()};return k(T()||{}),function(){let e=Intl.DateTimeFormat().resolvedOptions().timeZone,o=/^(GMT|UTC)$/.test(e)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(e);t.acceptNonEU&&!o&&(C(!0),m(!1))}(),function(){d.classList.add("biscuitman"),d.innerHTML=`
${t.title}

${t.message}

${t.settingsTitle}

${t.message}

${t.info.split("\n").map((e,o,n)=>`${e}${n.length>1&&t.enableMore&&0==o?`${t.more}`:""}`).join("")}

${t.sections.map(e=>{let o=h()[e],n="essential"===e,a=n?"disabled":"",s=n?"checked":"";void 0!==o&&(s=o?"checked":"");let l=t[`${e}Cookies`];return`
${t[`${e}Title`]}

${t[`${e}Message`]}

${l?i.entries(l).map(e=>{let[t,o]=e;return`
${t}
${o}
`}).join(""):`
${t.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${t.linkText}`),d.querySelectorAll("button").forEach(e=>e.addEventListener("click",f)),(o=d.querySelector("dialog")).addEventListener("close",b),o.addEventListener("cancel",$);let e=d.querySelector(".more");e&&e.addEventListener("click",e.remove),d.querySelectorAll("[data-s]").forEach(e=>e.addEventListener("change",t=>{e.parentElement.classList.toggle("checked",t.target.checked)})),n.body.appendChild(d),a.addEventListener("resize",u),v("render",{dialog:o,ui:d})}(),S(),a[t.global].consentTime?(m(!1),j()):(m(!0),t.force&&g()),e={consent:E,invalidate:p,update:L,on:(t,o)=>{let n=`${c}:${t}`;return l[n]||(l[n]=[]),l[n].push(o),e},off:(e,t)=>{let o=`${c}:${e}`;l[o]&&(l[o]=l[o].filter(e=>e!==t))}}}}; \ No newline at end of file diff --git a/dist/esm/biscuitman.mjs b/dist/esm/biscuitman.mjs index 2aabd05..90af620 100644 --- a/dist/esm/biscuitman.mjs +++ b/dist/esm/biscuitman.mjs @@ -1,4 +1,4 @@ -/*! biscuitman.js 0.3.20 */ +/*! biscuitman.js 0.4.0 */ const { document: d, window: w, Object: O } = globalThis; const h = d.documentElement; const bm = 'biscuitman'; @@ -92,6 +92,10 @@ function render() { })); d.body.appendChild(ui); w.addEventListener('resize', updateBannerHeight); + dispatch('render', { + dialog, + ui + }); } const updateBannerHeight = ()=>{ h.style.setProperty('--bm-height', `${ui.offsetHeight}px`); @@ -146,12 +150,14 @@ function openModal() { dialog.showModal(); } function dispatch(eventName, data) { - const name = `${bm}:${eventName}`; + const name = `bm:${eventName}`; const payload = { ...data !== undefined && data, time: +new Date() }; - d.dispatchEvent(new CustomEvent(name, payload)); + d.dispatchEvent(new CustomEvent(name, { + detail: payload + })); console.debug(name, payload); if (listeners[name]) listeners[name].forEach((callback)=>callback(payload)); } diff --git a/dist/esm/biscuitman.withcss.min.mjs b/dist/esm/biscuitman.withcss.min.mjs index 31165cf..00c1b4d 100644 --- a/dist/esm/biscuitman.withcss.min.mjs +++ b/dist/esm/biscuitman.withcss.min.mjs @@ -1 +1 @@ -/*! biscuitman.js 0.3.20 */let e,t,o;let{document:n,window:a,Object:i}=globalThis,s=n.documentElement,c="biscuitman",l={},r={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},d=document.createElement("div"),u=()=>{s.style.setProperty("--bm-height",`${d.offsetHeight}px`)},p=e=>{s.classList.toggle("bm-show",e),u()},m=()=>{let{consentTime:e,...o}=h();for(let[n,a]of(e||(o=i.fromEntries(t.sections.slice(1).map(e=>[e,!1]))),i.entries(o)))s.classList.toggle(`bm-${n}`,a),s.classList.toggle(`bm-no-${n}`,!a)};function f(e){let t=e.target.dataset.id;switch(v("button",{id:t}),t){case"accept":C(!0);break;case"close":o.close();break;case"settings":g();break;case"save":C();break;case"reject":C(!1)}}function b(){v("close")}function $(e){t.force&&e.preventDefault()}function g(){v("open"),o.showModal()}function v(e,t){let o=`${c}:${e}`,a={...void 0!==t&&t,time:+new Date};n.dispatchEvent(new CustomEvent(o,a)),console.debug(o,a),l[o]&&l[o].forEach(e=>e(a))}let h=()=>a[t.global]||{};function k(e){a[t.global]=e,m()}let E=e=>!!h()[e];function y(e,t){for(let o in e)e[o]&&!1===t[o]&&v("revoke",{section:o})}function T(){try{return JSON.parse(localStorage.getItem(t.key))}catch(e){return console.error(e),localStorage.removeItem(t.key),{}}}function S(){let e=i.fromEntries(i.entries(localStorage)),o=i.fromEntries(n.cookie.split("; ").map(e=>e.split("="))),{consentTime:a,...s}=T()||t.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[a,c]of i.entries(s)){if(c)continue;let s=i.keys(t[`${a}Cookies`]||{});for(let t of(s.filter(e=>e.endsWith("*")).map(t=>{i.keys({...o,...e}).map(e=>{e.startsWith(t.slice(0,-1))&&s.push(e)})}),s)){if(o[t]){let e=`${t}=;expires=Thu, 01 Jan 1970 00:00:01 UTC;path=/;`;n.cookie=e,n.cookie=`${e}domain=${location.hostname};`,n.cookie=`${e}domain=.${location.hostname};`,v("delete",{cookie:t})}e[t]&&(localStorage.removeItem(t),v("delete",{localStorage:t}))}}}function C(e){let n=void 0===e,a={consentTime:+new Date};t.sections.forEach(t=>{if("essential"===t)return!1;let o=d.querySelector(`[data-s=${t}]`),i=n?o.checked:e;a[t]=i,n||(o.checked=e)}),y(h(),a),k(a),localStorage.setItem(t.key,JSON.stringify(a)),v("save",{data:a}),S(),j(),o.open&&o.close(),p(!1)}function j(){n.querySelectorAll("script[data-consent]").forEach(e=>{if(!h()[e.dataset.consent])return!1;let t=n.createElement("script");for(let{name:o,value:n}of e.attributes)o.startsWith("data-")||"type"===o||t.setAttribute(o,n);t.setAttribute("type",e.dataset.type||"text/javascript"),e.src||(t.textContent=e.textContent),e.parentNode.replaceChild(t,e),v("inject",{el:e,...e.id&&{id:e.id}}),e.src&&""!==e.textContent.trim()&&t.addEventListener("load",()=>{let o=n.createElement("script");o.textContent=e.textContent,e.id&&(o.id=e.id+"-after"),t.insertAdjacentElement("afterend",o),v("inject",{el:o,parent:e,...o.id&&{id:o.id}})})})}export default{create:function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e)return e;t={...r,...s};let m=a.bmInvalidate=()=>{v("invalidate",{data:h()}),y({}),C(!1),k({}),localStorage.removeItem(t.key),p(!0)},L=a.bmUpdate=()=>{v("update",{data:h()}),g()};return k(T()||{}),function(){let e=Intl.DateTimeFormat().resolvedOptions().timeZone,o=/^(GMT|UTC)$/.test(e)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(e);t.acceptNonEU&&!o&&(C(!0),p(!1))}(),function(){d.classList.add("biscuitman"),d.innerHTML=`
${t.title}

${t.message}

${t.settingsTitle}

${t.message}

${t.info.split("\n").map((e,o,n)=>`${e}${n.length>1&&t.enableMore&&0==o?`${t.more}`:""}`).join("")}

${t.sections.map(e=>{let o=h()[e],n="essential"===e,a=n?"disabled":"",s=n?"checked":"";void 0!==o&&(s=o?"checked":"");let l=t[`${e}Cookies`];return`
${t[`${e}Title`]}

${t[`${e}Message`]}

${l?i.entries(l).map(e=>{let[t,o]=e;return`
${t}
${o}
`}).join(""):`
${t.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${t.linkText}`),d.querySelectorAll("button").forEach(e=>e.addEventListener("click",f)),(o=d.querySelector("dialog")).addEventListener("close",b),o.addEventListener("cancel",$);let e=d.querySelector(".more");e&&e.addEventListener("click",e.remove),d.querySelectorAll("[data-s]").forEach(e=>e.addEventListener("change",t=>{e.parentElement.classList.toggle("checked",t.target.checked)})),n.body.appendChild(d),a.addEventListener("resize",u)}(),S(),a[t.global].consentTime?(p(!1),j()):(p(!0),t.force&&g()),e={consent:E,invalidate:m,update:L,on:(t,o)=>{let n=`${c}:${t}`;return l[n]||(l[n]=[]),l[n].push(o),e},off:(e,t)=>{let o=`${c}:${e}`;l[o]&&(l[o]=l[o].filter(e=>e!==t))}}}};;if(typeof BMCSS==='undefined'){let c=document.createElement('style');c.id='BMCSS';c.textContent=`/*! biscuitman.js 0.3.20 */.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%)}`;document.head.appendChild(c)} \ No newline at end of file +/*! biscuitman.js 0.4.0 */let e,t,o;let{document:n,window:a,Object:i}=globalThis,s=n.documentElement,c="biscuitman",l={},r={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},d=document.createElement("div"),u=()=>{s.style.setProperty("--bm-height",`${d.offsetHeight}px`)},m=e=>{s.classList.toggle("bm-show",e),u()},p=()=>{let{consentTime:e,...o}=h();for(let[n,a]of(e||(o=i.fromEntries(t.sections.slice(1).map(e=>[e,!1]))),i.entries(o)))s.classList.toggle(`bm-${n}`,a),s.classList.toggle(`bm-no-${n}`,!a)};function f(e){let t=e.target.dataset.id;switch(v("button",{id:t}),t){case"accept":C(!0);break;case"close":o.close();break;case"settings":g();break;case"save":C();break;case"reject":C(!1)}}function b(){v("close")}function $(e){t.force&&e.preventDefault()}function g(){v("open"),o.showModal()}function v(e,t){let o=`bm:${e}`,a={...void 0!==t&&t,time:+new Date};n.dispatchEvent(new CustomEvent(o,{detail:a})),console.debug(o,a),l[o]&&l[o].forEach(e=>e(a))}let h=()=>a[t.global]||{};function k(e){a[t.global]=e,p()}let E=e=>!!h()[e];function y(e,t){for(let o in e)e[o]&&!1===t[o]&&v("revoke",{section:o})}function T(){try{return JSON.parse(localStorage.getItem(t.key))}catch(e){return console.error(e),localStorage.removeItem(t.key),{}}}function S(){let e=i.fromEntries(i.entries(localStorage)),o=i.fromEntries(n.cookie.split("; ").map(e=>e.split("="))),{consentTime:a,...s}=T()||t.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[a,c]of i.entries(s)){if(c)continue;let s=i.keys(t[`${a}Cookies`]||{});for(let t of(s.filter(e=>e.endsWith("*")).map(t=>{i.keys({...o,...e}).map(e=>{e.startsWith(t.slice(0,-1))&&s.push(e)})}),s)){if(o[t]){let e=`${t}=;expires=Thu, 01 Jan 1970 00:00:01 UTC;path=/;`;n.cookie=e,n.cookie=`${e}domain=${location.hostname};`,n.cookie=`${e}domain=.${location.hostname};`,v("delete",{cookie:t})}e[t]&&(localStorage.removeItem(t),v("delete",{localStorage:t}))}}}function C(e){let n=void 0===e,a={consentTime:+new Date};t.sections.forEach(t=>{if("essential"===t)return!1;let o=d.querySelector(`[data-s=${t}]`),i=n?o.checked:e;a[t]=i,n||(o.checked=e)}),y(h(),a),k(a),localStorage.setItem(t.key,JSON.stringify(a)),v("save",{data:a}),S(),j(),o.open&&o.close(),m(!1)}function j(){n.querySelectorAll("script[data-consent]").forEach(e=>{if(!h()[e.dataset.consent])return!1;let t=n.createElement("script");for(let{name:o,value:n}of e.attributes)o.startsWith("data-")||"type"===o||t.setAttribute(o,n);t.setAttribute("type",e.dataset.type||"text/javascript"),e.src||(t.textContent=e.textContent),e.parentNode.replaceChild(t,e),v("inject",{el:e,...e.id&&{id:e.id}}),e.src&&""!==e.textContent.trim()&&t.addEventListener("load",()=>{let o=n.createElement("script");o.textContent=e.textContent,e.id&&(o.id=e.id+"-after"),t.insertAdjacentElement("afterend",o),v("inject",{el:o,parent:e,...o.id&&{id:o.id}})})})}export default{create:function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e)return e;t={...r,...s};let p=a.bmInvalidate=()=>{v("invalidate",{data:h()}),y({}),C(!1),k({}),localStorage.removeItem(t.key),m(!0)},L=a.bmUpdate=()=>{v("update",{data:h()}),g()};return k(T()||{}),function(){let e=Intl.DateTimeFormat().resolvedOptions().timeZone,o=/^(GMT|UTC)$/.test(e)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(e);t.acceptNonEU&&!o&&(C(!0),m(!1))}(),function(){d.classList.add("biscuitman"),d.innerHTML=`
${t.title}

${t.message}

${t.settingsTitle}

${t.message}

${t.info.split("\n").map((e,o,n)=>`${e}${n.length>1&&t.enableMore&&0==o?`${t.more}`:""}`).join("")}

${t.sections.map(e=>{let o=h()[e],n="essential"===e,a=n?"disabled":"",s=n?"checked":"";void 0!==o&&(s=o?"checked":"");let l=t[`${e}Cookies`];return`
${t[`${e}Title`]}

${t[`${e}Message`]}

${l?i.entries(l).map(e=>{let[t,o]=e;return`
${t}
${o}
`}).join(""):`
${t.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${t.linkText}`),d.querySelectorAll("button").forEach(e=>e.addEventListener("click",f)),(o=d.querySelector("dialog")).addEventListener("close",b),o.addEventListener("cancel",$);let e=d.querySelector(".more");e&&e.addEventListener("click",e.remove),d.querySelectorAll("[data-s]").forEach(e=>e.addEventListener("change",t=>{e.parentElement.classList.toggle("checked",t.target.checked)})),n.body.appendChild(d),a.addEventListener("resize",u),v("render",{dialog:o,ui:d})}(),S(),a[t.global].consentTime?(m(!1),j()):(m(!0),t.force&&g()),e={consent:E,invalidate:p,update:L,on:(t,o)=>{let n=`${c}:${t}`;return l[n]||(l[n]=[]),l[n].push(o),e},off:(e,t)=>{let o=`${c}:${e}`;l[o]&&(l[o]=l[o].filter(e=>e!==t))}}}};;if(typeof BMCSS==='undefined'){let c=document.createElement('style');c.id='BMCSS';c.textContent=`/*! biscuitman.js 0.4.0 */.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%)}`;document.head.appendChild(c)} \ No newline at end of file diff --git a/dist/esm/biscuitman.withcss.mjs b/dist/esm/biscuitman.withcss.mjs index 641cee5..01d0a80 100644 --- a/dist/esm/biscuitman.withcss.mjs +++ b/dist/esm/biscuitman.withcss.mjs @@ -1,4 +1,4 @@ -/*! biscuitman.js 0.3.20 */ +/*! biscuitman.js 0.4.0 */ const { document: d, window: w, Object: O } = globalThis; const h = d.documentElement; const bm = 'biscuitman'; @@ -92,6 +92,10 @@ function render() { })); d.body.appendChild(ui); w.addEventListener('resize', updateBannerHeight); + dispatch('render', { + dialog, + ui + }); } const updateBannerHeight = ()=>{ h.style.setProperty('--bm-height', `${ui.offsetHeight}px`); @@ -146,12 +150,14 @@ function openModal() { dialog.showModal(); } function dispatch(eventName, data) { - const name = `${bm}:${eventName}`; + const name = `bm:${eventName}`; const payload = { ...data !== undefined && data, time: +new Date() }; - d.dispatchEvent(new CustomEvent(name, payload)); + d.dispatchEvent(new CustomEvent(name, { + detail: payload + })); console.debug(name, payload); if (listeners[name]) listeners[name].forEach((callback)=>callback(payload)); } @@ -352,7 +358,7 @@ export default { if (typeof BMCSS === 'undefined') { let css=document.createElement('style'); css.id = 'BMCSS'; - css.textContent=`/*! biscuitman.js 0.3.20 */ + css.textContent=`/*! biscuitman.js 0.4.0 */ .biscuitman { --ui: 0, 0, 0; --tx: #444; diff --git a/index-esm.html b/index-esm.html index fe6c201..a9d2b78 100644 --- a/index-esm.html +++ b/index-esm.html @@ -117,12 +117,28 @@ - - - - - - - - - - - -

🍪 biscuitman.js

-

Lightweight Consent Manager

+

Lightweight Consent Manager 


+
+		
 	

 	

 		
README @ Github repo

diff --git a/package.json b/package.json
index 24dfd9e..6f546f1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "biscuitman",
-  "version": "0.3.20",
+  "version": "0.4.0",
   "description": "Super lightweight open-source privacy consent manager for your website ",
   "browser": "biscuitman.js",
   "keywords": [
diff --git a/run.js b/run.js
index b1f46eb..4830c97 100644
--- a/run.js
+++ b/run.js
@@ -258,7 +258,10 @@ export async function serve() {
 		}
 	})
 
-	bs.watch('./src/biscuitman.js', async (event, file) => {
+	bs.watch([
+		'./src/biscuitman.js',
+		'./src/biscuitman.mjs'
+	], async (event, file) => {
 		if (event === 'change') {
 			console.log(`${file} has changed`)
 			await build()
diff --git a/src/biscuitman.js b/src/biscuitman.js
index a65182e..b5aaad0 100644
--- a/src/biscuitman.js
+++ b/src/biscuitman.js
@@ -158,12 +158,12 @@
 	}
 
 	function dispatch(eventName, data) {
-		const name = `${bm}:${eventName}`
+		const name = `bm:${eventName}`
 		const payload = {
 			...(data !== undefined && data),
 			time: +new Date()
 		}
-		d.dispatchEvent(new CustomEvent(name, payload))
+		d.dispatchEvent(new CustomEvent(name, { detail: payload }))
 		console.debug(name, payload)
 	}
 
diff --git a/src/biscuitman.mjs b/src/biscuitman.mjs
index 7bfaf1c..6ef2b36 100644
--- a/src/biscuitman.mjs
+++ b/src/biscuitman.mjs
@@ -118,6 +118,7 @@ function render() {
 	}))
 	d.body.appendChild(ui)
 	w.addEventListener('resize', updateBannerHeight)
+	dispatch('render', { dialog, ui })
 }
 
 const updateBannerHeight = () => { h.style.setProperty('--bm-height', `${ui.offsetHeight}px`) }
@@ -163,12 +164,12 @@ function openModal() {
 }
 
 function dispatch(eventName, data) {
-	const name = `${bm}:${eventName}`
+	const name = `bm:${eventName}`
 	const payload = {
 		...(data !== undefined && data),
 		time: +new Date()
 	}
-	d.dispatchEvent(new CustomEvent(name, payload))
+	d.dispatchEvent(new CustomEvent(name, { detail: payload }))
 	console.debug(name, payload)
 	if (listeners[name]) listeners[name].forEach(callback => callback(payload))
 }