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:
parent
911fa591f0
commit
d7a40c8c8a
6 changed files with 122 additions and 53 deletions
|
|
@ -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' ),
|
||||
),
|
||||
|
|
|
|||
64
resources/mediawiki/mediawiki.toc.js
Normal file
64
resources/mediawiki/mediawiki.toc.js
Normal 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( ' [' )
|
||||
.append( '] ' )
|
||||
);
|
||||
|
||||
if ( hideTocCookie === '1' ) {
|
||||
toggleToc( $tocToggleLink );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
}( mediaWiki, jQuery ) );
|
||||
|
|
@ -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( ' [' )
|
||||
.append( '] ' )
|
||||
);
|
||||
|
||||
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;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
40
tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js
Normal file
40
tests/qunit/suites/resources/mediawiki/mediawiki.toc.test.js
Normal 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 ) );
|
||||
|
|
@ -91,11 +91,11 @@
|
|||
tocHtml = '<div id="toc" class="toc">' +
|
||||
'<div id="toctitle">' +
|
||||
'<h2>Contents</h2>' +
|
||||
'<span class="toctoggle"> [<a href="#" class="internal" id="togglelink">Hide</a> ]</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.' );
|
||||
|
|
|
|||
Loading…
Reference in a new issue