From 82452b2b7c46f32ad98d46e9c0b2b1b511528da9 Mon Sep 17 00:00:00 2001 From: MatmaRex Date: Sat, 23 Mar 2013 16:36:14 +0100 Subject: [PATCH] Make the templates/category lists on edit page collapsible This is a total rewrite of Vector extension's functionality, to fix various accessibility and internationalization issues with the original one. Both the JavaScript and the CSS have been redone from scratch. Still, the look&feel is almost the same as in the original version, save for the mentioned messaging changes and minor UI differences (the toggles are no longer elements). The same cookie names have been used to avoid any issues when migrating. Used standard arrow icons from the mediawiki.icon module. Bug: 43689 Change-Id: I91a3704cb09b9e17dd8baa516ab6f8ee441b7467 --- RELEASE-NOTES-1.22 | 3 ++ includes/EditPage.php | 4 ++ resources/Resources.php | 8 +++ ...ediawiki.action.edit.collapsibleFooter.css | 11 +++++ ...mediawiki.action.edit.collapsibleFooter.js | 49 +++++++++++++++++++ 5 files changed, 75 insertions(+) create mode 100644 resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.css create mode 100644 resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.js diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22 index 318f5924c0..f996204b85 100644 --- a/RELEASE-NOTES-1.22 +++ b/RELEASE-NOTES-1.22 @@ -114,6 +114,9 @@ production. * LinkCache singleton can now be altered or cleared, letting one to specify another instance that does not rely on a database backend. * MediaWiki's PHPUnit tests can now use PHPUnit installed using composer --dev. +* (bug 43689) The lists of templates used on the page and hidden categories it + is a member of, shown below the edit form, are now collapsible (and collapsed + by default). * New user rights have been added to increase granularity in rights management for extensions such as OAuth: ** editmyusercss controls whether a user may edit their own CSS subpages. diff --git a/includes/EditPage.php b/includes/EditPage.php index c41d9a1229..36ec7410fd 100644 --- a/includes/EditPage.php +++ b/includes/EditPage.php @@ -521,6 +521,8 @@ class EditPage { $wgOut->addHTML( Html::rawElement( 'div', array( 'class' => 'templatesUsed' ), Linker::formatTemplates( $this->getTemplates() ) ) ); + $wgOut->addModules( 'mediawiki.action.edit.collapsibleFooter' ); + if ( $this->mTitle->exists() ) { $wgOut->returnToMain( null, $this->mTitle ); } @@ -2270,6 +2272,8 @@ class EditPage { $wgOut->addHTML( Html::rawElement( 'div', array( 'class' => 'hiddencats' ), Linker::formatHiddenCategories( $this->mArticle->getHiddenCategories() ) ) ); + $wgOut->addModules( 'mediawiki.action.edit.collapsibleFooter' ); + if ( $this->isConflict ) { try { $this->showConflict(); diff --git a/resources/Resources.php b/resources/Resources.php index 02cde522d1..6352843fd8 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -725,6 +725,14 @@ return array( ), 'position' => 'top', ), + 'mediawiki.action.edit.collapsibleFooter' => array( + 'scripts' => 'resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.js', + 'styles' => 'resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.css', + 'dependencies' => array( + 'jquery.makeCollapsible', + 'mediawiki.icon', + ), + ), 'mediawiki.action.edit.preview' => array( 'scripts' => 'resources/mediawiki.action/mediawiki.action.edit.preview.js', 'dependencies' => array( diff --git a/resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.css b/resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.css new file mode 100644 index 0000000000..89f54c4cd7 --- /dev/null +++ b/resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.css @@ -0,0 +1,11 @@ +/* Styles for collapsible lists of templates used and hidden categories */ +.mw-editfooter-toggler { + cursor: pointer; + background-position: left center; + padding-left: 16px; +} + +.mw-editfooter-list { + margin-bottom: 1em; + margin-left: 2.5em; +} diff --git a/resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.js b/resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.js new file mode 100644 index 0000000000..0fb5912c24 --- /dev/null +++ b/resources/mediawiki.action/mediawiki.action.edit.collapsibleFooter.js @@ -0,0 +1,49 @@ +jQuery( document ).ready( function ( $ ) { + var collapsibleLists, i, handleOne; + + // Collapsible lists of categories and templates + collapsibleLists = [ + { + $list: $( '.templatesUsed ul' ), + $toggler: $( '.mw-templatesUsedExplanation' ), + cookieName: 'templates-used-list' + }, + { + $list: $( '.hiddencats ul' ), + $toggler: $( '.mw-hiddenCategoriesExplanation' ), + cookieName: 'hidden-categories-list' + } + ]; + + handleOne = function ( $list, $toggler, cookieName ) { + var isCollapsed = $.cookie( cookieName ) !== 'expanded'; + + // Style the toggler with an arrow icon and add a tabIndex and a role for accessibility + $toggler.addClass( 'mw-editfooter-toggler' ).prop( 'tabIndex', 0 ).attr( 'role', 'button' ); + $list.addClass( 'mw-editfooter-list' ); + + $list.makeCollapsible( { + $customTogglers: $toggler, + linksPassthru: true, + plainMode: true, + collapsed: isCollapsed + } ); + + $toggler.addClass( isCollapsed ? 'mw-icon-arrow-collapsed' : 'mw-icon-arrow-expanded' ); + + $list.on( 'beforeExpand.mw-collapsible', function () { + $toggler.removeClass( 'mw-icon-arrow-collapsed' ).addClass( 'mw-icon-arrow-expanded' ); + $.cookie( cookieName, 'expanded' ); + } ); + + $list.on( 'beforeCollapse.mw-collapsible', function () { + $toggler.removeClass( 'mw-icon-arrow-expanded' ).addClass( 'mw-icon-arrow-collapsed' ); + $.cookie( cookieName, 'collapsed' ); + } ); + }; + + for ( i = 0; i < collapsibleLists.length; i++ ) { + // Pass to a function for iteration-local variables + handleOne( collapsibleLists[i].$list, collapsibleLists[i].$toggler, collapsibleLists[i].cookieName ); + } +} ); -- 2.20.1