From eb807d0bc7fdda7d4be2f915197cd6aec79ce992 Mon Sep 17 00:00:00 2001
From: Joffrey <541722+Write@users.noreply.github.com>
Date: Sat, 27 Jan 2024 03:11:15 +0100
Subject: [PATCH] Corrige l'affichage du bouton sur leparisien.fr (Firefox).
 (#196)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 ophirofox/content_scripts/le-parisien.css |  4 +-
 ophirofox/content_scripts/le-parisien.js  | 45 ++++++++++++++++++-----
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/ophirofox/content_scripts/le-parisien.css b/ophirofox/content_scripts/le-parisien.css
index 522d439..655811c 100644
--- 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
index d1aae3b..367d854 100644
--- 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);