#7 Added mutation observer

This commit is contained in:
Serraniel 2020-07-29 10:35:57 +02:00
parent d522f7c96f
commit 3de1e3443a
Signed by: Serraniel
GPG key ID: 3690B4E7364525D3
5 changed files with 58 additions and 61 deletions

View file

@ -0,0 +1,8 @@
{
"folders": [
{
"path": "."
}
],
"settings": {}
}

View file

@ -1,29 +1,24 @@
const starIcon = "star"; const starIcon = "star";
registerScript(() => { registerScript(node => {
// run the scripts // run the scripts
handleListAfterLoad(); if (isHtmlElement(node)) {
changeFollowedStarColor(node);
// because of late loading in the request list we have to run the codes each time the list changes changeOwnBorderColor(node);
//document.querySelector("md-list").addEventListener("DOMNodeInserted", event => handleListAfterLoad(event), false); }
}); });
function handleListAfterLoad() { function changeFollowedStarColor(node) {
changeFollowedStarColor();
changeOwnBorderColor();
}
function changeFollowedStarColor() {
// find stars // 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 // change color
followedItems.forEach(item => item.style.color = aniBlue); followedItems.forEach(item => item.style.color = aniBlue);
} }
function changeOwnBorderColor() { function changeOwnBorderColor(node) {
// find items -> all // 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" // change border color if profile link is not "false"
requestItems.forEach(item => { requestItems.forEach(item => {

View file

@ -5,13 +5,13 @@
"manifest_version": 2, "manifest_version": 2,
"author": "Serraniel", "author": "Serraniel",
"homepage_url": "https://github.com/Serraniel/EnhancedAniwatch", "homepage_url": "https://github.com/Serraniel/EnhancedAniwatch",
"content_scripts": [ "content_scripts": [{
{
"matches": [ "matches": [
"*://aniwatch.me/*" "*://aniwatch.me/*"
], ],
"js": [ "js": [
"utils/colors.js", "utils/colors.js",
"utils/helpers.js",
"utils/aniwatchCore.js" "utils/aniwatchCore.js"
], ],
"run_at": "document_start" "run_at": "document_start"

View file

@ -1,27 +1,18 @@
let __scripts = []; let __scripts = [];
function registerScript(func){ function registerScript(func) {
__scripts.push(func); __scripts.push(func);
} }
function runScripts(){ let observer = new MutationObserver(mutations => {
console.log("RUN"); mutations.forEach(mutation => {
__scripts.forEach(script => script()); for (let i = 0; i < mutation.addedNodes.length; i++) {
} __scripts.forEach(script => script(mutation.addedNodes[i]));
function awaitPageLoaded(){
let preLoader = document.getElementById('preloader');
let loop = setInterval(() => {
if(preLoader.style.display==="none"){
clearInterval(loop);
runScripts();
} }
}, 100); });
} });
// RUN AT INITIALIZATION observer.observe(document.documentElement || document.body, {
window.addEventListener("hashchange", event => runScripts(), false); childList: true,
document.addEventListener("DOMContentLoaded", event => awaitPageLoaded(), false); subtree: true
});
document.querySelector('.main-section').

3
utils/helpers.js Normal file
View file

@ -0,0 +1,3 @@
function isHtmlElement(object) {
return object instanceof HTMLElement;
}