fix(elements): Fix issues in consentsoftware-cookieconsent component
This commit is contained in:
parent
9407295866
commit
8b18e33c6e
@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-01-17 - 1.4.5 - fix(elements)
|
||||
Fix issues in consentsoftware-cookieconsent component
|
||||
|
||||
- Removed unused attribute handling for 'gotIt'.
|
||||
- Fixed background and backdrop-filter transitions to ensure proper UI behavior.
|
||||
- Consolidated consent button click handling into handleConsentButtonClick.
|
||||
- Improved modal visibility toggling and acceptance flow.
|
||||
|
||||
## 2025-01-17 - 1.4.4 - fix(core)
|
||||
Update LitElement properties to use accessors
|
||||
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@consent.software/catalog',
|
||||
version: '1.4.4',
|
||||
version: '1.4.5',
|
||||
description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@ 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);
|
||||
background: rgba(255, 255, 255, 0);
|
||||
backdrop-filter: blur(0px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@ -91,10 +91,6 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
min-width: calc(100vw / 3);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
/*
|
||||
* We start with margin-bottom as negative to hide the banner.
|
||||
* The animation occurs when we toggle the gotIt/show attributes.
|
||||
*/
|
||||
will-change: transform; /* ensure efficient rendering */
|
||||
transition: all 0.3s;
|
||||
transform: scale(0.95);
|
||||
@ -112,18 +108,6 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Animate margin-bottom when [gotIt] toggles.
|
||||
* If gotIt=true, push the banner down off-screen.
|
||||
* If gotIt=false, pull the banner into view.
|
||||
*/
|
||||
:host([gotIt='true']) {
|
||||
background: blue;
|
||||
}
|
||||
:host([gotIt='false']) {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: auto;
|
||||
}
|
||||
@ -184,7 +168,6 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.setAttribute('gotIt', 'true');
|
||||
this.setAttribute('show', 'false');
|
||||
}
|
||||
|
||||
@ -205,27 +188,29 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
<!-- <div class="button-container">
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) => this.setLevel(event, ['functional'])}
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.handleConsentButtonClick(event, ['functional'])}
|
||||
>
|
||||
Functional cookies
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) => this.setLevel(event, ['functional', 'analytics'])}
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.handleConsentButtonClick(event, ['functional', 'analytics'])}
|
||||
>
|
||||
Analytics cookies
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.setLevel(event, ['functional', 'analytics', 'marketing'])}
|
||||
this.handleConsentButtonClick(event, ['functional', 'analytics', 'marketing'])}
|
||||
>
|
||||
Marketing cookies
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])}
|
||||
this.handleConsentButtonClick(event, ['functional', 'analytics', 'marketing', 'all'])}
|
||||
>
|
||||
All cookies
|
||||
</div>
|
||||
@ -234,20 +219,22 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
<div class="button-container">
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) => this.setLevel(event, ['functional'])}
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.handleConsentButtonClick(event, ['functional'])}
|
||||
>
|
||||
Deny
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) => this.setLevel(event, ['functional', 'analytics'])}
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.handleConsentButtonClick(event, ['functional', 'analytics'])}
|
||||
>
|
||||
Accept selection
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.setLevel(event, ['functional', 'analytics', 'marketing'])}
|
||||
this.handleConsentButtonClick(event, ['functional', 'analytics', 'marketing'])}
|
||||
>
|
||||
Accept all cookies
|
||||
</div>
|
||||
@ -255,6 +242,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
<div class="info-container">
|
||||
consent management powered by
|
||||
<a href="https://consent.software">consent.software</a>
|
||||
(Open Source)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -272,13 +260,12 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
||||
if (!cookieLevel) {
|
||||
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.1)';
|
||||
pageOverlay.style.backdropFilter = 'blur(2px)';
|
||||
pageOverlay.style.background = 'rgba(255,255,255, 0.1)';
|
||||
pageOverlay.style.backdropFilter = 'blur(1px)';
|
||||
}
|
||||
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
|
||||
if (modalBox) {
|
||||
@ -288,7 +275,6 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
});
|
||||
} else {
|
||||
this.setAttribute('show', 'false');
|
||||
this.setAttribute('gotIt', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
@ -313,10 +299,22 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
/**
|
||||
* Sets the user’s chosen cookie level(s) and hides the banner.
|
||||
*/
|
||||
private async setLevel(event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
|
||||
private async handleConsentButtonClick(
|
||||
event: MouseEvent,
|
||||
levelsArg: csInterfaces.TCookieLevel[]
|
||||
) {
|
||||
console.log(`Set level to ${levelsArg}`);
|
||||
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
|
||||
if (pageOverlay) {
|
||||
pageOverlay.style.background = 'rgba(255,255,255, 0)';
|
||||
pageOverlay.style.backdropFilter = 'blur(0px)';
|
||||
}
|
||||
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
|
||||
if (modalBox) {
|
||||
modalBox.style.transform = `scale(0.95)`;
|
||||
modalBox.style.opacity = '0';
|
||||
}
|
||||
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
||||
this.setAttribute('gotIt', 'true');
|
||||
await delayFor(300);
|
||||
this.setAttribute('show', 'false');
|
||||
// After user selection, re-check for any required scripts to run
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user