MediaWiki talk:Gadget-CollapsibleTemplates.js
|
The use of CollapsibleTemplates has been deprecated in favour of using the mw-collapsible, mw-collapsed and mw-collapsible-content CSS classes (since MediaWiki 1.20).
|
 | This script, CollapsibleTemplates, is a JavaScript gadget which can be enabled or disabled in your Preferences. |
 |
i18n | Gadget translations:
no internationalisation required: |
This script can be used to create collapsible tables or boxes.
For tables the usage is slightly different, see equivalent m:Help:Collapsing (except user customization, which is not working on Commons).
Box example:
<div class="collapsibletemplate" style="border: 3px solid black;">
<div class="collapsibleheader header">
Click here to show details
</div>
<div class="body">
{{Lorem}}
</div>
</div>
generates
Click here to show details
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The box can be auto-collapsed by adding "collapsed" as a class. Example:
<div class="collapsibletemplate collapsed" style="border: 3px solid black;">
<div class="collapsibleheader header">
Click here to show details
</div>
<div class="body">
{{Lorem}}
</div>
</div>
generates
Click here to show details
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="mw-collapsible mw-collapsed" style="border: 3px solid black;">
<div class="mw-collapsible-toggle" style="cursor:pointer">Click here to show details</div>
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>
generates
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible mw-collapsed" style="border: 3px solid black;">
<div class="mw-collapsible-toggle" style="cursor:pointer; float:none">Click here to show details</div>
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>
generates
Is this needed?[edit]
We already have two scripts to make collapsible boxes: MediaWiki:CollapsibleTables.js (tables) and MediaWiki:NavFrame.js (divs), do we really need another one? Instead of using if(skin=='vector'), it should be placed on or included in MediaWiki:Vector.js. There's no need to load this for every skin if it's only for vector. The CSS also seems to be specific to the vector skin and shouldn't be in Common.css. Since MediaWiki:NavFrame.js is already in use, uses the same name as en.wp and other projects, and is fairly stable, I think we should stick to that (but it needs to be moved from Monobook.js/Vector.js to Common.js, the css can be skin-specific). Rocket000 (talk) 16:40, 24 August 2010 (UTC)
Links in header[edit]
...are currently disabled. Click on the "Leonardo da Vinci" link at File:Mona Lisa.jpg: it will open the collabsed table instead of going to Leonardo da Vinci. Evidently the mousedown handler on the header overrides the normal click handler on the link. Methinks the code should be something like
$headings.click(function(e) {
if (e.target == this) {
toggleTemplate($j(this));
return false;
}
return true;
});
This changes the behavior such that clicks on children on the header take precedence, i.e. only clicks on the header background will expand/collapse the collapsible, while clicks on links will open whatever is linked to.
Tested only on FF. Should the years ("1452-1519") also link somewhere? (Where does this bit come from anyway?) That still doesn't work with this modification. Also test on IE6/8 before deploying. Lupo 09:26, 22 October 2010 (UTC)
- This template has issues too. The links should not expand it. Any way to get the old behavior, where only the arrow expands/collapses it? Rocket000 (talk) 01:23, 23 October 2010 (UTC)
- It works now. Personnally I like that you can click anywhere, but I think the text remain black, otherwise it can be confusing, especially when there is a link in the template, like here.--Zolo (talk) 11:36, 29 October 2010 (UTC)
- A few people mentioned this before. Removed now--DieBuche (talk) 16:01, 29 October 2010 (UTC)
- Ah yes thanks, my cache had not gotI thought I remembered that it had been mentioned, but I could not find it, so I wasn't sure--Zolo (talk) 20:15, 29 October 2010 (UTC)
- It works now. Personnally I like that you can click anywhere, but I think the text remain black, otherwise it can be confusing, especially when there is a link in the template, like here.--Zolo (talk) 11:36, 29 October 2010 (UTC)
{{Edit request}} The table doesn't collapse when clicking text links in the header, but it does collapse when clicking linked images (since the target is then the image, not the link). For an example, see the Wikidata link in the header of Creator:Edvard Munch. This is confusing, and could be fixed by applying the following diff (updated). – Danmichaelo (δ) 13:20, 5 January 2013 (UTC)
- This took quite a while. Sorry for this. We are suffering from staff shortages in the JS-area. -- Rillke(q?) 14:44, 27 June 2013 (UTC)
Fix hook handler[edit]
This script is currently doesn’t work with the so-called live preview (Show preview without reloading the page in the Preferences / Editing section). This is probably because the hook handler runs before the preview HTML is added to the DOM tree. The documentation explicitly doesn’t guarantee that the content is in the DOM tree, so all jQuery calls should depend the hook parameter. The following code works:
/*jshint curly:false */
/*global jQuery:false, mediaWiki:false*/
(function($, mw) {
'use strict';
var slideDuration = (mw.config.get('skin') === 'vector') ? 150 : 0;
function toggleTemplate($element) {
if ($element.is('tr')) {
$element
.parent().parent()
.toggleClass('collapsed');
$element.nextAll('tr')
.toggleClass('hidden');
} else {
$element
.parent()
.toggleClass('expanded')
.toggleClass('collapsed')
.find('div.body')
.slideToggle(slideDuration);
}
}
function onCollapsibleMousedown(e) {
var $t = $(e.target);
if ($t.is('a') || $t.parents('a').length !== 0) {
return true;
} else {
toggleTemplate($(this));
return false;
}
}
function launch($content) {
$('div.collapsibleheader', $content).show();
$('div.collapsibletemplate.collapsed div.body', $content).hide();
$('table.collapsible.collapsed > tbody > tr:not(:first-child)', $content).toggleClass('hidden');
$('div.collapsibletemplate div.body', $content).removeClass('show-on-commons');
var $headings = $('div.collapsibletemplate > div.collapsibleheader, table.collapsible > tbody > tr:first-child', $content);
$headings.mousedown(onCollapsibleMousedown);
};
mw.hook( 'wikipage.content' ).add( launch );
}(jQuery, mediaWiki));
(I also moved the event handlers out of the hook handler, so they are not recreated on each page preview, and removed the :first-child compatibility fix, as no supported browser lacks it.) —Tacsipacsi (talk) 20:06, 20 June 2019 (UTC)
Done Awesome! Thank you! But anyway, is this Gadget not deprecated? -- User: Perhelion 08:47, 6 August 2019 (UTC)
- This Gadget is definitely deprecated. Also the documentation is very poor, the extra table-class is fully missing too. -- User: Perhelion 11:42, 6 August 2019 (UTC)