@@ -271,41 +276,44 @@ export class ConsentsoftwareCookieconsent extends LitElement {
}
/**
- * Called when the element is inserted into the DOM.
+ * Lifecycle method called when the element is connected to the DOM.
+ * It sets up the theme and displays the consent banner if no cookie levels are set.
*/
public async connectedCallback() {
super.connectedCallback();
- this.updateTheme();
+ this.updateTheme(); // Initialize theme based on system preference
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.updated();
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) {
+ // Apply dark overlay styling when modal appears
pageOverlay.style.background = 'rgba(0,0,0, 0.5)';
pageOverlay.style.backdropFilter = 'blur(20px)';
}
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
if (modalBox) {
+ // Animate modal box appearance
modalBox.style.transform = `scale(1)`;
modalBox.style.opacity = '1';
}
});
} else {
+ // Hide banner if cookie levels are already set
this.setAttribute('show', 'false');
}
}
- /**
- * Called after the first render of the component.
- * We measure the actual height of the banner and update the CSS variable.
- */
- public async firstUpdated() {}
+ public async firstUpdated() {
+ // Placeholder for any logic needed after first render
+ }
/**
- * Called whenever the element is updated or re-rendered.
+ * Called after updates. Logs banner height and runs consent scripts if necessary.
*/
public async updated() {
console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
@@ -317,7 +325,8 @@ export class ConsentsoftwareCookieconsent extends LitElement {
}
/**
- * Sets the user’s chosen cookie level(s) and hides the banner.
+ * Handles consent button clicks, sets cookie levels, and hides the banner.
+ * Uses theme variables for styling transitions.
*/
private async handleConsentButtonClick(
event: MouseEvent,
@@ -326,21 +335,27 @@ export class ConsentsoftwareCookieconsent extends LitElement {
console.log(`Set level to ${levelsArg}`);
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) {
+ // Fade out overlay effect using inline styles for transition
pageOverlay.style.background = 'rgba(255,255,255, 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';
}
+ // Save user consent preferences
await this.csWebclientInstance.setCookieLevels(levelsArg);
await delayFor(300);
- this.setAttribute('show', 'false');
- // After user selection, re-check for any required scripts to run
- this.updated();
+ this.setAttribute('show', 'false'); // Hide the consent banner
+ this.updated(); // Trigger any post-consent actions
}
+ /**
+ * Handles clicks on the page overlay. If clicked outside the modal,
+ * triggers a shake animation as feedback.
+ */
private async pageOverlayClick(e: MouseEvent) {
if (e.target === e.currentTarget) {
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
@@ -356,12 +371,15 @@ export class ConsentsoftwareCookieconsent extends LitElement {
}
/**
- * Dynamically switches the theme between light/dark,
- * respecting `prefers-color-scheme` by default.
+ * Dynamically switches the theme between light and dark.
+ * Listens for system theme changes to update the component's theme.
*/
private updateTheme() {
+ // Check the initial system preference for dark mode
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
this.theme = prefersDark ? 'dark' : 'light';
+
+ // Listen for changes in the system color scheme preference
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
this.theme = e.matches ? 'dark' : 'light';
});
diff --git a/ts_web/elements/consentsoftware-tabs.ts b/ts_web/elements/consentsoftware-tabs.ts
index a941a58..193c296 100644
--- a/ts_web/elements/consentsoftware-tabs.ts
+++ b/ts_web/elements/consentsoftware-tabs.ts
@@ -24,6 +24,13 @@ export class ConsentsoftwareTabs extends LitElement {
cursor: pointer;
}
+ /* Media query for mobile devices: stack buttons vertically */
+ @media (max-width: 600px) {
+ .tabs .tab {
+ font-size: 0.8em;
+ }
+ }
+
.selector {
position: absolute;
width: calc(100% / 3);
@@ -44,7 +51,7 @@ export class ConsentsoftwareTabs extends LitElement {
Consent
Details
-
Cookie Policy + Legal Info
+
Cookie Policy
`;
@@ -61,4 +68,4 @@ export class ConsentsoftwareTabs extends LitElement {
}
}
}
-}
\ No newline at end of file
+}