From 6b31a80f075fcc235ce264ba3bc5d214c51de38f Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Mon, 20 Jan 2025 17:59:50 +0100 Subject: [PATCH] feat(consentsoftware-cookieconsent): Enhance consent modal with shake animation on overlay click --- changelog.md | 6 +++ package.json | 2 +- pnpm-lock.yaml | 19 ++++----- ts_web/00_commitinfo_data.ts | 2 +- .../elements/consentsoftware-cookieconsent.ts | 40 ++++++++++++++++++- 5 files changed, 53 insertions(+), 16 deletions(-) diff --git a/changelog.md b/changelog.md index 9c1dfa3..a3463b1 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,11 @@ # Changelog +## 2025-01-20 - 1.5.0 - feat(consentsoftware-cookieconsent) +Enhance consent modal with shake animation on overlay click + +- Added shake animation to the modal and overlay when clicked outside the modal. +- Updated dependency @consent.software/interfaces to version ^1.0.14. + ## 2025-01-17 - 1.4.5 - fix(elements) Fix issues in consentsoftware-cookieconsent component diff --git a/package.json b/package.json index 4792f1f..1e706b8 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "author": "Lossless GmbH", "license": "MIT", "dependencies": { - "@consent.software/interfaces": "^1.0.11", + "@consent.software/interfaces": "^1.0.14", "@consent.software/webclient": "^1.1.0", "@push.rocks/smartdelay": "^3.0.5", "lit": "^3.2.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee37ea3..fd605a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@consent.software/interfaces': - specifier: ^1.0.11 - version: 1.0.13 + specifier: ^1.0.14 + version: 1.0.14 '@consent.software/webclient': specifier: ^1.1.0 version: 1.1.0 @@ -42,9 +42,6 @@ packages: '@api.global/typedrequest-interfaces@2.0.2': resolution: {integrity: sha512-D+mkr4IiUZ/eUgrdp5jXjBKOW/iuMcl0z2ZLQsLLypKX/psFGD3viZJ58FNRa+/1OSM38JS5wFyoWl8oPEFLrw==} - '@api.global/typedrequest-interfaces@3.0.1': - resolution: {integrity: sha512-eR2Cr01BYRwIq/X2ajOenWhm8l+/YE4A5kK/9V6I8ZnhtEBMFHG6YjF6Fg8npLJWbvhZXhOms+axZ6JKI71o8g==} - '@api.global/typedrequest-interfaces@3.0.19': resolution: {integrity: sha512-uuHUXJeOy/inWSDrwD0Cwax2rovpxYllDhM2RWh+6mVpQuNmZ3uw6IVg6dA2G1rOe24Ebs+Y9SzEogo+jYN7vw==} @@ -227,8 +224,8 @@ packages: '@cloudflare/workers-types@4.20241230.0': resolution: {integrity: sha512-dtLD4jY35Lb750cCVyO1i/eIfdZJg2Z0i+B1RYX6BVeRPlgaHx/H18ImKAkYmy0g09Ow8R2jZy3hIxMgXun0WQ==} - '@consent.software/interfaces@1.0.13': - resolution: {integrity: sha512-xB1h5n5vltRLBrvQhrKz4K6tz+TN5RHHvcbQbTIphxetiWOJJq/RwyEN2iH8TtwWIGBSqHRtoljBQqY8t8Oanw==} + '@consent.software/interfaces@1.0.14': + resolution: {integrity: sha512-xfOhDuj4ECEMyutJCSwEOX1SPN/MlReR40D/x7CsKg1mSauoq0pZbZEUb9m4z5EoPfywZl8gkLVzFoiGyg1IcA==} '@consent.software/webclient@1.1.0': resolution: {integrity: sha512-VX7e8ygZwgU8WEzn22fdvvEytLYl4kfp/u40GusaBU4iFtjrCY2hxDy9Z1FTKicpGcRxf3t13lM0Jaugq7Jj/w==} @@ -2981,8 +2978,6 @@ snapshots: '@api.global/typedrequest-interfaces@2.0.2': {} - '@api.global/typedrequest-interfaces@3.0.1': {} - '@api.global/typedrequest-interfaces@3.0.19': {} '@api.global/typedrequest@3.1.10': @@ -3569,14 +3564,14 @@ snapshots: '@cloudflare/workers-types@4.20241230.0': {} - '@consent.software/interfaces@1.0.13': + '@consent.software/interfaces@1.0.14': dependencies: - '@api.global/typedrequest-interfaces': 3.0.1 + '@api.global/typedrequest-interfaces': 3.0.19 '@consent.software/webclient@1.1.0': dependencies: '@api.global/typedrequest': 3.1.10 - '@consent.software/interfaces': 1.0.13 + '@consent.software/interfaces': 1.0.14 '@push.rocks/smarttime': 4.1.1 '@push.rocks/webstore': 2.0.20 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 115f8f0..76f8ce7 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.4.5', + version: '1.5.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 82d6074..3e6d8ad 100644 --- a/ts_web/elements/consentsoftware-cookieconsent.ts +++ b/ts_web/elements/consentsoftware-cookieconsent.ts @@ -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` -
+
@@ -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.