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

feat(consentsoftware-cookieconsent): Enhance consent modal with shake animation on overlay click

Browse Source
This commit is contained in:
Philipp Kunz
2025-01-20 17:59:50 +01:00
parent 7829e6a052
commit 6b31a80f07
5 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,6 +78,11 @@ export class ConsentsoftwareCookieconsent extends LitElement {
transition: all 0.2s;
}
.pageOverlay.shake {
background: rgba(0, 0, 0, 0.5) !important;
backdrop-filter: blur(20px) !important;
}
.modalBox {
display: block;
color: var(--text-color);
@ -97,6 +102,23 @@ export class ConsentsoftwareCookieconsent extends LitElement {
opacity: 0;
}
.modalBox.shake {
animation: shake 150ms 2 linear;
box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.6);
}
@keyframes shake {
0% {
transform: translate(3px, 0);
}
50% {
transform: translate(-3px, 0);
}
100% {
transform: translate(0, 0);
}
}
/*
* Toggle display based on [show] attribute
* (so if show=false, the banner doesn't show at all).
@ -173,7 +195,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
public render(): TemplateResult {
return html`
<div class="pageOverlay">
<div class="pageOverlay" @click=${this.pageOverlayClick}>
<div class="modalBox">
<div class="content">
<consentsoftware-header></consentsoftware-header>
@ -265,7 +287,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) {
pageOverlay.style.background = 'rgba(255,255,255, 0.1)';
pageOverlay.style.backdropFilter = 'blur(1px)';
pageOverlay.style.backdropFilter = 'blur(0px)';
}
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
if (modalBox) {
@ -321,6 +343,20 @@ export class ConsentsoftwareCookieconsent extends LitElement {
this.updated();
}
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');
modalBox.classList.add('shake');
await delayFor(300);
pageOverlay.classList.remove('shake');
modalBox.classList.remove('shake');
}
}
}
/**
* Dynamically switches the theme between light/dark,
* respecting `prefers-color-scheme` by default.