|
|
| (20 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
|
| |
|
| /*<nowiki>*/
| | /** |
| /**** class CollapsibleTables.js | | * Adds CSS classes to the body tag based on the categories this page belongs to |
| * (c) 2007 by Patrick Westerhoff [poke] | |
| * | | * |
| * This class allows to make tables collapsible and adds a show/hide button to | | * @source https://www.mediawiki.org/wiki/Snippets/Style_pages_based_on_categories |
| * affected tables. Tables which class attribute contains 'collapsible' or
| | * @revision 2016-01-18 |
| * 'expandable' are affected by this class and can be collapsed; the latter
| |
| * automatically hides the content of all sections.
| |
| * Header rows are used to divide the table into sections which can be collapsed | |
| * separately. By default the first row of the table is interpreted as a header
| |
| * row, however this can be overwritten by adding 'collapsible' to the class
| |
| * attribute of header rows. You can also hide a section individually by default
| |
| * when in 'collapsible' mode by using 'expandable' as the row's class name
| |
| * instead.
| |
| */ | | */ |
| | | (function($, mw) { |
| function CollapsibleTables () | | var fn = function() { |
| { | | var cats = mw.config.get('wgCategories'), newClasses; |
| var classCollapsible = 'collapsible';
| | if (cats) { |
| var classExpandable = 'expandable';
| | newClasses = $.map(cats, function(el) { |
| var linkTextShow = '[show]';
| | return 'cat-' + encodeURIComponent(el.replace(/[ .]/g, '_')).replace(/%/g, '_'); |
| var linkTextHide = '[hide]';
| | }).join(' '); |
|
| | $(document.body).addClass(newClasses); |
| var reCollapsible = new RegExp( '(?:\\s|^)' + classCollapsible + '(?:\\s|$)' );
| | } |
| var reExpandable = new RegExp( '(?:\\s|^)' + classExpandable + '(?:\\s|$)' );
| | }; |
| var sections = new Array();
| | if (document.body) { |
|
| | fn(); |
| // link element
| | } |
| var linkElement = document.createElement( 'a' );
| | else { |
| linkElement.style.fontSize = '85%';
| | $(fn); |
| linkElement.style.fontWeight = 'normal';
| | } |
| linkElement.style.width = '3em';
| | })(jQuery, mw); |
| linkElement.style.cssFloat = 'right';
| |
| linkElement.style.styleFloat = 'right';
| |
| linkElement.style.textAlign = 'center';
| |
| linkElement.style.marginLeft = '1em';
| |
| linkElement.style.padding = '0px 3px';
| |
| linkElement.href = 'javas' + 'cript:void(0);';
| |
|
| |
| initialize();
| |
|
| |
| /** private void initialize () :: initializes CollapsibleTables class **/
| |
| function initialize ()
| |
| {
| |
| if ( wgIsArticle == false && window.location.href.indexOf( 'action=submit' ) < 0 && wgNamespaceNumber != -1 )
| |
| return;
| |
|
| |
| var docContent = document.getElementById( 'bodyContent' ) || document.getElementById( 'article' ) || document.getElementById( 'mw_contentholder' );
| |
| var tables = docContent.getElementsByTagName( 'table' );
| |
| var sectionId = -1;
| |
| var defaultStatus;
| |
|
| |
| for ( var i = 0, n = tables.length; i < n; i++ )
| |
| {
| |
| if ( reCollapsible.test( tables[i].className ) )
| |
| defaultStatus = true;
| |
| else if ( reExpandable.test( tables[i].className ) )
| |
| defaultStatus = false;
| |
| else
| |
| continue;
| |
|
| |
| var tableRows = tables[i].rows;
| |
| var sectionFound = false;
| |
| var status = false;
| |
|
| |
| for ( var j = 0, m = tableRows.length; j < m; j++ )
| |
| {
| |
| if ( reCollapsible.test( tableRows[j].className ) )
| |
| status = true;
| |
| else if ( reExpandable.test( tableRows[j].className ) )
| |
| status = false;
| |
| else
| |
| {
| |
| if ( sectionFound )
| |
| {
| |
| sections[ sectionId ].content.push( tableRows[j] );
| |
| tableRows[j].style.display = sections[ sectionId ].status ? '' : 'none';
| |
| }
| |
|
| |
| continue;
| |
| }
| |
|
| |
| var section = new Object();
| |
| section.header = tableRows[j];
| |
| section.content = new Array();
| |
| section.status = defaultStatus ? status : false;
| |
|
| |
| sections[ ++sectionId ] = section;
| |
| sectionFound = true;
| |
|
| |
| initHeaderRow( tableRows[j], sectionId, section.status );
| |
| }
| |
|
| |
| if ( sectionFound == false )
| |
| {
| |
| var section = new Object();
| |
| section.header = tableRows[0];
| |
| section.content = new Array();
| |
| section.status = defaultStatus;
| |
|
| |
| for ( var j = 1; j < tableRows.length; j++ )
| |
| {
| |
| section.content.push( tableRows[j] );
| |
| tableRows[j].style.display = section.status ? '' : 'none';
| |
| }
| |
|
| |
| sections[ ++sectionId ] = section;
| |
|
| |
| initHeaderRow( tableRows[0], sectionId, defaultStatus );
| |
| }
| |
| }
| |
| }
| |
|
| |
| /** private void initHeaderRow ( headerRow, sectionId, sectionStatus ) :: adds show/hide button **/
| |
| function initHeaderRow ( headerRow, sectionId, sectionStatus )
| |
| {
| |
| var lastCell, link;
| |
|
| |
| headerRow.id = 'collapsible-section_' + sectionId;
| |
| lastCell = headerRow.cells[ headerRow.cells.length - 1 ];
| |
| link = linkElement.cloneNode( false );
| |
| link.onclick = toggleSection;
| |
| link.appendChild( document.createTextNode( sectionStatus ? linkTextHide : linkTextShow ) );
| |
|
| |
| lastCell.insertBefore( link, lastCell.firstChild );
| |
| }
| |
|
| |
| /** private void toggleSection () :: onclick event handler **/
| |
| function toggleSection ()
| |
| {
| |
| var trHead = this.parentNode.parentNode;
| |
| var section = sections[ trHead.id.substr( 20 ) ];
| |
| var content = section.content;
| |
| var display = section.status ? 'none' : '';
| |
|
| |
| for ( var i = 0, n = content.length; i < n; i++ )
| |
| content[i].style.display = display;
| |
|
| |
| section.status = !section.status;
| |
| this.firstChild.data = section.status ? linkTextHide : linkTextShow;
| |
| }
| |
| }
| |
| /*</nowiki>*/
| |
