@ludens-reklame/cookie-dialog - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dialog.js

@@ -139,3 +139,2 @@ const categoryFields = [
       }
-
       .toggle-dialog svg {
@@ -260,2 +259,6 @@ margin: 0 auto 2px;
 
+      .action-list:not(.inline) > button:nth-child(2) {
+        display: none;
+      }
+
       .action-list button {
@@ -275,10 +278,5 @@ display: block;
 
-      .action-list button:hover,
-      .action-list button:focus {
-        box-shadow: 4px 4px 4px rgba(0, 0, 0, .25);
-      }
-
       .action-list button.primary {
         background-color: var(--cookie-primary-button-color);
-        border-color: var(--cookie-primary-button-color);
+        border-color: var(--cookie-border-color);
         color: var(--cookie-primary-button-text-color);
@@ -307,4 +305,5 @@ }
 
-      .category label {
+      .category .label-wrapper {
         display: flex;
+        flex-direction: row;
         align-items: center;
@@ -316,2 +315,16 @@ margin: 0;
 
+      .label-wrapper label {
+        display: flex;
+        flex: 1;
+        align-items: center;
+      }
+
+      .category .category-expander{
+        color: #000;
+        margin: 0 1rem 0 0;
+        cursor: pointer;
+        font-size: 2rem;
+        font-weight: 400;
+      }
+
       .toggle {
@@ -324,3 +337,3 @@ position: relative;
       }
-
+      
       .toggle input {
@@ -367,3 +380,3 @@ opacity: 0;
       }
-
+      
       .toggle input:disabled + span {
@@ -376,4 +389,6 @@ background-color: #bbb;
         display: block;
-        font-size: 0.9em;
+        width: 48px;
+        height: 48px;
         color: #777;
+        text-align: center;
       }
@@ -390,2 +405,6 @@
         }
+      
+        .action-list{
+          flex-direction: row-reverse;
+        } 
       }
@@ -579,2 +598,3 @@ `;
     const category = this.createElement("div", { class: "category" });
+    const labelWrapper = this.createElement("div", { class: "label-wrapper" });
     const categoryLabel = this.createElement("label", {}, categoryField.label);
@@ -585,9 +605,9 @@ const categoryContent = this.createElement("div", {
     const categoryExpander = this.createElement(
-      "a",
+      "button",
       {
-        href: "#",
+        type: "button",
         class: "category-expander",
         "aria-label": `Vis mer informasjon om ${categoryField.label}`,
       },
-      "Vis mer informasjon"
+      "+"
     );
@@ -615,8 +635,9 @@ const categoryDescription = this.createElement(
     toggleWrapper.appendChild(toggleSlider);
+    labelWrapper.appendChild(categoryExpander);
+    labelWrapper.appendChild(categoryLabel);
+    categoryLabel.appendChild(toggleWrapper);
     categoryContent.appendChild(categoryDescription);
     categoryContent.appendChild(this.createDefinitions(categoryField.key));
-    categoryLabel.appendChild(toggleWrapper);
-    category.appendChild(categoryLabel);
+    category.appendChild(labelWrapper);
     category.appendChild(categoryContent);
-    category.appendChild(categoryExpander);
 
@@ -632,3 +653,3 @@ categoryExpander.addEventListener("click", (e) => {
 
-      categoryExpander.innerText = `Vis ${open ? "mindre" : "mer"} informasjon`;
+      categoryExpander.innerText = `${open ? "-" : "+"} `;
     });
@@ -635,0 +656,0 @@

dialog.min.js

@@ -1,2 +0,2 @@
-const categoryFields=[{key:"functionality",label:"Funksjonelle",required:true,description:"Funksjonelle cookies gjør det mulig å lagre opplysninger som tillater nettsiden å bruke ulike funksjoner. Eksempelvis for at nettbutikken skal huske hva du har i handlekurven."},{key:"security",label:"Sikkerhet",required:true,description:"Dette er cookies som kreves av sikkerhetsmessige årsaker."},{key:"ad",label:"Markedsføring",description:"Samler informasjon om interesser med mål om å levere relevante annonser og markedsføring."},{key:"analytics",label:"Analyse",description:"Disse brukes for å spore brukere og aktivitet på nettsiden."},{key:"personalization",label:"Personalisering",description:"Dette er cookies som gjør det mulig å tilpasse innholdet som vises og funksjoner på nettstedet."}];const definitionFields=[{key:"name",label:"Navn"},{key:"purpose",label:"Formål"},{key:"expiry",label:"Utløpstid"},{key:"vendor",label:"Leverandør"}];class CookieDialog extends HTMLElement{static observedAttributes=["open","consents"];definitions=[];meta={};mounted=false;open=false;networking=false;hasFetchedMeta=false;consents={};definitionsEndpoint;metaEndpoint;saveEndpoint;shadow;dialog;contentArea;toggleButton;logo;constructor(){super()}async connectedCallback(){const e=this.getAttribute("meta-endpoint");const t=this.getAttribute("definitions-endpoint");const o=this.getAttribute("save-endpoint");if(!e||!t||!o){console.error("Missing meta-endpoint, definitions-endpoint or save-endpoint attributes")}this.metaEndpoint=e;this.definitionsEndpoint=t;this.saveEndpoint=o;this.logo=this.getAttribute("logo");const i=this.attachShadow({mode:"closed"});const n=this.createElement("dialog");const s=this.createElement("style");const a=this.createElement("button",{class:"toggle-dialog"},"Vis cookie-dialog");a.innerHTML=`
+const categoryFields=[{key:"functionality",label:"Funksjonelle",required:true,description:"Funksjonelle cookies gjør det mulig å lagre opplysninger som tillater nettsiden å bruke ulike funksjoner. Eksempelvis for at nettbutikken skal huske hva du har i handlekurven."},{key:"security",label:"Sikkerhet",required:true,description:"Dette er cookies som kreves av sikkerhetsmessige årsaker."},{key:"ad",label:"Markedsføring",description:"Samler informasjon om interesser med mål om å levere relevante annonser og markedsføring."},{key:"analytics",label:"Analyse",description:"Disse brukes for å spore brukere og aktivitet på nettsiden."},{key:"personalization",label:"Personalisering",description:"Dette er cookies som gjør det mulig å tilpasse innholdet som vises og funksjoner på nettstedet."}];const definitionFields=[{key:"name",label:"Navn"},{key:"purpose",label:"Formål"},{key:"expiry",label:"Utløpstid"},{key:"vendor",label:"Leverandør"}];class CookieDialog extends HTMLElement{static observedAttributes=["open","consents"];definitions=[];meta={};mounted=false;open=false;networking=false;hasFetchedMeta=false;consents={};definitionsEndpoint;metaEndpoint;saveEndpoint;shadow;dialog;contentArea;toggleButton;logo;constructor(){super()}async connectedCallback(){const e=this.getAttribute("meta-endpoint");const t=this.getAttribute("definitions-endpoint");const i=this.getAttribute("save-endpoint");if(!e||!t||!i){console.error("Missing meta-endpoint, definitions-endpoint or save-endpoint attributes")}this.metaEndpoint=e;this.definitionsEndpoint=t;this.saveEndpoint=i;this.logo=this.getAttribute("logo");const o=this.attachShadow({mode:"closed"});const n=this.createElement("dialog");const s=this.createElement("style");const a=this.createElement("button",{class:"toggle-dialog"},"Vis cookie-dialog");a.innerHTML=`
       <?xml version="1.0" encoding="UTF-8"?>
@@ -37,3 +37,2 @@ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
       }
-
       .toggle-dialog svg {
@@ -158,2 +157,6 @@ margin: 0 auto 2px;
 
+      .action-list:not(.inline) > button:nth-child(2) {
+        display: none;
+      }
+
       .action-list button {
@@ -173,10 +176,5 @@ display: block;
 
-      .action-list button:hover,
-      .action-list button:focus {
-        box-shadow: 4px 4px 4px rgba(0, 0, 0, .25);
-      }
-
       .action-list button.primary {
         background-color: var(--cookie-primary-button-color);
-        border-color: var(--cookie-primary-button-color);
+        border-color: var(--cookie-border-color);
         color: var(--cookie-primary-button-text-color);
@@ -205,4 +203,5 @@ }
 
-      .category label {
+      .category .label-wrapper {
         display: flex;
+        flex-direction: row;
         align-items: center;
@@ -214,2 +213,16 @@ margin: 0;
 
+      .label-wrapper label {
+        display: flex;
+        flex: 1;
+        align-items: center;
+      }
+
+      .category .category-expander{
+        color: #000;
+        margin: 0 1rem 0 0;
+        cursor: pointer;
+        font-size: 2rem;
+        font-weight: 400;
+      }
+
       .toggle {
@@ -222,3 +235,3 @@ position: relative;
       }
-
+      
       .toggle input {
@@ -265,3 +278,3 @@ opacity: 0;
       }
-
+      
       .toggle input:disabled + span {
@@ -274,4 +287,6 @@ background-color: #bbb;
         display: block;
-        font-size: 0.9em;
+        width: 48px;
+        height: 48px;
         color: #777;
+        text-align: center;
       }
@@ -288,3 +303,7 @@
         }
+      
+        .action-list{
+          flex-direction: row-reverse;
+        } 
       }
-    `;i.appendChild(s);i.appendChild(n);i.appendChild(a);this.mounted=true;this.shadow=i;this.dialog=n;this.toggleButton=a;this.consents=((typeof _STORE!=="undefined"?_STORE:{}).context||{}).consents||{};this.toggleDialog();a.addEventListener("click",()=>{this.open=true;this.toggleDialog()})}disconnectedCallback(){this.mounted=false;this.open=false}attributeChangedCallback(e,t,o){switch(e){case"open":this.open=o==="true";this.toggleDialog();break;case"consents":this.consents=JSON.parse(o);break}}toggleDialog(){if(!this.mounted||!this.dialog){return}if(this.open){document.body.style.overflow="hidden";this.dialog.showModal();this.renderDialogContent();this.toggleButton.classList.remove("show")}else{document.body.style.overflow="initial";this.dialog.close();this.toggleButton.classList.add("show")}}async renderDialogContent(){if(!this.hasFetchedMeta){const d=await this.request(this.metaEndpoint);if(!d.ok){return}this.hasFetchedMeta=true;this.meta=d.json}while(this.dialog.firstChild){this.dialog.removeChild(this.dialog.firstChild)}const e=this.logo?this.createElement("img",{src:this.logo,class:"logo"}):null;const t=this.createElement("form");const o=this.createElement("div",{class:"content-area"});const i=this.createElement("div",{class:"action-list"});const n=this.createElement("div",{class:"action-list hide"});const s=this.createElement("button",{type:"button"},"Administrer cookies");const a=this.createElement("button",{type:"submit",class:"primary","data-preset":"all"},"Godkjenn alle cookies");const r=this.createElement("button",{type:"button","data-preset":"none"},"Avvis alle cookies");const l=this.createElement("button",{type:"submit",class:"primary"},"Lagre valgene mine");const c=this.createElement("p",{class:"error"});if(this.meta.intro){o.innerHTML=this.meta.intro}if(e){o.prepend(e)}i.appendChild(a);i.appendChild(r);i.appendChild(s);n.appendChild(l);t.appendChild(o);t.appendChild(c);t.appendChild(i);this.dialog.appendChild(t);this.contentArea=o;a.focus();t.addEventListener("submit",e=>{e.preventDefault();this.save(e,c)});r.addEventListener("click",async e=>{this.save(e,c)});s.addEventListener("click",async()=>{if(this.definitions.length===0){s.innerText="Laster…";s.setAttribute("disabled",true);const e=await this.request(this.definitionsEndpoint);if(e.ok){this.definitions=e.json}s.removeAttribute("disabled");s.innerText="Administrer cookies"}a.setAttribute("type","button");i.remove();i.classList.add("inline");t.appendChild(n);this.contentArea.appendChild(i);this.renderDetails();a.focus();a.addEventListener("click",async e=>{this.save(e,c)})})}renderDetails(){const e=this.createElement("div",{class:"details"});const t=this.createElement("h2",{},"Administrer dine preferanser");e.appendChild(t);for(const o of categoryFields){if(this.definitions.some(e=>e.consentCategories.includes(o.key))){const i=this.createCategory(o);e.appendChild(i)}}this.contentArea.appendChild(e)}createCategory(o){const e=this.createElement("div",{class:"category"});const t=this.createElement("label",{},o.label);const i=this.createElement("div",{class:"category-content"});const n=this.createElement("a",{href:"#",class:"category-expander","aria-label":`Vis mer informasjon om ${o.label}`},"Vis mer informasjon");const s=this.createElement("p",{},o.description);const a=this.createElement("span",{class:"toggle"});const r=this.createElement("input",{type:"checkbox"});const l=this.createElement("span");if(this.consents[o.key]){r.setAttribute("checked",true)}if(o.required){r.setAttribute("disabled",true)}a.appendChild(r);a.appendChild(l);i.appendChild(s);i.appendChild(this.createDefinitions(o.key));t.appendChild(a);e.appendChild(t);e.appendChild(i);e.appendChild(n);n.addEventListener("click",e=>{e.preventDefault();i.classList.toggle("show");const t=i.classList.contains("show");n.setAttribute("aria-label",`Vis ${t?"mindre":"mer"} informasjon om ${o.label}`);n.innerText=`Vis ${t?"mindre":"mer"} informasjon`});r.addEventListener("change",()=>{this.consents[o.key]=r.checked});return e}createDefinitions(e){const t=document.createElement("ul");for(const o of this.definitions){if(!o.consentCategories.includes(e)){continue}const i=document.createElement("li");const n=document.createElement("dl");for(const s of definitionFields){const a=document.createElement("dt");const r=document.createElement("dd");a.innerText=s.label;r.innerText=o[s.key]||"";n.appendChild(a);n.appendChild(r);i.appendChild(n)}t.appendChild(i)}return t}createElement(e,t={},o){const i=document.createElement(e);for(const n in t){i.setAttribute(n,t[n])}if(o){i.innerText=o}return i}convertToGtm(){return{functionality_storage:this.consents.functionality?"granted":"denied",security_storage:this.consents.security?"granted":"denied",ad_storage:this.consents.ad?"granted":"denied",analytics_storage:this.consents.analytics?"granted":"denied",personalization_storage:this.consents.personalization?"granted":"denied",ad_user_data:this.consents.ad?"granted":"denied",ad_personalization:this.consents.ad?"granted":"denied"}}async save(e,t){if(this.networking){return}const o=e.submitter||e.target;const i=o.getAttribute("data-preset");if(i&&typeof i==="string"){for(const r of categoryFields){this.consents[r.key]=i==="all"?true:false}}const n=o.innerText;o.setAttribute("disabled",true);t.innerText="";o.innerText="Lagrer...";const s=await this.request(this.saveEndpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(Object.keys(this.consents).map(e=>({consent:e,accepted:this.consents[e]})))});o.removeAttribute("disabled");o.innerText=n;if(!s.ok){t.innerText="Noe gikk galt. Vennligst prøv igjen.";return}this.consents=s.json;const a=new CustomEvent("consents-confirmed",{detail:{rubics:this.consents,gtm:this.convertToGtm()}});document.dispatchEvent(a);this.open=false;this.toggleDialog()}async request(e,t={}){this.networking=true;const o=await fetch(e,t);this.networking=false;if(o.ok){return{ok:true,json:await o.json()}}console.error(o.status,await o.text());return{ok:false,json:{}}}}window.customElements.get("cookie-dialog")||window.customElements.define("cookie-dialog",CookieDialog);
+    `;o.appendChild(s);o.appendChild(n);o.appendChild(a);this.mounted=true;this.shadow=o;this.dialog=n;this.toggleButton=a;this.consents=((typeof _STORE!=="undefined"?_STORE:{}).context||{}).consents||{};this.toggleDialog();a.addEventListener("click",()=>{this.open=true;this.toggleDialog()})}disconnectedCallback(){this.mounted=false;this.open=false}attributeChangedCallback(e,t,i){switch(e){case"open":this.open=i==="true";this.toggleDialog();break;case"consents":this.consents=JSON.parse(i);break}}toggleDialog(){if(!this.mounted||!this.dialog){return}if(this.open){document.body.style.overflow="hidden";this.dialog.showModal();this.renderDialogContent();this.toggleButton.classList.remove("show")}else{document.body.style.overflow="initial";this.dialog.close();this.toggleButton.classList.add("show")}}async renderDialogContent(){if(!this.hasFetchedMeta){const d=await this.request(this.metaEndpoint);if(!d.ok){return}this.hasFetchedMeta=true;this.meta=d.json}while(this.dialog.firstChild){this.dialog.removeChild(this.dialog.firstChild)}const e=this.logo?this.createElement("img",{src:this.logo,class:"logo"}):null;const t=this.createElement("form");const i=this.createElement("div",{class:"content-area"});const o=this.createElement("div",{class:"action-list"});const n=this.createElement("div",{class:"action-list hide"});const s=this.createElement("button",{type:"button"},"Administrer cookies");const a=this.createElement("button",{type:"submit",class:"primary","data-preset":"all"},"Godkjenn alle cookies");const r=this.createElement("button",{type:"button","data-preset":"none"},"Avvis alle cookies");const l=this.createElement("button",{type:"submit",class:"primary"},"Lagre valgene mine");const c=this.createElement("p",{class:"error"});if(this.meta.intro){i.innerHTML=this.meta.intro}if(e){i.prepend(e)}o.appendChild(a);o.appendChild(r);o.appendChild(s);n.appendChild(l);t.appendChild(i);t.appendChild(c);t.appendChild(o);this.dialog.appendChild(t);this.contentArea=i;a.focus();t.addEventListener("submit",e=>{e.preventDefault();this.save(e,c)});r.addEventListener("click",async e=>{this.save(e,c)});s.addEventListener("click",async()=>{if(this.definitions.length===0){s.innerText="Laster…";s.setAttribute("disabled",true);const e=await this.request(this.definitionsEndpoint);if(e.ok){this.definitions=e.json}s.removeAttribute("disabled");s.innerText="Administrer cookies"}a.setAttribute("type","button");o.remove();o.classList.add("inline");t.appendChild(n);this.contentArea.appendChild(o);this.renderDetails();a.focus();a.addEventListener("click",async e=>{this.save(e,c)})})}renderDetails(){const e=this.createElement("div",{class:"details"});const t=this.createElement("h2",{},"Administrer dine preferanser");e.appendChild(t);for(const i of categoryFields){if(this.definitions.some(e=>e.consentCategories.includes(i.key))){const o=this.createCategory(i);e.appendChild(o)}}this.contentArea.appendChild(e)}createCategory(i){const e=this.createElement("div",{class:"category"});const t=this.createElement("div",{class:"label-wrapper"});const o=this.createElement("label",{},i.label);const n=this.createElement("div",{class:"category-content"});const s=this.createElement("button",{type:"button",class:"category-expander","aria-label":`Vis mer informasjon om ${i.label}`},"+");const a=this.createElement("p",{},i.description);const r=this.createElement("span",{class:"toggle"});const l=this.createElement("input",{type:"checkbox"});const c=this.createElement("span");if(this.consents[i.key]){l.setAttribute("checked",true)}if(i.required){l.setAttribute("disabled",true)}r.appendChild(l);r.appendChild(c);t.appendChild(s);t.appendChild(o);o.appendChild(r);n.appendChild(a);n.appendChild(this.createDefinitions(i.key));e.appendChild(t);e.appendChild(n);s.addEventListener("click",e=>{e.preventDefault();n.classList.toggle("show");const t=n.classList.contains("show");s.setAttribute("aria-label",`Vis ${t?"mindre":"mer"} informasjon om ${i.label}`);s.innerText=`${t?"-":"+"} `});l.addEventListener("change",()=>{this.consents[i.key]=l.checked});return e}createDefinitions(e){const t=document.createElement("ul");for(const i of this.definitions){if(!i.consentCategories.includes(e)){continue}const o=document.createElement("li");const n=document.createElement("dl");for(const s of definitionFields){const a=document.createElement("dt");const r=document.createElement("dd");a.innerText=s.label;r.innerText=i[s.key]||"";n.appendChild(a);n.appendChild(r);o.appendChild(n)}t.appendChild(o)}return t}createElement(e,t={},i){const o=document.createElement(e);for(const n in t){o.setAttribute(n,t[n])}if(i){o.innerText=i}return o}convertToGtm(){return{functionality_storage:this.consents.functionality?"granted":"denied",security_storage:this.consents.security?"granted":"denied",ad_storage:this.consents.ad?"granted":"denied",analytics_storage:this.consents.analytics?"granted":"denied",personalization_storage:this.consents.personalization?"granted":"denied",ad_user_data:this.consents.ad?"granted":"denied",ad_personalization:this.consents.ad?"granted":"denied"}}async save(e,t){if(this.networking){return}const i=e.submitter||e.target;const o=i.getAttribute("data-preset");if(o&&typeof o==="string"){for(const r of categoryFields){this.consents[r.key]=o==="all"?true:false}}const n=i.innerText;i.setAttribute("disabled",true);t.innerText="";i.innerText="Lagrer...";const s=await this.request(this.saveEndpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(Object.keys(this.consents).map(e=>({consent:e,accepted:this.consents[e]})))});i.removeAttribute("disabled");i.innerText=n;if(!s.ok){t.innerText="Noe gikk galt. Vennligst prøv igjen.";return}this.consents=s.json;const a=new CustomEvent("consents-confirmed",{detail:{rubics:this.consents,gtm:this.convertToGtm()}});document.dispatchEvent(a);this.open=false;this.toggleDialog()}async request(e,t={}){this.networking=true;const i=await fetch(e,t);this.networking=false;if(i.ok){return{ok:true,json:await i.json()}}console.error(i.status,await i.text());return{ok:false,json:{}}}}window.customElements.get("cookie-dialog")||window.customElements.define("cookie-dialog",CookieDialog);

package.json

 {
   "name": "@ludens-reklame/cookie-dialog",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Cookie dialog for Rubics",
@@ -5,0 +5,0 @@ "main": "dialog.js",

No alert changes

Improved metrics

Total package byte prevSize

37035

increased by2.62%

Lines of code

931

increased by4.02%

No dependency changes