MediaWiki:Gadget-editorwarnings.js

var elemsByWarningHash = {};
var currentWarnings = {};

/*
Update the set of currently visible warnings.
An empty set will remove previous warnings of the set.

Example:
	// Show two warnings
	setEditorWarnings('called-from-example', [
		{
			type: 'warning',
			message: 'Message shown below textarea (warning 1)',
		},
		{
			type: 'confirm',
			introHtml: 'Explanation of the potential problem (warning 2)',
			checkboxLabel: 'Yes, I know what I am doing',
		},
	]);

	setEditorWarnings('another-example', [
		{ type: 'warning', message: 'Will be kept (warning 3)' },
	]);

	// Remove the warnings 1 and 2, by using the same namespace.
	setEditorWarnings('called-from-example', []);
*/
window.setEditorWarnings = function(namespace, newWarnings) {
	newWarnings = getWarningsByHash(namespace, newWarnings || []);

	var oldWarnings = currentWarnings[namespace] || {};
	var toAdd = $();
	var forRemoval = $();

	// Remove old warnings
	for (var hash in oldWarnings) {
		if (!newWarnings[hash]) {
			forRemoval = forRemoval.add(elemsByWarningHash[hash]);
		}
	}

	// Add new warnings
	for (var hash in newWarnings) {
		if (!oldWarnings[hash]) {
			elemsByWarningHash[hash] = createElem(newWarnings[hash])
				.appendTo(getContainer(newWarnings[hash].type))
				.hide();
			toAdd = toAdd.add(elemsByWarningHash[hash]);
		}
	}

	currentWarnings[namespace] = newWarnings;

	if (toAdd.length == forRemoval.length) {
		// Prevent animation when a warning is replaced by another.
		toAdd.show();
		forRemoval.remove();
		cleanup();
	} else {
		toAdd.slideDown('fast');
		
		if (forRemoval.length) {
			forRemoval.slideUp('fast', function() {
				forRemoval.remove();
				cleanup();
			});
		} else {
			cleanup();
		}
	}
};

function cleanup() {
	$('.editorwarnings:empty').remove();

	if ($('.editorwarnings').length) {
		$('html').addClass('editorwarnings-active');
	} else {
		$('html').removeClass('editorwarnings-active');
	}
}

function createElem(warning) {
	switch (warning.type) {
		case 'warning':
			if (warning.message.indexOf('<') === -1 && warning.message.indexOf("'") !== -1) {
				// Transform italic to HTML, but only if the text isn't dangerous (e.g. containing `<`).
				var start = false;
				return $('<p>', {
					html: warning.message.replace(/''/g, function () {
						start = !start;
						return start ? '<i>' : '</i>';
					})
				});
			}
			return $('<p>', { text: warning.message });

		case 'confirm':
			var parent = $('<div>').append(
				$('<p>', { class: 'intro', html: warning.introHtml })
			);
			mw.loader.using(['oojs-ui'], function () {
				var field = new OO.ui.FieldLayout(
					new OO.ui.CheckboxInputWidget(),
					{ label: warning.checkboxLabel, align: 'inline' }
				);
				parent.append(field.$element);
			});
			return parent;

		default:
			console.error('Unknown warning type "' + warning.type + '"', warning);
			return $();
	}
}

function getContainer(warningType) {
	var id = 'editorwarnings-' + warningType;
	if ($('#' + id).length) {
		return $('#' + id);
	}

	switch (warningType) {
		case 'warning':
			var outer = $(id + '-outer');
			if (!outer.length) {
				outer = $('<div>', { id: id + '-outer' }).insertBefore(
					'.editOptions'
				);
			}

			return $('<div>', { id: id, class: 'editorwarnings' }).appendTo(outer);

		case 'confirm':
			return $('<div>', { id: id, class: 'editorwarnings' }).prependTo(
				'#editform'
			);

		default:
			return $();
	}
}

function getWarningsByHash(namespace, warnings) {
	return warnings.reduce(function(byHash, warning) {
		byHash[getHash(namespace, warning)] = warning;

		return byHash;
	}, {});
}

function getHash(namespace, warning) {
	return namespace + JSON.stringify(warning);
}

$(function() {
	// Prevent saving, unless the confirmation checkbox has been checked
	$('#wpSave').on('mousedown click', function(e) {
		var unchecked = $('#editorwarnings-confirm :checkbox:not(:checked)');

		if (unchecked.length) {
			e.preventDefault();
			e.stopImmediatePropagation();

			unchecked
				.closest('.editorwarnings')
				.addClass('editorwarnings-highlight')[0]
				.scrollIntoView();
			unchecked.focus();

			setTimeout(function() {
				$('.editorwarnings-highlight').removeClass(
					'editorwarnings-highlight'
				);
			}, 500);
		}
	});
});