|
|
| Line 1: |
Line 1: |
| (function ($, mw) {
| |
|
| |
| function formatRelativeTime(timestamp) {
| |
| var then = new Date(timestamp).getTime();
| |
| var now = Date.now();
| |
| var diffSeconds = Math.round((now - then) / 1000);
| |
| var abs = Math.abs(diffSeconds);
| |
|
| |
| var value;
| |
| var short;
| |
|
| |
| if (abs < 60) {
| |
| short = 's';
| |
| value = diffSeconds;
| |
| } else if (abs < 3600) {
| |
| short = 'm';
| |
| value = Math.round(diffSeconds / 60);
| |
| } else if (abs < 86400) {
| |
| short = 'h';
| |
| value = Math.round(diffSeconds / 3600);
| |
| } else {
| |
| short = 'd';
| |
| value = Math.round(diffSeconds / 86400);
| |
| }
| |
|
| |
| var n = Math.abs(value);
| |
|
| |
| return diffSeconds < 0 ? 'in ' + n + short : n + short + ' ago';
| |
| }
| |
|
| |
| function getDiffUrl(item) {
| |
| if (item.revid && item.old_revid && parseInt(item.old_revid, 10) > 0) {
| |
| return mw.util.getUrl('Special:Diff/' + item.revid + '/' + item.old_revid);
| |
| }
| |
|
| |
| if (item.revid) {
| |
| return mw.util.getUrl('Special:Diff/' + item.revid);
| |
| }
| |
|
| |
| return mw.util.getUrl('Special:RecentChanges');
| |
| }
| |
|
| |
| function renderWidget($root, items) {
| |
| var $list = $('<ul class="vector-menu-content-list recent-changes-list"></ul>');
| |
|
| |
| items.forEach(function (item, index) {
| |
| var id = 'n-change' + (index + 1);
| |
| var userName = item.user || 'Unknown';
| |
| var timeText = formatRelativeTime(item.timestamp);
| |
| var diffUrl = getDiffUrl(item);
| |
|
| |
| var $li = $('<li class="mw-list-item recent-changes-item"></li>')
| |
| .attr('id', id);
| |
|
| |
| var $titleLink = $('<a class="recent-changes-title"></a>')
| |
| .attr('href', mw.util.getUrl(item.title))
| |
| .attr('title', item.title)
| |
| .append($('<span></span>').text(item.title));
| |
|
| |
| var $userLink;
| |
| if (item.user) {
| |
| $userLink = $('<a class="recent-changes-user"></a>')
| |
| .attr('href', mw.util.getUrl('Special:Contributions/' + item.user))
| |
| .text(userName);
| |
| } else {
| |
| $userLink = $('<span class="recent-changes-user"></span>').text(userName);
| |
| }
| |
|
| |
| var $timeLink = $('<a class="recent-changes-time"></a>')
| |
| .attr('href', diffUrl)
| |
| .attr('title', 'View diff for ' + item.title)
| |
| .text(timeText);
| |
|
| |
| var $meta = $('<div class="recent-changes-meta"></div>')
| |
| .append($timeLink)
| |
| .append(document.createTextNode(' · '))
| |
| .append($userLink);
| |
|
| |
| $li.append($titleLink).append($meta);
| |
| $list.append($li);
| |
| });
| |
|
| |
| var $moreLi = $('<li class="mw-list-item recent-changes-item"></li>')
| |
| .attr('id', 'n-change-more');
| |
|
| |
| var $moreLink = $('<a class="recent-changes-title"></a>')
| |
| .attr('href', mw.util.getUrl('Special:RecentChanges'))
| |
| .append($('<span></span>').text('Show more...'));
| |
|
| |
| $moreLi.append($moreLink);
| |
| $list.append($moreLi);
| |
|
| |
| $root.empty().append($list);
| |
| }
| |
|
| |
| function loadRecentEdits($root) {
| |
| var limit = parseInt($root.data('limit'), 10) || 5;
| |
|
| |
| return new mw.Api().get({
| |
| action: 'query',
| |
| list: 'recentchanges',
| |
| rcprop: 'title|timestamp|user|ids|flags',
| |
| rctype: 'edit|new',
| |
| rcnamespace: 0,
| |
| rclimit: limit
| |
| }).then(
| |
| function (data) {
| |
| var items = [];
| |
|
| |
| if (data && data.query && data.query.recentchanges) {
| |
| items = data.query.recentchanges;
| |
| }
| |
|
| |
| renderWidget($root, items);
| |
| },
| |
| function () {
| |
| $root.html(
| |
| '<div class="recent-changes-error">Could not load recent changes.</div>'
| |
| );
| |
| }
| |
| );
| |
| }
| |
|
| |
| function initWidget($root) {
| |
| var refreshMs = parseInt($root.data('refresh'), 10) || 300000;
| |
|
| |
| $root.html(
| |
| '<div class="recent-changes-loading">Loading recent changes…</div>'
| |
| );
| |
|
| |
| function refresh() {
| |
| loadRecentEdits($root);
| |
| }
| |
|
| |
| refresh();
| |
| window.setInterval(refresh, refreshMs);
| |
| }
| |
|
| |
| function injectSidebarWidget() {
| |
| if ($('#p-recent-changes').length) {
| |
| return $('#p-recent-changes .recent-changes-widget');
| |
| }
| |
|
| |
| var $portlet = $(
| |
| '<nav id="p-recent-changes" class="mw-portlet mw-portlet-recent-changes vector-menu-portal portal vector-menu" aria-labelledby="p-recent-changes-label">' +
| |
| '<h3 id="p-recent-changes-label" class="vector-menu-heading">' +
| |
| '<span class="vector-menu-heading-label">Recent Changes</span>' +
| |
| '</h3>' +
| |
| '<div class="vector-menu-content">' +
| |
| '<div class="recent-changes-widget" data-limit="4" data-refresh="300000"></div>' +
| |
| '</div>' +
| |
| '</nav>'
| |
| );
| |
|
| |
| $('#p-Navigation').after($portlet);
| |
|
| |
| return $portlet.find('.recent-changes-widget');
| |
| }
| |
|
| |
| $(function () {
| |
| var $widget = $('.recent-changes-widget');
| |
|
| |
| if (!$widget.length) {
| |
| $widget = injectSidebarWidget();
| |
| }
| |
|
| |
| $widget.each(function () {
| |
| initWidget($(this));
| |
| });
| |
| });
| |
|
| |
| }(jQuery, mediaWiki));
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|