User:Evad37/timeless-newMessageHighlight.js

/* timeless-newMessageHighlight A script to highlight the username in yellow when there are new messages on your user talk page (since the in Timeless skin, the talk page link is hidden in a dropdown). This script should only be used with the Timeless skin -- add it to your timeless.js, not your common.js! For details on why this is not done by the skin, nor by the Echo extension, see these tasks: https://phabricator.wikimedia.org/T215695 and https://phabricator.wikimedia.org/T216046 // Wait for page load $( function($) {

var MOBILE_BREAKPOINT = 850; // px	var hasTalkpageAlert; // Boolean var recheckInterval; var recheckTimeout; var clearRecheckingIntervalAndTimeout = function { if ( recheckInterval ) window.clearInterval(recheckInterval); if ( recheckTimeout ) window.clearTimeout(recheckTimeout); // Reset click handler. Seems to be needed, possibly from Echo mucking about // with the  elements? if ( onNotificationAlertClick ) { $('#pt-notifications-alert a').off("click.highlightingCheck"); $('#pt-notifications-alert a').on("click.highlightingCheck", onNotificationAlertClick); }	};

// Desktop (and tablet) views var setDesktopStyles = function { $('#personal').css({			'background-color': '#fc3',			'background-blend-mode': 'multiply',			'background-clip': 'content-box'		}); };	var removeDesktopStyles = function { $('#personal').css({			'background-color': 'initial',			'background-blend-mode': 'initial',			'background-clip': 'initial'		}); };	var hasDesktopStylesSet = function { return $('#personal').css('background-color') === "rgb(255, 204, 51)"; // #fc3; };	// Mobile views (only needs styles when below breakpoint) var addStylesForMobileView = function { $('#personal h2').css({			'background-color': '#fc3',			'background-blend-mode': 'multiply'		}); };	var removeStylesForMobileView = function { $('#personal h2').css({			'background-color': 'initial',			'background-blend-mode': 'initial'		}); };	var hasMobileViewStylesSet = function { return $('#personal h2').css('background-color') === "rgb(255, 204, 51)"; // #fc3; };	var setMobileViewStyles = function { var isStyled = hasMobileViewStylesSet; if ( window.innerWidth <= MOBILE_BREAKPOINT && !isStyled ) { setTimeout(addStylesForMobileView, 1); } else if ( window.innerWidth > MOBILE_BREAKPOINT && isStyled ) { setTimeout(removeStylesForMobileView, 1); }	};	// Set state of desktop / mobile view styles var setUpHighlighting = function { hasTalkpageAlert = $('#user-tools').has('.mw-echo-alert').length > 0; if ( hasTalkpageAlert ) { if ( !hasDesktopStylesSet ) { setDesktopStyles; clearRecheckingIntervalAndTimeout; }			setMobileViewStyles; } else { if ( hasDesktopStylesSet ) { removeDesktopStyles; clearRecheckingIntervalAndTimeout; }			if ( hasMobileViewStylesSet ) { removeStylesForMobileView; }		}	};	// Set initial state setUpHighlighting; /* Respond when the window resizes, throttled to every 0.2 seconds. * Derived from code by Mozilla Contributors, licensed under CC-BY-SA 2.5, * at https://developer.mozilla.org/en-US/docs/Web/Events/resize#setTimeout */	window.addEventListener("resize", resizeThrottler, false); var resizeTimeout; var actualResizeHandler = function { return hasTalkpageAlert && setTimeout(setMobileViewStyles, 1); };	function resizeThrottler { // ignore resize events as long as an actualResizeHandler execution is in the queue if ( !resizeTimeout ) { resizeTimeout = setTimeout(function {				resizeTimeout = null;				actualResizeHandler;			}, 200); }	}	/* Clicks on the notifications menu may add/remove the yellow background from the talkpage link, so we do a check every 5 seconds to see if we need to reset the highlighting (on or off). For efficiency this is time-limited to period starting from when the notifications-alert icon is clicked, and ending either when the highlighting state changes, or 60 seconds have elapsed. Adding a callback to a hook would be prefereable, but Echo doesn't seem to provide such hooks. And the mark as read/unread links aren't available till some time after the user clicks on the bell icon, so click-event callbacks can't be used either. :(	*/	var onNotificationAlertClick = function {		recheckInterval = window.setInterval(setUpHighlighting, 5000);		recheckTimeout = window.setTimeout(function { clearRecheckingIntervalAndTimeout; }, 60000);	};	$('#pt-notifications-alert a').on("click.highlightingCheck", onNotificationAlertClick); });