Move toctoggle from mediawiki.util.js to separate file mediawiki.toc.js

* New file mediawiki.toc.js without global function.
* Keep minimal function mediaWiki.util.toggleToc() for compatibility.
* Mark mediaWiki.util.toggleToc() as deprecated.
* Adapt mediawiki.util.test.js.
* Add new file mediawiki.toc.test.js.
* Solves bug 60030 and allow multiple toc.

Bug: 60030
Change-Id: I3ca2acb70db98d00e3f1bd2227091bd32d8e18a5

diff --git a/resources/Resources.php b/resources/Resources.php
index 2f8f662..ff7e916 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -801,6 +801,14 @@ return array(
                ),
                'targets' => array( 'desktop', 'mobile' ),
        ),
+       'mediawiki.toc' => array(
+               'scripts' => 'resources/mediawiki/mediawiki.toc.js',
+               'dependencies' => array(
+                       'jquery.cookie',
+               ),
+               'messages' => array( 'showtoc', 'hidetoc' ),
+               'targets' => array( 'desktop', 'mobile' ),
+       ),
        'mediawiki.Uri' => array(
                'scripts' => 'resources/mediawiki/mediawiki.Uri.js',
                'targets' => array( 'desktop', 'mobile' ),
@@ -819,11 +827,10 @@ return array(
                'scripts' => 'resources/mediawiki/mediawiki.util.js',
                'dependencies' => array(
                        'jquery.client',
-                       'jquery.cookie',
                        'jquery.mwExtension',
                        'mediawiki.notify',
+                       'mediawiki.toc',
                ),
-               'messages' => array( 'showtoc', 'hidetoc' ),
                'position' => 'top', // For $wgPreloadJavaScriptMwUtil
                'targets' => array( 'desktop', 'mobile' ),
        ),

diff --git a/resources/mediawiki/mediawiki.toc.js b/resources/mediawiki/mediawiki.toc.js
new file mode 100644 (file)
index 0000000..3279900
--- /dev/null
+++ b/resources/mediawiki/mediawiki.toc.js
@@ -0,0 +1,64 @@
+( function ( mw, $ ) {
+       'use strict';
+
+       // Table of contents toggle
+       mw.hook( 'wikipage.content' ).add( function ( $content ) {
+
+               /**
+                * Hide/show the table of contents element
+                *
+                * @param {jQuery} $toggleLink A jQuery object of the toggle link.
+                */
+               function toggleToc( $toggleLink ) {
+                       var $tocList = $content.find( '#toc ul:first' );
+
+                       // This function shouldn't be called if there's no TOC,
+                       // but just in case...
+                       if ( $tocList.length ) {
+                               if ( $tocList.is( ':hidden' ) ) {
+                                       $tocList.slideDown( 'fast' );
+                                       $toggleLink.text( mw.msg( 'hidetoc' ) );
+                                       $content.find( '#toc' ).removeClass( 'tochidden' );
+                                       $.cookie( 'mw_hidetoc', null, {
+                                               expires: 30,
+                                               path: '/'
+                                       } );
+                               } else {
+                                       $tocList.slideUp( 'fast' );
+                                       $toggleLink.text( mw.msg( 'showtoc' ) );
+                                       $content.find( '#toc' ).addClass( 'tochidden' );
+                                       $.cookie( 'mw_hidetoc', '1', {
+                                               expires: 30,
+                                               path: '/'
+                                       } );
+                               }
+                       }
+               }
+
+               var $tocTitle, $tocToggleLink, hideTocCookie;
+               $tocTitle = $content.find( '#toctitle' );
+               $tocToggleLink = $content.find( '#togglelink' );
+               // Only add it if there is a TOC and there is no toggle added already
+               if ( $content.find( '#toc' ).length && $tocTitle.length && !$tocToggleLink.length ) {
+                       hideTocCookie = $.cookie( 'mw_hidetoc' );
+                       $tocToggleLink = $( '<a href="#" class="internal" id="togglelink"></a>' )
+                               .text( mw.msg( 'hidetoc' ) )
+                               .click( function ( e ) {
+                                       e.preventDefault();
+                                       toggleToc( $( this ) );
+                               } );
+                       $tocTitle.append(
+                               $tocToggleLink
+                                       .wrap( '<span class="toctoggle"></span>' )
+                                       .parent()
+                                               .prepend( '&nbsp;[' )
+                                               .append( ']&nbsp;' )
+                       );
+
+                       if ( hideTocCookie === '1' ) {
+                               toggleToc( $tocToggleLink );
+                       }
+               }
+       } );
+
+}( mediaWiki, jQuery ) );

diff --git a/resources/mediawiki/mediawiki.util.js b/resources/mediawiki/mediawiki.util.js
index 820cd0a..40c12cf 100644 (file)
--- a/resources/mediawiki/mediawiki.util.js
+++ b/resources/mediawiki/mediawiki.util.js
@@ -104,34 +104,6 @@
                                // Make sure we don't unset util.$content if it was preset and we don't find anything
                                return util.$content;
                        } )();
-
-                       // Table of contents toggle
-                       mw.hook( 'wikipage.content' ).add( function ( $content ) {
-                               var $tocTitle, $tocToggleLink, hideTocCookie;
-                               $tocTitle = $content.find( '#toctitle' );
-                               $tocToggleLink = $content.find( '#togglelink' );
-                               // Only add it if there is a TOC and there is no toggle added already
-                               if ( $content.find( '#toc' ).length && $tocTitle.length && !$tocToggleLink.length ) {
-                                       hideTocCookie = $.cookie( 'mw_hidetoc' );
-                                       $tocToggleLink = $( '<a href="#" class="internal" id="togglelink"></a>' )
-                                               .text( mw.msg( 'hidetoc' ) )
-                                               .click( function ( e ) {
-                                                       e.preventDefault();
-                                                       util.toggleToc( $( this ) );
-                                               } );
-                                       $tocTitle.append(
-                                               $tocToggleLink
-                                                       .wrap( '<span class="toctoggle"></span>' )
-                                                       .parent()
-                                                               .prepend( '&nbsp;[' )
-                                                               .append( ']&nbsp;' )
-                                       );
-
-                                       if ( hideTocCookie === '1' ) {
-                                               util.toggleToc( $tocToggleLink );
-                                       }
-                               }
-                       } );
                },
 
                /* Main body */
@@ -226,35 +198,20 @@
                 *  completed (including the animation).
                 * @return {Mixed} Boolean visibility of the toc (true if it's visible)
                 * or Null if there was no table of contents.
+                * @deprecated since 1.23 Use jQuery
                 */
                toggleToc: function ( $toggleLink, callback ) {
-                       var $tocList = $( '#toc ul:first' );
+                       var ret, $tocList = $( '#toc ul:first' );
 
                        // This function shouldn't be called if there's no TOC,
                        // but just in case...
-                       if ( $tocList.length ) {
-                               if ( $tocList.is( ':hidden' ) ) {
-                                       $tocList.slideDown( 'fast', callback );
-                                       $toggleLink.text( mw.msg( 'hidetoc' ) );
-                                       $( '#toc' ).removeClass( 'tochidden' );
-                                       $.cookie( 'mw_hidetoc', null, {
-                                               expires: 30,
-                                               path: '/'
-                                       } );
-                                       return true;
-                               } else {
-                                       $tocList.slideUp( 'fast', callback );
-                                       $toggleLink.text( mw.msg( 'showtoc' ) );
-                                       $( '#toc' ).addClass( 'tochidden' );
-                                       $.cookie( 'mw_hidetoc', '1', {
-                                               expires: 30,
-                                               path: '/'
-                                       } );
-                                       return false;
-                               }
-                       } else {
+                       if ( !$tocList.length ) {
                                return null;
                        }
+                       ret = $tocList.is( ':hidden' );
+                       $toggleLink.click();
+                       $tocList.promise().done( callback );
+                       return ret;
                },
 
                /**

diff --git a/tests/qunit/QUnitTestResources.php b/tests/qunit/QUnitTestResources.php
index 01fedc8..0ec4932 100644 (file)
--- a/tests/qunit/QUnitTestResources.php
+++ b/tests/qunit/QUnitTestResources.php
@@ -28,6 +28,7 @@ return array(
                        'tests/qunit/suites/resources/mediawiki/mediawiki.jscompat.test.js',
                        'tests/qunit/suites/resources/mediawiki/mediawiki.test.js',
                        'tests/qunit/suites/resources/mediawiki/mediawiki.Title.test.js',
+                       'tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js',
                        'tests/qunit/suites/resources/mediawiki/mediawiki.Uri.test.js',
                        'tests/qunit/suites/resources/mediawiki/mediawiki.user.test.js',
                        'tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js',

diff --git a/tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js b/tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js
new file mode 100644 (file)
index 0000000..a4db0a1
--- /dev/null
+++ b/tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js
@@ -0,0 +1,40 @@
+( function ( mw, $ ) {
+       QUnit.module( 'mediawiki.toc', QUnit.newMwEnvironment() );
+
+       QUnit.asyncTest( 'toggleToc', 4, function ( assert ) {
+               var tocHtml, $toggleLink, $tocList;
+
+               function actionC() {
+                       QUnit.start();
+               }
+
+               function actionB() {
+                       assert.strictEqual( $tocList.is( ':hidden' ), true, 'Return boolean true if the TOC is now visible.' );
+                       $toggleLink.click();
+                       $tocList.promise().done( actionC );
+               }
+
+               function actionA() {
+                       assert.strictEqual( $tocList.is( ':hidden' ), false, 'Return boolean false if the TOC is now hidden.' );
+                       $toggleLink.click();
+                       $tocList.promise().done( actionB );
+               }
+
+               assert.strictEqual( $( '#toc' ).length, 0, 'Return 0 if there is no table of contents on the page.' );
+
+               tocHtml = '<div id="toc" class="toc">' +
+                       '<div id="toctitle">' +
+                       '<h2>Contents</h2>' +
+                       '</div>' +
+                       '<ul><li></li></ul>' +
+                       '</div>';
+               $( tocHtml ).appendTo( '#qunit-fixture' );
+               mw.hook( 'wikipage.content' ).fire( $( '#qunit-fixture' ) );
+               $tocList = $( '#toc ul:first' );
+               $toggleLink = $( '#togglelink' );
+
+               assert.strictEqual( $toggleLink.length, 1, 'Toggle link is appended to the page.' );
+
+               actionA();
+       } );
+}( mediaWiki, jQuery ) );

diff --git a/tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js b/tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js
index 9216f0a..5d1d279 100644 (file)
--- a/tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js
+++ b/tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js
@@ -91,11 +91,11 @@
                tocHtml = '<div id="toc" class="toc">' +
                        '<div id="toctitle">' +
                        '<h2>Contents</h2>' +
-                       '<span class="toctoggle">&nbsp;[<a href="#" class="internal" id="togglelink">Hide</a>&nbsp;]</span>' +
                        '</div>' +
                        '<ul><li></li></ul>' +
                        '</div>';
                $( tocHtml ).appendTo( '#qunit-fixture' );
+               mw.hook( 'wikipage.content' ).fire( $( '#qunit-fixture' ) );
                $toggleLink = $( '#togglelink' );
 
                assert.strictEqual( $toggleLink.length, 1, 'Toggle link is appended to the page.' );