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

fix(consentsoftware-cookieconsent): Refine cookie consent modal shake behaviour and cleanup imports

Browse Source
This commit is contained in:
Jürgen Kunz
2025-11-30 22:00:57 +00:00
parent 777acd06a5
commit 2c2f843a6e
3 changed files with 92 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,6 @@ import {
html,
css,
type TemplateResult,
property,
} from '@design.estate/dees-element';
import * as csInterfaces from '@consent.software/interfaces';
@@ -25,6 +24,7 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
public csWebclientInstance = new csWebclient.CsWebclient();
public csWebclientRan = false;
private isMobile = false;
public static styles = [
cssManager.defaultStyles,
@@ -43,7 +43,7 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
z-index: 1000;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
transition: all 0.2s ease-out;
transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.pageOverlay.shake {
@@ -63,18 +63,42 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
min-width: 320px;
box-sizing: border-box;
overflow: hidden;
will-change: transform;
transition: all 0.2s ease-out;
transform: scale(0.96);
will-change: transform, opacity;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
transform: scale(0.92) translateY(20px);
opacity: 0;
}
.modalBox.visible {
transform: scale(1) translateY(0);
opacity: 1;
}
.modalBox.hiding {
transform: scale(0.95) translateY(10px);
opacity: 0;
}
/* Mobile: slide up from bottom */
@media (max-width: 560px) {
.pageOverlay {
align-items: flex-end;
}
.modalBox {
max-width: 100%;
min-width: 100%;
height: 100vh;
border-radius: 0;
border-radius: 16px 16px 0 0;
transform: translateY(100%);
opacity: 1;
}
.modalBox.visible {
transform: translateY(0);
}
.modalBox.hiding {
transform: translateY(100%);
}
}
@@ -122,6 +146,7 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
@media (max-width: 560px) {
.button-container {
grid-template-columns: 1fr;
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
}
@@ -143,6 +168,10 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
}
.consent-button:active {
transform: scale(0.98);
}
.consent-button:last-child {
background: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
color: ${cssManager.bdTheme(colors.light.primaryForeground, colors.dark.primaryForeground)};
@@ -175,7 +204,6 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
constructor() {
super();
// Initially hide the consent banner until needed
this.setAttribute('show', 'false');
}
@@ -234,33 +262,21 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
public async connectedCallback() {
await super.connectedCallback();
// Check if mobile
this.isMobile = window.matchMedia('(max-width: 560px)').matches;
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
if (!cookieLevel) {
// Show consent banner if cookie levels haven't been set yet
this.setAttribute('show', 'true');
requestAnimationFrame(async () => {
await this.updateComplete;
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) {
// Apply subtle backdrop blur when modal appears
pageOverlay.style.background = 'rgba(0,0,0, 0.6)';
pageOverlay.style.backdropFilter = 'blur(4px)';
}
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
if (modalBox) {
// Animate modal box appearance
modalBox.style.transform = `scale(1)`;
modalBox.style.opacity = '1';
}
});
// Small delay to ensure DOM is ready, then animate in
await delayFor(50);
this.animateIn();
} else {
// Hide banner if cookie levels are already set
this.setAttribute('show', 'false');
}
}
public async firstUpdated() {
// Run consent scripts if levels are already set
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
if (!this.csWebclientRan && acceptedCookieLevels) {
this.csWebclientRan = true;
@@ -268,29 +284,52 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
}
}
private animateIn() {
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay') as HTMLDivElement;
const modalBox = this.shadowRoot?.querySelector('.modalBox') as HTMLDivElement;
if (pageOverlay) {
pageOverlay.style.background = 'rgba(0, 0, 0, 0.5)';
pageOverlay.style.backdropFilter = 'blur(4px)';
}
if (modalBox) {
modalBox.classList.remove('hiding');
modalBox.classList.add('visible');
}
}
private async animateOut() {
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay') as HTMLDivElement;
const modalBox = this.shadowRoot?.querySelector('.modalBox') as HTMLDivElement;
if (pageOverlay) {
pageOverlay.style.background = 'rgba(0, 0, 0, 0)';
pageOverlay.style.backdropFilter = 'blur(0px)';
}
if (modalBox) {
modalBox.classList.remove('visible');
modalBox.classList.add('hiding');
}
await delayFor(350);
}
/**
* Handles consent button clicks, sets cookie levels, and hides the banner.
*/
private async handleConsentButtonClick(
event: MouseEvent,
_event: MouseEvent,
levelsArg: csInterfaces.TCookieLevel[]
) {
console.log(`Set level to ${levelsArg}`);
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) {
pageOverlay.style.background = 'rgba(0,0,0, 0)';
pageOverlay.style.backdropFilter = 'blur(0px)';
}
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
if (modalBox) {
// Scale down and fade out modal box before hiding
modalBox.style.transform = `scale(0.95)`;
modalBox.style.opacity = '0';
}
await this.animateOut();
// Save user consent preferences
await this.csWebclientInstance.setCookieLevels(levelsArg);
await delayFor(300);
this.setAttribute('show', 'false'); // Hide the consent banner
this.setAttribute('show', 'false');
// Run consent scripts
if (!this.csWebclientRan) {
@@ -305,13 +344,10 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
*/
private async pageOverlayClick(e: MouseEvent) {
if (e.target === e.currentTarget) {
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
if (pageOverlay && modalBox) {
pageOverlay.classList.add('shake');
const modalBox = this.shadowRoot?.querySelector('.modalBox') as HTMLDivElement;
if (modalBox) {
modalBox.classList.add('shake');
await delayFor(2000);
pageOverlay.classList.remove('shake');
await delayFor(300);
modalBox.classList.remove('shake');
}
}