u2ui 1.0.1 → 1.4.6

package/el/code/manifest.json

@@ -1,66 +1,59 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-      {
-        "kind": "javascript-module",
-        "path": "code.js",
-        "declarations": [
-          {
-            "kind": "class",
-            "description": "A custom HTML element for displaying highlighted, editable code blocks.",
-            "name": "code",
-            "members": [
-              {
-                "kind": "getter",
-                "name": "language",
-                "description": "Gets the language of the code block."
-              },{
-                "kind": "getter",
-                "name": "value",
-                "description": "Gets the value of the code block."
-              }
-            ],
-            "events": [],
-            "attributes": [
-              {
-                "name": "trim",
-                "u2-type": "boolean",
-                "description": "Trims empty first and last lines, and most importantly, indentation."
-              },
-              {
-                "name": "editable",
-                "u2-type": "boolean",
-                "description": "Makes the code block editable."
-              },
-              {
-                "name": "language",
-                "description": "Defines the code language (auto-detect if not set). See https://highlightjs.readthedocs.io/en/latest/supported-languages.html for a list of supported languages.",
-                "u2Examples": ["javascript", "html", "css", "json", "xml", "markdown", "php"]
-              },
-              {
-                "name": "element",
-                "description": "ID of the element whose innerHTML should be used as code."
-              }
-            ],
-            "cssProperties": [],
-            "superclass": {
-              "name": "HTMLElement"
-            },
-            "tagName": "u2-code",
-            "customElement": true
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-element-definition",
-            "name": "u2-code",
-            "declaration": {
-              "name": "code",
-              "module": "code.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "code.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "A custom HTML element for displaying highlighted, editable code blocks.",
+            "name": "U2Code",
+            "members": [{
+                "kind": "getter",
+                "name": "language",
+                "description": "Gets the language of the code block."
+            },{
+                "kind": "getter",
+                "name": "value",
+                "description": "Gets the value of the code block."
+            }],
+            "events": [],
+            "attributes": [{
+                "name": "trim",
+                "u2-type": "boolean",
+                "description": "Trims empty first and last lines, and most importantly, indentation."
+            },{
+                "name": "editable",
+                "u2-type": "boolean",
+                "description": "Makes the code block editable."
+            },{
+                "name": "language",
+                "description": "Defines the code language (auto-detect if not set). See https://highlightjs.readthedocs.io/en/latest/supported-languages.html for a list of supported languages.",
+                "u2Examples": [
+                    "javascript",
+                    "html",
+                    "css",
+                    "json",
+                    "xml",
+                    "markdown",
+                    "php"
+                ]
+            },{
+                "name": "element",
+                "description": "ID of the element whose innerHTML should be used as code."
+            }],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-code",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-code",
+            "declaration": {
+                "name": "U2Code",
+                "module": "code.js"
+            }
+        }]
+    }]
+}

package/el/cookiebanner/README.md

@@ -0,0 +1,70 @@
+# <u2-cookiebanner> - element
+Cookie banner for consent management.
+
+## Features
+
+- Lightweight!
+- Easy to use!
+- Known cookie cleanup
+- Responsive design
+- 23 Languages (request for more)
+- Customizable
+- Google Consent Mode v2 integration
+- Minimal Styled, easy to customize (no Shadow DOM)
+
+## Usage
+
+```js
+(window.u2ConsentHandlers ??= []).push(function(consent){
+    consent.marketing ? setUp() : cleanUp();
+})
+```
+
+```html
+<u2-cookiebanner message="We have no cookies, just a test"></u2-cookiebanner>
+<button onclick="u2Cookiebanner.show()">Change Consent</button>
+```
+
+```css
+u2-cookiebanner {
+  box-shadow:0 0 1rem #0006;
+  inset:0;
+  max-width:13rem;
+  &::backdrop {
+    background-color: #0006;
+  }
+}
+```
+
+## API
+
+Attributes (all optional):
+- `message`: The message to be displayed.
+- `policy-link`: The link to the privacy policy.
+- `categories`: Space separated list of categories to be displayed. Default: `necessary functional analytics marketing`
+- `lang`: Language of the banner. `lang` can be set on a parent element too.
+
+Methods:
+- `show()` - show the banner, even if cookie is already set
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/cookiebanner/cookiebanner.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/cookiebanner/cookiebanner.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/cookiebanner/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/cookiebanner/tests/minimal.html)  
+
+## Extensions
+
+- [googleConsentMode.js](./extensions/googleConsentMode.js) - Google Consent Mode v2 integration
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/el/cookiebanner/cookiebanner.css

@@ -0,0 +1,42 @@
+u2-cookiebanner {
+    position: fixed;
+    inset: auto 1rem 1rem auto;
+    max-width: 14rem;
+    border:0;
+    padding: 1.5em;
+    font-size: max(14px, .8em);
+    transition-duration:1s;
+    transition-property: opacity, display, overlay;
+    text-align: left;
+
+    & label {
+        display:block;
+        margin-block: .5em;
+        & input { margin-inline-end: .5em; }
+    }
+    & button:not(.-main) {
+        opacity: .7;
+    }
+    & .-buttons {
+        margin-block-start: 1em;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: end;
+        gap: .5em;
+        container-type: inline-size;
+
+        @container (max-width: 16rem) {
+            button { flex-basis: 100%; }
+        }
+
+    }
+}
+
+u2-cookiebanner:not(:defined) {
+    display: none;
+}
+
+u2-cookiebanner::backdrop {
+    transition-duration:1s;
+    background: #0001;
+}

package/el/cookiebanner/cookiebanner.js

@@ -0,0 +1,161 @@
+// Cookie Banner
+// consent gilt momentan für gesamten Domain
+
+let initialEmitted = false;
+
+export default class U2Cookiebanner extends HTMLElement {
+  constructor() {
+    super();
+    this.consent = {};
+  }
+
+  show() {
+    import('./ui.js').then(ui => ui.init(this));
+    this.showPopover();
+  }
+
+  connectedCallback() {
+    this.popover = "manual";
+    this.id = "u2Cookiebanner";
+    const data = getCookie();
+    if (!data) this.show();
+    else {
+      this.consent = data;
+      if (!initialEmitted) {
+        initialEmitted = true;
+        queueMicrotask(()=>this.emitConsent());
+      }
+    }
+  }
+
+  emitConsent(isUpdate) {
+    dispatchEvent(new CustomEvent('u2-cookiebanner-consent', {detail: {isUpdate, consent: this.consent}}));
+  }
+
+  setConsent(consent) {
+    this.consent = consent;
+    setCookie(this.consent);
+    this.emitConsent(true);
+    this.hidePopover();
+  }
+}
+
+
+// Helpers
+function setCookie(value) {
+  document.cookie = `u2-cookiebanner=${JSON.stringify(value)};max-age=${365 * 86400};path=/;SameSite=Lax;Secure`;
+}
+function getCookie() {
+  try {
+    const cookieValue = document.cookie.split('; ').find(c => c.startsWith('u2-cookiebanner='))?.split('=')[1];
+    return cookieValue ? JSON.parse(cookieValue) : null;
+  } catch (error) {
+    console.error(error);
+    return null; // todo: kann weg, da sonst null oder undefined? zurückgegeben wird.
+  }
+}
+
+customElements.define('u2-cookiebanner', U2Cookiebanner);
+
+
+
+// load scripts based on consent
+// todo: SelectorObserver verwenden
+const alternativeCategories = {
+  // own
+  'necessary': 'necessary', // also Cookiebot
+  'functional': 'functional', // also Usercentrics
+  'analytics': 'analytics', // also Usercentrics
+  'marketing': 'marketing', // also Cookiebot
+  // Cookiebot
+  'preferences': 'functional',
+  'statistics': 'analytics',
+  'ignore': null,
+  // Usercentrics / andere Labels
+  'essential': 'necessary',
+  // OneTrust (ID-basiert, unsicher ob Zuordnung stimmt)
+  'C0001': 'necessary',
+  'C0002': 'analytics',
+  'C0003': 'functional',
+  'C0004': 'marketing',
+};
+
+window.addEventListener('u2-cookiebanner-consent', ({ detail: { consent } }) => {
+  setTimeout(() => { // needed for type=module?
+    document.querySelectorAll('script[type="text/plain"]').forEach(script => {
+      let value = script.dataset.cookieconsent || script.dataset.uc || script.dataset.category;
+      if (!value) return;
+      value = value.toLowerCase();
+
+      const category = alternativeCategories[value];
+      if (!category) {
+        console.warn(`u2-cookiebanner: Unknown category ${value}`, script);
+        return;
+      }
+      if (consent[category]) {
+        const newScript = document.createElement('script');
+        if (script.src) newScript.src = script.src;
+        else newScript.textContent = script.textContent;
+        newScript.type = 'text/javascript';
+        script.parentNode.replaceChild(newScript, script);
+      }
+    });
+  }, 10);
+});
+
+
+// Bekannte Daten löschen
+// todo: Wildcards berücksichtigen
+// todo: cookies besser löschen
+addEventListener('u2-cookiebanner-consent', async ({detail: {consent, isUpdate}}) => {
+    if (!isUpdate) return;
+
+    function deleteCookie(name) {
+      const domains = [
+        '', 
+        `.${window.location.hostname}`,
+        window.location.hostname
+      ];
+      const paths = ['/', ''];
+      domains.forEach(domain => {
+        paths.forEach(path => {
+          document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=${path}${domain ? `; domain=${domain}` : ''}`;
+        });
+      });
+    }
+
+    const { cookies, localStorage, sessionStorage } = await import('./knownItems.js');
+    Object.entries(cookies).forEach(([cookie, { category }]) => {
+        if (!consent[category]) deleteCookie(cookie);
+    });
+    Object.entries(localStorage).forEach(([key, { category }]) => {
+        if (!consent[category]) window.localStorage.removeItem(key);
+    });
+    Object.entries(sessionStorage).forEach(([key, { category }]) => {
+        if (!consent[category]) window.sessionStorage.removeItem(key);
+    });
+});
+
+
+// The best API, to add consent dependent code without guarantee of module loaded?
+// deprecated the event?
+window.u2ConsentHandlers ??= [] // better: u2ConsentHandlers
+let lastConsent = null;
+const originalPush = window.u2ConsentHandlers.push;
+addEventListener('u2-cookiebanner-consent', ({detail: {consent, isUpdate}}) => {
+    lastConsent = consent;
+    for (const func of window.u2ConsentHandlers) {
+        try { func(consent); } catch(e) { console.error(e); }
+    }
+    if (!isUpdate) { // initial on page load
+        window.u2ConsentHandlers.push = function(func){
+            try { func(lastConsent); } catch(e) { console.error(e); }
+            return originalPush.call(this, func);
+        }
+    }
+});
+
+// Usage:
+// (window.u2ConsentHandlers ??= []).push(function(consent){
+//     //
+// })

package/el/cookiebanner/extensions/googleConsentMode.js

@@ -0,0 +1,36 @@
+// Google Consent Mode v2
+window.dataLayer ||= [];
+function gtag(){dataLayer.push(arguments)};
+gtag('js', new Date());
+
+const googleConsentMap = {
+    'ad_storage': 'marketing',
+    'analytics_storage': 'analytics',
+    'ad_user_data': 'marketing',
+    'ad_personalization': 'marketing',
+    'functionality_storage': 'necessary',
+    'personalization_storage': 'functional',
+    'security_storage': 'necessary'
+};
+
+const defaultConsent = {
+    ...Object.fromEntries(Object.entries(googleConsentMap).map(([key, value]) => [
+        key,
+        value === 'necessary' ? 'granted' : 'denied'
+    ])),
+    wait_for_update: 700
+};
+gtag('consent', 'default', defaultConsent);
+
+
+function updateConsent(consent) {
+    Object.entries(googleConsentMap).forEach(([key, value]) => {
+        gtag('consent', 'update', {
+            [key]: consent[value] ? 'granted' : 'denied'
+        });
+    });
+    console.log('updateConsent for google-consent-mode', Object.entries(googleConsentMap).map(([key, value]) => [key, consent[value]]));
+}
+
+
+(window.u2ConsentHandlers ??= []).push(updateConsent);