Jump to content

Module:Clade/hidden/doc

From Wikipedia, the free encyclopedia
Clade System
Templates and modules for generating cladograms
Modules
Related templates
Help
Basics
  • Using clade
  • Customise brackets
  • Table structure
Tips
  • Newick
  • Annotations
  • Alignment
Technical help

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

Useful help page:


Usage

[edit]

{{#invoke:Clade/hidden|hidden}}


Documentation transcluded from the template

[edit]

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]
CodeOutput
{{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)