Difference between revisions of "Template:Segmented control"

From Co-Optitude Wiki
Jump to navigation Jump to search
 
(39 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
Usage example:
 
Usage example:
 
<pre>
 
<pre>
{{SegmentedControl
+
{{Segmented control
   |Title;Wiki page name
+
   |Titles=Title 1;Title 2;Title 3
  |[Image.png]Title;Wiki page name
+
   |Icons=rsIconCSSClassName;;rsIconCSSClassName
   |Selected title
+
   |Links=Name of page;Name of page;}}
   |etc}}
 
 
</pre>
 
</pre>
 +
Segments without links will be assumed to be selected. Missing icon classes will show segments without icons.
 
</noinclude>
 
</noinclude>
<includeonly>
+
<includeonly><div class="rsToggleContainer">{{#vardefine:i|0}}{{#while:|{{#vardefine:segmentTitle|{{#explode:{{{Titles|}}}|;|{{#var:i}} }} }}{{#var:segmentTitle}}
{{#vardefine:segmentCount|0}}{{#vardefine:i|1}}{{#while:|{{#if:{{{{{#var:i}}|}}}|true}}|<nowiki/>{{#vardefine:segmentCount|{{#expr:{{#var:segmentCount}}+1}}}}{{#vardefine:i|{{#expr:{{#var:i}}+1}}}}}}
+
    |<nowiki/>{{#vardefine:segmentImage|{{#explode:{{{Icons|}}}|;|{{#var:i}} }} }}{{#vardefine:segmentLink|{{#explode:{{{Links|}}}|;|{{#var:i}} }} }}{{#vardefine:segmentClasses|rsSegment {{#if:{{#var:segmentLink}}||rsSegmentSelected}}}}{{#vardefine:segmentIconHTML|{{#if:{{#var:segmentImage}}|<span class="rsSegmentIcon {{#var:segmentImage}}"></span>}}}}{{#vardefine:segmentFillHTML|<div class="rsSegmentFill"><span class="rsSegmentTitle">{{#var:segmentIconHTML}} <span class="rsSegmentTitleText">{{#var:segmentTitle}}</span></span></div>}}<div class="{{#var:segmentClasses}}">{{#if:{{#var:segmentLink}}|[[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|{{#var:segmentFillHTML}}}}</div>{{#vardefine:i|{{#expr:{{#var:i}}+1}}}}}}</div></includeonly>
* Segment count: {{#var:segmentCount}}
 
<div class="rsToggleContainer">
 
{{#vardefine:i|1}}{{#while:|{{#ifexpr:{{#var:i}}<={{#var:segmentCount}}|true}}
 
| <nowiki />
 
{{#vardefine:orderClass|rsSegmentMiddle}}
 
{{#ifexpr:{{#var:i}}=1|{{#vardefine:orderClass|rsSegmentFirst}}}}
 
{{#ifexpr:{{#var:i}}={{#var:segmentCount}}|{{#vardefine:orderClass|rsSegmentLast}}}}
 
* orderClass = {{#var:orderClass}}
 
{{#vardefine:segment|{{{{{#var:i}}|}}} }}
 
* segment = {{#var:segment}}
 
{{#vardefine:imageAndTitle|{{#explode:{{#var:segment}}|;|0}}}}
 
* imageAndTitle = {{#var:imageAndTitle}}
 
{{#vardefine:segmentLink|{{#explode:{{#var:segment}}|;|1}}}}
 
* segmentLink = {{#var:segmentLink}}
 
{{#vardefine:firstChar|{{#sub:{{#var:imageAndTitle}}|0|1}}}}
 
* firstChar = {{#var:firstChar}}
 
{{#vardefine:segmentImage|{{#ifeq:{{#var:firstChar}}|\[|{{#explode:{{#sub:{{#var:imageAndTitle}}|1}}|\]|0}}|}}
 
* segmentImage = {{#var:segmentImage}}
 
{{#vardefine:segmentTitle|{{#ifeq:{{#var:firstChar}}|\[|{{#explode:{{#var:imageAndTitle}}|]|1}}|{{#var:imageAndTitle}}}}
 
* segmentTitle = {{#var:segmentTitle}}
 
{{#vardefine:segmentSelected|{{#if:{{#var:segmentLink}}|true|false}}}}
 
* {{#var:segmentTitle}} = {{#var:segmentLink}} ({{#var:segmentSelected}})
 
<div class="rsSegment rsSegmentFirst rsSegmentSelected">
 
<div class="rsSegmentFill">
 
<span class="rsSegmentTitle">{{#var:imageAndTitle}}</span>
 
</div>
 
</div>
 
{{#vardefine:i|{{#expr:{{#var:i}}+1}} }}
 
}}
 
</div>
 
</includeonly>
 

Latest revision as of 07:01, 25 April 2020

Usage example:

{{Segmented control
  |Titles=Title 1;Title 2;Title 3
  |Icons=rsIconCSSClassName;;rsIconCSSClassName
  |Links=Name of page;Name of page;}}

Segments without links will be assumed to be selected. Missing icon classes will show segments without icons.