Skip to content

Commit 38da019

Browse files
authored
EA: use adaptive-css feature for light/dark model (#635)
Let EA to handle light/dark mode. We keep updating the internal variable `documentationThemeMode` just in case we need it in the future for now. We can remove it eventually if we want. Requires readthedocs/ethical-ad-client#229
1 parent 2686c71 commit 38da019

File tree

3 files changed

+11
-34
lines changed

3 files changed

+11
-34
lines changed

src/ethicalads.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { AddonBase } from "./utils";
33
import { default as objectPath } from "object-path";
44
import styleSheet from "./ethicalads.css";
55
import { IS_TESTING, docTool } from "./utils.js";
6-
import { THEME_DARK_MODE } from "./constants.js";
76

87
// https://docs.readthedocs.io/en/stable/advertising/ad-customization.html#controlling-the-placement-of-an-ad
98
const EXPLICIT_PLACEMENT_SELECTORS = [
@@ -231,6 +230,9 @@ export class EthicalAdsAddon extends AddonBase {
231230
const campaign_types = objectPath.get(data, "campaign_types", []);
232231

233232
if (placement !== null) {
233+
// Allow EA to switch between light/dark mode
234+
placement.classList.add("adaptive-css");
235+
234236
// This ensure us that all the `data-ea-*` attributes are already set in the HTML tag.
235237
placement.setAttribute("data-ea-manual", "true");
236238

@@ -259,11 +261,6 @@ export class EthicalAdsAddon extends AddonBase {
259261
);
260262
}
261263

262-
// Add dark class to the ad when we detect dark mode from the beginning
263-
if (docTool.documentationThemeMode === THEME_DARK_MODE) {
264-
placement.classList.add("dark");
265-
}
266-
267264
if (placementStyle == "fixedfooter") {
268265
// Use a ``MutationObserver`` to listen to style changes in the fixed footer ad.
269266
// 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 {
346343
// Inject the Ethical Ad client (beta) only for our own documentation.
347344
let src;
348345
if (
349-
window.location.hostname === "docs.readthedocs.io" ||
350-
window.location.hostname.endsWith(".devthedocs.org")
346+
window.location.hostname === "docs.readthedocs.com" ||
347+
window.location.hostname.endsWith(".devthedocs.org") ||
348+
// Use new beta client on Furo like themes for now.
349+
// This allows us to test the dark/light mode.
350+
docTool.isSphinxFuroLikeTheme()
351351
) {
352352
src = "https://media.ethicalads.io/media/client/beta/ethicalads.min.js";
353353
} else {

src/utils.js

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -447,7 +447,7 @@ export class DocumentationTool {
447447
console.debug("Observed element mutated.", mutationList, observer);
448448
for (const mutation of mutationList) {
449449
if (mutation.type === "attributes") {
450-
this.updateAdThemeMode();
450+
this.documentationThemeMode = this.getDocumentationThemeMode();
451451
}
452452
}
453453
};
@@ -647,29 +647,6 @@ export class DocumentationTool {
647647
return THEME_UNKNOWN_MODE;
648648
}
649649

650-
updateAdThemeMode() {
651-
let placement;
652-
// NOTE: can't be imported from `ethicalads.js` because cycle importing
653-
const EXPLICIT_PLACEMENT_SELECTORS = [
654-
"#ethical-ad-placement",
655-
"[data-ea-publisher]",
656-
];
657-
658-
for (const explicitSelector of EXPLICIT_PLACEMENT_SELECTORS) {
659-
placement = document.querySelector(explicitSelector);
660-
if (placement) break;
661-
}
662-
663-
if (!placement) return;
664-
665-
this.documentationThemeMode = this.getDocumentationThemeMode();
666-
if (this.documentationThemeMode === THEME_DARK_MODE) {
667-
placement.classList.add("dark");
668-
} else {
669-
placement.classList.remove("dark");
670-
}
671-
}
672-
673650
isSinglePageApplication() {
674651
const isSPA = DocumentationTool.SINGLE_PAGE_APPLICATIONS.includes(
675652
this.documentationTool,

tests/__snapshots__/ethicalads.test.snap.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
export const snapshots = {};
33

44
snapshots["EthicalAd addon ad placement defined by the user"] = `<div
5-
class="ad-flat"
5+
class="ad-flat adaptive-css"
66
data-ea-campaign-types="community|paid"
77
data-ea-keywords="docs|data-science"
88
data-ea-manual="true"
@@ -15,7 +15,7 @@ snapshots["EthicalAd addon ad placement defined by the user"] = `<div
1515
/* end snapshot EthicalAd addon ad placement defined by the user */
1616
snapshots["EthicalAd addon ad placement injected"] =
1717
`<div
18-
class="raised"
18+
class="adaptive-css raised"
1919
data-ea-campaign-types="community|paid"
2020
data-ea-keywords="docs|data-science"
2121
data-ea-manual="true"

0 commit comments

Comments
 (0)