Use classes instead of IDs for TOC collapsing

One may way to have multiple TOC's on the page (e.g. in VisualEditor).

Change-Id: I19701c4037b653b2944e407752e50f444861f883

diff --git a/includes/Linker.php b/includes/Linker.php
index 816271f..bed9957 100644 (file)
--- a/includes/Linker.php
+++ b/includes/Linker.php
@@ -1561,7 +1561,7 @@ class Linker {
                $title = wfMessage( 'toc' )->inLanguage( $lang )->escaped();
 
                return '<div id="toc" class="toc">'
-                       . '<div id="toctitle"><h2>' . $title . "</h2></div>\n"
+                       . '<div id="toctitle" class="toctitle"><h2>' . $title . "</h2></div>\n"
                        . $toc
                        . "</ul>\n</div>\n";
        }

diff --git a/resources/src/mediawiki/mediawiki.toc.js b/resources/src/mediawiki/mediawiki.toc.js
index 0955c23..9ef6c43 100644 (file)
--- a/resources/src/mediawiki/mediawiki.toc.js
+++ b/resources/src/mediawiki/mediawiki.toc.js
@@ -3,56 +3,60 @@
 
        // Table of contents toggle
        mw.hook( 'wikipage.content' ).add( function ( $content ) {
-               var $toc, $tocTitle, $tocToggleLink, $tocList, hideToc;
-               $toc = $content.find( '#toc' );
-               $tocTitle = $content.find( '#toctitle' );
-               $tocToggleLink = $content.find( '#togglelink' );
-               $tocList = $toc.find( 'ul' ).eq( 0 );
+               $content.find( '.toc' ).addBack( '.toc' ).each( function () {
+                       var hideToc,
+                               $this = $( this ),
+                               // .toctitle is new so may not exist in HTML caches for a few weeks,
+                               // so keep checking for #toctitle for now
+                               $tocTitle = $this.find( '.toctitle, #toctitle' ),
+                               $tocToggleLink = $this.find( '.togglelink' ),
+                               $tocList = $this.find( 'ul' ).eq( 0 );
 
-               // Hide/show the table of contents element
-               function toggleToc() {
-                       if ( $tocList.is( ':hidden' ) ) {
-                               $tocList.slideDown( 'fast' );
-                               $tocToggleLink.text( mw.msg( 'hidetoc' ) );
-                               $toc.removeClass( 'tochidden' );
-                               mw.cookie.set( 'hidetoc', null );
-                       } else {
-                               $tocList.slideUp( 'fast' );
-                               $tocToggleLink.text( mw.msg( 'showtoc' ) );
-                               $toc.addClass( 'tochidden' );
-                               mw.cookie.set( 'hidetoc', '1' );
+                       // Hide/show the table of contents element
+                       function toggleToc() {
+                               if ( $tocList.is( ':hidden' ) ) {
+                                       $tocList.slideDown( 'fast' );
+                                       $tocToggleLink.text( mw.msg( 'hidetoc' ) );
+                                       $this.removeClass( 'tochidden' );
+                                       mw.cookie.set( 'hidetoc', null );
+                               } else {
+                                       $tocList.slideUp( 'fast' );
+                                       $tocToggleLink.text( mw.msg( 'showtoc' ) );
+                                       $this.addClass( 'tochidden' );
+                                       mw.cookie.set( 'hidetoc', '1' );
+                               }
                        }
-               }
 
-               // Only add it if there is a complete TOC and it doesn't
-               // have a toggle added already
-               if ( $toc.length && $tocTitle.length && $tocList.length && !$tocToggleLink.length ) {
-                       hideToc = mw.cookie.get( 'hidetoc' ) === '1';
+                       // Only add it if there is a complete TOC and it doesn't
+                       // have a toggle added already
+                       if ( $tocTitle.length && $tocList.length && !$tocToggleLink.length ) {
+                               hideToc = mw.cookie.get( 'hidetoc' ) === '1';
 
-                       $tocToggleLink = $( '<a role="button" tabindex="0" id="togglelink"></a>' )
-                               .text( mw.msg( hideToc ? 'showtoc' : 'hidetoc' ) )
-                               .on( 'click keypress', function ( e ) {
-                                       if (
-                                               e.type === 'click' ||
-                                               e.type === 'keypress' && e.which === 13
-                                       ) {
-                                               toggleToc();
-                                       }
-                               } );
+                               $tocToggleLink = $( '<a role="button" tabindex="0" class="togglelink"></a>' )
+                                       .text( mw.msg( hideToc ? 'showtoc' : 'hidetoc' ) )
+                                       .on( 'click keypress', function ( e ) {
+                                               if (
+                                                       e.type === 'click' ||
+                                                       e.type === 'keypress' && e.which === 13
+                                               ) {
+                                                       toggleToc();
+                                               }
+                                       } );
 
-                       $tocTitle.append(
-                               $tocToggleLink
-                                       .wrap( '<span class="toctoggle"></span>' )
-                                       .parent()
-                                               .prepend( '&nbsp;[' )
-                                               .append( ']&nbsp;' )
-                       );
+                               $tocTitle.append(
+                                       $tocToggleLink
+                                               .wrap( '<span class="toctoggle"></span>' )
+                                               .parent()
+                                                       .prepend( '&nbsp;[' )
+                                                       .append( ']&nbsp;' )
+                               );
 
-                       if ( hideToc ) {
-                               $tocList.hide();
-                               $toc.addClass( 'tochidden' );
+                               if ( hideToc ) {
+                                       $tocList.hide();
+                                       $this.addClass( 'tochidden' );
+                               }
                        }
-               }
+               } );
        } );
 
 }( mediaWiki, jQuery ) );

diff --git a/tests/parser/parserTests.txt b/tests/parser/parserTests.txt
index 7bf2ce2..ee0d30f 100644 (file)
--- a/tests/parser/parserTests.txt
+++ b/tests/parser/parserTests.txt
@@ -15458,7 +15458,7 @@ Section headings with TOC
 Some text
 ===Another headline===
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Headline_1"><span class="tocnumber">1</span> <span class="toctext">Headline 1</span></a>
 <ul>
@@ -15501,7 +15501,7 @@ __FORCETOC__
 == Headline 2 ==
 == Headline ==
 !! html/php
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Headline_2"><span class="tocnumber">1</span> <span class="toctext">Headline 2</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#Headline"><span class="tocnumber">2</span> <span class="toctext">Headline</span></a></li>
@@ -15532,7 +15532,7 @@ Handling of sections up to level 6 and beyond
 ========= Level 9 Heading=========
 ========== Level 10 Heading==========
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Level_1_Heading"><span class="tocnumber">1</span> <span class="toctext">Level 1 Heading</span></a>
 <ul>
@@ -15585,7 +15585,7 @@ TOC regression (T11764)
 == title 2 ==
 === title 2.1 ===
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
 <ul>
@@ -15620,7 +15620,7 @@ TOC for heading containing <span id="..."></span> (T96153)
 __FORCETOC__
 ==<span id="old-anchor"></span>New title==
 !! html/php
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#New_title"><span class="tocnumber">1</span> <span class="toctext">New title</span></a></li>
 </ul>
@@ -15642,7 +15642,7 @@ wgMaxTocLevel=3
 == title 2 ==
 === title 2.1 ===
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
 <ul>
@@ -15678,7 +15678,7 @@ wgMaxTocLevel=3
 ====Section 1.1.1.1====
 ==Section 2==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Section_1"><span class="tocnumber">1</span> <span class="toctext">Section 1</span></a>
 <ul>
@@ -15771,7 +15771,7 @@ __TOC__
 === title 1.1 ===
 == title 2 ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
 <ul>
@@ -15838,7 +15838,7 @@ section 5
 !! html
 <p>The tooltips shall not show entities to the user (ie. be double escaped)
 </p>
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#text_.3E_text"><span class="tocnumber">1</span> <span class="toctext">text &gt; text</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#text_.3C_text"><span class="tocnumber">2</span> <span class="toctext">text &lt; text</span></a></li>
@@ -15897,7 +15897,7 @@ section 6
 !! html
 <p>Id should not contain + for spaces
 </p>
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Space_between_Text"><span class="tocnumber">1</span> <span class="toctext">Space between Text</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#Space-Entity_between_Text"><span class="tocnumber">2</span> <span class="toctext">Space-Entity&#32;between&#32;Text</span></a></li>
@@ -15943,7 +15943,7 @@ Headers with excess '=' characters
 =''italic'' heading==
 ==''italic'' heading=
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#foo.3D"><span class="tocnumber">1</span> <span class="toctext">foo=</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#.3Dfoo"><span class="tocnumber">2</span> <span class="toctext">=foo</span></a></li>
@@ -15973,7 +15973,7 @@ HTML headers vs TOC (T25393)
 == Header 2.2 ==
 __NOEDITSECTION__
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1"><a href="#Header_1"><span class="tocnumber">1</span> <span class="toctext">Header 1</span></a>
 <ul>
@@ -17751,7 +17751,7 @@ Fuzz testing: Parser14
 http://__TOC__
 !! html
 <h2><span class="mw-headline" id="onmouseover.3D">onmouseover=</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Parser_test&amp;action=edit&amp;section=1" title="Edit section: onmouseover=">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
-http://<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+http://<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#onmouseover.3D"><span class="tocnumber">1</span> <span class="toctext">onmouseover=</span></a></li>
 </ul>
@@ -17762,7 +17762,7 @@ http://<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
 <h2><span class="mw-headline" id="onmouseover.3D">onmouseover=</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Parser_test&amp;action=edit&amp;section=1" title="Edit section: onmouseover=">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
 <p>http://</p>
 <div id="toc" class="toc">
-<div id="toctitle">
+<div id="toctitle" class="toctitle">
 <h2>Contents</h2>
 </div>
 <ul>
@@ -20216,7 +20216,7 @@ Out-of-order TOC heading levels
 =====5=====
 ==2==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#2"><span class="tocnumber">1</span> <span class="toctext">2</span></a>
 <ul>
@@ -22198,7 +22198,7 @@ title=[[Main Page]]
 __TOC__
 == ''Lost'' episodes ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Lost_episodes"><span class="tocnumber">1</span> <span class="toctext"><i>Lost</i> episodes</span></a></li>
 </ul>
@@ -22216,7 +22216,7 @@ title=[[Main Page]]
 __TOC__
 == '''should be bold''' then normal text ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#should_be_bold_then_normal_text"><span class="tocnumber">1</span> <span class="toctext"><b>should be bold</b> then normal text</span></a></li>
 </ul>
@@ -22234,7 +22234,7 @@ title=[[Main Page]]
 __TOC__
 == Image [[Image:foobar.jpg]] ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Image"><span class="tocnumber">1</span> <span class="toctext">Image</span></a></li>
 </ul>
@@ -22252,7 +22252,7 @@ title=[[Main Page]]
 __TOC__
 == <blockquote>Quote</blockquote> ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Quote"><span class="tocnumber">1</span> <span class="toctext">Quote</span></a></li>
 </ul>
@@ -22263,7 +22263,7 @@ __TOC__
 !! html+tidy
 <p></p>
 <div id="toc" class="toc">
-<div id="toctitle">
+<div id="toctitle" class="toctitle">
 <h2>Contents</h2>
 </div>
 <ul>
@@ -22288,7 +22288,7 @@ __TOC__
 <small>Hanc marginis exiguitas non caperet.</small>
 QED
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Proof:_2_.3C_3"><span class="tocnumber">1</span> <span class="toctext">Proof: 2 &lt; 3</span></a></li>
 </ul>
@@ -22308,7 +22308,7 @@ __TOC__
 
 == <i>Foo</i> <blockquote>Bar</blockquote> ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Foo_Bar"><span class="tocnumber">1</span> <span class="toctext"><i>Foo</i> <b>Bar</b></span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#Foo_Bar_2"><span class="tocnumber">2</span> <span class="toctext"><i>Foo</i> Bar</span></a></li>
@@ -22321,7 +22321,7 @@ __TOC__
 !! html+tidy
 <p></p>
 <div id="toc" class="toc">
-<div id="toctitle">
+<div id="toctitle" class="toctitle">
 <h2>Contents</h2>
 </div>
 <ul>
@@ -22350,7 +22350,7 @@ __TOC__
 
 == <sup class="a > b">Evilbye</sup> ==
 !! html/php
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Hello"><span class="tocnumber">1</span> <span class="toctext"><sup>Hello</sup></span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#b.22.3EEvilbye"><span class="tocnumber">2</span> <span class="toctext"><sup> b"&gt;Evilbye</sup></span></a></li>
@@ -22381,7 +22381,7 @@ __TOC__
 
 == <span dir="ltr" style="font-style: italic">Attributes after dir on these span tags must be deleted from the TOC</span> ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#C.2B.2B"><span class="tocnumber">1</span> <span class="toctext"><span dir="ltr">C++</span></span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#.D7.96.D7.91.D7.A0.D7.92.21"><span class="tocnumber">2</span> <span class="toctext"><span dir="rtl">זבנג!</span></span></a></li>
@@ -22405,7 +22405,7 @@ T74884: bdi element in ToC
 __TOC__
 == <bdi>test</bdi> ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#test"><span class="tocnumber">1</span> <span class="toctext"><bdi>test</bdi></span></a></li>
 </ul>
@@ -22421,7 +22421,7 @@ T35715: s/strike element in ToC
 __TOC__
 == <s>test</s> test <strike>test</strike> ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#test_test_test"><span class="tocnumber">1</span> <span class="toctext"><s>test</s> test <strike>test</strike></span></a></li>
 </ul>
@@ -22440,7 +22440,7 @@ Empty <p> tag in TOC, removed by Sanitizer (T92892)
 __TOC__
 == x ==
 !! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#x"><span class="tocnumber">1</span> <span class="toctext">x</span></a></li>
 </ul>
@@ -22451,7 +22451,7 @@ __TOC__
 !! html+tidy
 <p></p>
 <div id="toc" class="toc">
-<div id="toctitle">
+<div id="toctitle" class="toctitle">
 <h2>Contents</h2>
 </div>
 <ul>

diff --git a/tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js b/tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js
index 297f0fd..70a7e35 100644 (file)
--- a/tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js
+++ b/tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js
@@ -12,7 +12,7 @@
                assert.strictEqual( $( '#toc' ).length, 0, 'There is no table of contents on the page at the beginning' );
 
                tocHtml = '<div id="toc" class="toc">' +
-                       '<div id="toctitle">' +
+                       '<div id="toctitle" class="toctitle">' +
                        '<h2>Contents</h2>' +
                        '</div>' +
                        '<ul><li></li></ul>' +
@@ -21,7 +21,7 @@
                mw.hook( 'wikipage.content' ).fire( $( '#qunit-fixture' ) );
 
                $tocList = $( '#toc ul:first' );
-               $toggleLink = $( '#togglelink' );
+               $toggleLink = $( '#toc .togglelink' );
 
                assert.strictEqual( $toggleLink.length, 1, 'Toggle link is added to the table of contents' );