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 <https://meta.wikimedia.org/wiki/User:Jayprakash12345> 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', 'User' ],
			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 );
				} );
			}
		}
	} );
}() );