Module:Clade/hidden

Module documentation[view] [edit] [history] [purge]

This module is rated as beta. It is considered ready for widespread use, but as it is still relatively new, it should be applied with some caution to ensure results are as expected.

Clade System
Templates and modules for generating cladograms
Modules
Module:Clade Module:Clade/hidden Module:Clade/gallery Module:Clade/example Module:Clade/transclude
Related templates
{{Clade }} {{CladeR }} {{Clade hidden }} {{Clade gallery }} {{Clade example }} {{Clade box }} {{Clade transclude }}
Help
Basics	Using clade Customise brackets Table structure
Tips	Newick Annotations Alignment
Technical help
mw:Extension:Scribunto/Lua_reference_manual mw:Manual:Collapsible_elements

This module contains the code for {{Clade hidden }}

Useful help page:

Usage

[edit ]

{{#invoke:Clade|hidden}}

Documentation transcluded from the template

[edit ]

This module depends on the following other modules:

CSS This module uses TemplateStyles:

Template:Clade hidden/styles.css

Creates an interactive clade element that is collapsible. The initial state can be collapsed (hidden) or expanded (visible). Interactivity is achieved by clicking appropriate symbols in the cladogram (e.g. ⊞ or ⊟) or custom interactive elements can be added externally with {{clade toggle }}.

This feature is intended to be used sparsely on large clagograms where the whole structure cannot be seen in the screen window.

Parameters

[edit ]

Parameters as {{clade }} with the addition of the following:

|expanded=true – sets initial state to expanded (default: hidden)
|id= – id to control interactivity; use unique ids for independent behaviour or same ids for shared behaviour
|expand-symbol= – symbol for expansion (e.g. ⊞ --> ⊞ or ⨁ --> ⨁)
|collapse-symbol= – symbol for collapsing (e.g. ⊟ --> ⊟ or ⨂ -->⨂)
|mode=left – position of collapse symbol (left or right of the clade content; default: left)
|expand-text=(expand text) – text to replace hidden content
|collapse-text=(collapse text) – text to show with collapse symbol (when |mode=right)

Development note: The behaviour of the hidden element when in mobile mode or with javascript disable is controlled in {{clade hidden/styles.css }}. The currentl behaviour is to hide the symbols and leave the expanded content. The following CSS code can hide the content in these modes. However there are currently a couple of issues: width of labels on collapsed elements if on dummy clade; initial state of content when |expanded=true.

table.clade td.clade-interactive div.mw-collapsible-content { display:none; }

Examples

[edit ]

Code	Output
{{Clade \|label1=root \|1={{Clade \|1=Unhidden Leaf \|label2=Hidden clade \|2={{Clade hidden \|id=1 \|1=Leaf1 \|2=Leaf2 }} }} }}	root Unhidden Leaf Hidden clade ⊞ Leaf1 Leaf2	⊟

{{Clade
|label1=root
|1={{Clade
 |1=Unhidden Leaf
 |label2=Collapsible clade 
 |2={{Clade hidden 
 |id=2 <!-- clade hidden parameters -->
 |expanded=true
 |mode=right 
 |expand-text=(expand text) 
 |collapse-text=(collapse text)
 |expand-symbol=&#10753; 
 |collapse-symbol=&#10754;
 
 |1=Leaf1 <!-- standard clade parameters -->
 |2=Leaf2
 }}
 }}
}}

root

Unhidden Leaf

Collapsible clade

⨁(expand text)

Leaf1

Leaf2

⨂(collapse text)

The above documentation is transcluded from Module:Clade/hidden/doc. (edit | history)
Editors can experiment in this module's sandbox (create | mirror) and testcases (create) pages.
Subpages of this module.

 localp={}

 functionp.hidden(frame)

 localid=mw.getCurrentFrame():getParent().args['id']or""
 localmode=mw.getCurrentFrame():getParent().args['mode']or"right"
 localexpandSymbol=mw.getCurrentFrame():getParent().args['expand-symbol']or"&#8862;"
 localcollapseSymbol=mw.getCurrentFrame():getParent().args['collapse-symbol']or"&#8863;"
 localexpandText=mw.getCurrentFrame():getParent().args['expand-text']or""
 localcollapseText=mw.getCurrentFrame():getParent().args['collapse-text']or""
 localinitialStateExpanded=mw.getCurrentFrame():getParent().args['expanded']or"false"
 ifmw.getCurrentFrame():getParent().args['expand-symbol']=="none"then
 expandSymbol=expandText
 else
 expandSymbol=expandSymbol..expandText
 end
 ifmw.getCurrentFrame():getParent().args['collapse-symbol']=="none"then
 collapseSymbol=collapseText
 else
 collapseSymbol=collapseSymbol..collapseText
 end

 -- default is content collapsed
 localcontentState=" mw-collapsed"-- class to collapse content at start
 localcollapseSymbolState=" mw-collapsed"
 localexpandSymbolState=""
 ifinitialStateExpanded=="true"orinitialStateExpanded=="yes"then
 contentState=""
 collapseSymbolState=""
 expandSymbolState=" mw-collapsed"
 end


 -- collapsible element containing the EXPAND SYMBOL and/or text
 --local expandSymbolString = '<td class="nomobile" style="padding:0 0 0.0em 0;">' -- mobile exclusion no longer necessary
 localexpandSymbolString='<td style="padding:0 0 0.0em 0;">'
 ..'<div class="mw-collapsible'..expandSymbolState..'" id="mw-customcollapsible-expandSymbol'..id..'">'
 ..'<div class="mw-collapsible-content mw-customtoggle-expandSymbol'..id..'">'
 ..'<div class="mw-customtoggle-myClade'..id
 ..' mw-customtoggle-collapseSymbol'..id
 ..' mw-customtoggle-expandSymbol'..id
 ..'" style="font-size:100%;">'..expandSymbol..'</div>'
 ..'</div></div></td>'

 -- collapsible element containing the CLADE CONTENT 
 localclade=require('Module:Clade')
 localcontentString='<td style="padding:0;" class="clade-interactive" >'
 ..'<div class="mw-collapsible'..contentState..'" id="mw-customcollapsible-myClade'..id..'>'
 ..'<div class="mw-collapsible-content mw-customtoggle-NOT_ON_CONTENT" >'-- don't toggle on the content

 ..'\n'..clade.main(frame)-- important to start wikitext tables on new line
 ..'</div></div></td>'

 -- collapsible element containing the COLLAPSE SYMBOL and/or text
 --local collapseSymbolString = '<td class="nomobile" style="padding:0 0 0.0em 0;">' -- mobile exclusion no longer necessary
 localcollapseSymbolString='<td style="padding:0 0 0.0em 0;">'
 ..'<div class="mw-collapsible'..collapseSymbolState..'" id="mw-customcollapsible-collapseSymbol'..id..'">'
 ..'<div class="mw-collapsible-content mw-customtoggle-collapseSymbol'..id..'" >'
 ..'<span class="mw-customtoggle-expandSymbol'..id
 ..' mw-customtoggle-myClade'..id
 ..' mw-customtoggle-collapseSymbol'..id
 ..' " style="font-size:100%;" >'..collapseSymbol..'</span>'
 ..'</div></div></td>'


 localtableStyle=frame.args.styleor""
 iftableStyle=='{{{style}}}'thentableStyle=""end
 localcladeString='<table style="border-spacing:0;margin:0;'..tableStyle..'"><tr>'
 cladeString=cladeString..expandSymbolString
 ifmode=="left"then
 cladeString=cladeString..collapseSymbolString
 end
 cladeString=cladeString..contentString
 ifmode=="right"then
 cladeString=cladeString..collapseSymbolString
 end
 -- Note: if we want collapse string left and right it needs an extra element with a different id
 cladeString=cladeString..'</tr></table>'


 returnp.templateStyle(frame,"Clade hidden/styles.css")..cladeString
 end

 functionp.toggle(frame)

 if1==2thenreturn'some text'end

 --local toggleSymbol = 'toggle all'
 localtoggleSymbol=mw.getCurrentFrame():getParent().args['button']or""

 localtoggleString='<div class="'

 locali=0
 whilei<20do-- limit on number of toggle elements controlled by the trigger button
 i=i+1-- so we start with 1
 localtarget=mw.getCurrentFrame():getParent().args['id'..tostring(i)]

 -- add classes for the three elements of each target: expand symbol, collapse symbol and contents
 iftarget~=nilthen
 toggleString=toggleString..' mw-customtoggle-myClade'..target
 ..' mw-customtoggle-collapseSymbol'..target
 ..' mw-customtoggle-expandSymbol'..target
 end
 end


 toggleString=toggleString..'">'..toggleSymbol..'</div>'

 returntoggleString
 end


 -- <templatestyles src="Clade hidden/styles.css"></templatestyles>
 functionp.templateStyle(frame,src)
 returnframe:extensionTag('templatestyles','',{src=src});
 end

 returnp

Retrieved from "https://en.wikipedia.org/w/index.php?title=Module:Clade/hidden&oldid=1228433472"