☰

New Old Notifications - Neopets

Based on the script by JustDownloadin, displays notifications on the new layout's nav bar

当前为 2024-10-15 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         New Old Notifications - Neopets
  3. // @namespace    https://greasyfork.org/en/scripts/512519-new-old-notifications-neopets
  4. // @version      1.0.5
  5. // @description  Based on the script by JustDownloadin, displays notifications on the new layout's nav bar
  6. // @author       GrarrlMunch
  7. // @match        *://*.neopets.com/*
  8. // @icon         https://files.catbox.moe/rciqco.png
  9. // @grant        none
  10. // @license      GNU GPLv3
  11. // ==/UserScript==
  12.  
  13. /* Based on the "Neopets - Old Notifications" script by JustDownloadin: https://greasyfork.org/en/scripts/503653-neopets-old-notifications 
  14.     This script was developed with permission from the original developer */
  15.  
  16. /* globals jQuery, $, waitForKeyElements */
  17.  
  18. var index = 0;
  19. var elementsArray = Array.from(document.querySelectorAll('#alerts li'));
  20. 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
  21.  
  22. function displayBarEl () { setTimeout(() => { notifBarEl(); }, 1000); }
  23.  
  24. function notifBarEl() {
  25.     const iconEl = elementsArray[index].querySelector(':scope > a > div');
  26.     const alertsTabComputedStyle = document.querySelector('#alertstab__2020 ul li');
  27.     const alertsh4ComputedStyle = document.querySelector('#alertstab__2020 h4');
  28.     const alertspComputedStyle = document.querySelector('#alertstab__2020 p');
  29.  
  30.     const HTMLEl = `
  31. <div class="navBarNotif">
  32. 	<style>
  33.     @media screen and (max-width: 1569px) {
  34. 		.navBarNotif {
  35. 			width: 260px;
  36. 		}
  37.     }
  38.     @media screen and (min-width: 1570px) {
  39. 		.navBarNotif {
  40. 			width: 320px;
  41. 		}
  42.     }
  43.     @media screen and (min-width: 1570px) {
  44. 		.navBarNotif {
  45. 			width: 435px;
  46. 		}
  47.     }
  48.  
  49.     @media screen and (min-width: 1860px) {
  50. 		.navBarNotif {
  51. 			width: 600px;
  52. 		}
  53.     }
  54.  
  55. 	.navBarNotif {
  56. 	    box-sizing: content-box;
  57. 	    position: absolute;
  58. 	    left: 210px;
  59. 	    z-index: 99;
  60. 	    height: 60px;
  61. 	    padding: 0 10px;
  62. 	    font-family: 'MuseoSansRounded700', 'Arial', sans-serif;
  63. 	    border: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('border')};
  64. 	    border-radius: 10px;
  65. 	    box-shadow: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('box-shadow')};
  66. 	    -webkit-box-shadow: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('box-shadow')};
  67. 	    -moz-box-shadow: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('box-shadow')};
  68. 	    background-color: ${window.getComputedStyle(alertsTabComputedStyle).getPropertyValue('background-color')};
  69. 	}
  70. 	.navBarNotif h4 {
  71. 	    color: ${window.getComputedStyle(alertsh4ComputedStyle).getPropertyValue('color')};
  72. 	    margin-top: 3px;
  73. 	    margin-bottom: 0;
  74. 	}
  75. 	.navBarNotif h5 {
  76. 	    margin: 0;
  77. 	}
  78. 	.navBarNotif p {
  79.         color: ${window.getComputedStyle(alertspComputedStyle).getPropertyValue('color')};
  80. 	    margin: 2px 15px 5px auto;
  81. 	    max-width: 555px;
  82. 	    max-height: 15px;
  83. 	    font-size: 10pt;
  84. 	    overflow: hidden;
  85. 	    white-space: nowrap;
  86. 	    text-overflow: "...";
  87. 	}
  88. 	.navBarNotif .alert-x {
  89. 	    position: absolute;
  90. 	    top: 5px;
  91. 	    right: 5px;
  92. 	    width: 15px;
  93. 	    height: 15px;
  94. 	    background: url(https://images.neopets.com/themes/h5/basic/images/x-icon.svg) center center no-repeat;
  95. 	    background-size: auto;
  96. 	    background-size: 100%;
  97. 	    cursor: pointer;
  98. 	}
  99. 	.navBarNotif > a > div {
  100. 	    float: left;
  101. 	    width: 50px;
  102. 	    height: 50px;
  103. 	    margin: 5px 10px 5px 0;
  104. 	    background-image: ${window.getComputedStyle(iconEl).getPropertyValue('background-image')};
  105. 	    background-size: 100%;
  106. 	    background-repeat: no-repeat;
  107. 	    background-position: center;
  108. 	    cursor: pointer;
  109. 	}
  110. 	</style>
  111. ${elementsArray[index].innerHTML}
  112. </div>
  113. `;
  114.  
  115.     const seeAllEvents = `<b><a class="hideIfSmall" href="/allevents.phtml"> - See all events</a></b>`;
  116.     // console.log(index);
  117.     $('.nav-top-grid__2020').prepend(HTMLEl);
  118.     $('.navBarNotif h5').append(seeAllEvents);
  119.  
  120.     document.querySelector('.navBarNotif .alert-x').addEventListener('click', function () {
  121.         closeList.item(index).click();
  122.     });
  123.  
  124.     closeList.item(index).addEventListener('click', function() {
  125.         $('.navBarNotif').remove();
  126.         index = index + 1;
  127.         // console.log(index);
  128.         (elementsArray[index] !== undefined) && (displayBarEl());
  129.     });
  130. }
  131.  
  132. displayBarEl();