MediaWiki:Timeless.js

/* All JavaScript here will be loaded for users of the Timeless skin */
/* 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 <a> 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);
});