User:Enterprisey/simple-notifs.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.

// vim: ts=4 sw=4 et ai
$( function () {
    var api;

    // Copied from https://stackoverflow.com/a/3177838/1757964
    function timeSince(date) {
        var seconds = Math.floor((new Date() - date) / 1000);
        var interval = Math.floor(seconds / 31536000);
        if (interval > 1) {
            return interval   " years";
        }
        interval = Math.floor(seconds / 2592000);
        if (interval > 1) {
            return interval   " months";
        }
        interval = Math.floor(seconds / 86400);
        if (interval > 1) {
            return interval   " days";
        }
        interval = Math.floor(seconds / 3600);
        if (interval > 1) {
            return interval   " hours";
        }
        interval = Math.floor(seconds / 60);
        if (interval > 1) {
            return interval   " minutes";
        }
        return Math.floor(seconds)   " seconds";
    }

    function wikilink( title ) {
        return "<a href='"   mw.util.getUrl( title )   "'>"   title   "</a>";
    }

    function notifToElement( notif ) {
        var timestamp = timeSince( new Date( notif.timestamp.utciso8601 ) )   " ago";
        var userLink = "<a href='"   mw.util.getUrl( "User:"   notif.agent.name )   "' "
              ( ( notif.agent.name.length ) > 20 ? " style='font-size: 90%'" : "" )
              ">"   notif.agent.name   "</a>";
        var diffLink = function( text ) {
            return "<a href='"   mw.util.getUrl( "Special:Diff/"   notif.revid )   "'>"   ( text || "this edit" )   "</a>";
        };
        var newNotifDiv = $( "<div class='notif'>" );
        if( !notif.read ) newNotifDiv.append( "*" );
        if( notif.type === "mention" && notif.category === "mention" ) {
            newNotifDiv
                .append( "Mentioned "   timestamp   " by "   userLink   " on " )
                .append( wikilink( notif.title.full ) )
                .append( " in "   diffLink() );
        }
        else if( notif.type === "emailuser" && notif.category === "emailuser" ) {
            newNotifDiv
                .append( "Emailed "   timestamp   " by "   userLink )
        } else if( notif.type === "edit-thank" && notif.category === "edit-thank" ) {
            newNotifDiv
                .append( "Thanked "   timestamp   " by "   userLink   " for " )
                .append( diffLink() )
                .append( " to " )
                .append( wikilink( notif.title.full ) );
        } else if( notif.type === "edit-user-talk" && notif.category === "edit-user-talk" ) {
            newNotifDiv
                .append( "Your user talk page changed "   timestamp   " by "   userLink )
                .append( " in "   diffLink() );
        } else if( notif.type === "mention-success" && notif.category === "mention-success" ) {
            newNotifDiv
                .append( "Successfully mentioned someone "   timestamp   " on " )
                .append( wikilink( notif.title.full ) )
                .append( " with "   diffLink() );
        } else if( notif.type === "mention-summary" && notif.category === "mention" ) {
            newNotifDiv
                .append( "Mentioned "   timestamp   " by "   userLink   " in the summary of "   diffLink() );
        } else if( notif.type === "login-fail-known" && notif.category === "login-fail" ) {
            newNotifDiv
                .append( "There have been 1 or more unsuccessful attempts to log in to your account since the last time you logged in. If it wasn't you, please make sure your account has a strong password." );
        } else if( notif.type === "reverted" && notif.category === "reverted" ) {
            newNotifDiv
                .append( "Your edit to "   wikilink( notif.title.full )   " was "   diffLink( "reverted" ) )
                .append( timestamp   " by "   userLink );
        } else if( notif.type === "pagetriage-mark-as-reviewed" && notif.category === "page-review" ) {
            newNotifDiv
                .append( "Your new page "   wikilink( notif.title.full )   " was reviewed by "  
                        userLink   " "   timestamp );
        } else if( notif.type === "page-linked" && notif.category === "article-linked" ) {
            newNotifDiv
                .append( "The page "   wikilink( notif.title.full )   " was "   diffLink( "linked from" ) )
                .append( " another page by "   userLink   " "   timestamp );
        } else if( notif.type === "dt-subscribed-new-comment" && notif.category === "dt-subscription" ) {
            newNotifDiv.append( "A discussion at "   wikilink( notif.title.full )   " was "  
                    diffLink( "responded to" )   timestamp   " by "   userLink );
        } else if( notif.type === "user-rights" && notif.category === "user-rights" ) {
            newNotifDiv.append( "Your user rights were updated at "  
                    timestamp   " by "   userLink );
        } else if( notif.type === "page-connection" && notif.category === "wikibase-action" ) {
            newNotifDiv
                .append( "The page "   wikilink( notif.title.full )   " was linked to Wikidata by " )
                .append( userLink   " "   timestamp );
        } else if( notif.type === "dt-removed-topic" && notif.category === "dt-subscription-archiving" ) {
            newNotifDiv
                .append( "A discussion at "   wikilink( notif.title.full )   " has been "  
                        diffLink( "archived or removed" )   " by "   userLink   " "   timestamp );
        } else {
            newNotifDiv.text( JSON.stringify( notif ) );
        }
        if( !notif.read ) {
            newNotifDiv
                .append( $( "<span class='simple-notifs-done'>" )
                    .append( "(" )
                    .append( $( "<a>" )
                        .text( "done" )
                        .click( function () {
                            api.postWithToken( "csrf", {
                                action: "echomarkread",
                                list: notif.id
                            } ).then( function () {
                                refresh();
                            } );
                        } )
                    )
                    .append( ")" ) )
        }

        return newNotifDiv;
    }

    function refresh() {
        api.get ( {
            format: "json",
            action: "query",
            meta: "notifications",
            notunreadfirst: "true", // not is the notifications module, not the word "not"
            notlimit: 50,
            formatversion: 2,
        } ).then( function ( data ) {
            if( !data || !data.query || !data.query.notifications ||
                !data.query.notifications.list ) {
                console.error( "simple-notifs died ", data );
            }
            var notifsList = data.query.notifications.list;
            var numUnread = notifsList.filter( function ( x ) { return !x.read; } ).length;
            $( "#pt-simple-notifs" ).text( numUnread );
            $( "#simple-notifs-panel" ).empty();
            notifsList.reverse();
            if( window.simpleNotifsOnlyUnread ) {
                notifsList = notifsList.filter( function ( notif ) { return !notif.read; } );
            }
            notifsList.map( notifToElement ).forEach( function ( e ) { $( "#simple-notifs-panel" ).append( e ); } );
        } );
    }

    $.when(
        $.ready,
        mw.loader.using( [ "mediawiki.api", "mediawiki.util" ] )
    ).then( function ( results ) {
        api = new mw.Api( "User:Enterprisey/simple-notifs.js" );

        $( "<li>" )
            .insertAfter( "#pt-userpage" )
            .append( "?" )
            .attr( "id", "pt-simple-notifs" )
            .on( "click", function () { $( "#simple-notifs-panel" ).toggle(); } )
        var ptOffset = $( "#pt-simple-notifs" ).offset();
        var panel = $( "<div>" )
            .attr( "id", "simple-notifs-panel" )
            .css( "top", ptOffset.top   30   "px" )
            .css( "left", ptOffset.left   "px" )
            .toggle()
                .appendTo( "body" );
        refresh();

        mw.loader.addStyleTag( "ul li#pt-simple-notifs { cursor: pointer; background-color: gray; margin-top: .3em; padding: .3em; padding-top: .3em; background-color: #ccc }" 
            " #simple-notifs-panel { position: fixed; background-color: white; width: 30em; height: 50%; overflow-y: scroll; border: thin solid black; border-radius: 2px; padding: 0.5em; font-size: 0.875em; z-index: 500; }" 
            "#simple-notifs-panel .notif { margin-bottom: 0.3em; }" 
            ".simple-notifs-done { font-size: 95%; margin-left: 0.35em; }");
    } );
} );