Corrige l'affichage du bouton sur leparisien.fr (Firefox). (#196)

* Corrige l'affichage du bouton sur leparisien.fr * Efficiency improvement: Break for..loop when MutationObserver found required element. * (LeParisien) Retire la vérification du navigateur et ajoute en fallback un MutationObserver * (LeParisien) Correctly break MutationObserver's for..loop
lovasoa · Jan 27, 2024 · eb807d0 · eb807d0
1 parent a7e2d46
commit eb807d0
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/ophirofox/content_scripts/le-parisien.css b/ophirofox/content_scripts/le-parisien.css
@@ -9,5 +9,7 @@
     text-decoration: none;
     border-radius: 1.25rem;
     padding: 0.7em;
-    vertical-align: middle;
+    margin-bottom: 10px;
+    display: block;
+    width: 135px;
 }
diff --git a/ophirofox/content_scripts/le-parisien.js b/ophirofox/content_scripts/le-parisien.js
@@ -8,19 +8,46 @@ async function createLink() {
     return a;
 }
 
+async function addEuropresseButton() {
+    const head = document.querySelector("h1");
+    head.after(await createLink());
+}
 
-function findPremiumBanner() {
-    const title = document.querySelector(".paywall-sticky.width_full.d_flex.pt_3_m.pb_3_m.pt_4_nm.pb_4_nm.pos_stick.ff_gct.fw_r.justify_center");
-    if (!title) return null;
-    const elems = title.parentElement.querySelectorAll("div");
-    return [...elems].find(d => d.textContent.includes("Cet article est réservé aux abonnés"))
+function findPremiumBanner(bannerSelector) {
+    if (!bannerSelector) return null;
+    const elems = bannerSelector.parentElement.querySelectorAll("div");
+    return [...elems].find(d => d.textContent.includes("Cet article est réservé aux abonnés"));
 }
 
 async function onLoad() {
-	const premiumBanner = findPremiumBanner();
-    if (!premiumBanner) return;
-    const head = document.querySelector("h1");
-    head.after(await createLink());
+    const bannerSelector = document.querySelector(".paywall-sticky.width_full.d_flex.pt_3_m.pb_3_m.pt_4_nm.pb_4_nm.pos_stick.ff_gct.fw_r.justify_center");
+    if (findPremiumBanner(bannerSelector)) {
+        addEuropresseButton();
+    } 
+    else {
+        /* Premium banner couldn't be found, use MutationObserver as fallback */
+        var elementFound = false;
+        const callback = (mutationList, observer) => {
+            for (const mutation of mutationList) {
+                for (const e of mutation.addedNodes) {
+                    const bannerSelectorString = 'paywall-sticky width_full d_flex pt_3_m pb_3_m pt_4_nm pb_4_nm pos_stick ff_gct fw_r justify_center';
+                    if(e.className == bannerSelectorString) {
+                        observer.disconnect();
+                        elementFound = true;
+                        if(findPremiumBanner(e)) {
+                            addEuropresseButton();
+                        }
+                        break;
+                    }                    
+                }
+                if (elementFound) {
+                    break;
+                }
+            }
+        };
+        const observer = new MutationObserver(callback);
+        observer.observe(document.body, { childList: true});
+    }
 }
 
 onLoad().catch(console.error);