From 7d137c9dd566903e0775ca1e80ee8122f78f4b46 Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Tue, 14 Jan 2025 03:08:00 +0100 Subject: [PATCH] feat(elements): Enhance consent management components with advanced styling and interaction --- changelog.md | 7 ++++ ts_web/00_commitinfo_data.ts | 2 +- .../elements/consentsoftware-cookieconsent.ts | 33 ++++++++++++----- .../elements/consentsoftware-mainselection.ts | 2 +- ts_web/elements/consentsoftware-toggle.ts | 37 +++++++++++++++++-- 5 files changed, 66 insertions(+), 15 deletions(-) diff --git a/changelog.md b/changelog.md index 666e5e3..ce2075c 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2025-01-14 - 1.3.0 - feat(elements) +Enhance consent management components with advanced styling and interaction + +- Added delayed animation effect to 'consentsoftware-toggle' when required. +- Improved styling for better visual feedback on selections and requirements. +- Enhanced modal transition and visibility settings for the 'consentsoftware-cookieconsent'. + ## 2025-01-13 - 1.2.0 - feat(pages) Add initial structure for pages with page1 component diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 6492c1a..07a33fc 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@consent.software/catalog', - version: '1.2.0', + version: '1.3.0', description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.' } diff --git a/ts_web/elements/consentsoftware-cookieconsent.ts b/ts_web/elements/consentsoftware-cookieconsent.ts index 2832c5c..ec3fe31 100644 --- a/ts_web/elements/consentsoftware-cookieconsent.ts +++ b/ts_web/elements/consentsoftware-cookieconsent.ts @@ -18,9 +18,6 @@ export class ConsentsoftwareCookieconsent extends LitElement { @property({ type: String, reflect: true }) public theme: 'light' | 'dark' = 'light'; - @property({ type: Number }) - public heightPixels = 60; - /** * We bind `heightPixels` to a CSS variable (--cookieconsent-height). * Then we can do margin-bottom animations in CSS. @@ -69,6 +66,9 @@ export class ConsentsoftwareCookieconsent extends LitElement { align-items: center; justify-content: center; z-index: 1000; /* standard z-index for fixed elements */ + background: rgba(0, 0, 0, 0); + backdrop-filter: blur(0px); + transition: all 0.2s; } .modalBox { @@ -88,7 +88,9 @@ export class ConsentsoftwareCookieconsent extends LitElement { * The animation occurs when we toggle the gotIt/show attributes. */ will-change: transform; /* ensure efficient rendering */ - transition: all 0.2s; + transition: all 0.3s; + transform: scale(0.95); + opacity: 0; } /* @@ -208,14 +210,14 @@ export class ConsentsoftwareCookieconsent extends LitElement {
- this.setLevel(event, ['functional', 'analytics', 'marketing'])} + this.setLevel(event, ['functional', 'analytics', 'marketing'])} > Marketing cookies
- this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])} + this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])} > All cookies
@@ -261,9 +263,20 @@ export class ConsentsoftwareCookieconsent extends LitElement { const cookieLevel = await this.csWebclientInstance.getCookieLevels(); if (!cookieLevel) { - delayFor(300).then(() => { - this.setAttribute('show', 'true'); - this.setAttribute('gotIt', 'false'); + this.setAttribute('show', 'true'); + this.setAttribute('gotIt', 'false'); + requestAnimationFrame(async () => { + await this.updated(); + const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay'); + if (pageOverlay) { + pageOverlay.style.background = 'rgba(0, 0, 0, 0.5)'; + pageOverlay.style.backdropFilter = 'blur(2px)'; + } + const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox'); + if (modalBox) { + modalBox.style.transform = `scale(1)`; + modalBox.style.opacity = '1'; + } }); } else { this.setAttribute('show', 'false'); @@ -275,7 +288,7 @@ export class ConsentsoftwareCookieconsent extends LitElement { * Called after the first render of the component. * We measure the actual height of the banner and update the CSS variable. */ - public firstUpdated() {} + public async firstUpdated() {} /** * Called whenever the element is updated or re-rendered. diff --git a/ts_web/elements/consentsoftware-mainselection.ts b/ts_web/elements/consentsoftware-mainselection.ts index 0b5c881..7d28cbf 100644 --- a/ts_web/elements/consentsoftware-mainselection.ts +++ b/ts_web/elements/consentsoftware-mainselection.ts @@ -43,7 +43,7 @@ export class ConsentsoftwareMainSelection extends LitElement { return html`
- Required + Required
Preferences diff --git a/ts_web/elements/consentsoftware-toggle.ts b/ts_web/elements/consentsoftware-toggle.ts index 27bf62f..9c57248 100644 --- a/ts_web/elements/consentsoftware-toggle.ts +++ b/ts_web/elements/consentsoftware-toggle.ts @@ -2,6 +2,8 @@ import { LitElement, html, css, type TemplateResult } from 'lit'; import { customElement } from 'lit/decorators.js'; import { property } from 'lit/decorators/property.js'; +import { delayFor } from '@push.rocks/smartdelay'; + @customElement('consentsoftware-toggle') export class ConsentsoftwareToggle extends LitElement { public static demo = () => html``; @@ -27,15 +29,16 @@ export class ConsentsoftwareToggle extends LitElement { margin: auto; height: 30px; width: 60px; - border-radius: 15px; + border-radius: 20px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; transition: all 0.2s; + border: 1px solid rgba(255, 255, 255, 0); } :host([selected]) .toggleKnobArea { - background: blue; + background: green; } .toggleKnobMover { @@ -51,12 +54,21 @@ export class ConsentsoftwareToggle extends LitElement { top: 0; left: 0; transition: all 0.2s; - transform: scale(0.8); + transform: scale(0.7); } :host([selected]) .toggleKnobInner { background: white; } + + :host([required]) .toggleKnobArea { + background: none; + border: 1px solid rgba(255, 255, 255, 0.1); + } + + :host([required]) .toggleKnobInner { + background: rgba(255, 255, 255, 0.1); + } `; constructor() { @@ -76,11 +88,30 @@ export class ConsentsoftwareToggle extends LitElement { `; } + public async firstUpdated(_changedProperties: Map) { + super.firstUpdated(_changedProperties); + if (this.required) { + this.selected = true; + this.syncSelection(); + } + } + public async handleClick(mouseEvent) { + if (this.required) { + const moverElement: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobMover'); + moverElement.style.transform = 'translateX(20px)'; + await delayFor(250); + moverElement.style.transform = 'translateX(30px)'; + return; + } this.selected = !this.selected; mouseEvent.stopPropagation(); mouseEvent.preventDefault(); + this.syncSelection(); this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } })); + } + + public async syncSelection() { console.log(`Selected ${this.selected}`); const moverElement: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobMover'); if (this.selected) {