Merge pull request #31 from Serraniel/feature/#19-notifications-tab-title

Feature/#19 notifications tab title

src/javascript/enhancements/notifications.js

@@ -0,0 +1,33 @@
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+
+export function init() {
+    core.runAfterLoad(() => {
+        updateNotificationsInTitle();
+    }, ".*");
+
+    core.runAfterLocationChange(() => {
+        updateNotificationsInTitle();
+    }, ".*");
+}
+
+function getNotificationCount() {
+    if (core.isLoggedIn()) {
+        let menuUserText = document.getElementById('materialize-menu-dropdown').innerText.split('\n')[4];
+        let notificationCount = menuUserText.match(/\d+/)?.[0] ?? 0;
+        return notificationCount;
+    } else {
+        return 0;
+    }
+}
+
+function updateNotificationsInTitle() {
+    let count = getNotificationCount();
+
+    if (helper.assigned(count) && count > 0) {
+        // document.title is updated after the event is triggered, so we delay our title update by a reasonable time
+        setTimeout(() => {
+            document.title = `(${count}) ${document.title}`;
+        }, 100);
+    }
+}

src/javascript/index.js

@@ -5,6 +5,7 @@ import { initHelpers } from './utils/helpers';
 // enhancements
 import { init as animeRequests } from './enhancements/animeRequests';
 import { init as languageDisplay } from './enhancements/languageDisplay';
+import { init as notifications } from './enhancements/notifications';
 import { init as quickSearch } from './enhancements/quickSearch';
 
 // core
@@ -16,4 +17,5 @@ initHelpers();
 // enhancements
 animeRequests();
 languageDisplay();
+notifications();
 quickSearch();

src/javascript/utils/aniwatchCore.js

@@ -1,7 +1,9 @@
 import * as helper from './helpers';
 
+/* SCRIPT LOGICS */
 let __scripts = [];
 let __afterLoadScripts = [];
+let __afterLocationChangeScripts = [];
 
 export function initCore() {
     let observer = new MutationObserver(mutations => {
@@ -18,6 +20,29 @@ export function initCore() {
         attributes: true
     });
 
+    runAfterLoad(() => {
+        let loadingBar = document.getElementById('enable-ani-cm');
+        let loadingBarObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                // enable-ani-cm node changes from display:none to display:block after loading
+                if (mutation.oldValue.includes('display: none')) {
+                    __afterLocationChangeScripts.forEach(script => {
+                        if (window.location.pathname.match(script.pattern)) {
+                            script.function();
+                        }
+                    });
+                }
+            })
+        });
+
+        loadingBarObserver.observe(loadingBar, {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: ['style'],
+        });
+
+    }, '.*')
+
     helper.onReady(() => awaitPageLoaded());
 }
 
@@ -63,10 +88,30 @@ function awaitPageLoaded() {
     }
 
     let loop = setInterval(() => {
-        if (preLoader.style.display === "none") {
+        if (preLoader.style.display === "none" && document.readyState === 'complete') {
             clearInterval(loop);
 
             runScripts();
         }
     }, 100);
 }
+
+/* PATHNAME LOGIC */
+export function runAfterLocationChange(func, pattern = '.*') {
+    __afterLocationChangeScripts.push({ "function": func, "pattern": pattern });
+}
+
+/* LOGIN LOGIC */
+export function isLoggedIn() {
+    let menu = document.getElementById('materialize-menu-dropdown');
+    let result = true;
+
+    menu.innerText.split('\n').forEach(item => {
+        if (item === 'Login') {
+            result = false;
+            return;
+        }
+    });
+
+    return result;
+}

src/javascript/utils/helpers.js

@@ -18,6 +18,10 @@ export function onReady(fn) {
     }
 }
 
+export function assigned(obj) {
+    return !(typeof obj === 'undefined' || obj === null);
+}
+
 function handleKeyDown(event) {
     handleKeyToggle(event, true);
 }