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 + "</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 " )
                .append( "<a href='" + mw.util.getUrl( "Special:Diff/" + notif.revid ) + "'>this edit</a>" );
        }
        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( "<a href='" + mw.util.getUrl( "Special:Diff/" + notif.revid ) + "'>this edit</a>" )
                .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 " )
                .append( "<a href='" + mw.util.getUrl( "Special:Diff/" + notif.revid ) + "'>this edit</a>" );
        } else if( notif.type === "mention-success" && notif.category === "mention-success" ) {
            newNotifDiv
                .append( "Successfully mentioned someone " + timestamp + " on " )
                .append( wikilink( notif.title.full ) )
                .append( " with " )
                .append( "<a href='" + mw.util.getUrl( "Special:Diff/" + notif.revid ) + "'>this edit</a>" )
        } 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"
            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.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; }"+
            "#simple-notifs-panel .notif { margin-bottom: 0.3em; }"+
            ".simple-notifs-done { font-size: 95%; margin-left: 0.35em; }");
    } );
} );