diff --git a/src/ethicalads.js b/src/ethicalads.js index 63880be5..1ff0b651 100644 --- a/src/ethicalads.js +++ b/src/ethicalads.js @@ -3,7 +3,6 @@ import { AddonBase } from "./utils"; import { default as objectPath } from "object-path"; import styleSheet from "./ethicalads.css"; import { IS_TESTING, docTool } from "./utils.js"; -import { THEME_DARK_MODE } from "./constants.js"; // https://docs.readthedocs.io/en/stable/advertising/ad-customization.html#controlling-the-placement-of-an-ad const EXPLICIT_PLACEMENT_SELECTORS = [ @@ -231,6 +230,9 @@ export class EthicalAdsAddon extends AddonBase { const campaign_types = objectPath.get(data, "campaign_types", []); if (placement !== null) { + // Allow EA to switch between light/dark mode + placement.classList.add("adaptive-css"); + // This ensure us that all the `data-ea-*` attributes are already set in the HTML tag. placement.setAttribute("data-ea-manual", "true"); @@ -259,11 +261,6 @@ export class EthicalAdsAddon extends AddonBase { ); } - // Add dark class to the ad when we detect dark mode from the beginning - if (docTool.documentationThemeMode === THEME_DARK_MODE) { - placement.classList.add("dark"); - } - if (placementStyle == "fixedfooter") { // Use a ``MutationObserver`` to listen to style changes in the fixed footer ad. // Grab the height of it and use to add some ``padding-bottom`` to the required elements. @@ -346,8 +343,11 @@ export class EthicalAdsAddon extends AddonBase { // Inject the Ethical Ad client (beta) only for our own documentation. let src; if ( - window.location.hostname === "docs.readthedocs.io" || - window.location.hostname.endsWith(".devthedocs.org") + window.location.hostname === "docs.readthedocs.com" || + window.location.hostname.endsWith(".devthedocs.org") || + // Use new beta client on Furo like themes for now. + // This allows us to test the dark/light mode. + docTool.isSphinxFuroLikeTheme() ) { src = "https://media.ethicalads.io/media/client/beta/ethicalads.min.js"; } else { diff --git a/src/utils.js b/src/utils.js index 43e7b9bf..f92b92b1 100644 --- a/src/utils.js +++ b/src/utils.js @@ -447,7 +447,7 @@ export class DocumentationTool { console.debug("Observed element mutated.", mutationList, observer); for (const mutation of mutationList) { if (mutation.type === "attributes") { - this.updateAdThemeMode(); + this.documentationThemeMode = this.getDocumentationThemeMode(); } } }; @@ -647,29 +647,6 @@ export class DocumentationTool { return THEME_UNKNOWN_MODE; } - updateAdThemeMode() { - let placement; - // NOTE: can't be imported from `ethicalads.js` because cycle importing - const EXPLICIT_PLACEMENT_SELECTORS = [ - "#ethical-ad-placement", - "[data-ea-publisher]", - ]; - - for (const explicitSelector of EXPLICIT_PLACEMENT_SELECTORS) { - placement = document.querySelector(explicitSelector); - if (placement) break; - } - - if (!placement) return; - - this.documentationThemeMode = this.getDocumentationThemeMode(); - if (this.documentationThemeMode === THEME_DARK_MODE) { - placement.classList.add("dark"); - } else { - placement.classList.remove("dark"); - } - } - isSinglePageApplication() { const isSPA = DocumentationTool.SINGLE_PAGE_APPLICATIONS.includes( this.documentationTool, diff --git a/tests/__snapshots__/ethicalads.test.snap.js b/tests/__snapshots__/ethicalads.test.snap.js index 0c4c9f9e..88ad7b36 100644 --- a/tests/__snapshots__/ethicalads.test.snap.js +++ b/tests/__snapshots__/ethicalads.test.snap.js @@ -2,7 +2,7 @@ export const snapshots = {}; snapshots["EthicalAd addon ad placement defined by the user"] = `