MediaWiki:Gadget-recentChanges.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
/**
 *		Recent changes sidebar gadget for both Vector and Citizen skin
 *		Originally created by @author JaydenKieran from RunescapeWiki
**/
"use strict";


(function($, mw) {
    var $prependTo;
    var $rcContainer;
    var recentChanges;
    var $recentChangesDOM;
    var $final;
    
    var citizen = mw.config.get('skin') == 'citizen';
    var vector = mw.config.get('skin') == 'vector';

    function init() {
        $prependTo = $('#p-navigation');
        var api = new mw.Api();
        
        //Adopting different structures for different skins
        if (citizen) {
        	$final = $('<ul>').after($rcContainer);
			var $div = $('<div>').text('Recent changes')
        		.addClass('citizen-menu__heading');
	        $rcContainer = $('<nav>')
				.addClass('citizen-menu mw-portlet mw-portlet-RecentChanges')
				.attr('id', 'p-RecentChanges')
				.append($div)
				.append($final);
        }
        
        // Add the container to the sidebar
        $prependTo.after($rcContainer)

        api.get({
                action: "query",
                list: "recentchanges",
                rcprop: "title|timestamp|sizes|user",
                rcnamespace: "0|3000",
                rclimit: "5",
                rctype: "edit|new",
                rcshow: "!bot|!redirect",
                rctoponly: 1,
                format: "json"
            })
            .done(function(data) {
                if (data.query && data.query.recentchanges) {
                    recentChanges = data.query.recentchanges
                }

                if (recentChanges.length > 0) {
                    var Time = 1;
                    $recentChangesDOM = recentChanges.map(function(rc) {
                        const timeMatch = rc.timestamp.match(/([0-9]+)-([0-9]+)-([0-9]+)T([0-9]+):([0-9]+):([0-9]+)Z/);
                    	var editYear = timeMatch[1];
                    	var editMonth = timeMatch[2];
                    	var editDay = timeMatch[3];
                    	var editHour = timeMatch[4];
                    	var editMinute = timeMatch[5];
                    	var editSecond = timeMatch[6];
                    	
                    	var editDate = new Date(editYear, (editMonth-1), editDay, editHour, editMinute, editSecond);
						var currentDate = new Date();
						currentDate = currentDate.getTime() + (currentDate.getTimezoneOffset() * 60000)
						var diffDate = currentDate - editDate;
						var diffDays = Math.floor(diffDate/(1000*60*60*24));
						var diffHours = Math.floor(diffDate/(1000*60*60));
						var diffMinutes = Math.floor(diffDate/(1000*60));
						var diffSeconds = Math.floor(diffDate/(1000));
						
						if (diffDays > 0) {
							Time = diffDays + 'd ago – ';
						} else if (diffHours > 0) {
							Time = diffHours + 'h ago – ';
						} else if (diffMinutes > 0) {
							Time = diffMinutes + 'm ago – ';
						} else if (diffSeconds > 0) {
							Time = diffSeconds + 's ago – ';
						} else {
							Time = 1 + Math.floor(Math.random() * 10) + 'm ago – ';
						}
						if (citizen) {
							var $a = $('<a>')
	                            .css('white-space', 'normal')
	                            .addClass('rc-sidebar-page')
	                            .css({
	                            	'padding-top': '0.25em',
	                            	'padding-bottom': '0.25em'
	                            })
	                            .text(' ' + rc.title)
	                            .attr('href', new mw.Title(rc.title).getUrl());
	                        var $p = $('<p>')
	                            .css({
	                            	'text-align': 'right',
	                            	'margin-right': '2.5em'
	                            	})
	                            .addClass('rc-sidebar-user')
	                            .text(Time)
	                            .append(
	                                $('<a>')
	                                .css({
	                            	'display' : 'contents',
	                            	'padding' : '0px'
	                                })
	                                .text(rc.user)
	                                .attr('href', new mw.Title(rc.user, 2).getUrl())
	                            );
	                        return $('<li>').addClass('mw-list-item').append($a,$p);
                        }
                    })
                } else {
                    $recentChangesDOM = $('<p>').text('No recent changes.')
                }
                if (vector) {
                	$final = $rcContainer;
                }
                $final.append($recentChangesDOM)
                var $showMore
				$showMore = $('<div>')
                	.addClass('rc-sidebar-item rc-sidebar-more')
                	.append(
                		$('<a>')
                		.addClass('rc-sidebar-page')
                		.text('See more...')
                		.attr('href', '/wiki/Special:RecentChanges')
                )
                $final.append($showMore)
            })
            .fail(function(_, data) {
                alert(data.error.info)
            });
    }

    mw.loader.using(['mediawiki.util', 'mediawiki.api'], function() {
        $(init)
    })
}(jQuery, mediaWiki));