diff --git a/README.md b/README.md index 5262ac7..b8e3de1 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ I didn't like sending 100KB+ for a simple cookie consent solution so I wrote thi biscuitman = { /* Default properties */ - // storageKey: 'myconsent', // the key to store consent choices in localStorage + // key: 'myconsent', // the key to store consent choices in localStorage // global: 'Consent', // global window object to access consents at runtime // force: false, // this forces the modal open at start and prevents website access without choosing consent // enableMore: true, // Hide multiple lines of info text behind a 'show more' link to keep UI short diff --git a/biscuitman.js b/biscuitman.js index 2dd9dbe..304519f 100644 --- a/biscuitman.js +++ b/biscuitman.js @@ -1,6 +1,6 @@ ((d, w, Object, bm)=>{ const defaults = { - storageKey: 'myconsent', + key: 'myconsent', global: 'Consent', force:false, enableMore: true, @@ -157,10 +157,10 @@ function readConsents() { try { - return JSON.parse(localStorage.getItem(o.storageKey)) + return JSON.parse(localStorage.getItem(o.key)) } catch (err) { console.error(err) - localStorage.removeItem(o.storageKey) + localStorage.removeItem(o.key) return {} } } @@ -170,7 +170,10 @@ const cookies = Object.fromEntries( d.cookie.split('; ').map(cookie => cookie.split('=')) ) - const { consentTime, ...consents } = readConsents() + const { consentTime, ...consents } = readConsents() || o.sections.slice(1).reduce((consents, section) => { + consents[section] = false; + return { consentTime: undefined, ...consents } + }, {}) for (let [section, sectionConsent] of Object.entries(consents)) { if (sectionConsent) continue @@ -209,7 +212,7 @@ w[o.global][section] = sectionConsent if (!willReadValues) sectionElement.checked = value }) - localStorage.setItem(o.storageKey, JSON.stringify(w[o.global])) + localStorage.setItem(o.key, JSON.stringify(w[o.global])) dispatch('save', {data: w[o.global]}) clearStorages() insertScripts() @@ -234,16 +237,15 @@ // If tag has src AND tag content, inject new tag adjacent to parent after load if (script.src && script.textContent.trim() !== '') newScript.addEventListener('load', () => { - let depScript = d.createElement('script') - depScript.textContent = script.textContent - newScript.insertAdjacentElement('afterend', depScript) - dispatch('inject', {el: depScript, parent: script}) + let afterScript = d.createElement('script') + afterScript.textContent = script.textContent + if (script.id) afterScript.id = script.id + '-after' + newScript.insertAdjacentElement('afterend', afterScript) + dispatch('inject', {el: afterScript, parent: script}) }) }); } - - /* Start */ w[o.global] = readConsents() || {} @@ -259,6 +261,9 @@ // Render UI render() + // Wipe matching cookies without consent + clearStorages() + // Consent logic if (w[o.global].consentTime) { displayUI(false) @@ -270,7 +275,7 @@ w.bmInvalidate = () => { dispatch('invalidate', {data: readConsents()}) saveConsents(false) - localStorage.removeItem(o.storageKey) + localStorage.removeItem(o.key) displayUI(true) } // Update Consent Preferences diff --git a/dist/biscuitman.min.css b/dist/biscuitman.min.css index e3da6d2..e8faafa 100644 --- a/dist/biscuitman.min.css +++ b/dist/biscuitman.min.css @@ -1 +1 @@ -/*! biscuitman.js 0.3.6 */.biscuitman{--t:#444;--b:#fff;--c:#105d89;background:var(--b);box-sizing:border-box;width:100%;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;box-shadow:0 -2px 10px #00000029}.biscuitman *{box-sizing:border-box;margin:0;padding:0;font-size:16px;line-height:1.4em}.biscuitman:has([open]){transform:translateY(100%)}.biscuitman.bm-hide{padding:0}.biscuitman.bm-hide article{display:none}.biscuitman article{position:relative}@media (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(--t);margin:10px 0;font-size:13px}@media (width>=575px){.biscuitman article p{font-size:14px}}.biscuitman button{background:var(--b);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(--b)!important}.biscuitman button[data-id=close]{color:#000;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 (width>=576px){.biscuitman nav{flex-direction:row-reverse;gap:10px;width:100%;display:flex}.biscuitman nav button{flex-grow:1;margin-bottom:0}}@media (width<=575px){.biscuitman nav{flex-direction:column;flex-grow:1;display:flex}}.biscuitman dialog{border:0;width:100%;max-width:100%;height:100%;max-height:100%}@media (width>=576px){.biscuitman dialog{border-radius:10px;width:90vw;max-width:860px;max-height:80vh;margin:auto;box-shadow:0 0 8px #0000004d}}@media (width>=576px) and (height>=1134px){.biscuitman dialog{height:890px}}.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{position:relative}.biscuitman .bm-dialog>b:after{content:"";background:linear-gradient(180deg,var(--b)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(--b)20%,transparent);pointer-events:none;width:100%;height:25px;position:absolute;top:-24px;left:0}.biscuitman .bm-sections{scrollbar-color:#ddd var(--b);flex-shrink:1;height:100%;padding:15px 0;position:relative;overflow-y:scroll}@media (width>=576px){.biscuitman .bm-sections{margin-right:-18px;padding-right:4px}}.biscuitman .bm-sections>p{padding-right:30px;line-height:18px}.biscuitman .bm-sections>p span{padding-bottom:5px;font-size:13px;display:block}@media (width>=576px){.biscuitman .bm-sections>p span{font-size:14px}}.biscuitman .bm-sections>p span:has(.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 #ccc;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 #777;border-color:#0000 #777 #777 #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(--t);font-size:14px}.biscuitman summary>*{display:inline-flex}.biscuitman summary::marker{display:none}.biscuitman summary::-webkit-details-marker{display:none}.biscuitman dl{background:#eee;margin:10px;padding:10px;display:flex}.biscuitman dl dt,.biscuitman dl dd{color:var(--t);font-size:13px}.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);border-radius:var(--height);background-color:#999;margin-top:-2px;display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%);font-size:20px!important}.biscuitman label:before{content:"";background:var(--b);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:has(:checked){background-color:var(--c)}.biscuitman label:has(:checked):before{left:auto;right:0}.biscuitman label:has(:focus-visible){outline:auto highlight}.biscuitman label:has([disabled]:checked){opacity:.6}.biscuitman label input{opacity:0} \ No newline at end of file +/*! biscuitman.js 0.3.7 */.biscuitman{--t:#444;--b:#fff;--c:#105d89;background:var(--b);box-sizing:border-box;width:100%;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;box-shadow:0 -2px 10px #00000029}.biscuitman *{box-sizing:border-box;margin:0;padding:0;font-size:16px;line-height:1.4em}.biscuitman:has([open]){transform:translateY(100%)}.biscuitman.bm-hide{padding:0}.biscuitman.bm-hide article{display:none}.biscuitman article{position:relative}@media (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(--t);margin:10px 0;font-size:13px}@media (width>=575px){.biscuitman article p{font-size:14px}}.biscuitman button{background:var(--b);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(--b)!important}.biscuitman button[data-id=close]{color:#000;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 (width>=576px){.biscuitman nav{flex-direction:row-reverse;gap:10px;width:100%;display:flex}.biscuitman nav button{flex-grow:1;margin-bottom:0}}@media (width<=575px){.biscuitman nav{flex-direction:column;flex-grow:1;display:flex}}.biscuitman dialog{border:0;width:100%;max-width:100%;height:100%;max-height:100%}@media (width>=576px){.biscuitman dialog{border-radius:10px;width:90vw;max-width:860px;max-height:80vh;margin:auto;box-shadow:0 0 8px #0000004d}}@media (width>=576px) and (height>=1134px){.biscuitman dialog{height:890px}}.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{position:relative}.biscuitman .bm-dialog>b:after{content:"";background:linear-gradient(180deg,var(--b)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(--b)20%,transparent);pointer-events:none;width:100%;height:25px;position:absolute;top:-24px;left:0}.biscuitman .bm-sections{scrollbar-color:#ddd var(--b);flex-shrink:1;height:100%;padding:15px 0;position:relative;overflow-y:scroll}@media (width>=576px){.biscuitman .bm-sections{margin-right:-18px;padding-right:4px}}.biscuitman .bm-sections>p{padding-right:30px;line-height:18px}.biscuitman .bm-sections>p span{padding-bottom:5px;font-size:13px;display:block}@media (width>=576px){.biscuitman .bm-sections>p span{font-size:14px}}.biscuitman .bm-sections>p span:has(.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 #ccc;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 #777;border-color:#0000 #777 #777 #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(--t);font-size:14px}.biscuitman summary>*{display:inline-flex}.biscuitman summary::marker{display:none}.biscuitman summary::-webkit-details-marker{display:none}.biscuitman dl{background:#eee;margin:10px;padding:10px;display:flex}.biscuitman dl dt,.biscuitman dl dd{color:var(--t);font-size:13px}.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);border-radius:var(--height);background-color:#999;margin-top:-2px;display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%);font-size:20px!important}.biscuitman label:before{content:"";background:var(--b);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:has(:checked){background-color:var(--c)}.biscuitman label:has(:checked):before{left:auto;right:0}.biscuitman label:has(:focus-visible){outline:auto highlight}.biscuitman label:has([disabled]:checked){opacity:.6}.biscuitman label input{opacity:0} \ No newline at end of file diff --git a/dist/biscuitman.min.js b/dist/biscuitman.min.js index 8d69498..d2b701c 100644 --- a/dist/biscuitman.min.js +++ b/dist/biscuitman.min.js @@ -1 +1 @@ -/*! biscuitman.js 0.3.6 */((e,t,a,o)=>{let n;let s={storageKey:"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},i=e.createElement("div"),l=e=>i.classList[e?"remove":"add"]("bm-hide");function c(e){let t=e.target.dataset.id;switch(b("button",{id:t}),t){case"accept":m(!0);break;case"close":n.close();break;case"settings":p();break;case"save":m();break;case"reject":m(!1)}}function r(){b("close")}function d(e){s.force&&e.preventDefault()}function p(){b("open"),n.showModal()}function b(t,a){let n=`${o}:${t}`,s={...void 0!==a&&a,time:+new Date};e.dispatchEvent(new CustomEvent(n,s)),console.debug(n,s)}function u(){try{return JSON.parse(localStorage.getItem(s.storageKey))}catch(e){return console.error(e),localStorage.removeItem(s.storageKey),{}}}function m(o){let c=void 0===o;t[s.global].consentTime=+new Date,s.sections.forEach(e=>{if("essential"===e)return!1;let a=i.querySelector(`[data-s=${e}]`),n=c?a.checked:o;t[s.global][e]=n,c||(a.checked=o)}),localStorage.setItem(s.storageKey,JSON.stringify(t[s.global])),b("save",{data:t[s.global]}),function(){let t=a.fromEntries(a.entries(localStorage)),o=a.fromEntries(e.cookie.split("; ").map(e=>e.split("="))),{consentTime:n,...i}=u();for(let[n,l]of a.entries(i)){if(l)continue;let i=a.keys(s[`${n}Cookies`]||{});for(let n of(i.filter(e=>e.endsWith("*")).map(e=>{a.keys({...o,...t}).map(t=>{t.startsWith(e.slice(0,-1))&&i.push(t)})}),i))o[n]&&(e.cookie=`${n}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`,b("delete",{cookie:n})),t[n]&&(localStorage.removeItem(n),b("delete",{localStorage:n}))}}(),g(),n.close(),l(!1)}function g(){e.querySelectorAll("script[data-consent]").forEach(a=>{if(!t[s.global][a.dataset.consent])return!1;let o=e.createElement("script");for(let{name:e,value:t}of a.attributes)e.startsWith("data-")||"type"===e||o.setAttribute(e,t);o.setAttribute("type",a.dataset.type||"text/javascript"),a.src||(o.textContent=a.textContent),a.parentNode.replaceChild(o,a),b("inject",{el:a}),a.src&&""!==a.textContent.trim()&&o.addEventListener("load",()=>{let t=e.createElement("script");t.textContent=a.textContent,o.insertAdjacentElement("afterend",t),b("inject",{el:t,parent:a})})})}t[s.global]=u()||{};let f=Intl.DateTimeFormat().resolvedOptions().timeZone,$=/^(GMT|UTC)$/.test(f)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(f);s.acceptNonEU&&!$&&(m(!0),l(!1)),function(){i.classList.add(o),i.style="position:fixed;background:#fff;bottom:0",i.innerHTML=`
${s.title}

${s.message}

${s.settingsTitle}

${s.message}

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

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

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

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

${s.message}

${s.settingsTitle}

${s.message}

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

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

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

${c?a.entries(c).map(([e,t])=>`
${e}
${t}
`).join(""):`
${s.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${s.linkText}`),i.querySelectorAll("button").forEach(e=>e.addEventListener("click",c)),(n=i.querySelector("dialog")).addEventListener("close",r),n.addEventListener("cancel",d);let l=i.querySelector(".more");l&&l.addEventListener("click",l.remove),e.body.appendChild(i)}(),m(),t[s.global].consentTime?(l(!1),$()):s.force&&p(),t.bmInvalidate=()=>{u("invalidate",{data:b()}),f(!1),localStorage.removeItem(s.key),l(!0)},t.bmUpdate=()=>{u("update",{data:b()}),p()}})(document,window,Object,"biscuitman"); \ No newline at end of file diff --git a/dist/biscuitman.withcss.min.js b/dist/biscuitman.withcss.min.js index 85b4f97..d4d0c6e 100644 --- a/dist/biscuitman.withcss.min.js +++ b/dist/biscuitman.withcss.min.js @@ -1 +1 @@ -/*! biscuitman.js 0.3.6 */((e,t,a,o)=>{let n;let s={storageKey:"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},i=e.createElement("div"),l=e=>i.classList[e?"remove":"add"]("bm-hide");function c(e){let t=e.target.dataset.id;switch(b("button",{id:t}),t){case"accept":m(!0);break;case"close":n.close();break;case"settings":p();break;case"save":m();break;case"reject":m(!1)}}function r(){b("close")}function d(e){s.force&&e.preventDefault()}function p(){b("open"),n.showModal()}function b(t,a){let n=`${o}:${t}`,s={...void 0!==a&&a,time:+new Date};e.dispatchEvent(new CustomEvent(n,s)),console.debug(n,s)}function u(){try{return JSON.parse(localStorage.getItem(s.storageKey))}catch(e){return console.error(e),localStorage.removeItem(s.storageKey),{}}}function m(o){let c=void 0===o;t[s.global].consentTime=+new Date,s.sections.forEach(e=>{if("essential"===e)return!1;let a=i.querySelector(`[data-s=${e}]`),n=c?a.checked:o;t[s.global][e]=n,c||(a.checked=o)}),localStorage.setItem(s.storageKey,JSON.stringify(t[s.global])),b("save",{data:t[s.global]}),function(){let t=a.fromEntries(a.entries(localStorage)),o=a.fromEntries(e.cookie.split("; ").map(e=>e.split("="))),{consentTime:n,...i}=u();for(let[n,l]of a.entries(i)){if(l)continue;let i=a.keys(s[`${n}Cookies`]||{});for(let n of(i.filter(e=>e.endsWith("*")).map(e=>{a.keys({...o,...t}).map(t=>{t.startsWith(e.slice(0,-1))&&i.push(t)})}),i))o[n]&&(e.cookie=`${n}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`,b("delete",{cookie:n})),t[n]&&(localStorage.removeItem(n),b("delete",{localStorage:n}))}}(),g(),n.close(),l(!1)}function g(){e.querySelectorAll("script[data-consent]").forEach(a=>{if(!t[s.global][a.dataset.consent])return!1;let o=e.createElement("script");for(let{name:e,value:t}of a.attributes)e.startsWith("data-")||"type"===e||o.setAttribute(e,t);o.setAttribute("type",a.dataset.type||"text/javascript"),a.src||(o.textContent=a.textContent),a.parentNode.replaceChild(o,a),b("inject",{el:a}),a.src&&""!==a.textContent.trim()&&o.addEventListener("load",()=>{let t=e.createElement("script");t.textContent=a.textContent,o.insertAdjacentElement("afterend",t),b("inject",{el:t,parent:a})})})}t[s.global]=u()||{};let f=Intl.DateTimeFormat().resolvedOptions().timeZone,$=/^(GMT|UTC)$/.test(f)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(f);s.acceptNonEU&&!$&&(m(!0),l(!1)),function(){i.classList.add(o),i.style="position:fixed;background:#fff;bottom:0",i.innerHTML=`
${s.title}

${s.message}

${s.settingsTitle}

${s.message}

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

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

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

${c?a.entries(c).map(([e,t])=>`
${e}
${t}
`).join(""):`
${s.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${s.linkText}`),i.querySelectorAll("button").forEach(e=>e.addEventListener("click",c)),(n=i.querySelector("dialog")).addEventListener("close",r),n.addEventListener("cancel",d);let l=i.querySelector(".more");l&&l.addEventListener("click",l.remove),e.body.appendChild(i)}(),t[s.global].consentTime?(l(!1),g()):s.force&&p(),t.bmInvalidate=()=>{b("invalidate",{data:u()}),m(!1),localStorage.removeItem(s.storageKey),l(!0)},t.bmUpdate=()=>{b("update",{data:u()}),p()}})(document,window,Object,"biscuitman");;((d)=>{let c=d.createElement('style');c.textContent=`.biscuitman{--t:#444;--b:#fff;--c:#105d89;background:var(--b);box-sizing:border-box;width:100%;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;box-shadow:0 -2px 10px #00000029}.biscuitman *{box-sizing:border-box;margin:0;padding:0;font-size:16px;line-height:1.4em}.biscuitman:has([open]){transform:translateY(100%)}.biscuitman.bm-hide{padding:0}.biscuitman.bm-hide article{display:none}.biscuitman article{position:relative}@media (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(--t);margin:10px 0;font-size:13px}@media (width>=575px){.biscuitman article p{font-size:14px}}.biscuitman button{background:var(--b);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(--b)!important}.biscuitman button[data-id=close]{color:#000;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 (width>=576px){.biscuitman nav{flex-direction:row-reverse;gap:10px;width:100%;display:flex}.biscuitman nav button{flex-grow:1;margin-bottom:0}}@media (width<=575px){.biscuitman nav{flex-direction:column;flex-grow:1;display:flex}}.biscuitman dialog{border:0;width:100%;max-width:100%;height:100%;max-height:100%}@media (width>=576px){.biscuitman dialog{border-radius:10px;width:90vw;max-width:860px;max-height:80vh;margin:auto;box-shadow:0 0 8px #0000004d}}@media (width>=576px) and (height>=1134px){.biscuitman dialog{height:890px}}.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{position:relative}.biscuitman .bm-dialog>b:after{content:"";background:linear-gradient(180deg,var(--b)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(--b)20%,transparent);pointer-events:none;width:100%;height:25px;position:absolute;top:-24px;left:0}.biscuitman .bm-sections{scrollbar-color:#ddd var(--b);flex-shrink:1;height:100%;padding:15px 0;position:relative;overflow-y:scroll}@media (width>=576px){.biscuitman .bm-sections{margin-right:-18px;padding-right:4px}}.biscuitman .bm-sections>p{padding-right:30px;line-height:18px}.biscuitman .bm-sections>p span{padding-bottom:5px;font-size:13px;display:block}@media (width>=576px){.biscuitman .bm-sections>p span{font-size:14px}}.biscuitman .bm-sections>p span:has(.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 #ccc;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 #777;border-color:#0000 #777 #777 #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(--t);font-size:14px}.biscuitman summary>*{display:inline-flex}.biscuitman summary::marker{display:none}.biscuitman summary::-webkit-details-marker{display:none}.biscuitman dl{background:#eee;margin:10px;padding:10px;display:flex}.biscuitman dl dt,.biscuitman dl dd{color:var(--t);font-size:13px}.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);border-radius:var(--height);background-color:#999;margin-top:-2px;display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%);font-size:20px!important}.biscuitman label:before{content:"";background:var(--b);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:has(:checked){background-color:var(--c)}.biscuitman label:has(:checked):before{left:auto;right:0}.biscuitman label:has(:focus-visible){outline:auto highlight}.biscuitman label:has([disabled]:checked){opacity:.6}.biscuitman label input{opacity:0}`;d.documentElement.appendChild(c)})(document); \ No newline at end of file +/*! biscuitman.js 0.3.7 */((e,t,a,o)=>{let n;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},i=e.createElement("div"),l=e=>i.classList[e?"remove":"add"]("bm-hide");function c(e){let t=e.target.dataset.id;switch(u("button",{id:t}),t){case"accept":f(!0);break;case"close":n.close();break;case"settings":p();break;case"save":f();break;case"reject":f(!1)}}function r(){u("close")}function d(e){s.force&&e.preventDefault()}function p(){u("open"),n.showModal()}function u(t,a){let n=`${o}:${t}`,s={...void 0!==a&&a,time:+new Date};e.dispatchEvent(new CustomEvent(n,s)),console.debug(n,s)}function b(){try{return JSON.parse(localStorage.getItem(s.key))}catch(e){return console.error(e),localStorage.removeItem(s.key),{}}}function m(){let t=a.fromEntries(a.entries(localStorage)),o=a.fromEntries(e.cookie.split("; ").map(e=>e.split("="))),{consentTime:n,...i}=b()||s.sections.slice(1).reduce((e,t)=>(e[t]=!1,{consentTime:void 0,...e}),{});for(let[n,l]of a.entries(i)){if(l)continue;let i=a.keys(s[`${n}Cookies`]||{});for(let n of(i.filter(e=>e.endsWith("*")).map(e=>{a.keys({...o,...t}).map(t=>{t.startsWith(e.slice(0,-1))&&i.push(t)})}),i))o[n]&&(e.cookie=`${n}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`,u("delete",{cookie:n})),t[n]&&(localStorage.removeItem(n),u("delete",{localStorage:n}))}}function f(e){let a=void 0===e;t[s.global].consentTime=+new Date,s.sections.forEach(o=>{if("essential"===o)return!1;let n=i.querySelector(`[data-s=${o}]`),l=a?n.checked:e;t[s.global][o]=l,a||(n.checked=e)}),localStorage.setItem(s.key,JSON.stringify(t[s.global])),u("save",{data:t[s.global]}),m(),$(),n.close(),l(!1)}function $(){e.querySelectorAll("script[data-consent]").forEach(a=>{if(!t[s.global][a.dataset.consent])return!1;let o=e.createElement("script");for(let{name:e,value:t}of a.attributes)e.startsWith("data-")||"type"===e||o.setAttribute(e,t);o.setAttribute("type",a.dataset.type||"text/javascript"),a.src||(o.textContent=a.textContent),a.parentNode.replaceChild(o,a),u("inject",{el:a}),a.src&&""!==a.textContent.trim()&&o.addEventListener("load",()=>{let t=e.createElement("script");t.textContent=a.textContent,a.id&&(t.id=a.id+"-after"),o.insertAdjacentElement("afterend",t),u("inject",{el:t,parent:a})})})}t[s.global]=b()||{};let g=Intl.DateTimeFormat().resolvedOptions().timeZone,v=/^(GMT|UTC)$/.test(g)||/(Europe|BST|CEST|CET|EET|IST|WEST|WET|GMT-1|GMT-2|UTC+1|UTC+2|UTC+3)/.test(g);s.acceptNonEU&&!v&&(f(!0),l(!1)),function(){i.classList.add(o),i.style="position:fixed;background:#fff;bottom:0",i.innerHTML=`
${s.title}

${s.message}

${s.settingsTitle}

${s.message}

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

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

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

${c?a.entries(c).map(([e,t])=>`
${e}
${t}
`).join(""):`
${s.noCookies}
`}
`}).join("")}
`.replaceAll("{link}",`${s.linkText}`),i.querySelectorAll("button").forEach(e=>e.addEventListener("click",c)),(n=i.querySelector("dialog")).addEventListener("close",r),n.addEventListener("cancel",d);let l=i.querySelector(".more");l&&l.addEventListener("click",l.remove),e.body.appendChild(i)}(),m(),t[s.global].consentTime?(l(!1),$()):s.force&&p(),t.bmInvalidate=()=>{u("invalidate",{data:b()}),f(!1),localStorage.removeItem(s.key),l(!0)},t.bmUpdate=()=>{u("update",{data:b()}),p()}})(document,window,Object,"biscuitman");;((d)=>{let c=d.createElement('style');c.textContent=`.biscuitman{--t:#444;--b:#fff;--c:#105d89;background:var(--b);box-sizing:border-box;width:100%;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;box-shadow:0 -2px 10px #00000029}.biscuitman *{box-sizing:border-box;margin:0;padding:0;font-size:16px;line-height:1.4em}.biscuitman:has([open]){transform:translateY(100%)}.biscuitman.bm-hide{padding:0}.biscuitman.bm-hide article{display:none}.biscuitman article{position:relative}@media (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(--t);margin:10px 0;font-size:13px}@media (width>=575px){.biscuitman article p{font-size:14px}}.biscuitman button{background:var(--b);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(--b)!important}.biscuitman button[data-id=close]{color:#000;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 (width>=576px){.biscuitman nav{flex-direction:row-reverse;gap:10px;width:100%;display:flex}.biscuitman nav button{flex-grow:1;margin-bottom:0}}@media (width<=575px){.biscuitman nav{flex-direction:column;flex-grow:1;display:flex}}.biscuitman dialog{border:0;width:100%;max-width:100%;height:100%;max-height:100%}@media (width>=576px){.biscuitman dialog{border-radius:10px;width:90vw;max-width:860px;max-height:80vh;margin:auto;box-shadow:0 0 8px #0000004d}}@media (width>=576px) and (height>=1134px){.biscuitman dialog{height:890px}}.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{position:relative}.biscuitman .bm-dialog>b:after{content:"";background:linear-gradient(180deg,var(--b)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(--b)20%,transparent);pointer-events:none;width:100%;height:25px;position:absolute;top:-24px;left:0}.biscuitman .bm-sections{scrollbar-color:#ddd var(--b);flex-shrink:1;height:100%;padding:15px 0;position:relative;overflow-y:scroll}@media (width>=576px){.biscuitman .bm-sections{margin-right:-18px;padding-right:4px}}.biscuitman .bm-sections>p{padding-right:30px;line-height:18px}.biscuitman .bm-sections>p span{padding-bottom:5px;font-size:13px;display:block}@media (width>=576px){.biscuitman .bm-sections>p span{font-size:14px}}.biscuitman .bm-sections>p span:has(.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 #ccc;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 #777;border-color:#0000 #777 #777 #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(--t);font-size:14px}.biscuitman summary>*{display:inline-flex}.biscuitman summary::marker{display:none}.biscuitman summary::-webkit-details-marker{display:none}.biscuitman dl{background:#eee;margin:10px;padding:10px;display:flex}.biscuitman dl dt,.biscuitman dl dd{color:var(--t);font-size:13px}.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);border-radius:var(--height);background-color:#999;margin-top:-2px;display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%);font-size:20px!important}.biscuitman label:before{content:"";background:var(--b);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:has(:checked){background-color:var(--c)}.biscuitman label:has(:checked):before{left:auto;right:0}.biscuitman label:has(:focus-visible){outline:auto highlight}.biscuitman label:has([disabled]:checked){opacity:.6}.biscuitman label input{opacity:0}`;d.documentElement.appendChild(c)})(document); \ No newline at end of file diff --git a/index.html b/index.html index 1582bc4..64136a0 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,13 @@ - + + + + - + + + + + +

Biscuits, the beloved treats that accompany tea time, snack breaks, and dessert cravings. In this comprehensive guide, we delve into the world of biscuits, exploring their history, varieties, and cultural significance.

diff --git a/package.json b/package.json index b30ef17..7114c9d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "biscuitman", - "version": "0.3.6", + "version": "0.3.7", "description": "Lightweight client-side cookie consent manager with dependency hooks and script injection", "browser": "biscuitman.js", "keywords": [