MediaWiki:Common.js/TabbedWindows.js
Chú ý: Sau khi lưu trang, có thể bạn sẽ phải xóa bộ nhớ đệm của trình duyệt để xem các thay đổi.
- Firefox / Safari: Nhấn giữ phím Shift trong khi nhấn Tải lại (Reload), hoặc nhấn tổ hợp Ctrl-F5 hay Ctrl-R (⌘R trên Mac)
- Google Chrome: Nhấn tổ hợp Ctrl-Shift-R (⇧⌘R trên Mac)
- Internet Explorer / Edge: Nhấn giữ phím Ctrl trong khi nhấn Làm tươi (Refresh), hoặc nhấn tổ hợp Ctrl-F5
- Opera: Nhấn tổ hợp Ctrl-F5.
/**
*
* 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';
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 );
} );
} );
}
$( function () {
// Quick check (dependency-free, this is executed for all pages/actions/namespaces)
var $tabbedWindows,
supportedNamespaces = [ 'Bản mẫu', '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 );
} );
}
}
} );
}() );