User:Enterprisey/watchlist-notice.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

mw.loader.using( 'mediawiki.util', function () {
	var showNotice = function () {
 
		// Stick a "Watchlist update!" notice after the notification count
		$( "#pt-notifications-notice" ).after(
        	$( "<li>" ).append( $( "<a>" )
        		.text( "Watchlist update!" )
        		.css( {
        			"background-color": "green",
        			"color": "white",
        			"border-radius": "2px",
        			"padding": "0.25em 0.45em 0.2em",
        			"cursor": "pointer",
        			"font-weight": "bold",
        			"transition": "background-color 0.5s"
        		} )
        		.attr( "href", "/wiki/Special:Watchlist" )
        		.mouseover( updateNotice )
        	)
        	.attr( "id", "watchlist-update-notice" )
        );
	};
	
	var updateNotice = function() {
		// Lighten the background color so the user knows we're updating
		$( "#watchlist-update-notice a" ).css( "background-color", "#7bff7b" );
		
		// Update the notice
		$.getJSON(
    		mw.util.wikiScript( 'api' ),
    		{
    			format: "json",
    			action: "query",
    			list: "watchlist",
    			wlshow: "unread",
    			wllimit: 1 // Because we're checking if there are *any* entries
    		} ).done(function( data ) {
    			if( !data.query ) return;
    			if( data.query.watchlist.length ) {
 
    				// There are new watchlist diffs to read, so show notice
    				if( !$( "#watchlist-update-notice" ).length ) {
    					
    					// That is, if it isn't shown already
    					showNotice();
    				} else {
    					
    					// There's already a notice, so change background
    					$( "#watchlist-update-notice a" ).css( "background-color", "green" );
    				}
    			} else {
    				
    				// No new watchlist diffs to read, so hide notice
    				$( "#watchlist-update-notice" ).remove();
    			}
    		}
    	);
	};
 
    $( document ).ready( function () { 
	    updateNotice();
	    window.setInterval( updateNotice, 120000 );
    } );
} );