2 * JavaScript for Special:Preferences: Tab navigation.
6 var $preferences
, tabs
, wrapper
, previousTab
;
8 $preferences
= $( '#preferences' );
10 // Make sure the accessibility tip is selectable so that screen reader users take notice,
11 // but hide it by default to reduce visual clutter.
12 // Make sure it becomes visible when focused.
13 $( '<div>' ).addClass( 'mw-navigation-hint' )
14 .text( mw
.msg( 'prefs-tabs-navigation-hint' ) )
15 .attr( 'tabIndex', 0 )
16 .prependTo( '#mw-content-text' );
18 tabs
= new OO
.ui
.IndexLayout( {
20 // Do not remove focus from the tabs menu after choosing a tab
24 mw
.config
.get( 'wgPreferencesTabs' ).forEach( function ( tabConfig
) {
25 var panel
, $panelContents
;
27 panel
= new OO
.ui
.TabPanelLayout( tabConfig
.name
, {
29 label
: tabConfig
.label
31 $panelContents
= $( '#mw-prefsection-' + tabConfig
.name
);
33 // Hide the unnecessary PHP PanelLayouts
34 // (Do not use .remove(), as that would remove event handlers for everything inside them)
35 $panelContents
.parent().detach();
37 panel
.$element
.append( $panelContents
);
38 tabs
.addTabPanels( [ panel
] );
40 // Remove duplicate labels
41 // (This must be after .addTabPanels(), otherwise the tab item doesn't exist yet)
42 $panelContents
.children( 'legend' ).remove();
43 $panelContents
.attr( 'aria-labelledby', panel
.getTabItem().getElementId() );
46 wrapper
= new OO
.ui
.PanelLayout( {
51 wrapper
.$element
.append( tabs
.$element
);
52 $preferences
.prepend( wrapper
.$element
);
53 $( '.mw-prefs-faketabs' ).remove();
55 function updateHash( panel
) {
56 var scrollTop
, active
;
57 // Handle hash manually to prevent jumping,
58 // therefore save and restore scrollTop to prevent jumping.
59 scrollTop
= $( window
).scrollTop();
60 // Changing the hash apparently causes keyboard focus to be lost?
61 // Save and restore it. This makes no sense though.
62 active
= document
.activeElement
;
63 location
.hash
= '#mw-prefsection-' + panel
.getName();
67 $( window
).scrollTop( scrollTop
);
70 tabs
.on( 'set', updateHash
);
74 * @param {string} name the name of a tab without the prefix ("mw-prefsection-")
75 * @param {string} [mode] A hash will be set according to the current
76 * open section. Set mode 'noHash' to suppress this.
78 function switchPrefTab( name
, mode
) {
79 if ( mode
=== 'noHash' ) {
80 tabs
.off( 'set', updateHash
);
82 tabs
.setTabPanel( name
);
83 if ( mode
=== 'noHash' ) {
84 tabs
.on( 'set', updateHash
);
88 // Jump to correct section as indicated by the hash.
89 // This function is called onload and onhashchange.
90 function detectHash() {
91 var hash
= location
.hash
,
92 matchedElement
, parentSection
;
93 if ( hash
.match( /^#mw-prefsection-[\w]+$/ ) ) {
94 mw
.storage
.session
.remove( 'mwpreferences-prevTab' );
95 switchPrefTab( hash
.replace( '#mw-prefsection-', '' ) );
96 } else if ( hash
.match( /^#mw-[\w-]+$/ ) ) {
97 matchedElement
= document
.getElementById( hash
.slice( 1 ) );
98 parentSection
= $( matchedElement
).parent().closest( '[id^="mw-prefsection-"]' );
99 if ( parentSection
.length
) {
100 mw
.storage
.session
.remove( 'mwpreferences-prevTab' );
101 // Switch to proper tab and scroll to selected item.
102 switchPrefTab( parentSection
.attr( 'id' ).replace( 'mw-prefsection-', '' ), 'noHash' );
103 matchedElement
.scrollIntoView();
108 $( window
).on( 'hashchange', function () {
109 var hash
= location
.hash
;
110 if ( hash
.match( /^#mw-[\w-]+/ ) ) {
112 } else if ( hash
=== '' ) {
113 switchPrefTab( 'personal', 'noHash' );
116 // Run the function immediately to select the proper tab on startup.
117 .trigger( 'hashchange' );
119 // Restore the active tab after saving the preferences
120 previousTab
= mw
.storage
.session
.get( 'mwpreferences-prevTab' );
122 switchPrefTab( previousTab
, 'noHash' );
123 // Deleting the key, the tab states should be reset until we press Save
124 mw
.storage
.session
.remove( 'mwpreferences-prevTab' );
127 $( '#mw-prefs-form' ).on( 'submit', function () {
128 var value
= tabs
.getCurrentTabPanelName();
129 mw
.storage
.session
.set( 'mwpreferences-prevTab', value
);
133 }( mediaWiki
, jQuery
) );