New Old Notifications - Neopets

Displays notifications on the new layout's nav bar. Based on the script by JustDownloadin
换行
// ==UserScript==
// @name         New Old Notifications - Neopets
// @namespace    https://greasyfork.org/en/scripts/512519-new-old-notifications-neopets
// @version      1.1.1
// @description  Displays notifications on the new layout's nav bar. Based on the script by JustDownloadin
// @author       GrarrlMunch
// @match        *://*.neopets.com/*
// @icon         https://files.catbox.moe/rciqco.png
// @grant        none
// @license      GNU GPLv3
// ==/UserScript==
 
/*
    Based on the "Neopets - Old Notifications" script
    by JustDownloadin: https://greasyfork.org/en/scripts/503653-neopets-old-notifications
    This script was developed with permission from the original developer
*/
 
/* globals jQuery, $, waitForKeyElements */
 
var index = 0;
var elementsArray = Array.from(document.querySelectorAll('#alerts li'));
var closeList = Array.from(document.querySelectorAll('#alertstab__2020 ul .alert-x'));
var notFired = true;
 
function displayBarEl () { setTimeout(() => { notifBarEl(); }, 1000); }
 
function notifBarEl() {
    const iconEl = elementsArray[index].querySelector(':scope > a > div');
    const alertsTabComputedStyle = document.querySelector('#alertstab__2020 ul li');
    const alertsh4ComputedStyle = document.querySelector('#alertstab__2020 h4');
    const alertspComputedStyle = document.querySelector('#alertstab__2020 p');
    const aEle = document.querySelector('a');
 
 
    const HTMLEl = `
<div class="navBarNotif">
	<style>
    @media screen and (max-width: 1569px) {
		.navBarNotif {
			width: 260px;
		}
    }
    @media screen and (min-width: 1570px) {
		.navBarNotif {
			width: 320px;
		}
    }
    @media screen and (min-width: 1570px) {
		.navBarNotif {
			width: 435px;
		}
    }
    @media screen and (min-width: 1860px) {
		.navBarNotif {
			width: 600px;
		}
    }
	.navBarNotif {
	    box-sizing: content-box;
	    position: absolute;
	    left: 210px;
	    z-index: 99;
	    height: 60px;
	    padding: 0 10px;
	    font-family: 'MuseoSansRounded700', 'Arial', sans-serif;
	    border: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('border')};
	    border-radius: 10px;
	    box-shadow: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('box-shadow')};
	    -webkit-box-shadow: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('box-shadow')};
	    -moz-box-shadow: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('box-shadow')};
	    background-color: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('background-color')};
	}
	.navBarNotif h4 {
	    color: ${window.getComputedStyle(alertsh4ComputedStyle).getPropertyValue('color')};
	    margin-top: 3px;
	    margin-bottom: 0;
	}
	.navBarNotif h5 {
	    margin: 0;
	}
	.navBarNotif p {
        color: ${window.getComputedStyle(alertspComputedStyle).getPropertyValue('color')};
	    margin: 2px 15px 5px auto;
	    max-width: 555px;
	    max-height: 15px;
	    font-size: 10pt;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: "...";
	}
	.navBarNotif .alert-x {
	    position: absolute;
	    top: 5px;
	    right: 5px;
	    width: 15px;
	    height: 15px;
	    background: url(https://images.neopets.com/themes/h5/basic/images/x-icon.svg) center center no-repeat;
	    background-size: auto;
	    background-size: 100%;
	    cursor: pointer;
	}
	.navBarNotif > a > div {
	    float: left;
	    width: 50px;
	    height: 50px;
	    margin: 5px 10px 5px 0;
	    background-image: ${window.getComputedStyle(iconEl).getPropertyValue('background-image')};
	    background-size: 100%;
	    background-repeat: no-repeat;
	    background-position: center;
	    cursor: pointer;
	}
    .hideIfSmall {
	    cursor: pointer;
	    color: ${window.getComputedStyle(aEle).getPropertyValue('color')};
    }
	</style>
${elementsArray[index].innerHTML}
</div>
`;
 
    const seeAllAlerts = `<b> - <span class="hideIfSmall">See all alerts</span></b>`;
 
    /*Leaving the function as-is just in case I want to re-use it...*/
    $.fn.extend({
        toggleText: function(a, b){
            return this.text(this.text() == b ? a : b);
        }
    });
 
    $('.nav-top-grid__2020').prepend(HTMLEl);
    $('.navBarNotif h5').append(seeAllAlerts);
    $('.hideIfSmall').click(function(e){
        $('.nav-bell-icon__2020').click();
        $('.hideIfSmall').toggleText('See all alerts', 'Hide all alerts');
        e.stopPropagation();
    });
    document.querySelector('.navBarNotif .alert-x').addEventListener('click', function () {
        closeList[index].click();
    });
 
    closeList[index].addEventListener('click', function() {
        $('.navBarNotif').remove();
        index = index + 1;
        ((elementsArray[index] !== undefined) && notFired) && (displayBarEl());
    });
};
 
$(document).ready(function () {
    const viewAllComputedStyle = document.querySelector('.alerts-tab-viewall__2020');
 
    const DelHTML = `
<style type="text/css">
	.alerts-tab-deleteall__2020 {
	    position: relative;
	    width: 100%;
	    height: 40px;
	    background: ${window.getComputedStyle(viewAllComputedStyle).getPropertyValue('background')};
	}
</style>
<div class="alerts-tab-deleteall__2020">
	<div class="alerts-tab-viewclick__2020">
		<div class="alerts-tab-icon__2020" style="background-image: url(https://images.neopets.com/themes/046_ff_sep2017/events/warning.png);"></div>
		<div id="DelAllButton" class="news-dropdown-text__2020">Delete All</div>
	</div>
</div>`;
 
    $(DelHTML).insertBefore($('#alerts'));
 
    document.getElementById('DelAllButton').addEventListener('click', function () {
      let delAllEle = document.getElementById('DelAllButton');
      if ((elementsArray[index] !== undefined) && notFired) {
          notFired = false;
          delAllEle.innerHTML = "Deleting...";
          for (let i = 0; i < closeList.length; i++) {
              setTimeout (() => {
                  closeList[i].click();
                  console.log("Closed alert " + (i + 1) + "/" + closeList.length)
              }, 1000 * i);
              var timeOutExternal = (1000 * i) + 1000;
          }
          setTimeout(() => {
              delAllEle.innerHTML = "Deleted!";
              document.querySelector('.alerts-none__2020').style.display = '';
              setTimeout (() => { delAllEle.innerHTML = "Delete All" }, 2500);
          }, timeOutExternal);
     } else {
          delAllEle.innerHTML = "No alerts to delete!";
          setTimeout (() => { delAllEle.innerHTML = "Delete All" }, 2500);
     }
    });
});
 
((elementsArray[index] !== undefined) && notFired) && (displayBarEl());