 | This module is rated as beta, and is ready for widespread use. It is still new and should be used with some caution to ensure the results are as expected. |
| Clade System | |
|---|---|
| Templates and modules for generating cladograms | |
| Modules | |
| Related templates | |
| |
| Help | |
| Basics |
|
| Tips |
|
| Technical help | |
This module contains the code for {{Clade hidden}}
Useful help page:
{{#invoke:Clade|hidden}}
 | This module depends on the following other modules:
|
 | This module uses TemplateStyles:
|
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 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; }
| Code | Output | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{{Clade
|label1=root
|1={{Clade
|1=Unhidden Leaf
|label2=Hidden clade
|2={{Clade hidden |id=1|1=Leaf1
|2=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=⨁
|collapse-symbol=⨂
|1=Leaf1 <!-- standard clade parameters -->
|2=Leaf2
}}
}}
}}
|
|
local p = {}
function p.hidden(frame)
local id = mw.getCurrentFrame():getParent().args['id'] or ""
local mode = mw.getCurrentFrame():getParent().args['mode'] or "right"
local expandSymbol = mw.getCurrentFrame():getParent().args['expand-symbol'] or "⊞"
local collapseSymbol = mw.getCurrentFrame():getParent().args['collapse-symbol'] or "⊟"
local expandText = mw.getCurrentFrame():getParent().args['expand-text'] or ""
local collapseText = mw.getCurrentFrame():getParent().args['collapse-text'] or ""
local initialStateExpanded = mw.getCurrentFrame():getParent().args['expanded'] or "false"
if mw.getCurrentFrame():getParent().args['expand-symbol'] == "none" then
expandSymbol = expandText
else
expandSymbol = expandSymbol .. expandText
end
if mw.getCurrentFrame():getParent().args['collapse-symbol'] == "none" then
collapseSymbol = collapseText
else
collapseSymbol = collapseSymbol .. collapseText
end
-- default is content collapsed
local contentState = " mw-collapsed" -- class to collapse content at start
local collapseSymbolState = " mw-collapsed"
local expandSymbolState = ""
if initialStateExpanded == "true" or initialStateExpanded == "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
local expandSymbolString = '<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
local clade = require( 'Module:Clade' )
local contentString = '<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
local collapseSymbolString = '<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>'
local tableStyle = frame.args.style or ""
if tableStyle == '{{{style}}}' then tableStyle = "" end
local cladeString = '<table style="border-spacing:0;margin:0;'..tableStyle ..'"><tr>'
cladeString = cladeString .. expandSymbolString
if mode == "left" then
cladeString = cladeString .. collapseSymbolString
end
cladeString = cladeString .. contentString
if mode == "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>'
return p.templateStyle( frame, "Clade hidden/styles.css" ) .. cladeString
end
function p.toggle(frame)
if 1==2 then return 'some text' end
--local toggleSymbol = 'toggle all'
local toggleSymbol = mw.getCurrentFrame():getParent().args['button'] or ""
local toggleString = '<div class="'
local i=0
while i < 20 do -- limit on number of toggle elements controlled by the trigger button
i = i + 1 -- so we start with 1
local target = mw.getCurrentFrame():getParent().args['id'..tostring(i)]
-- add classes for the three elements of each target: expand symbol, collapse symbol and contents
if target ~= nil then
toggleString = toggleString .. ' mw-customtoggle-myClade' .. target
.. ' mw-customtoggle-collapseSymbol' .. target
.. ' mw-customtoggle-expandSymbol' .. target
end
end
toggleString = toggleString .. '">' .. toggleSymbol .. '</div>'
return toggleString
end
-- <templatestyles src="Clade hidden/styles.css"></templatestyles>
function p.templateStyle( frame, src )
return frame:extensionTag( 'templatestyles', '', { src = src } );
end
return p
