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

Comparing version 1.0.0 to 1.0.1

dialog.js

@@ -59,13 +59,16 @@ const categoryFields = [
   definitions = [];
+  meta = {};
   mounted = false;
   open = false;
   networking = false;
+  hasFetchedMeta = false;
   consents = {};
+  definitionsEndpoint;
+  metaEndpoint;
+  saveEndpoint;
+  shadow;
   dialog;
   contentArea;
   toggleButton;
-  primaryColor;
-  textColor;
-  backgroundColor;
-  cardColor;
+  logo;
 
@@ -81,10 +84,16 @@ constructor() {
     console.log("this.isConnected", this.isConnected);
+    const metaEndpoint = this.getAttribute("meta-endpoint");
+    const definitionsEndpoint = this.getAttribute("definitions-endpoint");
+    const saveEndpoint = this.getAttribute("save-endpoint");
 
-    // Add any code that should run when the component is added to the DOM here
+    if (!metaEndpoint || !definitionsEndpoint || !saveEndpoint) {
+      console.error(
+        "Missing meta-endpoint, definitions-endpoint or save-endpoint attributes"
+      );
+    }
 
-    this.primaryColor = this.getAttribute("primary-color") || "#A1E99F";
-    this.textColor = this.getAttribute("text-color") || "black";
-    this.backgroundColor = this.getAttribute("background-color") || "#f1f1f1";
-    this.cardColor = this.getAttribute("card-color") || "white";
-    this.borderColor = this.getAttribute("border-color") || "black";
+    this.metaEndpoint = metaEndpoint;
+    this.definitionsEndpoint = definitionsEndpoint;
+    this.saveEndpoint = saveEndpoint;
+    this.logo = this.getAttribute("logo");
 
@@ -114,7 +123,8 @@ const shadow = this.attachShadow({ mode: "closed" });
       dialog {
-        background-color: ${this.backgroundColor};
-        color: ${this.textColor};
+        background-color: var(--background-color);
+        color: var(--text-color);
         border: none;
         padding: 0;
         width: calc(100% - 2rem);
+        max-height: calc(100vh - 2rem);
       }
@@ -129,3 +139,12 @@
       }
+
+      form {
+        display: flex;
+        flex-direction: column;
+        max-height: calc(100vh - 2rem);
+      }
       
+      .logo {
+        height: 32px;
+      }
 
@@ -148,5 +167,10 @@ .category-content {
         margin: 0;
+        font-size: 1.125em;
+        font-weight: 400;
       }
 
       .details ul {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
         list-style: none;
@@ -161,2 +185,3 @@ margin: 0;
         background-color: #eee;
+        border-radius: 0.3125em;
       }
@@ -176,8 +201,2 @@
 
-      @media (min-width: 900px) {
-        dialog {
-          margin: 0;
-        }
-      }
-
       button {
@@ -189,3 +208,2 @@ all: unset;
       .content-area {
-        max-height: 267px;
         overflow-y: auto;
@@ -197,3 +215,3 @@ padding: 1rem;
         margin-top: auto;
-        border-top: 1px solid ${this.borderColor};
+        border-top: 1px solid var(--border-color);
         padding: 1rem;
@@ -205,3 +223,9 @@ display: flex;
 
-      .action-list.hide {
+      .action-list.inline {
+        margin-top: 0;
+        border-top: none;
+        padding: .5rem 0 1.5rem;
+      }
+
+      .action-list.inline > button:last-child {
         display: none;
@@ -218,5 +242,5 @@ }
         text-align: center;
-        background-color: ${this.cardColor};
-        color: ${this.textColor};
-        border: 1px solid ${this.borderColor};
+        background-color: var(--card-color);
+        color: var(--text-color);
+        border: 1px solid var(--border-color);
         transition: box-shadow .12s ease-in-out;
@@ -231,8 +255,8 @@ }
       .action-list button.primary {
-        background-color: ${this.primaryColor};
-        border-color: ${this.primaryColor};
+        background-color: var(--primary-color);
+        border-color: var(--primary-color);
       }
 
       a {
-        color: ${this.textColor};
+        color: var(--text-color);
         transition: opacity .12s ease-in-out;
@@ -251,3 +275,3 @@ }
       .category {
-        background-color: ${this.cardColor};
+        background-color: var(--card-color);
         border-radius: 0.625em;
@@ -257,16 +281,5 @@ padding: 1rem;
 
-      .category-heading {
+      .category label {
         display: flex;
         align-items: center;
-      }
-
-      .category-heading .toggle {
-        margin-left: auto;
-      } 
-
-      .category-heading  a {
-        text-decoration: none;
-      }
-
-      .category-heading h3 {
         margin: 0;
@@ -280,4 +293,5 @@ font-size: 1rem;
         display: inline-block;
-        width: 60px;
-        height: 34px;
+        width: 52px;
+        height: 30px;
+        margin-left: auto;
       }
@@ -300,3 +314,3 @@
         transition: .4s;
-        border-radius: 34px;
+        border-radius: 30px;
       }
@@ -307,6 +321,6 @@
         content: "";
-        height: 26px;
-        width: 26px;
-        left: 4px;
-        bottom: 4px;
+        height: 24px;
+        width: 24px;
+        left: 3px;
+        bottom: 3px;
         background-color: white;
@@ -326,4 +340,27 @@ transition: .4s;
       .toggle input:checked + span:before {
-        transform: translateX(26px);
+        transform: translateX(22px);
       }
+
+      .toggle input:disabled + span {
+        background-color: #bbb;
+      }
+
+      .category-expander {
+        margin-top: 1em;
+        display: block;
+        font-size: 0.9em;
+        color: #777;
+      }
+
+      @media (min-width: 900px) {
+        dialog {
+          margin: 0;
+          max-width: 480px;
+          max-height: 100vh;
+        }
+
+        form {
+          max-height: 100vh;
+        }
+      }
     `;
@@ -336,2 +373,3 @@
     this.mounted = true;
+    this.shadow = shadow;
     this.dialog = dialog;
@@ -369,5 +407,2 @@ this.toggleButton = toggleButton;
         break;
-      case "primaryColor":
-        this.primaryColor = newValue;
-        break;
     }
@@ -400,10 +435,28 @@
 
-    const response = await this.request("/api/v1/front/cookie-dialog/meta");
+    if (!this.hasFetchedMeta) {
+      console.log("fetching meta");
+      const response = await this.request(this.metaEndpoint);
 
-    if (!response.ok) {
-      return;
+      if (!response.ok) {
+        return;
+      }
+
+      this.hasFetchedMeta = true;
+      this.meta = response.json;
+
+      const cssVars = this.createElement("style");
+
+      cssVars.textContent = `
+        dialog {
+          --primary-color: ${this.meta.primaryColor || "#A1E99F"};
+          --text-color: ${this.meta.textColor || "black"};
+          --background-color: ${this.meta.backgroundColor || "#f1f1f1"};
+          --card-color: ${this.meta.cardColor || "white"};
+          --border-color: ${this.meta.borderColor || "black"};
+        }
+      `;
+
+      this.shadow.appendChild(cssVars);
     }
 
-    const meta = response.json;
-
     // Clear existing content
@@ -414,2 +467,6 @@ while (this.dialog.firstChild) {
 
+    const logo = this.logo
+      ? this.createElement("img", { src: this.logo, class: "logo" })
+      : null;
+    const form = this.createElement("form");
     const contentArea = this.createElement("div", { class: "content-area" });
@@ -420,12 +477,24 @@ const actionList = this.createElement("div", { class: "action-list" });
     });
-    const adminToggle = this.createElement("button", {}, "Administrer cookies");
+    const adminToggle = this.createElement(
+      "button",
+      { type: "button" },
+      "Administrer cookies"
+    );
     const acceptAll = this.createElement(
       "button",
-      { class: "primary" },
+      {
+        type: "submit",
+        class: "primary",
+        "data-preset": "all",
+      },
       "Godkjenn alle cookies"
     );
-    const denyAll = this.createElement("button", {}, "Avvis alle cookies");
+    const denyAll = this.createElement(
+      "button",
+      { type: "button", "data-preset": "none" },
+      "Avvis alle cookies"
+    );
     const saveCustomSettings = this.createElement(
       "button",
-      { class: "primary" },
+      { type: "submit", class: "primary" },
       "Lagre valgene mine"
@@ -435,6 +504,10 @@ );
 
-    if (meta.intro) {
-      contentArea.innerHTML = meta.intro;
+    if (this.meta.intro) {
+      contentArea.innerHTML = this.meta.intro;
     }
 
+    if (logo) {
+      contentArea.prepend(logo);
+    }
+
     actionList.appendChild(acceptAll);
@@ -444,18 +517,17 @@ actionList.appendChild(denyAll);
     actionListAlternate.appendChild(saveCustomSettings);
-    this.dialog.appendChild(contentArea);
-    this.dialog.appendChild(networkError);
-    this.dialog.appendChild(actionList);
-    this.dialog.appendChild(actionListAlternate);
-
+    form.appendChild(contentArea);
+    form.appendChild(networkError);
+    form.appendChild(actionList);
+    this.dialog.appendChild(form);
     this.contentArea = contentArea;
+    acceptAll.focus();
 
-    acceptAll.addEventListener("click", async (e) => {
-      this.save(e, networkError, "all");
+    form.addEventListener("submit", (e) => {
+      console.log(e);
+      e.preventDefault();
+
+      this.save(e, networkError);
     });
 
     denyAll.addEventListener("click", async (e) => {
-      this.save(e, networkError, "none");
-    });
-
-    saveCustomSettings.addEventListener("click", async (e) => {
       this.save(e, networkError);
@@ -469,5 +541,3 @@ });
 
-        const response = await this.request(
-          "/api/v1/front/cookie-dialog/definitions"
-        );
+        const response = await this.request(this.definitionsEndpoint);
 
@@ -482,5 +552,13 @@ if (response.ok) {
 
-      actionList.classList.toggle("hide");
-      actionListAlternate.classList.toggle("hide");
+      acceptAll.setAttribute("type", "button");
+      actionList.remove();
+      actionList.classList.add("inline");
+      form.appendChild(actionListAlternate);
+      this.contentArea.appendChild(actionList);
       this.renderDetails();
+      acceptAll.focus();
+
+      acceptAll.addEventListener("click", async (e) => {
+        this.save(e, networkError);
+      });
     });
@@ -493,5 +571,2 @@ }
 
-    let firstElem = null;
-    let elemsAdded = 0;
-
     wrapper.appendChild(title);
@@ -507,8 +582,2 @@
         wrapper.appendChild(category);
-
-        if (elemsAdded === 0) {
-          firstElem = category;
-        }
-
-        ++elemsAdded;
       }
@@ -518,6 +587,2 @@ }
     this.contentArea.appendChild(wrapper);
-
-    if (firstElem) {
-      firstElem.querySelector("a").focus();
-    }
   }
@@ -527,13 +592,15 @@
     const category = this.createElement("div", { class: "category" });
-    const categoryHeadingWrapper = this.createElement("div", {
-      class: "category-heading",
-    });
-    const categoryHeading = this.createElement("a", {
-      href: "#",
-      "aria-label": `Ekspander ${categoryField.label}`,
-    });
-    const categoryTitle = this.createElement("h3", {}, categoryField.label);
+    const categoryLabel = this.createElement("label", {}, categoryField.label);
     const categoryContent = this.createElement("div", {
       class: "category-content",
     });
+    const categoryExpander = this.createElement(
+      "a",
+      {
+        href: "#",
+        class: "category-expander",
+        "aria-label": `Vis mer informasjon om ${categoryField.label}`,
+      },
+      "Vis mer informasjon"
+    );
     const categoryDescription = this.createElement(
@@ -544,3 +611,3 @@ "p",
     );
-    const toggleWrapper = this.createElement("label", { class: "toggle" });
+    const toggleWrapper = this.createElement("span", { class: "toggle" });
     const toggle = this.createElement("input", {
@@ -563,16 +630,17 @@ type: "checkbox",
     categoryContent.appendChild(this.createDefinitions(categoryField.key));
-    categoryHeading.appendChild(categoryTitle);
-    categoryHeadingWrapper.appendChild(categoryHeading);
-    categoryHeadingWrapper.appendChild(toggleWrapper);
-    category.appendChild(categoryHeadingWrapper);
+    categoryLabel.appendChild(toggleWrapper);
+    category.appendChild(categoryLabel);
     category.appendChild(categoryContent);
+    category.appendChild(categoryExpander);
 
-    categoryHeading.addEventListener("click", (e) => {
+    categoryExpander.addEventListener("click", (e) => {
       e.preventDefault();
       categoryContent.classList.toggle("show");
       const open = categoryContent.classList.contains("show");
-      categoryHeading.setAttribute(
+      categoryExpander.setAttribute(
         "aria-label",
-        `${open ? "Minimer" : "Ekspander"} ${categoryField.label}`
+        `Vis ${open ? "mindre" : "mer"} informasjon om ${categoryField.label}`
       );
+
+      categoryExpander.innerText = `Vis ${open ? "mindre" : "mer"} informasjon`;
     });
@@ -642,3 +710,3 @@
 
-  async save(e, errorEl, preset) {
+  async save(e, errorEl) {
     if (this.networking) {
@@ -648,2 +716,5 @@ return;
 
+    const initiator = e.submitter || e.target;
+    const preset = initiator.getAttribute("data-preset");
+
     if (typeof preset === "string") {
@@ -655,9 +726,9 @@ for (const categoryField of categoryFields) {
 
-    const initialText = e.target.innerText;
+    const initialText = initiator.innerText;
 
-    e.target.setAttribute("disabled", true);
+    initiator.setAttribute("disabled", true);
     errorEl.innerText = "";
-    e.target.innerText = "Lagrer...";
+    initiator.innerText = "Lagrer...";
 
-    const response = await this.request("/api/v1/front/consents", {
+    const response = await this.request(this.saveEndpoint, {
       method: "POST",
@@ -673,4 +744,4 @@ headers: { "Content-Type": "application/json" },
 
-    e.target.removeAttribute("disabled");
-    e.target.innerText = initialText;
+    initiator.removeAttribute("disabled");
+    initiator.innerText = initialText;
 
@@ -677,0 +748,0 @@ if (!response.ok) {

package.json

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

README.md

 # cookie-dialog
 
-## CDN provider
+## CDN Provider
 
@@ -11,3 +11,3 @@ This package uses JSDeliver as a CDN. Use the following link structure to
 ```
-https://cdn.jsdelivr.net/npm/@ludens-reklame/cookie-dialog@version/cookie-dialog.min.js
+https://cdn.jsdelivr.net/npm/@ludens-reklame/cookie-dialog@1.0.0/dialog.min.js
 ```

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32251

increased by5.73%

Lines of code

835

increased by8.72%

Worsened metrics

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes