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>