Wikimedia Meta-Wiki

User:魔琴/previewSkin/index.js

< User:魔琴‎ | previewSkin

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
 * From Vandoom
 */
// <nowiki>

(function (window, document, $) { // Wrap with anonymous function

var previewSkin = {};
window.previewSkin = previewSkin;  // Allow global access

previewSkin.defaultConfig = {};

/**
 * This holds the default set of preferences used by Twinkle.
 * It is important that all new preferences added here, especially admin-only ones, are also added to
 * |Twinkle.config.sections| in twinkleconfig.js, so they are configurable via the Twinkle preferences panel.
 * For help on the actual preferences, see the comments in twinkleconfig.js.
 *
 * Formerly Twinkle.defaultConfig.twinkle and Twinkle.defaultConfig.friendly
 */
 
previewSkin.defaultConfig = {};

previewSkin.data = {};

// now some skin dependent config.
switch (mw.config.get('skin')) {
	case 'vector':
		previewSkin.defaultConfig.portletArea = 'right-navigation';
		previewSkin.defaultConfig.portletId = 'p-previewSkin';
		previewSkin.defaultConfig.portletName = 'Skin';
		previewSkin.defaultConfig.portletType = 'menu';
		previewSkin.defaultConfig.portletNext = 'p-search';
		break;
	case 'vector-2022':
		previewSkin.defaultConfig.portletArea = 'right-navigation';
		previewSkin.defaultConfig.portletId = 'p-previewSkin';
		previewSkin.defaultConfig.portletName = 'Skin';
		previewSkin.defaultConfig.portletType = 'menu';
		previewSkin.defaultConfig.portletNext = 'p-search';
		mw.loader.load('//meta.wikimedia.org/w/index.php?title=User:%E9%AD%94%E7%90%B4/previewSkin/vector-2022.css&action=raw&ctype=text/css', 'text/css'); //load css file
		break;
	case 'timeless':
		previewSkin.defaultConfig.portletArea = '#page-tools .sidebar-inner';
		previewSkin.defaultConfig.portletId = 'p-previewSkin';
		previewSkin.defaultConfig.portletName = 'Preview Skin';
		previewSkin.defaultConfig.portletType = null;
		previewSkin.defaultConfig.portletNext = 'p-userpagetools';
		break;
	default:
		previewSkin.defaultConfig.portletArea = null;
		previewSkin.defaultConfig.portletId = 'p-cactions';
		previewSkin.defaultConfig.portletName = null;
		previewSkin.defaultConfig.portletType = null;
		previewSkin.defaultConfig.portletNext = null;
}

previewSkin.getPref = function previewSkinGetPref(name) {
	return previewSkin.defaultConfig[name];
};

/**
 * **************** previewSkin.addPortlet() ****************
 *
 * Adds a portlet menu to one of the navigation areas on the page.
 * This is necessarily quite a hack since skins, navigation areas, and
 * portlet menu types all work slightly different.
 *
 * Available navigation areas depend on the skin used.
 * Vector:
 *  For each option, the outer nav class contains "vector-menu", the inner div class is "vector-menu-content", and the ul is "vector-menu-content-list"
 *  "mw-panel", outer nav class contains "vector-menu-portal". Existing portlets/elements: "p-logo", "p-navigation", "p-interaction", "p-tb", "p-coll-print_export"
 *  "left-navigation", outer nav class contains "vector-menu-tabs" or "vector-menu-dropdown". Existing portlets: "p-namespaces", "p-variants" (menu)
 *  "right-navigation", outer nav class contains "vector-menu-tabs" or "vector-menu-dropdown". Existing portlets: "p-views", "p-cactions" (menu), "p-search"
 *  Special layout of p-personal portlet (part of "head") through specialized styles.
 * Monobook:
 *  "column-one", outer nav class "portlet", inner div class "pBody". Existing portlets: "p-cactions", "p-personal", "p-logo", "p-navigation", "p-search", "p-interaction", "p-tb", "p-coll-print_export"
 *  Special layout of p-cactions and p-personal through specialized styles.
 * Modern:
 *  "mw_contentwrapper" (top nav), outer nav class "portlet", inner div class "pBody". Existing portlets or elements: "p-cactions", "mw_content"
 *  "mw_portlets" (sidebar), outer nav class "portlet", inner div class "pBody". Existing portlets: "p-navigation", "p-search", "p-interaction", "p-tb", "p-coll-print_export"
 *
 * @param String navigation -- id of the target navigation area (skin dependant, on vector either of "left-navigation", "right-navigation", or "mw-panel")
 * @param String id -- id of the portlet menu to create, preferably start with "p-".
 * @param String text -- name of the portlet menu to create. Visibility depends on the class used.
 * @param String type -- type of portlet. Currently only used for the vector non-sidebar portlets, pass "menu" to make this portlet a drop down menu.
 * @param Node nextnodeid -- the id of the node before which the new item should be added, should be another item in the same list, or undefined to place it at the end.
 *
 * @return Node -- the DOM node of the new item (a DIV element) or null
 */
previewSkin.addPortlet = function(navigation, id, text, type, nextnodeid) {
	// sanity checks, and get required DOM nodes
	var root = document.getElementById(navigation) || document.querySelector(navigation);
	if (!root) {
		return null;
	}

	var item = document.getElementById(id);
	if (item) {
		if (item.parentNode && item.parentNode === root) {
			return item;
		}
		return null;
	}

	var nextnode;
	if (nextnodeid) {
		nextnode = document.getElementById(nextnodeid);
	}

	// verify/normalize input
	var skin = mw.config.get('skin');
	if ((skin !== 'vector' && skin !== 'vector-2022') || (navigation !== 'left-navigation' && navigation !== 'right-navigation')) {
		type = null; // menu supported only in vector's #left-navigation & #right-navigation
	}
	var outerNavClass, innerDivClass;
	switch (skin) {
		case 'vector':
		case 'vector-2022':
			// XXX: portal doesn't work
			if (navigation !== 'portal' && navigation !== 'left-navigation' && navigation !== 'right-navigation') {
				navigation = 'mw-panel';
			}
			outerNavClass = 'mw-portlet vector-menu';
			if (navigation === 'mw-panel') {
				outerNavClass += ' vector-menu-portal';
			} else if (type === 'menu') {
				outerNavClass += ' vector-menu-dropdown vector-dropdown vector-menu-dropdown-noicon';
			} else {
				outerNavClass += ' vector-menu-tabs';
			}
			innerDivClass = 'vector-menu-content vector-dropdown-content';
			h3Tag = 'label';
			break;
		case 'modern':
			if (navigation !== 'mw_portlets' && navigation !== 'mw_contentwrapper') {
				navigation = 'mw_portlets';
			}
			outerNavClass = 'portlet';
			h3Tag = 'h3'; // 占位，无实际意义
			break;
		case 'timeless':
			outerNavClass = 'mw-portlet';
			innerDivClass = 'mw-portlet-body';
			h3Tag = 'h3';
			break;
		default:
			navigation = 'column-one';
			outerNavClass = 'portlet';
			break;
	}

	// Build the DOM elements.
	var outerNav = document.createElement('nav');
	outerNav.setAttribute('aria-labelledby', id + '-label');
	outerNav.className = outerNavClass + ' emptyPortlet';
	outerNav.id = id;
	if (nextnode && nextnode.parentNode === root) {
		root.insertBefore(outerNav, nextnode);
	} else {
		root.appendChild(outerNav);
	}
	
	
	var h3 = document.createElement(h3Tag);
	h3.id = id + '-label';
	var ul = document.createElement('ul');
	ul.id = 'previewSkin-flex-container';

	if (skin === 'vector' || skin === 'vector-2022') {
		ul.className = 'vector-menu-content-list';
		h3.className = 'vector-menu-heading vector-dropdown-label';

		// add invisible checkbox to keep menu open when clicked
		// similar to the p-cactions ("More") menu
		if (outerNavClass.indexOf('vector-menu-dropdown') !== -1) {
			var chkbox = document.createElement('input');
			chkbox.id = id + '-dropdown-checkbox';
			chkbox.className = 'vector-menu-checkbox vector-dropdown-checkbox';
			chkbox.setAttribute('type', 'checkbox');
			chkbox.setAttribute('aria-labelledby', id + '-label');
			outerNav.appendChild(chkbox);

			// Vector gets its title in a span; all others except
			// timeless have no title, and it has no span
			var span = document.createElement('span');
			span.appendChild(document.createTextNode(text));
			h3.appendChild(span);

			var a = document.createElement('a');
			a.href = '#';

			$(a).click(function(e) {
				e.preventDefault();
			});

			h3.appendChild(a);
		}
	} else {
		// Basically just Timeless
		h3.appendChild(document.createTextNode(text));
	}

	outerNav.appendChild(h3);

	if (innerDivClass) {
		var innerDiv = document.createElement('div');
		innerDiv.className = innerDivClass;
		innerDiv.appendChild(ul);
		outerNav.appendChild(innerDiv);
	} else {
		outerNav.appendChild(ul);
	}
	
	return outerNav;
	
};




/**
 * **************** Twinkle.addPortletLink() ****************
 * Builds a portlet menu if it doesn't exist yet, and add the portlet link.
 * @param task: Either a URL for the portlet link or a function to execute.
 */
previewSkin.addPortletLink = function(task, text, id, tooltip) {
	if (previewSkin.getPref('portletArea') !== null) {
		previewSkin.addPortlet(previewSkin.getPref('portletArea'), previewSkin.getPref('portletId'), previewSkin.getPref('portletName'), previewSkin.getPref('portletType'), previewSkin.getPref('portletNext'));
	}
	var link = mw.util.addPortletLink(previewSkin.getPref('portletId'), typeof task === 'string' ? task : '#', text, id, tooltip);
	$('.client-js .skin-vector #p-cactions').css('margin-right', 'initial');
	if (typeof task === 'function') {
		$(link).mousedown(function (ev) {
			if( ev.which <= 2 ) {
				ev.preventDefault();
				task();
			}
		});
	}
	if ($.collapsibleTabs) {
		$.collapsibleTabs.handleResize();
	}
	return link;
};


function tos(b, n) {
	var c = new URL(window.location.href)
	c.searchParams.set('useskin', b);
	c.searchParams.delete('vectornightmode');
	c.searchParams.delete('minervanightmode');
	c.searchParams.delete('psnight');
	if (n) {
		c.searchParams.set(n, 1);
		c.searchParams.set('psnight', 1);
	}
	return c.toString()
}

/* Load sub modules */

// Prevent clickjacking
	if (window.top !== window.self) {
		return;
	}
	
	var u = new URL(window.location.href)
	
	previewSkin.addPortletLink(
		tos('vector'),
		'Vector',
		'previewSkin-vector'
	);
	previewSkin.addPortletLink(
		tos('vector-2022'),
		'Vector (2022)',
		'previewSkin-vector-2022'
	);
	previewSkin.addPortletLink(
		tos('timeless'),
		'Timeless',
		'previewSkin-timeless'
	);
	previewSkin.addPortletLink(
		tos('minerva'),
		'MinervaNeue',
		'previewSkin-minerva'
	);
	previewSkin.addPortletLink(
		tos('monobook'),
		'Monobook',
		'previewSkin-monobook'
	);
	previewSkin.addPortletLink(
		tos('modern'),
		'Modern',
		'previewSkin-modern'
	);
	previewSkin.addPortletLink(
		tos('cologneblue'),
		'Cologne Blue',
		'previewSkin-cologneblue'
	);
	previewSkin.addPortletLink(
		tos('vector-2022','vectornightmode'),
		'Night (v22)',
		'previewSkin-nightv22'
	);
	previewSkin.addPortletLink(
		tos('minerva','minervanightmode'),
		'Night (minerva)',
		'previewSkin-nightminerva'
	);


const u1 = new URL(window.location.href);
const p1 = new URLSearchParams(u1.search);
if (p1.has('psnight')) {
	$('html').addClass('skin-theme-clientpref-night');
	const t1 = setInterval(checkloaded, 250);
	
	function checkloaded() {
		if ($('#skin-client-prefs-skin-theme').length) {
			clearTimeout(t1)
			forcedark()
		}
	}
	
	function forcedark() {
		document.getElementById('skin-client-pref-skin-theme-value-os').disabled = false;
		document.getElementById('skin-client-pref-skin-theme-value-day').disabled = false;
		document.getElementById('skin-client-pref-skin-theme-value-night').disabled = false;
		$('html').addClass('skin-theme-clientpref-night');
	}
}



}(window, document, jQuery)); // End wrap with anonymous function

// </nowiki>
Retrieved from "https://meta.wikimedia.org/w/index.php?title=User:魔琴/previewSkin/index.js&oldid=27064887"