MediaWiki:Gadget-tabbedwindow.js

/** * * tabbedWindow.js * * It embeds an OOUI tabbed window on all pages in the API namespace on MediaWiki.org. * Each tab of the window contains sample code in a programming language (PHP, Javascript, Python, etc.) * demonstrating the use of the MediaWiki Action API. * * @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later * @licstart The following is the entire license notice for the JavaScript code in this gadget. * * Copyright (C) 2019 Jay Prakash  and contributors * * The JavaScript/Gadget code in this page is free software: you can * redistribute it and/or modify it under the terms of the GNU * General Public License (GNU GPL) as published by the Free Software * Foundation, either version 3 of the License, or (at your option) * any later version. The code is distributed WITHOUT ANY WARRANTY; * without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. * * As additional permission under GNU GPL version 3 section 7, you * may distribute non-source (e.g., minimized or compacted) forms of * that code without the copy of the GNU GPL normally required by * section 4, provided you include this license notice and a URL * through which recipients can access the Corresponding Source. * * @licend The above is the entire license notice for the JavaScript/Gadget code in this gadget. */

( function {	'use strict';

function trySettingTab( indexLayout, hash ) { var possiblePanelName = hash.slice( 1 ); var possiblePanel = possiblePanelName && indexLayout.getTabPanel( possiblePanelName ); if ( possiblePanel ) { indexLayout.setTabPanel( possiblePanelName ); indexLayout.scrollElementIntoView; }	}

/**	 * This function fetches sample code in different programming languages * from the sub-sections of the section "Sample Code" and places * them into an OOUI tabbed window. *	 * @param {jQuery} $tabbedWindows */	function makeTabWindow( $tabbedWindows ) { var tabs = [];

$tabbedWindows.each( function {

var panelLayout, indexLayout = new OO.ui.IndexLayout( {					expanded: false				} );

$( this ).find( 'h3 > .mw-editsection' ).remove;

$( this ).find( 'h3' ).each( function {				var id = $( this ).find( 'span[class=mw-headline]' ).attr( 'id' );

var $content = $( this ).nextUntil( 'h3' );

var tabPanel = new OO.ui.TabPanelLayout( id, {					expanded: false,					label: $( this ).text,					// Attach the original DOM elements directly by reference.					// This means they move directly in memory instead of getting copied/serialized/parsed as HTML.					// If we didn't move them, but instead copied and re-parsed HTML, then it would disconnect events					// and other live references from gadgets and extensions, which breaks sorting features, responsive gallery, etc.					$content: $content				} );

tabPanel.$element.css( 'padding', '0.5em' );

tabs.push( tabPanel ); } );

indexLayout.addTabPanels( tabs ); tabs = [];

panelLayout = new OO.ui.PanelLayout( {				expanded: false,				framed: true,				content: [ indexLayout ]			} );

$( this ).empty.append( panelLayout.$element );

// Select and scroll to any initially linked item in the address trySettingTab( indexLayout, location.hash ); // Keep address bar updated with sharable link (also makes forward/backward browser navigation work) if ( history.replaceState ) { indexLayout.on( 'set', function ( tabPanel ) {					history.replaceState( null, document.title, '#' + tabPanel.getName );				} ); }			// Support anchor links on the same page (from table of Contents, or links) window.addEventListener( 'hashchange', function {				trySettingTab( indexLayout, location.hash );			} );

} );	}

$( function {		// Quick check (dependency-free, this is executed for all pages/actions/namespaces)		var $tabbedWindows,			supportedNamespaces = [ 'API', 'Help', 'Manual', '' ],			action = mw.config.get( 'wgAction' ),			namespace = mw.config.get( 'wgCanonicalNamespace' );

if (			action === 'view' &&			supportedNamespaces.indexOf( namespace ) !== -1		) { // Expensive checks (only on the subset of supported pages) // eslint-disable-next-line no-jquery/no-global-selector $tabbedWindows = $( '.mw-gadget-tabbedwindow' ); if ( $tabbedWindows.length > 0 ) { // Viewing an API subject page with tabs on it, let's make them nice! mw.loader.using( [ 'oojs-ui-widgets' ] ).then( function {					makeTabWindow( $tabbedWindows );				} ); }		}	} ); } );