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
This commit is contained in:
Fomafix 2014-01-24 08:36:20 +00:00 committed by [[mw:User:Fomafix]]
parent 911fa591f0
commit d7a40c8c8a
6 changed files with 122 additions and 53 deletions

View file

@ -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' ),
),

View file

@ -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 ) );

View file

@ -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;
},
/**

View file

@ -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',

View file

@ -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 ) );

View file

@ -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.' );