☰

Github Notifications Dropdown

When clicking the notifications icon, displays notifications in a dropdown pane, without leaving the current page.

  1. // ==UserScript==
  2. // @name           Github Notifications Dropdown
  3. // @namespace      joeytwiddle
  4. // @author         joeytwiddle
  5. // @contributors   SkyzohKey, Marti, darkred
  6. // @copyright      2014-2022, Paul "Joey" Clark (http://neuralyte.org/~joey)
  7. // @version        2.0.4
  8. // @license        MIT
  9. // @description    When clicking the notifications icon, displays notifications in a dropdown pane, without leaving the current page.
  10. // @include        https://github.com/*
  11. // @require        https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  12. // @grant          GM_addStyle
  13. // ==/UserScript==
  14.  
  15. /* eslint-env jquery */
  16.  
  17. // bug: If the notifications list is longer than the page, scroll down to the bottom and then try to click on the white space below the Github document's content.  The event does not fire there!
  18.  
  19. // When using @grant none then we should also avoid messing with the page's jQuery (if it has one)
  20. this.$ = this.jQuery = jQuery.noConflict(true);
  21.  
  22. // ==Options==
  23.  
  24. // Fetch notifications where you are a participant, before all notifications
  25. var showParticipatingNotificationsFirst = true;
  26.  
  27. // When clicking on an issue in the dropdown, should the script mark it as done (remove it from the list)?
  28. var markAsDoneWhenFollowingLink = true;
  29.  
  30. var makeBlocksCollapsableOnNotificationsPage = true;
  31.  
  32. // Disabled by default because it was conflicting with other scripts (https://github.com/joeytwiddle/code/issues/2)
  33. var makeAllFileAndDiffBlocksCollapsable = false;
  34.  
  35. // If you want to change the colour of the blue notification dot, uncomment one of the following
  36. var notificationDotStyle = '';
  37. // Github's blue dot (2017)
  38. //var notificationDotStyle = 'linear-gradient(hsl(212, 100%, 66%), hsl(212, 100%, 46%))';
  39. // Github's blue dot (2016)
  40. //var notificationDotStyle = 'linear-gradient(hsl(214, 50%, 65%), hsl(214, 50%, 50%))';
  41. // Strong red dot
  42. //var notificationDotStyle = 'linear-gradient(hsla(0, 80%, 75%, 1), hsla(0, 80%, 50%, 1))';
  43. // Calm amber dot
  44. //var notificationDotStyle = 'linear-gradient(hsla(35, 90%, 65%, 1), hsla(35, 90%, 40%, 1))';
  45. // Gentle green dot
  46. //var notificationDotStyle = 'linear-gradient(hsla(120, 50%, 65%, 1), hsla(120, 50%, 40%, 1))';
  47.  
  48. // It may look like this is getting in the way of the header, but it's actually not.  The .AppHeader just disappears when we scroll down.  But you can move it to the bottom, if you prefer.
  49. // TODO: An option to make .AppHeader sticky would be great...
  50. var shiftNotificationShelfToTheBottom = false;
  51.  
  52. var hideQuodAIWarning = true;
  53.  
  54. // ==/Options==
  55.  
  56. var mainNotificationsPath = '/notifications';
  57.  
  58. var notificationsToFetch = [
  59. 	{
  60. 		title: 'Participating',
  61. 		path: '/notifications?query=reason%3Aparticipating+is%3Aunread',
  62. 	},
  63. 	{
  64. 		title: 'Mentions',
  65. 		path: '/notifications?query=reason%3Amention+is%3Aunread',
  66. 	},
  67. 	{
  68. 		title: 'All notifications',
  69. 		path: '/notifications?query=is%3Aunread',
  70. 	},
  71. ];
  72.  
  73. var notificationButtonLinkSelector = 'header a.notification-indicator[href], #AppHeader-notifications-button';
  74.  
  75. var notificationButtonLink = null;
  76. var notificationButtonContainer = null;
  77.  
  78. var closeClickTargets = 'body';
  79.  
  80. var notificationsDropdown = null;
  81. var tabArrow = null;
  82.  
  83. function listenForNotificationClick() {
  84. 	//notificationButtonContainer.on('click', onNotificationButtonClicked);
  85. 	$('body').on('click', notificationButtonLinkSelector, onNotificationButtonClicked);
  86. }
  87.  
  88. function onNotificationButtonClicked(evt) {
  89. 	// Act normally (do nothing) if a modifier key is pressed, or if it was a right or middle click.
  90. 	if (evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey || evt.which !== 1) {
  91. 		return;
  92. 	}
  93. 	evt.preventDefault();
  94.  
  95. 	if (isNotificationsDropdownOpen()) {
  96. 		closeNotificationsDropdown();
  97. 		return;
  98. 	}
  99.  
  100. 	// We used to set these when the script loaded, but now GitHub is dynamically loading some of the content, it's better to regenerate them when needed
  101. 	notificationButtonLink = $(notificationButtonLinkSelector);
  102. 	// In v1, the click listener was on the containing <li> so we had to listen there
  103. 	//var notificationButtonContainer = notificationButtonLink.closest("li");
  104. 	// In v2, the listener needs to go on the link
  105. 	notificationButtonContainer = notificationButtonLink;
  106.  
  107. 	// We used to make it fall back to its default behaviour after the first click, but now that GitHub is more like a Single Page App, we prefer to keep it alive, and trust that it works properly!
  108. 	//notificationButtonContainer.off('click', onNotificationButtonClicked);
  109. 	// For GM 4.0 we must use an absolute path, so we use .prop() instead of .attr().  "This is an issue with Firefox and content scripts"
  110. 	var targetPage = notificationButtonLink.prop('href');
  111. 	// When Microsoft revamped the notifications, I don't think the icon ever shows anything different
  112.  
  113. 	var notificationPagesToTry = notificationsToFetch.slice(0);
  114. 	fetchNotifications(notificationPagesToTry);
  115. }
  116.  
  117. function fetchNotifications(notificationPagesToTry) {
  118. 	var currentAttempt = notificationPagesToTry.shift();
  119. 	var title = currentAttempt.title;
  120. 	var targetPage = 'https://github.com' + currentAttempt.path;
  121. 	var morePagesToTry = notificationPagesToTry.length > 0;
  122.  
  123. 	notificationButtonContainer.css({
  124. 		opacity: '0.3',
  125. 		outline: 'none',
  126. 	});
  127. 	$.ajax({
  128. 		url: targetPage,
  129. 		dataType: 'html',
  130. 	}).then((data, textStatus, jqXHR) => {
  131. 		var notificationPage = $('<div>').append($.parseHTML(data));
  132. 		var countNotifications = notificationPage.find('.notifications-list').find('.notifications-list-item').length;
  133. 		var hasNotifications = countNotifications > 0;
  134. 		if (hasNotifications || !morePagesToTry) {
  135. 			receiveNotificationsPage(targetPage, title, data, textStatus, jqXHR);
  136. 		} else {
  137. 			console.log('No notifications on', targetPage, 'but we still have others we can try:', notificationPagesToTry);
  138. 			fetchNotifications(notificationPagesToTry);
  139. 		}
  140. 	}).fail(receiveNotificationsPage);
  141. }
  142.  
  143. function receiveNotificationsPage(targetPage, title, data, textStatus, jqXHR) {
  144. 	notificationButtonContainer.css('opacity', '');
  145.  
  146. 	notificationsDropdown = $('<div>').addClass('notifications-dropdown');
  147.  
  148. 	var titleElem = $('<h3>').append( $('<center>').text(title) );
  149. 	notificationsDropdown.prepend( $("<span class='notitifcations-dropdown-title'>").append(titleElem) );
  150.  
  151. 	var notificationPage = $('<div>').append($.parseHTML(data));
  152. 	var notificationsList = notificationPage.find('.notifications-list');
  153. 	// Provide hover text for all links, so if the text is too long to display, it can at least be seen on hover.
  154. 	notificationsList.find('a').each(function() {
  155. 		$(this).attr('title', $(this).text().trim().replace(/[ \n]+/g, ' '));
  156. 		// This code removed the query params which make the target page scroll down and show a banner about notifications (the "notification shelf")
  157. 		// Here is an example link:
  158. 		//     https://github.com/EbookFoundation/free-programming-books/pull/9384?notification_referrer_id=NT_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&notifications_query=is%3Aunread
  159. 		// Here is an example link to a comment within a thread:
  160. 		//     https://github.com/AntennaPod/AntennaPod/issues/6500?notification_referrer_id=NT_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&notifications_query=reason%3Aparticipating#issuecomment-1570558779
  161. 		// The scrolling down is annoying because it pushes the header off-screen, and the notifications item with it.
  162. 		// But when we are viewing a new comment in a long thread, we really do want to scroll down!  So let's disable this for now...
  163. 		// TODO: Probably the ideal solution would be to make the header sticky, so we can always see it, no matter how far down the page we are.
  164. 		//this.href = this.href.replace(/[?].*/, '');
  165. 		// Let's remove the notification shelf, but keep any deep links, so we will only scroll down if needed.
  166. 		this.href = this.href.replace(/[?][^#]*/, '');
  167. 	});
  168. 	var minWidth = Math.min(700, window.innerWidth - 48);
  169. 	if (notificationsList.children().length === 0) {
  170. 		notificationsDropdown.append('<span class=\'notifications-dropdown-no-new\'>No new notifications</span>');
  171. 		minWidth = 200;
  172. 	}
  173. 	notificationsDropdown.append(notificationsList);
  174. 	var linkToPage = mainNotificationsPath;
  175. 	//var linkToPage = targetPage;
  176. 	var seeAll = $('<a class=\'notifications-dropdown-see-all\' href=\'' + encodeURI(linkToPage) + '\'>Go to notifications page</a>');
  177. 	seeAll.on('click', () => closeNotificationsDropdown());
  178. 	notificationsList.append(seeAll);
  179.  
  180. 	var arrowSize = 10;
  181. 	//var dropdownBackgroundColor = 'var(--color-notifications-row-bg) !important';
  182. 	var dropdownBackgroundColor = '#f8f8f8';
  183. 	var unreadBackgroundColor = dropdownBackgroundColor;
  184. 	//var readOrDoneBackgroundColor = 'var(--color-canvas-subtle) !important';
  185. 	//var readOrDoneBackgroundColor = '#f0f3f6';
  186. 	var readOrDoneBackgroundColor = '#edf0f3';
  187.  
  188. 	// In v2, this appears on the notifications page, but not other pages.
  189. 	// It is needed to activate some of the CSS for the notifications list.
  190. 	document.body.classList.add('notifications-v2');
  191.  
  192. 	$('<style>').html(`
  193. 		.notifications-dropdown {
  194. 		  /* border: 1px solid rgba(0, 0, 0, 0.15); */
  195. 		  /* background-color: #f6f8fa; */
  196. 		  background-color: ${dropdownBackgroundColor};
  197. 		  /* padding: 2px 16px; */
  198. 		  /* box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.15); */
  199. 		  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
  200. 		  border-radius: 12px;
  201. 		  /* max-height: 90%; */
  202. 		  /* If the body is shorter than the dropdown, the body will expand to let it fit, but only just.  This will ensure a little bit of extra space is available for the shadow and a small gap. */
  203. 		  /* margin-bottom: 20px; */
  204. 		  /* To appear above the .bootcamp .desc on the front page and .table-list-header on .../issues */
  205. 		  z-index: 9999;
  206. 		}
  207. 		.notitifcations-dropdown-title h3 {
  208. 		  padding: 0.5em;
  209. 		}
  210. 		.notifications-dropdown > .css-truncate, .notifications-dropdown .list-group-item-name a {
  211. 		  max-width: ${minWidth - 300}px !important;
  212. 		}
  213. 		.notifications-dropdown-see-all {
  214. 		  display: block;
  215. 		  font-weight: bold;
  216. 		  /* margin-top: 20px; */
  217. 		  padding: 5px;
  218. 		  text-align: center;
  219. 		  background-color: ${dropdownBackgroundColor};
  220. 		  border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;
  221. 		}
  222. 		.notifications-dropdown-see-all:hover {
  223. 		  background-color: #4078C0 !important;
  224. 		  color: white;
  225. 		  text-decoration: none;
  226. 		}
  227. 		.notifications-dropdown-no-new {
  228. 		  display: block;
  229. 		  height: 30px;
  230. 		  line-height: 30px;
  231. 		  padding: 0 10px;
  232. 		  margin-bottom: 0;
  233. 		  text-align: center;
  234. 		  font-weight: bold;
  235. 		  font-size: 16px;
  236. 		}
  237. 		/* Redesign the notification area. */
  238. 		.notifications-dropdown .boxed-group > h3 {
  239. 		  border-radius: 0;
  240. 		  border-width: 0px 0px 0px;
  241. 		}
  242. 		.notifications-dropdown .boxed-group:first-child h3 {
  243. 		  border-top-left-radius: 3px;
  244. 		  border-top-right-radius: 3px;
  245. 		}
  246. 		.notifications-dropdown .boxed-group-inner {
  247. 		  border: 0;
  248. 		  border-radius: 0;
  249. 		  padding: 0;
  250. 		  border-top: 1px solid #D8D8D8;
  251. 		  border-bottom: 1px solid #D8D8D8;
  252. 		}
  253. 		.notifications-dropdown .notifications-list .boxed-group {
  254. 		  margin: 0 !important;
  255. 		}
  256. 		.notifications-dropdown .notifications-list .paginate-container {
  257. 		  margin: 0 !important;
  258. 		}
  259. 		/* GitHub uses default 20px here, but it applies to the last one too, which messes up our layout. */
  260. 		.notifications-dropdown .notifications-list .boxed-group:not(:last-child) {
  261. 		  /* margin-bottom: 16px; */
  262. 		}
  263. 		.notifications-dropdown .notifications-list .boxed-group:last-child {
  264. 		  margin-bottom: 0px;
  265. 		}
  266. 		.notifications-dropdown .notifications-list {
  267. 		  float: initial;
  268. 		}
  269. 		/* No longer an issue:
  270. 		 * There was a rule on the user profile page that applies to the notification ticks (which are usually never seen on that page).  The rule matches: body.page-profile .box-header .tooltipped
  271. 		 * That rule messes up the position of each tick icon relative to its containing header.  So we override to the previous values.
  272. 		 */
  273. 		/*
  274. 		.notifications-dropdown .box-header .mark-all-as-read {
  275. 		  top: auto !important;
  276. 		  left: auto !important;
  277. 		  right: auto !important;
  278. 		  bottom: auto !important;
  279. 		  float: right;
  280. 		}
  281. 		*/
  282. 		.notifications-dropdown-arrow {
  283. 		  position: absolute;
  284. 		  width: 0px;
  285. 		  height: 0px;
  286. 		  border-left: ${arrowSize}px solid transparent;
  287. 		  border-right: ${arrowSize}px solid transparent;
  288. 		  border-bottom: ${arrowSize}px solid ${dropdownBackgroundColor};
  289. 		  z-index: 10000001;
  290. 		}
  291. 		.notification-indicator.tooltipped.tooltip-hidden:before, .notification-indicator.tooltipped.tooltip-hidden:after {
  292. 		  display: none;
  293. 		}
  294. 		/* Additions for GitHub notifications v2 (2020) */
  295. 		/* The header only contains "Select all" and that isn't working for me */
  296. 		.notifications-dropdown .Box-header {
  297. 		  display: none !important;
  298. 		}
  299. 		/* Let's also hide the inline checkboxes */
  300. 		.notifications-dropdown .p-2 {
  301. 		  visibility: hidden;
  302. 		}
  303. 		/* This should be hidden */
  304. 		/*
  305. 		.notification-is-starred-icon {
  306. 		  display: none;
  307. 		}
  308. 		*/
  309. 		/* These buttons don't work.  Let's keep them visible, but make them appear disabled. */
  310. 		/* We got them partially working now. */
  311. 		/*
  312. 		.notifications-dropdown .notification-list-item-actions {
  313. 		  opacity: 0.3;
  314. 		  pointer-events: none;
  315. 		}
  316. 		*/
  317. 		.notifications-dropdown .notifications-list {
  318. 		  margin-bottom: 0 !important;
  319. 		}
  320. 		.notifications-list-item .notification-list-item-actions {
  321. 		  /* Always present but by default invisible and unclickable */
  322. 		  display: flex !important;
  323. 		  opacity: 0.0;
  324. 		  pointer-events: none;
  325. 		  transition: all 0.2s ease-out;
  326. 		}
  327. 		.notifications-list-item:hover .notification-list-item-actions {
  328. 		  display: flex !important;
  329. 		  opacity: 1.0;
  330. 		  pointer-events: initial;
  331. 		}
  332.  
  333. 		/* list-item.scss is not always loaded, if you haven't visited the real notifications page. So we have copied some of the CSS into here. */
  334. 		.color-bg-subtle {
  335. 		  background-color: var(--color-canvas-subtle) !important;
  336. 		}
  337. 		.notifications-list-item {
  338. 		  background-color: ${readOrDoneBackgroundColor};
  339. 		}
  340. 		.notifications-list-item.notification-unread {
  341. 		  /* background-color: var(--color-notifications-row-bg) !important; */
  342. 		  background-color: ${unreadBackgroundColor};
  343. 		}
  344. 		.notifications-list-item .notification-list-item-link {
  345. 		  color: var(--color-fg-muted) !important;
  346. 		}
  347. 		.notifications-list-item.notification-unread .notification-list-item-link {
  348. 		  color: var(--color-fg-default) !important;
  349. 		}
  350. 		.notifications-list-item:hover {
  351. 		  background-color: var(--color-accent-subtle) !important;
  352. 		  box-shadow: 2px 0 0 var(--color-accent-emphasis) inset;
  353. 		}
  354. 		.notifications-list-item .notification-list-item-unread-indicator {
  355. 		  width: 8px;
  356. 		  height: 8px;
  357. 		  background: none;
  358. 		  background-color: rgba(0, 0, 0, 0);
  359. 		}
  360. 		.notifications-list-item.notification-unread .notification-list-item-unread-indicator {
  361. 		  background-color: var(--color-accent-emphasis);
  362. 		}
  363. 		.notifications-list-item:hover .notification-list-item-hide-on-hover {
  364. 		  visibility: hidden !important;
  365. 		}
  366. 	`).appendTo('body');
  367.  
  368. 	notificationButtonLink.addClass('tooltip-hidden');
  369.  
  370. 	notificationsDropdown.css({
  371. 		'position': 'absolute', // Must be set before we can read width accurately
  372. 		'min-width': minWidth + 'px',
  373. 		'max-width': '900px',
  374. 		//overflow: "auto",
  375. 	}).appendTo('body'); // Done sooner so we can get its width
  376. 	var topOfDropdown = notificationButtonContainer.offset().top + notificationButtonContainer.innerHeight() + 4;
  377. 	var leftOfDropdown = notificationButtonContainer.offset().left + notificationButtonContainer.innerWidth() / 2 - notificationsDropdown.innerWidth() / 2;
  378. 	leftOfDropdown = Math.min(leftOfDropdown, window.innerWidth - 12 - notificationsDropdown.innerWidth() - 20);
  379. 	leftOfDropdown = Math.max(leftOfDropdown, 0);
  380. 	notificationsDropdown.css({
  381. 		top: topOfDropdown + 'px',
  382. 		left: leftOfDropdown + 'px',
  383. 		//"max-height": "calc(100% - "+(topOfDropdown+8)+"px)",
  384. 	});
  385.  
  386. 	// This little white wedge should lead from the notification button to the title of the dropdown, +1 pixel lower in order to overlap the top border.
  387. 	tabArrow = $('<div>').addClass('notifications-dropdown-arrow').css({
  388. 		left: (notificationButtonContainer.offset().left + notificationButtonContainer.innerWidth() / 2 - arrowSize) + 'px',
  389. 		top: (topOfDropdown - arrowSize + 1) + 'px',
  390. 	}).appendTo('body');
  391.  
  392. 	// I don't think this works any longer
  393. 	makeNotificationBlocksCollapsable(notificationsDropdown);
  394.  
  395. 	listenForClicksOnLinks(notificationsDropdown);
  396.  
  397. 	showActionButtons(notificationsDropdown);
  398. 	listenForMarkAsReadClick(notificationsDropdown);
  399.  
  400. 	listenForCloseNotificationDropdown();
  401. }
  402.  
  403. function listenForCloseNotificationDropdown() {
  404. 	$(closeClickTargets).on('click', considerClosingNotificiationDropdown);
  405. }
  406.  
  407. function considerClosingNotificiationDropdown(evt) {
  408. 	if ($(evt.target).closest('.notifications-dropdown').length) {
  409. 		// A click inside the dropdown doesn't count!
  410. 	} else if ($(evt.target).closest(notificationButtonLinkSelector).length) {
  411. 		// We let onNotificationButtonClicked() handle clicks on the bell icon
  412. 	} else {
  413. 		evt.preventDefault();
  414. 		closeNotificationsDropdown();
  415. 		// We don't need to re-add this now, because we no longer remove it
  416. 		//listenForNotificationClick();
  417. 	}
  418. }
  419.  
  420. function closeNotificationsDropdown() {
  421. 	$(closeClickTargets).off('click', considerClosingNotificiationDropdown);
  422. 	notificationsDropdown.remove();
  423. 	tabArrow.remove();
  424. 	notificationButtonContainer.css({
  425. 		'background-color': '',
  426. 		'background-image': '',
  427. 	});
  428. 	notificationButtonLink.removeClass('tooltip-hidden');
  429. 	notificationsDropdown = null;
  430. }
  431.  
  432. function isNotificationsDropdownOpen() {
  433. 	return notificationsDropdown != null;
  434. }
  435.  
  436. // I'm guessing this is no longer around, since the notifications we display are no longer grouped by repo
  437. function listenForMarkAsReadClick(parentElement) {
  438. 	$('.mark-all-as-read', parentElement).click(function() {
  439. 		// Always collapse the repo's notifications block when the mark-as-read tick icon is clicked.
  440. 		var $divToCollapse = $(this).closest('.js-notifications-browser').find('.boxed-group-inner.notifications');
  441. 		collapseBlock($divToCollapse);
  442. 	});
  443. }
  444.  
  445. function makeNotificationBlocksCollapsable(parentElement) {
  446. 	makeBlocksCollapsable(parentElement, '.js-notifications-browser > h3', '.boxed-group-inner.notifications');
  447. }
  448.  
  449. function makeFileAndDiffBlocksCollapsable(parentElement) {
  450. 	// The headers used to be: .file.js-details-container > .meta but they changed to .file-header early in 2015
  451. 	// .data.highlight.blob-wrapper is the content box for the content or a file diff
  452. 	// .render-wrapper is the container for github's image diff viewers (2-up, swipe, onion skin)
  453. 	makeBlocksCollapsable(parentElement, '.file-header', '.data.highlight , .render-wrapper');
  454. }
  455.  
  456. // When an element matching headerSelector is clicked, the next sibling bodySelector will be collapsed or expanded (toggled).
  457. function makeBlocksCollapsable(parentElement, headerSelector, bodySelector) {
  458. 	$(headerSelector, parentElement).click(function(evt) {
  459. 		// Act normally (do nothing) if a modifier key is pressed, or if it was a right or middle click.
  460. 		if (evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey || evt.which !== 1) {
  461. 			return;
  462. 		}
  463. 		// The parent of the header is usually a `div.file`
  464. 		var $divToCollapse = $(this).parent().find(bodySelector);
  465. 		var wasHidden = $divToCollapse.hasClass('ghndd-collapsed');
  466. 		var hideContent = !wasHidden;
  467. 		if (hideContent) {
  468. 			collapseBlock($divToCollapse);
  469. 		} else {
  470. 			expandBlock($divToCollapse);
  471. 		}
  472. 	}).css({ cursor: 'pointer' });
  473. }
  474.  
  475. // Under the new styling, while the top border is placed on the header, the bottom border is placed on the box.  (This is the case for notifications, but not for file/diff boxes.)
  476. // If we hide the box entirely, we will lose the bottom border.
  477. // So our plan is to rollup the box, hide its children, and then show the box again.
  478. function collapseBlock($divToCollapse) {
  479. 	$divToCollapse.addClass('ghndd-collapsed');
  480. 	$divToCollapse.slideUp(150, function() {
  481. 		$divToCollapse.children().hide();
  482. 		$divToCollapse.slideDown(1);
  483. 	});
  484. }
  485. function expandBlock($divToCollapse) {
  486. 	$divToCollapse.removeClass('ghndd-collapsed');
  487. 	$divToCollapse.slideUp(1, function() {
  488. 		$divToCollapse.children().show();
  489. 		$divToCollapse.slideDown(150);
  490. 	});
  491. }
  492.  
  493. function textNode(text) {
  494. 	return document.createTextNode(text);
  495. }
  496.  
  497. function showActionButtons(notificationsDropdown) {
  498. 	// Now done by CSS on hover
  499. 	//$('.notification-list-item-actions.d-none', notificationsDropdown).removeClass('d-none');
  500. }
  501.  
  502. function listenForClicksOnLinks(notificationsDropdown) {
  503. 	$('a.notification-list-item-link', notificationsDropdown).on('click', function(evt) {
  504. 		if (markAsDoneWhenFollowingLink) {
  505. 			// When a link is clicked, also  mark it as done
  506. 			// li.js-notification-action.notification-action-mark-archived form button
  507. 			// button[title="Done"]
  508. 			var $buttonToClick = $(this).closest('.notifications-list-item').find('button[title="Done"]');
  509. 			//console.log('This link was clicked:', this);
  510. 			//console.log('So I will click this button:', $buttonToClick);
  511. 			// Hopefully the mark-as-read request will fire, as well as the browser following the clicked link
  512. 			$buttonToClick.click();
  513. 			markNotificationAsRead(this);
  514. 			//evt.preventDefault();
  515. 			// Go ahead and allow the link to be clicked
  516. 		}
  517.  
  518. 		// Because following the link can now happen without a page refresh, the notifcations popup will stay open, which looks odd.
  519. 		// So let's hide the notifications dropdown.
  520. 		// But not if it was a ctrl-click or right-click!
  521. 		var wasCustomClick = evt.shiftKey || evt.altKey || evt.ctrlKey || evt.metaKey || evt.which !== 1;
  522. 		if (!wasCustomClick) {
  523. 			setTimeout(() => closeNotificationsDropdown(), 250);
  524. 		}
  525. 	});
  526. }
  527.  
  528. function listenForActionClicks() {
  529. 	$('body').on('click', '.notifications-dropdown .notifications-list .js-notification-action button', function(evt) {
  530. 		var $button = $(this);
  531. 		var $form = $button.closest('form');
  532.  
  533. 		$.ajax({
  534. 			type: $form.attr('method') || 'POST',
  535. 			url: $form.attr('action'),
  536. 			data: $form.serialize(),
  537. 			//or your custom data either as object {foo: "bar", ...} or foo=bar&...
  538. 			success: function(response) {
  539. 				if ($form.attr('data-status') === 'archived') {
  540. 					markNotificationAsRead($form);
  541. 				} else {
  542. 					// We don't know what action to take
  543. 				}
  544. 			},
  545. 		});
  546.  
  547. 		// Disable the button, now that it has been used
  548. 		//if ($button.attr('title') === "Done") {
  549. 		//    $button.css({ opacity: 0.5, pointerEvents: 'none' });
  550. 		//}
  551.  
  552. 		evt.preventDefault();
  553.  
  554. 		//markNotificationAsRead($form);
  555. 	});
  556. }
  557.  
  558. function markNotificationAsRead(elemSomewhereInsideNotification) {
  559. 	var $notificationDiv = $(elemSomewhereInsideNotification).closest('.notifications-list-item');
  560. 	/*
  561. 	// We don't hide it, we just grey it out
  562. 	$notificationDiv.css({
  563. 		opacity: 0.5,
  564. 		// Apart from this, we also get some free grey from the container behind, when we set the opacity
  565. 		backgroundColor: '#f6f8fa !important',
  566. 	});
  567. 	$notificationDiv.find('.notification-list-item-unread-indicator').hide();
  568. 	*/
  569. 	$notificationDiv.removeClass('notification-unread');
  570. }
  571.  
  572. // Init
  573. listenForNotificationClick();
  574.  
  575. // Optional: If we are on the notifications page, add our rollup feature there too!
  576. if (makeBlocksCollapsableOnNotificationsPage) {
  577. 	makeNotificationBlocksCollapsable(document.body);
  578. }
  579.  
  580. // Optional: Also add the rollup feature for individual files on diff pages.
  581. if (makeAllFileAndDiffBlocksCollapsable) {
  582. 	// TODO: This should be run on-demand, in case we reached a file or diff page via pushState().
  583. 	// Delay added because sometimes only 11 files were visible, but more were visible if we waited longer.
  584. 	setTimeout(function() {
  585. 		makeFileAndDiffBlocksCollapsable(document.body);
  586. 	}, 2000);
  587. }
  588.  
  589. if (typeof notificationDotStyle !== 'undefined' && notificationDotStyle) {
  590. 	$('<style>').html(`
  591. 		.notification-indicator .mail-status.unread {
  592. 			background-image: ${notificationDotStyle};
  593. 		}
  594. 	`).appendTo('body');
  595. }
  596.  
  597. // Mitigations for v2
  598. if (document.location.pathname === mainNotificationsPath) {
  599. 	// Inform the user if the list of repositories has (likely) been truncated
  600. 	var reposList = $('.js-notification-sidebar-repositories ul.filter-list');
  601. 	var reposInList = $('.js-notification-sidebar-repositories ul.filter-list > li');
  602. 	if (reposInList.length === 25) {
  603. 		reposList.append(
  604. 			jQuery('<li>')
  605. 				.html('<center><b>Some repositories may not be shown</b></center>')
  606. 				.css({
  607. 					background: '#fafabb',
  608. 					padding: '4px',
  609. 				})
  610. 		);
  611. 	}
  612. }
  613.  
  614. listenForActionClicks();
  615.  
  616. if (shiftNotificationShelfToTheBottom) {
  617. 	GM_addStyle(`
  618. 		.notification-shelf {
  619. 		  position: fixed !important;
  620. 		  top: revert !important;
  621. 		  bottom: 0 !important;
  622. 		  width: 100% !important;
  623. 		}
  624. 	`);
  625. }
  626.  
  627. if (hideQuodAIWarning) {
  628. 	setTimeout(() => {
  629. 		var quodContainer = jQuery('#toci-container');
  630. 		if (quodContainer[0] && quodContainer[0].textContent.match(/This file is currently not supported/)) {
  631. 			// We cannot .hide() it because its own CSS overrides ours
  632. 			// So we remove it
  633. 			quodContainer.remove();
  634. 			// But removing it breaks the layout, so we adjust that CSS as well!
  635. 			// This doesn't quite match GitHub's default behaviour (which uses a max-width and large margins) but it will do for now.
  636. 			GM_addStyle(`
  637. 				#toci-wrapper {
  638. 					display: grid;
  639. 					grid-template-columns: 100%;
  640. 				}
  641. 			`);
  642. 		}
  643. 	}, 4000);
  644. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址