User:魔琴/previewSkin/index.js: Difference between revisions

 /**
  * From Vandoom
  */
 // <nowiki>

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

 varpreviewSkin={};
 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=functionpreviewSkinGetPref(name){
 returnpreviewSkin.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
 varroot=document.getElementById(navigation)||document.querySelector(navigation);
 if(!root){
 returnnull;
 }

 varitem=document.getElementById(id);
 if(item){
 if(item.parentNode&&item.parentNode===root){
 returnitem;
 }
 returnnull;
 }

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

 // verify/normalize input
 varskin=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
 }
 varouterNavClass,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';
 }elseif(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.
 varouterNav=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);
 }


 varh3=document.createElement(h3Tag);
 h3.id=id+'-label';
 varul=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){
 varchkbox=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
 varspan=document.createElement('span');
 span.appendChild(document.createTextNode(text));
 h3.appendChild(span);

 vara=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){
 varinnerDiv=document.createElement('div');
 innerDiv.className=innerDivClass;
 innerDiv.appendChild(ul);
 outerNav.appendChild(innerDiv);
 }else{
 outerNav.appendChild(ul);
 }

 returnouterNav;

 };




 /**
  * **************** 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'));
 }
 varlink=mw.util.addPortletLink(previewSkin.getPref('portletId'),typeoftask==='string'?task:'#',text,id,tooltip);
 $('.client-js .skin-vector #p-cactions').css('margin-right','initial');
 if(typeoftask==='function'){
 $(link).mousedown(function(ev){
 if(ev.which<=2){
 ev.preventDefault();
 task();
 }
 });
 }
 if($.collapsibleTabs){
 $.collapsibleTabs.handleResize();
 }
 returnlink;
 };


 functiontos(b,n){
 varc=newURL(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);
 }
 returnc.toString()
 }

 /* Load sub modules */

 // Prevent clickjacking
 if(window.top!==window.self){
 return;
 }

 varu=newURL(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'
 );


 constu1=newURL(window.location.href);
 constp1=newURLSearchParams(u1.search);
 if(p1.has('psnight')){
 $('html').addClass('skin-theme-clientpref-night');
 constt1=setInterval(checkloaded,250);


 }

 functioncheckloaded(){
 if($('#skin-client-prefs-skin-theme').length){
 clearTimeout(t1)
 forcedark()
 }
 }

 functionforcedark(){
 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;
 }

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

 // </nowiki>