查看“︁MediaWiki:Gadget-switch-tabber.js”︁的源代码

( function ( window, $, mw ) {
	'use strict';

	var SWITCH_TABBER_ID = 'SwitchTabber';
	var COOKIE_NAME = 'SwitchTab';
	var SVG_NS = 'http://www.w3.org/2000/svg';
	var TABBER_HEAD_CLASS = 'tabberex-head oo-ui-widget oo-ui-widget-enabled oo-ui-selectWidget oo-ui-selectWidget-unpressed oo-ui-selectWidget-depressed oo-ui-tabSelectWidget';
	var TAB_CLASS = 'oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-optionWidget oo-ui-tabOptionWidget';
	var LABEL_CLASS = 'oo-ui-labelElement-label';
	var PLATFORM_LABELS = {
		mobile: {
			hans: '移动',
			hant: '行動'
		},
		switch: {
			hans: 'Switch',
			hant: 'Switch'
		}
	};

	function attrSelector( value ) {
		return '[data-tabber-id="' + String( value ).replace( /\\/g, '\\\\' ).replace( /"/g, '\\"' ) + '"]';
	}

	function isTraditionalVariant() {
		var variant = String(
			mw.config.get( 'wgUserVariant' ) ||
			mw.config.get( 'wgUserLanguage' ) ||
			mw.config.get( 'wgContentLanguage' ) ||
			''
		).toLowerCase();

		return /(?:hant|tw|hk|mo)/.test( variant );
	}

	function getPlatformLabel( key ) {
		var labels = PLATFORM_LABELS[ key ];
		return isTraditionalVariant() ? labels.hant : labels.hans;
	}

	function getTabberElements( tabberId, type ) {
		return $( '.tabberex-' + type + attrSelector( tabberId ) );
	}

	function tabberexShowTab( tabberId, index ) {
		getTabberElements( tabberId, 'head' ).children( ':nth-child(' + index + ')' )
			.addClass( 'oo-ui-optionWidget-selected' )
			.css( 'cursor', 'default' );

		getTabberElements( tabberId, 'body' ).children( ':nth-child(' + index + ')' ).each( function () {
			var displayValue = this.getAttribute( 'data-tab-display' ) || 'block';
			this.style.display = displayValue;
		} );
	}

	function tabberexHideTab( tabberId, index ) {
		getTabberElements( tabberId, 'head' ).children( ':nth-child(' + index + ')' )
			.removeClass( 'oo-ui-optionWidget-selected' )
			.css( 'cursor', 'pointer' );

		getTabberElements( tabberId, 'body' ).children( ':nth-child(' + index + ')' ).css( 'display', 'none' );
	}

	function tabberexHideAllTabs( tabberId ) {
		getTabberElements( tabberId, 'head' ).children()
			.removeClass( 'oo-ui-optionWidget-selected' )
			.css( 'cursor', 'pointer' );

		getTabberElements( tabberId, 'body' ).children().css( 'display', 'none' );
	}

	function tabberexSwitchTab( tabberId, index ) {
		tabberexHideAllTabs( tabberId );
		tabberexShowTab( tabberId, index );
	}

	function getExHeader( element ) {
		var attributes = {};
		var names = element.getAttributeNames();
		var i;

		for ( i = 0; i < names.length; i++ ) {
			attributes[ names[ i ] ] = element.getAttribute( names[ i ] );
		}
		return {
			html: element.innerHTML,
			attributes: attributes
		};
	}

	function readTabDetails( tabElement, index ) {
		var exHeaderElement = tabElement.querySelector( 'p > span.tabberex-tab-header, span.tabberex-tab-header' );
		var details = {
			header: tabElement.getAttribute( 'data-tab-header' ) || String( index + 1 ),
			exHeader: exHeaderElement ? getExHeader( exHeaderElement ) : null,
			isDefault: tabElement.classList.contains( 'tabberex-tab-default' ),
			location: tabElement.getAttribute( 'data-tab-location' )
		};

		if ( exHeaderElement ) {
			exHeaderElement.parentNode.removeChild( exHeaderElement );
		}
		return details;
	}

	function makeTabButton( tabberId, details, index ) {
		var tab = document.createElement( 'div' );
		var label = document.createElement( 'span' );
		var attr;

		tab.className = TAB_CLASS;
		tab.style.cursor = 'pointer';
		label.className = LABEL_CLASS;

		if ( details.exHeader ) {
			for ( attr in details.exHeader.attributes ) {
				label.setAttribute( attr, details.exHeader.attributes[ attr ] );
			}
			label.innerHTML = details.exHeader.html;
		} else {
			label.textContent = details.header;
		}

		tab.appendChild( label );
		tab.addEventListener( 'click', function () {
			if ( details.location ) {
				window.location.href = details.location;
				return;
			}
			tabberexSwitchTab( tabberId, index + 1 );
		} );
		return tab;
	}

	function buildTabHead( host, tabberId, tabDetails ) {
		var i;

		host.innerHTML = '';
		host.className = TABBER_HEAD_CLASS;
		host.setAttribute( 'data-tabber-id', tabberId );

		for ( i = 0; i < tabDetails.length; i++ ) {
			host.appendChild( makeTabButton( tabberId, tabDetails[ i ], i ) );
		}
	}

	function processHead( head, defaultTabs, tabberIds, tabberIndex ) {
		var tabberId = head.getAttribute( 'data-tabber-id' ) || String( tabberIndex );
		var details = [];
		var defaultIndex = 0;

		if ( head.dataset.tabberexProcessed || !head.querySelector( '.tabberex-tab' ) ) {
			return tabberIndex;
		}

		Array.prototype.forEach.call( head.querySelectorAll( ':scope > .tabberex-tab' ), function ( tab, index ) {
			var item = readTabDetails( tab, index );
			details.push( item );
			if ( item.isDefault ) {
				defaultIndex = index;
			}
		} );

		head.dataset.tabberexProcessed = '1';
		buildTabHead( head, tabberId, details );
		if ( defaultTabs[ tabberId ] === undefined ) {
			defaultTabs[ tabberId ] = defaultIndex;
		}
		tabberIds.push( tabberId );
		return tabberIndex + 1;
	}

	function processStandaloneTabber( tabber, defaultTabs, tabberIds, tabberIndex ) {
		var tabberId = tabber.getAttribute( 'data-tabber-id' ) || String( tabberIndex );
		var head = document.createElement( 'div' );
		var details = [];
		var defaultIndex = 0;

		if ( tabber.dataset.tabberexProcessed ) {
			return tabberIndex;
		}

		Array.prototype.forEach.call( tabber.querySelectorAll( ':scope > .tabberex-tab' ), function ( tab, index ) {
			var item = readTabDetails( tab, index );
			details.push( item );
			if ( item.isDefault ) {
				defaultIndex = index;
			}
			tab.style.display = 'none';
		} );

		tabber.dataset.tabberexProcessed = '1';
		tabber.setAttribute( 'data-tabber-id', tabberId );
		tabber.classList.remove( 'tabberex' );
		tabber.classList.add( 'tabberex-body' );
		buildTabHead( head, tabberId, details );
		tabber.parentNode.insertBefore( head, tabber );

		if ( defaultTabs[ tabberId ] === undefined ) {
			defaultTabs[ tabberId ] = defaultIndex;
		}
		tabberIds.push( tabberId );
		return tabberIndex + 1;
	}

	function processTabbers() {
		var defaultTabs = {};
		var tabberIds = [];
		var tabberIndex = 0;

		Array.prototype.slice.call( document.querySelectorAll( '.tabberex-head' ) ).reverse().forEach( function ( head ) {
			tabberIndex = processHead( head, defaultTabs, tabberIds, tabberIndex );
		} );

		Array.prototype.slice.call( document.querySelectorAll( '.tabberex-body' ) ).reverse().forEach( function ( body ) {
			$( body ).children().css( 'display', 'none' );
		} );

		Array.prototype.slice.call( document.querySelectorAll( '.tabberex' ) ).reverse().forEach( function ( tabber ) {
			tabberIndex = processStandaloneTabber( tabber, defaultTabs, tabberIds, tabberIndex );
		} );

		tabberIds.forEach( function ( tabberId ) {
			tabberexShowTab( tabberId, defaultTabs[ tabberId ] + 1 );
		} );
	}

	function makeSvgNode( name, attrs ) {
		var node = document.createElementNS( SVG_NS, name );
		var key;

		for ( key in attrs ) {
			node.setAttribute( key, attrs[ key ] );
		}
		return node;
	}

	function makeSwitchIcon( type ) {
		var svg;
		var group;

		if ( type === 'switch' ) {
			svg = makeSvgNode( 'svg', {
				class: 'switchtabber-icon switchtabber-icon--switch',
				viewBox: '0 0 52 28',
				'aria-hidden': 'true',
				focusable: 'false'
			} );

			group = makeSvgNode( 'g', {
				fill: 'none',
				stroke: 'currentColor',
				'stroke-width': '2',
				'stroke-linecap': 'round',
				'stroke-linejoin': 'round'
			} );

			group.appendChild( makeSvgNode( 'rect', { x: '4', y: '3', width: '18', height: '22', rx: '5' } ) );
			group.appendChild( makeSvgNode( 'rect', { x: '30', y: '3', width: '18', height: '22', rx: '5' } ) );
			group.appendChild( makeSvgNode( 'circle', { cx: '13', cy: '11', r: '2.2' } ) );
			group.appendChild( makeSvgNode( 'circle', { cx: '13', cy: '18', r: '1.3' } ) );
			group.appendChild( makeSvgNode( 'circle', { cx: '39', cy: '9', r: '1.3' } ) );
			group.appendChild( makeSvgNode( 'circle', { cx: '43', cy: '13', r: '1.3' } ) );
			group.appendChild( makeSvgNode( 'circle', { cx: '35', cy: '13', r: '1.3' } ) );
			group.appendChild( makeSvgNode( 'circle', { cx: '39', cy: '17', r: '1.3' } ) );
			svg.appendChild( group );
			return svg;
		}

		svg = makeSvgNode( 'svg', {
			class: 'switchtabber-icon switchtabber-icon--mobile',
			viewBox: '0 0 24 24',
			'aria-hidden': 'true',
			focusable: 'false'
		} );

		group = makeSvgNode( 'g', {
			fill: 'none',
			stroke: 'currentColor',
			'stroke-width': '2',
			'stroke-linecap': 'round',
			'stroke-linejoin': 'round'
		} );

		group.appendChild( makeSvgNode( 'rect', { x: '7', y: '2.5', width: '10', height: '19', rx: '2' } ) );
		group.appendChild( makeSvgNode( 'path', { d: 'M10 18.5h4' } ) );
		svg.appendChild( group );
		return svg;
	}

	function makeSwitchTab( index, labelText, iconType ) {
		var tab = document.createElement( 'div' );
		var label = document.createElement( 'span' );

		tab.className = TAB_CLASS;
		tab.style.cursor = 'pointer';
		label.className = LABEL_CLASS;

		label.appendChild( makeSwitchIcon( iconType ) );
		label.appendChild( document.createTextNode( labelText ) );
		tab.appendChild( label );
		tab.addEventListener( 'click', function () {
			switchtabberSwitchTab( index );
		} );
		return tab;
	}

	function createSwitchTabber( modifierClass ) {
		var switchTabber = document.createElement( 'div' );

		switchTabber.className = TABBER_HEAD_CLASS + ' switchtabber-head' + ( modifierClass ? ' ' + modifierClass : '' );
		switchTabber.setAttribute( 'data-tabber-id', SWITCH_TABBER_ID );
		switchTabber.dataset.switchtabberGenerated = '1';
		switchTabber.appendChild( makeSwitchTab( 1, getPlatformLabel( 'mobile' ), 'mobile' ) );
		switchTabber.appendChild( makeSwitchTab( 2, getPlatformLabel( 'switch' ), 'switch' ) );
		return switchTabber;
	}

	function getSelectedSwitchTab() {
		var match = document.cookie.match( /(?:^|;\s*)SwitchTab=(Mobile|Switch)(?:;|$)/ );
		return match && match[ 1 ] === 'Switch' ? 2 : 1;
	}

	function setSelectedSwitchTab( index ) {
		document.cookie = COOKIE_NAME + '=' + ( index === 1 ? 'Mobile' : 'Switch' ) + '; path=/; SameSite=Lax';
	}

	function switchtabberSwitchTab( index ) {
		tabberexSwitchTab( SWITCH_TABBER_ID, index );
		setSelectedSwitchTab( index );
	}

	function hasSwitchTabberContent() {
		return !!document.querySelector(
			'.tabberex-body' + attrSelector( SWITCH_TABBER_ID ) + ', .tabberex' + attrSelector( SWITCH_TABBER_ID ) + ', .tabberex-head' + attrSelector( SWITCH_TABBER_ID ) + ':not([data-switchtabber-generated])'
		);
	}

	function addLocalPageHeaderTabber() {
		var heading = document.getElementById( 'firstHeading' ) || document.querySelector( '.mw-first-heading' );
		var wrapper;

		if ( !heading || document.querySelector( '.switchtabber-local-heading > .switchtabber-head' ) ) {
			return;
		}

		wrapper = document.createElement( 'div' );
		wrapper.className = 'switchtabber-local-heading';
		heading.parentNode.insertBefore( wrapper, heading );
		wrapper.appendChild( heading );
		wrapper.appendChild( createSwitchTabber( 'switchtabber-head--page' ) );
	}

	function addFandomPageHeaderTabber() {
		if ( document.querySelector( '.page-header__title-wrapper > .switchtabber-head' ) ) {
			return;
		}

		if ( $( '.page-header__title-wrapper' ).length ) {
			$( '.page-header__title-wrapper' )
				.css( 'display', 'flex' )
				.css( 'align-content', 'center' )
				.css( 'justify-content', 'space-between' )
				.append( createSwitchTabber( 'switchtabber-head--page' ) );
		} else {
			addLocalPageHeaderTabber();
		}
	}

	function addFandomStickyHeaderTabber() {
		if ( !$( '.fandom-sticky-header > :first-child' ).length || document.querySelector( '.fandom-sticky-header .switchtabber-head' ) ) {
			return;
		}
		$( createSwitchTabber( 'switchtabber-head--sticky' ) ).insertAfter( '.fandom-sticky-header > :first-child' );
	}

	function addEditorPreviewTabber() {
		if ( !$( '.oo-ui-processDialog-actions-safe' ).length || document.querySelector( '.oo-ui-processDialog-actions-safe .switchtabber-head' ) ) {
			return;
		}
		$( '.oo-ui-processDialog-actions-safe' )
			.css( 'flex-direction', 'row-reverse' )
			.append( createSwitchTabber( 'switchtabber-head--editor' ) );
	}

	function addSwitchTabber() {
		var initialTab;

		if ( !hasSwitchTabberContent() ) {
			return;
		}

		addFandomPageHeaderTabber();
		addFandomStickyHeaderTabber();
		addEditorPreviewTabber();

		initialTab = getSelectedSwitchTab();
		tabberexSwitchTab( SWITCH_TABBER_ID, initialTab );
	}

	window.tabberex_showTab = tabberexShowTab;
	window.tabberex_hideTab = tabberexHideTab;
	window.tabberex_hideAllTabs = tabberexHideAllTabs;
	window.tabberex_switchTab = tabberexSwitchTab;
	window.switchtabber_switchTab = switchtabberSwitchTab;

	mw.hook( 'wikipage.content' ).add( processTabbers );
	mw.hook( 'wikipage.content' ).add( addSwitchTabber );
}( this, jQuery, mediaWiki ) );