User:BrandonXLF/CompareRevisions.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.

/*** Compare Revisions ***/

// Adds a button to the diff page to compare two revisions side-by-side
// Documentation at [[en:w:User:BrandonXLF/CompareRevisions]]
// By [[en:w:User:BrandonXLF]]

$.when(mw.loader.using('oojs-ui'), $.ready).then(function() {
	var cache = {};

	mw.hook('wikipage.diff').add(function() {
		var oldId = mw.config.get('wgDiffOldId'),
			newId = mw.config.get('wgDiffNewId'),
			bar = new OO.ui.ButtonSelectWidget({items: [
				new OO.ui.ButtonOptionWidget({
					label: 'Diff',
					data: 'diff'
				}),
				new OO.ui.ButtonOptionWidget({
					label: 'Compare',
					data: 'compare'
				}),
				new OO.ui.ButtonOptionWidget({
					label: 'Compare Wikitext',
					data: 'wikitext'
				})
			]}),
			compareArea = $('<div>').attr('id', 'comparerevisions-area');

		if (!oldId || !newId) return;

		function showComparison(cachePrefix, displayFunc, getFunc) {
			var compareOld = $('<div>').addClass('comparerevisions-side'),
				compareNew = $('<div>').addClass('comparerevisions-side');

			function showRevision(revId, el) {
				var cacheKey = cachePrefix + '-' + revId;

				compareArea.append(
					el.append(
						$('<div>').css('text-align', 'center').text('Loading...')
					)
				);

				if (cache[cacheKey]) {
					displayFunc(el.empty(), cache[cacheKey], revId);
				} else {
					getFunc(revId).done(function(data) {
						cache[cacheKey] = data;
						displayFunc(el.empty(), cache[cacheKey], revId);
					});
				}
			}

			showRevision(oldId, compareOld);
			showRevision(newId, compareNew);
		}

		$('.diff-title').after(
			$('<tr>').append(
				$('<td>').attr('colspan', '4').append(compareArea)
			)
		);

		bar.$element.css({
			float: 'left',
			margin: $('.ve-init-mw-diffPage-diffMode').length ? '0 0 0 8px' : '8px 0'
		});

		if ($('.ve-init-mw-diffPage-diffMode').length) {
			$('.ve-init-mw-diffPage-diffMode').append(bar.$element);
		} else if ($('.mw-revslider-container').length) {
			$('.mw-revslider-container').after(bar.$element);
		} else {
			$('#mw-content-text').prepend(bar.$element);
		}

		bar.on('select', function(e) {
			mw.storage.set('comparerevisions-lastview', e.data);

			compareArea.empty();

			if (e.data == 'compare') {
				showComparison(
					'compare',
					function(el, html, revId) {
						el.html(html);
						el.find('[for="toctogglecheckbox"]').attr('for', 'toctogglecheckbox-' + revId);
						el.find('#toctogglecheckbox').attr('id', 'toctogglecheckbox-' + revId);
					},
					function(revId) {
						return $.get(mw.config.get('wgScriptPath') + '/api.php', {
							action: 'parse',
							oldid: revId,
							prop: 'text',
							format: 'json'
						}).then(function(res) {
							return res.parse.text['*'];
						});
					}
				);
			} else if (e.data == 'wikitext') {
				showComparison(
					'wikitext',
					function(el, text) {
						el.append(
							$('<pre></pre>').text(text)
						);
					},
					function(revId) {
						return $.get(mw.config.get('wgScript'), {
							action: 'raw',
							oldid: revId
						});
					}
				);
			}
		});

		bar.selectItemByData(mw.storage.get('comparerevisions-lastview') || 'diff');
	});

	mw.loader.addStyleTag(
		'#comparerevisions-area { border-spacing: 0; }' +
		'.comparerevisions-side { width: 50%; padding: 3px 10px; box-sizing: border-box; float: left; }'
	);
});