resources/src/mediawiki.toc/toc.js

   1 ( function () {
   2         'use strict';
   3
   4         // Table of contents toggle
   5         mw.hook( 'wikipage.content' ).add( function ( $content ) {
   6                 $content.find( '.toc' ).addBack( '.toc' ).each( function () {
   7                         var hideToc,
   8                                 $this = $( this ),
   9                                 $tocToggleCheckbox = $this.children( '.toctogglecheckbox' ),
  10                                 $tocTitle = $this.find( '.toctitle' ),
  11                                 $tocToggleLink = $this.find( '.togglelink' ),
  12                                 $tocList = $this.find( 'ul' ).eq( 0 );
  13
  14                         // Hide/show the table of contents element
  15                         function toggleToc() {
  16                                 // eslint-disable-next-line no-jquery/no-class-state
  17                                 if ( $this.hasClass( 'tochidden' ) ) {
  18                                         // FIXME: Use CSS transitions
  19                                         // eslint-disable-next-line no-jquery/no-slide
  20                                         $tocList.slideDown( 'fast' );
  21                                         $tocToggleLink.text( mw.msg( 'hidetoc' ) );
  22                                         $this.removeClass( 'tochidden' );
  23                                         mw.cookie.set( 'hidetoc', null );
  24                                 } else {
  25                                         // eslint-disable-next-line no-jquery/no-slide
  26                                         $tocList.slideUp( 'fast' );
  27                                         $tocToggleLink.text( mw.msg( 'showtoc' ) );
  28                                         $this.addClass( 'tochidden' );
  29                                         mw.cookie.set( 'hidetoc', '1' );
  30                                 }
  31                         }
  32
  33                         // Only add it if there is a complete TOC and it doesn't
  34                         // have a toggle added already
  35                         if ( !$tocToggleCheckbox.length && $tocTitle.length && $tocList.length && !$tocToggleLink.length ) {
  36                                 hideToc = mw.cookie.get( 'hidetoc' ) === '1';
  37
  38                                 $tocToggleLink = $( '<a>' )
  39                                         .attr( {
  40                                                 role: 'button',
  41                                                 tabindex: 0
  42                                         } )
  43                                         .addClass( 'togglelink' )
  44                                         .text( mw.msg( hideToc ? 'showtoc' : 'hidetoc' ) )
  45                                         .on( 'click keypress', function ( e ) {
  46                                                 if (
  47                                                         e.type === 'click' ||
  48                                                         e.type === 'keypress' && e.which === 13
  49                                                 ) {
  50                                                         toggleToc();
  51                                                 }
  52                                         } );
  53
  54                                 $tocTitle.append(
  55                                         $tocToggleLink
  56                                                 .wrap( '<span class="toctoggle"></span>' )
  57                                                 .parent()
  58                                                 .prepend( '&nbsp;[' )
  59                                                 .append( ']&nbsp;' )
  60                                 );
  61
  62                                 if ( hideToc ) {
  63                                         $tocList.hide();
  64                                         $this.addClass( 'tochidden' );
  65                                 }
  66                         }
  67                 } );
  68         } );
  69
  70 }() );