From 3de1e3443a7ab91a7b78d021156a68c9ae691b3e Mon Sep 17 00:00:00 2001
From: Serraniel <mail@serraniel.dev>
Date: Wed, 29 Jul 2020 10:35:57 +0200
Subject: [PATCH] #7 Added mutation observer

---
 enhanced-aniwatch.code-workspace |  8 +++++
 enhancements/animeRequests.js    | 23 ++++++--------
 manifest.json                    | 54 ++++++++++++++++----------------
 utils/aniwatchCore.js            | 31 +++++++-----------
 utils/helpers.js                 |  3 ++
 5 files changed, 58 insertions(+), 61 deletions(-)
 create mode 100644 enhanced-aniwatch.code-workspace
 create mode 100644 utils/helpers.js

diff --git a/enhanced-aniwatch.code-workspace b/enhanced-aniwatch.code-workspace
new file mode 100644
index 0000000..876a149
--- /dev/null
+++ b/enhanced-aniwatch.code-workspace
@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}
\ No newline at end of file
diff --git a/enhancements/animeRequests.js b/enhancements/animeRequests.js
index c89cb0e..861b7b1 100644
--- a/enhancements/animeRequests.js
+++ b/enhancements/animeRequests.js
@@ -1,29 +1,24 @@
 const starIcon = "star";
 
-registerScript(() => {
+registerScript(node => {
     // run the scripts
-    handleListAfterLoad();
-
-    // because of late loading in the request list we have to run the codes each time the list changes
-    //document.querySelector("md-list").addEventListener("DOMNodeInserted", event => handleListAfterLoad(event), false);
+    if (isHtmlElement(node)) {
+        changeFollowedStarColor(node);
+        changeOwnBorderColor(node);
+    }
 });
 
-function handleListAfterLoad() {
-    changeFollowedStarColor();
-    changeOwnBorderColor();
-}
-
-function changeFollowedStarColor() {
+function changeFollowedStarColor(node) {
     // find stars
-    let followedItems = Array.from(document.querySelectorAll("i")).filter(i => i.innerText == starIcon);
+    let followedItems = Array.from(node.querySelectorAll("i")).filter(i => i.innerText == starIcon);
 
     // change color
     followedItems.forEach(item => item.style.color = aniBlue);
 }
 
-function changeOwnBorderColor() {
+function changeOwnBorderColor(node) {
     // find items -> all 
-    let requestItems = document.querySelectorAll("md-list-item");
+    let requestItems = node.querySelectorAll("md-list-item");
 
     // change border color if profile link is not "false"
     requestItems.forEach(item => {
diff --git a/manifest.json b/manifest.json
index 3eda9fe..7a8508d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,29 +1,29 @@
   {
-    "name": "Enhanced Aniwatch",
-    "version": "0.1.0.0",
-    "description": "Contains several enhancments for https://aniwatch.me",
-    "manifest_version": 2,
-    "author": "Serraniel",
-    "homepage_url": "https://github.com/Serraniel/EnhancedAniwatch",
-    "content_scripts": [
-      {
-        "matches": [
-          "*://aniwatch.me/*"
-        ],
-        "js": [
-          "utils/colors.js",
-          "utils/aniwatchCore.js"
-        ],
-        "run_at": "document_start"
-      },
-      {
-        "matches": [
-          "*://aniwatch.me/*"
-        ],
-        "js": [
-          "enhancements/animeRequests.js"
-        ],
-        "run_at": "document_end"
-      }
-    ]
+      "name": "Enhanced Aniwatch",
+      "version": "0.1.0.0",
+      "description": "Contains several enhancments for https://aniwatch.me",
+      "manifest_version": 2,
+      "author": "Serraniel",
+      "homepage_url": "https://github.com/Serraniel/EnhancedAniwatch",
+      "content_scripts": [{
+              "matches": [
+                  "*://aniwatch.me/*"
+              ],
+              "js": [
+                  "utils/colors.js",
+                  "utils/helpers.js",
+                  "utils/aniwatchCore.js"
+              ],
+              "run_at": "document_start"
+          },
+          {
+              "matches": [
+                  "*://aniwatch.me/*"
+              ],
+              "js": [
+                  "enhancements/animeRequests.js"
+              ],
+              "run_at": "document_end"
+          }
+      ]
   }
\ No newline at end of file
diff --git a/utils/aniwatchCore.js b/utils/aniwatchCore.js
index b0e9ba4..81a0c13 100644
--- a/utils/aniwatchCore.js
+++ b/utils/aniwatchCore.js
@@ -1,27 +1,18 @@
 let __scripts = [];
 
-function registerScript(func){
+function registerScript(func) {
     __scripts.push(func);
 }
 
-function runScripts(){
-    console.log("RUN");
-    __scripts.forEach(script => script());
-}
-
-function awaitPageLoaded(){
-    let preLoader = document.getElementById('preloader');
-    
-    let loop = setInterval(() => {
-        if(preLoader.style.display==="none"){
-            clearInterval(loop);
-            runScripts();
+let observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+        for (let i = 0; i < mutation.addedNodes.length; i++) {
+            __scripts.forEach(script => script(mutation.addedNodes[i]));
         }
-    }, 100);
-}
+    });
+});
 
-// RUN AT INITIALIZATION
-window.addEventListener("hashchange", event => runScripts(), false);
-document.addEventListener("DOMContentLoaded", event => awaitPageLoaded(), false);
-
-document.querySelector('.main-section').
\ No newline at end of file
+observer.observe(document.documentElement || document.body, {
+    childList: true,
+    subtree: true
+});
\ No newline at end of file
diff --git a/utils/helpers.js b/utils/helpers.js
new file mode 100644
index 0000000..cb18055
--- /dev/null
+++ b/utils/helpers.js
@@ -0,0 +1,3 @@
+function isHtmlElement(object) {
+    return object instanceof HTMLElement;
+}
\ No newline at end of file