MediaWiki:Common.js: Difference between revisions

/*
    Template:Spoiler on dev.miraheze.org
*/
$(function(){
    //spoiler block behavior
	$('.spoiler').click(function(){
		$(this).toggleClass('off');
	});
	// spoiler button behavior
    $('#spoilerbtn').text('Show all spoilers');
	$('#spoilerbtn').click(function(){
		$(this).toggleClass('hide');
		$('.spoiler').toggleClass('showall');
		
		if ($(this).is('.hide')){ $(this).text('Hide all spoilers'); } 
        else { $(this).text('Show all spoilers'); }
	});	
});

/**
 * TabberEX
 *
 * @version 2.3
 *
 * @author Jono99 <https://phigros.fandom.com/wiki/User:Jono99>
 *
 * documentation and examples at:
 * <https://dev.fandom.com/wiki/TabberEX>
 */
 
 (function (window, $, mw) {
	// Function called by tabs to switch tabs
	window.tabberex_switchTab = function(tabber_id, tab)
	{
		tabberex_hideAllTabs(tabber_id);
		tabberex_showTab(tabber_id, tab);
	};
 
	// Inject CSS
	(function() {
		var tabberex_css = document.createElement("style");
		tabberex_css.innerHTML = "/* CSS owned by FANDOM */\n.oo-ui-tabOptionWidget{display:inline-block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;vertical-align:bottom;align-items:center;color:color-mix(in srgb, var(--text-color) 75%, transparent);display:inline-flex;font-size:14px;font-weight:500;height:40px;letter-spacing:.5px;margin:0;padding:0 11px;-webkit-transition:var(--content-background-color) .3s,color .3s,var(--banner-color) .3s;-moz-transition:var(--content-background-color) .3s,color .3s,var(--banner-color) .3s;transition:var(--content-background-color) .3s,color .3s,var(--banner-color) .3s}.oo-ui-tabSelectWidget:not(.oo-ui-tabSelectWidget-framed) .oo-ui-tabOptionWidget{-webkit-transition:color .3s,box-shadow .3s;-moz-transition:color .3s,box-shadow .3s;transition:color .3s,box-shadow .3s;border-bottom:1px solid var(--banner-color)}.oo-ui-tabSelectWidget:not(.oo-ui-tabSelectWidget-framed) .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected{box-shadow:inset 0 -2px 0 0 var(--link-color);color:var(--link-color)}";
		document.head.appendChild(tabberex_css);
	})();
		
	window.tabberex_showTab = function(tabber_id, i)
	{
		var base_selector = "[data-tabber-id=\"" + tabber_id + "\"]";
		$(".tabberex-head" + base_selector).children(":nth-child(" + i + ")")
		.addClass("oo-ui-optionWidget-selected")
		.css("cursor", "default");
				
		$($(".tabberex-body" + base_selector).children(":nth-child(" + i + ")").get()).each(function () {
            var display_value = $(this).attr("data-tab-display");
            if (display_value === undefined) display_value = "block";
            $(this).css("display", display_value);
        });
	};
	 
	window.tabberex_hideTab = function(tabber_id, i)
	{
		var base_selector = "[data-tabber-id=\"" + tabber_id + "\"]";
		$(".tabberex-head" + base_selector).children(":nth-child(" + i + ")")
		.removeClass("oo-ui-optionWidget-selected")
		.css("cursor", "pointer");
				
		$(".tabberex-body" + base_selector).children(":nth-child(" + i + ")").css("display", "none");
	};
			
	window.tabberex_hideAllTabs = function(tabber_id)
	{
		var base_selector = "[data-tabber-id=\"" + tabber_id + "\"]";
		$(".tabberex-head" + base_selector).children()
		.removeClass("oo-ui-optionWidget-selected")
		.css("cursor", "pointer");
				
		$(".tabberex-body" + base_selector).children().css("display", "none");
	};
	
	var tabberex_buildTabHead = function(host_div, tabber_id, tab_headers, tab_ex_headers, tab_locations)
	{
		var tabber_head = host_div;
		tabber_head.innerHTML = "";
		$(tabber_head).addClass("tabberex-head oo-ui-widget oo-ui-widget-enabled oo-ui-selectWidget oo-ui-selectWidget-unpressed oo-ui-selectWidget-depressed oo-ui-tabSelectWidget")
		.attr("data-tabber-id", tabber_id);
		for (var i = 0; i < tab_headers.length; i++)
		{
			console.log("Building tab " + tabber_id + " " + String(i));
			var tab = document.createElement("div");
			$(tab).addClass("oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-optionWidget oo-ui-tabOptionWidget")
			.css("cursor", "pointer");
			if (tab_locations[i] === undefined)
				$(tab).attr("onclick", "tabberex_switchTab(\"" + mw.html.escape(tabber_id) + "\", " + (i + 1) + ")");
			else
				$(tab).attr("onclick", "location = \"" + mw.html.escape(tab_locations[i]) + "\"");
			var tab_span = document.createElement("span");
			$(tab_span).addClass("oo-ui-labelElement-label");
			if (tab_ex_headers[i] === undefined)
				$(tab_span).text(tab_headers[i]);
			else
			{
				console.log("EX Header present");
				for (var attr in tab_ex_headers[i][1])
					tab_span.setAttribute(attr, tab_ex_headers[i][1][attr]);
				$(tab_span).html(tab_ex_headers[i][0]);
			}
			tab.appendChild(tab_span);
			tabber_head.appendChild(tab);
			console.log("Successfully built tab");
		}
		return tabber_head.outerHTML;
	};
	
	var process_tabber_head_tab = function(tab_element, i)
	{
		// Get header
		var header = $(tab_element).attr("data-tab-header");
		if (header === undefined) header = i + 1;
		
		// Get ex header
		var ex_header;
		function get_ex_header(_) {
			console.log('EX Header found');
			var attributes = {};
			var attrs = this.getAttributeNames();
			for (var i in attrs)
				attributes[attrs[i]] = this.getAttribute(attrs[i]);
			ex_header = [$(this).html(), attributes];
			$(this).remove();
		}
		$(tab_element).children("p").children("span.tabberex-tab-header").each(get_ex_header);
		$(tab_element).children("span.tabberex-tab-header").each(get_ex_header);
		
		// Get default
		var is_default = false;
		if ($(tab_element).hasClass("tabberex-tab-default"))
			is_default = true;
		
		// Get tab location
		var tab_location = $(this).attr("data-tab-location");
		
		return {"header": header, "ex_header": ex_header, "default": is_default, "location": tab_location};
	};
	
	var process_tabbers = function()
	{
		console.log('TabberEX started');
		var tabber_i = 0;
		var default_tabs = {};
		var tabber_ids = [];
		// The tabs are iterated through backwards to properly handle tabbers that are nested within other tabbers
		$($(".tabberex-head").get().reverse()).each(function() {
			var tab_headers = [];
			var tab_ex_headers = [];
			var tab_locations = [];
			var default_tab = 0;
				
			var tabber_id = $(this).attr("data-tabber-id");
			if (tabber_id === undefined) tabber_id = String(tabber_i);
				
			$(this).children(".tabberex-tab").each(function(i) {
				console.log('Processing head tab ' + tabber_id + ' ' + String(i));
				var tab_details = process_tabber_head_tab(this, i);
				console.log('Processing complete');
				tab_headers[i] = tab_details.header;
				tab_ex_headers[i] = tab_details.ex_header;
				if (tab_details.default)
					default_tab = i;
				tab_locations[i] = tab_details.location;
				$(this).detach();
			});
			
			// Insert tabs into DOM
			tabberex_buildTabHead(this, tabber_id, tab_headers, tab_ex_headers, tab_locations);
			if (default_tabs[tabber_id] === undefined)
				default_tabs[tabber_id] = default_tab;
			tabber_ids.push(tabber_id);
			tabber_i++;
		});
		
		$($(".tabberex-body").get().reverse()).each(function() {
			$(this).children().css("display", "none");
		});
		
		$($(".tabberex").get().reverse()).each(function() {
			var tab_headers = [];
			var tab_ex_headers = [];
			var tab_locations = [];
			var default_tab = 0;
			var tab_contents = [];
			
			var tabber_id = $(this).attr("data-tabber-id");
			if (tabber_id === undefined) tabber_id = String(tabber_i);
            $(this).attr("data-tabber-id", tabber_id);

            var tabber_head = document.createElement("div");
            $(tabber_head).addClass("tabberex-head").attr("data-tabber-id", tabber_id);
            $(this).removeClass("tabberex").addClass("tabberex-body");
			
			$(this).children(".tabberex-tab").each(function(i) {
				console.log('Processing head tab ' + tabber_id + ' ' + String(i));
				var tab_details = process_tabber_head_tab(this, i);
				console.log('Processing complete');
				tab_headers[i] = tab_details.header;
				tab_ex_headers[i] = tab_details.ex_header;
				if (tab_details.default)
					default_tab = i;
				tab_locations[i] = tab_details.location;
				
				// Get tab content
				$(this).css("display", "none");
				tab_contents[i] = $(this);
			});

            tabberex_buildTabHead(tabber_head, tabber_id, tab_headers, tab_ex_headers, tab_locations);
			if (default_tabs[tabber_id] === undefined)
				default_tabs[tabber_id] = default_tab;
            $(tabber_head).insertBefore(this);
			tabber_ids.push(tabber_id);
			tabber_i++;
		});
		
		// Select default tabs
		for (var i in tabber_ids)
		{
			tabberex_showTab(tabber_ids[i], default_tabs[tabber_ids[i]] + 1);
		}
	};
 
	mw.hook("wikipage.content").add(process_tabbers);
}(this, jQuery, mediaWiki));

/*
 * @title           SoundcloudPlayer.js
 * @version         1.1.2
 * @description     Add support for soundcloud players
 * @author          Himmalerin
 * @license         CC-BY-SA-3.0
 */
(function () {
	// Build the iframe
	const scPlayer = function (data) {
		const widget = document.createElement('iframe');

		widget.classList.add('soundcloud-player');

		widget.src =
			'https://w.soundcloud.com/player/?show_artwork=false&url=' +
			encodeURI(data.src);

		// If data-color is set add the value to the iframe
		if (data.color) widget.src += '&color=' + encodeURIComponent(data.color);
		// If data-width/height are set add that value to the iframe
		if (data.width) widget.width = data.width;
		if (data.height) widget.height = data.height;

		return widget;
	};

	const scParseTags = function ($content) {
		// Get all instances of the soundcloud class
		const scTags = $content.find('.soundcloud');

		// For each instance of the soundcloud class run scPlayer
		for (var i = 0; i < scTags.length; i++) {
			scTags[i].replaceWith(scPlayer(scTags[i].dataset));
		}
	};

	mw.hook('wikipage.content').add(function ($content) {
		scParseTags($content);
	});
})();

/*
https://dev.fandom.com/wiki/MediaWiki:CopyText/code.js
 */
(function () {
    if (window.CopyTextLoaded) {
        return;
    }
    window.CopyTextLoaded = true;
    mw.hook('dev.i18n').add(function (i18n) {
        i18n.loadMessages('CopyText').done(function (i18n) {
            function showSuccess() {
                if (window.BannerNotification) {
                    new BannerNotification(i18n.msg('success').escape(), 'confirm', null, 5000).show();
                } else {
                    mw.notify(i18n.msg('success').plain());
                }
            }
            $('body').on('click', '.copy-to-clipboard-button', function(e){
                var text = $(this).data('text'),
                $input = $('<textarea>', { type: 'text' })
                    .val($('.copy-to-clipboard-text').filter(function() {
                        return $(this).data('text') == text;
                    }).first().text())
                    .appendTo('body')
                    .select();
                var success = document.execCommand('Copy');
                $input.remove();
                if (success) {
                    showSuccess();
                } else {
                    if (window.navigator && navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(text).then(function() {
                            showSuccess();
                        });
                    }
                }
            });
        });
    });
    importArticle({
        type: 'script',
        article: 'u:dev:MediaWiki:I18n-js/code.js'
    });
})();