Thành viên:NguoiDungKhongDinhDanh/Gadget-tabbedwindow.js

Chú ý: Sau khi lưu thay đổi trang, bạn phải xóa bộ nhớ đệm của trình duyệt để nhìn thấy các thay đổi. Google Chrome, Firefox, Internet Explorer và Safari: Giữ phím ⇧ Shift và nhấn nút Reload/Tải lại trên thanh công cụ của trình duyệt. Để biết chi tiết và hướng dẫn cho các trình duyệt khác, xem Trợ giúp:Xóa bộ nhớ đệm.

/**
 *
 * 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';
	
	if ([19643444, 19628362].indexOf(mw.config.get('wgArticleId')) < 0) {
		return;
	}
	
	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 [[#Section]] links) 
			window.addEventListener('hashchange', function () {
				trySettingTab(indexLayout, location.hash);
			});

		});
	}

	mw.hook('wikipage.content').add(function () {
		// Quick check (dependency-free, this is executed for all pages/actions/namespaces)
		var $tabbedWindows,
			supportedNamespaces = ['Wikipedia', 'User', 'User talk', 'Template', 'Template talk', 'Help', 'Portal'],
			action = mw.config.get('wgAction'),
			namespace = mw.config.get('wgCanonicalNamespace').replace(/_/, ' ');

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