MediaWiki:Gadget-develika-tabs.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

/* Вкладки «Девелика»: делает интерактивной разметку
   .dvlk-tabs > .dvlk-tabs__nav > .dvlk-tabs__tab[data-tab] + .dvlk-tabs__panel[data-panel].
   Стили — в brand.css. Подключается как гаджет (см. MediaWiki:Gadgets-definition). */
( function () {
	'use strict';
	function init() {
		var groups = document.querySelectorAll( '.dvlk-tabs' );
		Array.prototype.forEach.call( groups, function ( tabs ) {
			if ( tabs.dataset.dvlkReady ) { return; }
			tabs.dataset.dvlkReady = '1';
			var tabEls = tabs.querySelectorAll( '.dvlk-tabs__tab' );
			var panels = tabs.querySelectorAll( '.dvlk-tabs__panel' );
			function activate( key ) {
				Array.prototype.forEach.call( tabEls, function ( t ) {
					t.classList.toggle( 'is-active', t.getAttribute( 'data-tab' ) === key );
				} );
				Array.prototype.forEach.call( panels, function ( p ) {
					p.classList.toggle( 'is-active', p.getAttribute( 'data-panel' ) === key );
				} );
			}
			Array.prototype.forEach.call( tabEls, function ( t ) {
				t.addEventListener( 'click', function () { activate( t.getAttribute( 'data-tab' ) ); } );
			} );
			if ( tabEls.length ) { activate( tabEls[ 0 ].getAttribute( 'data-tab' ) ); }
		} );
	}
	if ( document.readyState !== 'loading' ) { init(); } else { document.addEventListener( 'DOMContentLoaded', init ); }
}() );