|
|
| (6 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | // Mineblocks-styled tooltips. Original code from Minecraft Wiki | + | /* Since there's no personal JS in this wiki, this code is run through an browser extension. */ |
| − | // (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 (/). | + | /* Syntax highlight script. */ |
| − | (function () { | + | if (document.body.classList.contains('action-edit')) { |
| − | var escapeChars = { '\\&': '&', '<': '<', '>': '>' };
| |
| − | var escape = function (text) {
| |
| − | // "\" must be escaped first
| |
| − | return text.replace(/\\\\/g, '\')
| |
| − | .replace(/\\&|[<>]/g, function (char) { return escapeChars[char]; });
| |
| − | };
| |
| − | var $tooltip = $();
| |
| − | var $win = $(window), winWidth, winHeight, width, height;
| |
| | | | |
| − | $('#mw-content-text').on({
| + | mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript'); |
| − | 'mouseenter.minetip': function (e) {
| |
| − | $tooltip.remove();
| |
| | | | |
| − | var $elem = $(this), title = $elem.attr('data-minetip-title');
| + | syntaxHighlighterConfig = { |
| − | if (title === undefined) {
| + | timeout: 500, |
| − | title = $elem.attr('title');
| + | boldOrItalicColor: '#44466d', |
| − | if (title !== undefined) {
| + | wikilinkColor: '#245477', |
| − | title = $.trim(title.replace(/&/g, '\\&'));
| + | externalLinkColor: '#244d491', |
| − | $elem.attr('data-minetip-title', title);
| + | headingColor: '#44466d', |
| − | }
| + | listOrIndentColor: '#4d1a19', |
| − | }
| + | signatureColor: '#66331e', |
| − | | + | tableColor: '#5e5129', |
| − | if (title === 'Empty') {
| + | templateColor: '#5e5129', |
| − | return;
| + | parameterColor: '#66331e', |
| − | }
| + | hrColor: '#44466d', |
| − | | + | tagColor: '#662946', |
| − | // No title or title only contains formatting codes
| + | commentColor: '#4d1a19', |
| − | if (title === undefined || title !== '' && title.replace(/&([0-9a-fl-or])/g, '') === '') {
| + | entityColor: '#474d23', |
| − | // Find deepest child title
| + | backgroundColor: '#212121', |
| − | var childElem = $elem[0], childTitle;
| + | foregroundColor: '#eee' |
| − | 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, '/');
| |
| − | 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
| + | /* Add true amount of displayed elements in a list page. */ |
| − | var top = e.clientY - 34;
| + | (function() { |
| − | var left = e.clientX + 14;
| + | const isSpecialPage = mw.config.get('wgNamespaceNumber') === -1, |
| | + | isInWhatLinksHere = mw.config.get('wgCanonicalSpecialPageName') === 'Whatlinkshere'; |
| | | | |
| − | // If going off the right of the screen, go to the left of the cursor
| + | if (!isSpecialPage && !isInWhatLinksHere) return; |
| − | if (left + width > winWidth) {
| |
| − | left -= width + 36;
| |
| − | }
| |
| | | | |
| − | // If now going off to the left of the screen, resort to going above the cursor
| + | const list = document.getElementById('mw-whatlinkshere-list'), |
| − | if (left < 0) {
| + | listElements = list.children, |
| − | left = 0;
| + | limit = Number(document.querySelector('input[name="limit"]').value), |
| − | top -= height - 22;
| + | listLength = listElements.length === limit ? `>=${listElements.length}` : listElements.length, |
| | + | totalElem = document.createElement('div'), |
| | + | totalCounterElem = document.createElement('b'); |
| | | | |
| − | // Go below the cursor if too high
| + | totalElem.classList.add('list-total-elements'); |
| − | if (top < 0) {
| + | totalElem.style.margin = '7px 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
| + | totalElem.innerText = 'Total amount of pages: '; |
| − | $tooltip.css({ top: top, left: left });
| + | totalCounterElem.innerText = listLength; |
| − | },
| |
| − | 'mouseleave.minetip': function () {
| |
| − | if (!$tooltip.length) {
| |
| − | return;
| |
| − | }
| |
| | | | |
| − | $tooltip.remove();
| + | list.insertAdjacentElement('beforebegin', totalElem); |
| − | $tooltip = $();
| + | totalElem.insertAdjacentElement('beforeend', totalCounterElem); |
| − | }
| |
| − | }, '.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()));
| |
| − | }
| |
