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';

/**	 * 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, tabPanel,					htmlcontent = '';

id = $( this ).find( 'span[class=mw-headline]' ).attr( 'id' ); $( 'a[href="#' + id + '"]' ).remove;

$( this ).nextUntil( 'h3' ).each( function {					htmlcontent += '\n' + $( this ).prop( 'outerHTML' );				} );

tabPanel = new OO.ui.TabPanelLayout( $( this ).text, {					expanded: false,					label: $( this ).text,					content: [						new OO.ui.HtmlSnippet( htmlcontent )					]				} );

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 ); } );	}

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