New Old Notifications - Neopets

Based on the script by JustDownloadin, displays notifications on the new layout's nav bar
目前為 2024-10-15 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         New Old Notifications - Neopets
// @namespace    https://greasyfork.org/en/scripts/512519-new-old-notifications-neopets
// @version      1.0.5
// @description  Based on the script by JustDownloadin, displays notifications on the new layout's nav bar
// @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 = document.querySelectorAll('#alerts.alerts-tab-content__2020 > ul > li > div'); // when a selector is this long you know things for unnecessarily hard for no reason

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 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;
	}
	</style>
${elementsArray[index].innerHTML}
</div>
`;

    const seeAllEvents = `<b><a class="hideIfSmall" href="/allevents.phtml"> - See all events</a></b>`;
    // console.log(index);
    $('.nav-top-grid__2020').prepend(HTMLEl);
    $('.navBarNotif h5').append(seeAllEvents);

    document.querySelector('.navBarNotif .alert-x').addEventListener('click', function () {
        closeList.item(index).click();
    });

    closeList.item(index).addEventListener('click', function() {
        $('.navBarNotif').remove();
        index = index + 1;
        // console.log(index);
        (elementsArray[index] !== undefined) && (displayBarEl());
    });
}

displayBarEl();