Difference between revisions of "User:Tobias Alcaraz/common.js"

Revision as of 16:12, 2 January 2022

// Imports
// NOTE: Jquery *should* be enabled by default on the wiki as of MediaWiki 1.17
//			 (source: //www.mediawiki.org/wiki/JQuery), so make sure it is
//			 enabled in the wiki configurations so we don't have to import it through JS.
mw.loader.load('//code.jquery.com/jquery-3.6.0.min.js');
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

// Mineblocks-styled tooltips. Original code from Minecraft Wiki
// (available under the CC-BY-NC-SA 3.0 license:
// creativecommons.org/licenses/by-nc-sa/3.0/):
// //minecraft.fandom.com/wiki/MediaWiki:Common.js by User:Majr.

// Replaces normal tooltips. Supports a description with line breaks (/).
(function () {
	var escapeChars = { '\\&': '&#38;', '<': '&#60;', '>': '&#62;' };
	var escape = function (text) {
		// "\" must be escaped first
		return text.replace(/\\\\/g, '&#92;')
			.replace(/\\&|[<>]/g, function (char) { return escapeChars[char]; });
	};
	var $tooltip = $();
	var $win = $(window), winWidth, winHeight, width, height;

	$('#mw-content-text').on({
		'mouseenter.minetip': function (e) {
			$tooltip.remove();

			var $elem = $(this), title = $elem.attr('data-minetip-title');
			if (title === undefined) {
				title = $elem.attr('title');
				if (title !== undefined) {
					title = $.trim(title.replace(/&/g, '\\&'));
					$elem.attr('data-minetip-title', title);
				}
			}

			if (title === 'Empty') {
				return;
			}

			// No title or title only contains formatting codes
			if (title === undefined || title !== '' && title.replace(/&([0-9a-fl-or])/g, '') === '') {
				// Find deepest child title
				var childElem = $elem[0], childTitle;
				do {
					if (childElem.hasAttribute('title')) {
						childTitle = childElem.title;
					}
					childElem = childElem.firstChild;
				} while (childElem && childElem.nodeType === 1);
				if (childTitle === undefined) {
					return;
				}

				// Append child title as title may contain formatting codes
				if (!title) {
					title = '';
				}
				title += $.trim(childTitle.replace(/&/g, '\\&'));

				// Set the retrieved title as data for future use
				$elem.attr('data-minetip-title', title);
			}

			if (!$elem.data('minetip-ready')) {
				// Remove title attributes so the native tooltip doesn't get in the way
				$elem.find('[title]').addBack().removeAttr('title');
				$elem.data('minetip-ready', true);
			}

			if (title === '' || title === 'Invisible-sprite') {
				return;
			}

			var content = '<span class="minetip-title">' + escape(title) + '&r</span>';

			var description = $.trim($elem.attr('data-minetip-text'));
			if (description) {
				// Apply normal escaping plus "/"
				description = escape(description).replace(/\\\//g, '&#47;');
				content += '<span class="minetip-description">' + description.replace(/\//g, '<br>') + '&r</span>';
			}

			// Remove reset formatting
			content = content.replace(/&r/g, '');

			$tooltip = $('<div id="minetip-tooltip">');
			$tooltip.html(content).appendTo('body');

			// Cache current window and tooltip size
			winWidth = $win.width();
			winHeight = $win.height();
			width = $tooltip.outerWidth(true);
			height = $tooltip.outerHeight(true);

			// Trigger a mouse movement to position the tooltip
			$elem.trigger('mousemove', e);
		},
		'mousemove.minetip': function (e, trigger) {
			if (!$tooltip.length) {
				$(this).trigger('mouseenter');
				return;
			}

			// Get event data from remote trigger
			e = trigger || e;

			// Get mouse position and add default offsets
			var top = e.clientY - 34;
			var left = e.clientX + 14;

			// If going off the right of the screen, go to the left of the cursor
			if (left + width > winWidth) {
				left -= width + 36;
			}

			// If now going off to the left of the screen, resort to going above the cursor
			if (left < 0) {
				left = 0;
				top -= height - 22;

				// Go below the cursor if too high
				if (top < 0) {
					top += height + 47;
				}
				// Don't go off the top of the screen
			} else if (top < 0) {
				top = 0;
				// Don't go off the bottom of the screen
			} else if (top + height > winHeight) {
				top = winHeight - height;
			}

			// Apply the positions
			$tooltip.css({ top: top, left: left });
		},
		'mouseleave.minetip': function () {
			if (!$tooltip.length) {
				return;
			}

			$tooltip.remove();
			$tooltip = $();
		}
	}, '.minetip, .invslot-item');
}());

/**
 * TimedSlider
 * //dev.wikia.com/wiki/TimedSlider
 *
 * Creates a basic slider that automatically shifts between slides
 * based on a user-specified timer (default once every 1.5 seconds)
 */
/*jshint forin:true, noempty:true, eqeqeq:true, bitwise:true, strict:false, undef:true, unused:true, curly:true, browser:true, jquery:true */
jQuery(function ($) {
	// tsanimate event
	function tsanimate() {
		var $container = $(this),
			$slides = $container.children(),
			$curr = $slides.filter('.ts-active'),
			$next = $curr.next();

		if ($next.length === 0) {
			$next = $slides.first();
		}

		$curr.removeClass('ts-active');
		$next.addClass('ts-active');
	}

	// initialize all timed sliders
	$('.ts-container').each(function () {
		var $container = $(this),
			$slides = $container.children(),
			delayms;

		// if there is more than 1 slide, finish initializing data and
		// turn on the tsanimate event for this slider
		if ($slides.length > 1) {
			delayms = $container.attr('data-delay-ms');
			if (typeof delayms === "string" || typeof delayms === "number") {
				delayms = delayms || 0;
				if (delayms < 100) {
					delayms = 100;
				}
			} else {
				delayms = 1500;
			}
			$container.data('delayms', delayms);
			$container.on('tsanimate', tsanimate);
			$container.trigger('tsanimate');
			var init = window.setInterval(function () {
				$container.trigger('tsanimate');
			}, delayms);
			// Pause animations on mouseover of a designated container (.ts-container)
			// This is so people have a chance to look at the image and click on pages they want to view.
			$container.mouseenter(function () {
				if (!$container.parents('.ts-sync').length) {
					clearInterval(init);
				}
			}).mouseleave(function () {
				if (!$container.parents('.ts-sync').length) {
					init = window.setInterval(function () {
						$container.trigger('tsanimate');
					}, delayms);
				}
			})
			// If the parent container has .ts-sync, all animations stop on mouseover
			// of said container.
			$('.ts-sync').each(function () {
				var $syncContainer = $(this);
				$syncContainer.mouseenter(function () {
					clearInterval(init);
				}).mouseleave(function () {
					init = window.setInterval(function () {
						$container.trigger('tsanimate');
					}, delayms);
				})
			});
		}
	});
});

// Syntax highlighter by User:Remember_the_dot
// //www.mediawiki.org/wiki/User:Remember_the_dot/Syntax_highlighter

// Change highlight colors depending on the user's theme.
// @note: This won't update dynamically if the users updates it while editing a
//				page. I'm not sure if it is a bug or the expected behavior from the
//				original script. This also doesn't support IE and old versions of Edge.
function setColorScheme(scheme) {
  switch(scheme) {
    case 'dark':
      syntaxHighlighterConfig = {
				backgroundColor: 'transparent',
				foregroundColor: 'unset',
				boldOrItalicColor: '#44466d',
				commentColor: '#4d1a19',
				entityColor: '#474d23',
				externalLinkColor: '',
				headingColor: '#44466d',
				hrColor: '#44466d',
				listOrIndentColor: '#4d1a19',
				parameterColor: '#66331e',
				signatureColor: '#66331e',
				tagColor: '#662946',
				tableColor: '#5e5129',
				templateColor: '#5e5129',
				wikilinkColor: '#245477',
			}
      break;
    case 'light':
      syntaxHighlighterConfig = {
				boldOrItalicColor: '#e4e5f3',
				commentColor: '#f8dbda',
				entityColor: '#e8ebda',
				externalLinkColor: '#dbeceb',
				headingColor: '#e4e5f3',
				hrColor: '#e4e5f3',
				listOrIndentColor: '#f8dbda',
				parameterColor: '#f5e0d8',
				signatureColor: '#f5e0d8',
				tagColor: '#f6dde9',
				tableColor: '#f0ebdb',
				templateColor: '#f0ebdb',
				wikilinkColor: '#d9eaf6',
			}
      break;
    default:
      syntaxHighlighterConfig = {
				boldOrItalicColor: '#e4e5f3',
				commentColor: '#f8dbda',
				entityColor: '#e8ebda',
				externalLinkColor: '#dbeceb',
				headingColor: '#e4e5f3',
				hrColor: '#e4e5f3',
				listOrIndentColor: '#f8dbda',
				parameterColor: '#f5e0d8',
				signatureColor: '#f5e0d8',
				tagColor: '#f6dde9',
				tableColor: '#f0ebdb',
				templateColor: '#f0ebdb',
				wikilinkColor: '#d9eaf6',
			}
      break;
  }
}

function getPreferredColorScheme() {
  if (window.matchMedia) {
    if(window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    } else {
      return 'light';
    }
  }
  return 'light';
}

if(window.matchMedia) {
  var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  colorSchemeQuery.addEventListener('change', setColorScheme(getPreferredColorScheme()));
}