diff --git a/CHANGELOG.md b/CHANGELOG.md index babcea2..272bc32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,21 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.10.3-next.1](https://github.com/get-advantage/advantage/compare/v0.10.3-next.0...v0.10.3-next.1) (2025-12-18) + + +### Bug Fixes + +* **welcomepage:** revert missing ad parameter ([219e7ae](https://github.com/get-advantage/advantage/commit/219e7aefac00d41e538834d20aadccebe971b006)) + +## [0.10.3-next.0](https://github.com/get-advantage/advantage/compare/v0.10.2...v0.10.3-next.0) (2025-12-17) + + +### Bug Fixes + +* handle 0s transition duration in close animations and improve style cleanup ([75f1d15](https://github.com/get-advantage/advantage/commit/75f1d15dd7a2caddcb2555e020de3ce4f5401729)) +* remove unused import ([11d96f0](https://github.com/get-advantage/advantage/commit/11d96f032236bf0d22b0fe080ddaef1c653f1a3d)) + ## [0.10.2](https://github.com/get-advantage/advantage/compare/v0.10.1...v0.10.2) (2025-12-17) diff --git a/package-lock.json b/package-lock.json index e26a3ba..32414bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@get-advantage/advantage", - "version": "0.10.2", + "version": "0.10.3-next.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@get-advantage/advantage", - "version": "0.10.2", + "version": "0.10.3-next.1", "license": "AGPL-3.0-only", "devDependencies": { "@release-it/conventional-changelog": "^8.0.1", diff --git a/package.json b/package.json index 61832b7..f891cc1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@get-advantage/advantage", "private": false, - "version": "0.10.2", + "version": "0.10.3-next.1", "license": "AGPL-3.0-only", "repository": { "type": "git", diff --git a/playground/local-dev/config.ts b/playground/local-dev/config.ts index ea64836..b1bf40d 100644 --- a/playground/local-dev/config.ts +++ b/playground/local-dev/config.ts @@ -38,6 +38,9 @@ export default { // downArrow: false, // closeButtonText: "Lukk" // }, + options: { + closeButtonAnimationDuration: 2 + }, setup: (wrapper, ad) => { console.log(wrapper, ad); return new Promise((resolve, reject) => { diff --git a/playground/local-dev/welcomepage-test.html b/playground/local-dev/welcomepage-test.html new file mode 100644 index 0000000..a9de086 --- /dev/null +++ b/playground/local-dev/welcomepage-test.html @@ -0,0 +1,53 @@ + + + + + + WelcomePage Test (No Animation) + + + + + + +
+

WelcomePage Test

+

+ This page tests the WelcomePage format with + closeButtonAnimationDuration: 0. +

+

+ Click the "To [Site Title]" button in the ad to close it. It + should close immediately without getting stuck. +

+ + + +
+ + +
+ + +
+

Content below the ad...

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + do eiusmod tempor incididunt ut labore et dolore magna + aliqua. +

+
+
+ + diff --git a/playground/local-dev/welcomepage-test.ts b/playground/local-dev/welcomepage-test.ts new file mode 100644 index 0000000..b0be873 --- /dev/null +++ b/playground/local-dev/welcomepage-test.ts @@ -0,0 +1,30 @@ +import { Advantage } from "@src/advantage"; +import { AdvantageFormatName } from "@src/types"; +import logger from "@src/utils/logging"; + +const advantage = Advantage.getInstance(); + +advantage.configure({ + formatIntegrations: [ + { + format: AdvantageFormatName.WelcomePage, + options: { + // Set to 0 to test the fix for no-animation close + closeButtonAnimationDuration: 0, + autoCloseDuration: 0 // Disable auto-close for manual testing + }, + setup: () => { + return new Promise((resolve) => { + logger.debug("Setting up WelcomePage format integration"); + resolve(); + }); + }, + close: () => { + logger.debug("Closing WelcomePage format"); + }, + reset: () => { + logger.debug("Resetting WelcomePage format"); + } + } + ] +}); diff --git a/src/advantage/formats/welcomepage.css b/src/advantage/formats/welcomepage.css index 6934505..9984f7f 100644 --- a/src/advantage/formats/welcomepage.css +++ b/src/advantage/formats/welcomepage.css @@ -13,7 +13,7 @@ position: fixed; z-index: var(--adv-wp-zindex); opacity: 0; - transition: all 0.5s ease; + transition: all var(--adv-wp-transition-duration, 0.5s) ease; transform: translateY(5%); } diff --git a/src/advantage/formats/welcomepage.ts b/src/advantage/formats/welcomepage.ts index 82583ed..78518eb 100644 --- a/src/advantage/formats/welcomepage.ts +++ b/src/advantage/formats/welcomepage.ts @@ -7,7 +7,6 @@ import varsCSS from "./vars.css?inline"; import welcomepageCSS from "./welcomepage.css?inline"; import welcomepageUICSS from "./welcomepage-ui.css?inline"; import { - setDimensionsUntilAdvantageAdSlot, resetDimensionsUntilAdvantageAdSlot } from "./format-helper"; import logger from "../../utils/logging"; @@ -16,7 +15,7 @@ export const welcomePage: AdvantageFormat = { name: AdvantageFormatName.WelcomePage, description: "Positioned on top of the site content with a close button to continue to the site", - setup: (wrapper, ad, options) => { + setup: (wrapper, _ad, options) => { const defaults: AdvantageFormatOptions = { autoCloseDuration: 21, siteTitle: window.location.hostname, @@ -30,9 +29,12 @@ export const welcomePage: AdvantageFormat = { return new Promise((resolve) => { // Inser the CSS for the top scroll format wrapper.insertCSS(varsCSS.concat(welcomepageCSS)); - // Set the styles for the ad iframe - if (ad) { - setDimensionsUntilAdvantageAdSlot(ad); + + if (config.closeButtonAnimationDuration !== undefined) { + wrapper.style.setProperty( + "--adv-wp-transition-duration", + `${config.closeButtonAnimationDuration}s` + ); } // Change the content of the UI layer @@ -123,8 +125,11 @@ export const welcomePage: AdvantageFormat = { resetDimensionsUntilAdvantageAdSlot(ad); } wrapper.resetCSS(); + wrapper.style.removeProperty("--adv-wp-transition-duration"); }, close: (wrapper) => { + const container = wrapper.shadowRoot?.getElementById("container"); + function handleTransitionEnd() { wrapper.style.display = "none"; // Remove the event listener after it has been executed @@ -134,8 +139,25 @@ export const welcomePage: AdvantageFormat = { ); } - const container = wrapper.shadowRoot?.getElementById("container"); - container?.addEventListener("transitionend", handleTransitionEnd); + if (container) { + const computedStyle = window.getComputedStyle(container); + const transitionProperty = computedStyle.transitionProperty; + const transitionDuration = computedStyle.transitionDuration; + + const hasTransition = + transitionProperty !== "none" && + transitionDuration.split(",").some((d) => parseFloat(d) > 0); + + if (!hasTransition) { + wrapper.style.display = "none"; + wrapper.classList.remove("show"); + wrapper.style.height = "0px"; + return; + } + + container.addEventListener("transitionend", handleTransitionEnd); + } + wrapper.classList.remove("show"); wrapper.style.height = "0px"; } diff --git a/src/advantage/wrapper.ts b/src/advantage/wrapper.ts index 7074c08..9318fd2 100644 --- a/src/advantage/wrapper.ts +++ b/src/advantage/wrapper.ts @@ -463,6 +463,27 @@ export class AdvantageWrapper extends HTMLElement implements IAdvantageWrapper { animateClose(callback?: () => void) { this.classList.add("animate"); + + const computedStyle = window.getComputedStyle(this); + const transitionProperty = computedStyle.transitionProperty; + const transitionDuration = computedStyle.transitionDuration; + + // Check if there are any active transitions + // We need to handle multiple values (e.g. "0.5s, 1s") and check if any are > 0 + const hasTransition = + transitionProperty !== "none" && + transitionDuration.split(",").some((d) => parseFloat(d) > 0); + + if (!hasTransition) { + this.classList.remove("animate"); + this.style.height = "0px"; + this.style.display = "none"; + if (callback) { + callback(); + } + return; + } + this.addEventListener( "transitionend", () => { @@ -471,6 +492,7 @@ export class AdvantageWrapper extends HTMLElement implements IAdvantageWrapper { return; } this.style.display = "none"; + this.classList.remove("animate"); if (callback) { callback(); }