#7 Added mutation observer
This commit is contained in:
parent
d522f7c96f
commit
3de1e3443a
8
enhanced-aniwatch.code-workspace
Normal file
8
enhanced-aniwatch.code-workspace
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"path": "."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {}
|
||||||
|
}
|
|
@ -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 => {
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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
3
utils/helpers.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
function isHtmlElement(object) {
|
||||||
|
return object instanceof HTMLElement;
|
||||||
|
}
|
Loading…
Reference in a new issue