MediaWiki:Gadget-RCSidebar.js

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
• Opera: Pressione Ctrl-F5.

const RECENT_CHANGES_MAX = 5;
const RECENT_CHANGES_NS = 0;
const RECENT_CHANGES_TYPES = ["new", "edit"];
const RECENT_CHANGES_PROPS = ["title", "ids", "user", "userid", "timestamp"];

const THUMBNAIL_PLACEHOLDER_HTML = `<span class="cdx-thumbnail__placeholder"><span class="cdx-icon cdx-icon--medium cdx-thumbnail__placeholder__icon--vue"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><!--v-if--><g><path d="M19 3H1v14h18zM3 14l3.5-4.5 2.5 3L12.5 8l4.5 6z"></path><path d="M19 5H1V3h18zm0 12H1v-2h18z"></path></g></svg></span></span>`;

(() => {
	"use strict";
	
	const moment = mw.loader.require("moment");
	const container = $('.vector-sticky-pinned-container')[0];
	if (!container) {
		return;
	}
	
	const RCMenu = $("<div>", { class: 'vector-menu' });
	const menuHeading = $("<div>", { class: 'vector-menu-heading' });
	menuHeading.text(mw.msg('gadget-rcsidebar-title'));
	
	const menuContent = $('<div>', { class: 'vector-menu-content' });
	const menuContentList = $('<ul>', { class: 'vector-menu-content-list'});
	menuContentList.appendTo(menuContent);
	
	const api = new mw.Api();
	const now = moment(new Date());
	
	const apiCalls = [
		api.get({
			action: "query",
			list: "recentchanges",
			rcprop: RECENT_CHANGES_PROPS.join("|"),
			rclimit: RECENT_CHANGES_MAX * 10, // In case of duplicates...
			rcshow: "!bot",
			rctype: RECENT_CHANGES_TYPES.join("|"),
			rcnamespace: RECENT_CHANGES_NS,
		}),
		api.get({
			action: "query",
			generator: "recentchanges",
			grcnamespace: RECENT_CHANGES_NS,
			grclimit: RECENT_CHANGES_MAX * 10,
			grcshow: "!bot",
			prop: "pageimages",
		}),
	];
	
	Promise.all(apiCalls).then(([recentChanges, recentChangesPageProps]) => {
		const seenPages = new Set();
		
		for (const recentChange of recentChanges.query.recentchanges) {
			if (seenPages.size >= RECENT_CHANGES_MAX) {
				break;
			}
			if (seenPages.has(recentChange.pageid)) {
				continue;
			}
			seenPages.add(recentChange.pageid);
			
			/* In an alternate universe where we iterate over pageProps
			const recentChange = recentChanges.query.recentchanges.find(rc => rc.pageid === pageProps.pageid);
			if (!recentChange) {
				console.warn(`RCSidebar: Could not find RC info for page ${pageProps.pageid}.`);
			}
			*/
			
			const pageProps = recentChangesPageProps.query.pages[recentChange.pageid];
			if (!pageProps) {
				console.warn(`RCSidebar: Could not find page props for ${recentChange.pageid}.`);
			}

			const recentChangeItem = $("<li>", { class: "mw-list-item rc-sidebar-item" });
			
			// Thumbnail
			const recentChangeThumbnail = $("<span>", { class: "cdx-thumbnail rc-sidebar-item-thumbnail" });
			let thumbnailSource;
			if (pageProps && pageProps.thumbnail) {
				thumbnailSource = pageProps.thumbnail.source;
			}
			
			if (thumbnailSource) {
				$("<span>", { class: "cdx-thumbnail__image", style: `background-image: url(${thumbnailSource})` })
					.appendTo(recentChangeThumbnail);
			} else {
				recentChangeThumbnail.html(THUMBNAIL_PLACEHOLDER_HTML);
			}
			recentChangeThumbnail.appendTo(recentChangeItem);
	
			const recentChangeBody = $("<span>", { class: "rc-sidebar-item-body" });
			const recentChangeTitle = $("<a>", { class: "rc-sidebar-item-title", href: mw.util.getUrl(recentChange.title) });
			const recentChangeTitleText = $("<span>", { class: "rc-sidebar-item-title-text" });
			recentChangeTitleText.text(recentChange.title);
			recentChangeTitleText.appendTo(recentChangeTitle);
			recentChangeTitle.appendTo(recentChangeBody);
			
			const changeTimestamp = moment(recentChange.timestamp);
			
			const recentChangeDescription = $("<span>" , { class: "rc-sidebar-item-description" });
			
			const recentChangeTimestampLink = $("<a>", {
				class: "rc-sidebar-item-description-link",
				href: mw.util.getUrl(recentChange.title, {
					diff: recentChange.revid
				})
			});
			recentChangeTimestampLink.text(moment.duration(changeTimestamp.diff(now)).humanize(true));
			
			recentChangeTimestampLink.appendTo(recentChangeDescription);
			recentChangeDescription.append("&bull;");
			
			const recentChangeUserLink = $("<a>", { class: 'rc-sidebar-item-description-link', href: mw.Title.makeTitle(2, recentChange.user).getUrl() });
			recentChangeUserLink.text(recentChange.user);
			recentChangeUserLink.appendTo(recentChangeDescription);
			
			recentChangeDescription.appendTo(recentChangeBody);
			
			recentChangeBody.appendTo(recentChangeItem);
			
			recentChangeItem.appendTo(menuContentList);
		}
		
		menuHeading.prependTo(RCMenu);
		menuContent.appendTo(RCMenu);
		RCMenu.appendTo(container);
	}).catch(err => {
		console.error(`Failed to fetch RC data for RCSidebar: `, err);
	});
})();