consent.software/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(elements): Enhance consent management components with advanced styling and interaction

Browse Source
This commit is contained in:
Philipp Kunz
2025-01-14 03:08:00 +01:00
parent 73428cbc36
commit 7d137c9dd5
5 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
ts_web/elements/consentsoftware-cookieconsent.ts
View File

@@ -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 {
<div
class="consent-button"
@click=${(event: MouseEvent) =>
this.setLevel(event, ['functional', 'analytics', 'marketing'])}
this.setLevel(event, ['functional', 'analytics', 'marketing'])}
>
Marketing cookies
</div>
<div
class="consent-button"
@click=${(event: MouseEvent) =>
this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])}
this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])}
>
All cookies
</div>
@@ -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.