whentimeslows/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

toc logic

Browse Source
This commit is contained in:
John Mulhausen
2016-02-09 13:23:33 -08:00
parent 7b55b0b243
commit a53cd45d08
9 changed files with 82 additions and 1127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/tree.html
+64 -41
View File
@@ -1,45 +1,68 @@
<!--
<ul {% if subsection %}style="display: none; opacity: 0; margin-left: 15px;"{% endif %}>
{% for item in tree %}
{% if item.status %}
{% capture statusHTML %} <sup style="color: red">{{item.status}}</sup>{% endcapture %}
Here's your API ref for this accordion element:
Each line is class "item". Use the data-title attribute for the text label.
Use a.item for direct links; use div.item to wrap containers.
A div.container inside a div.item is a nested accordion. The clickable text which toggles the
container open/closed is the data-title attribute of the parent div.item.
<a class="item" data-title="Overview" href="path-to-page"></a>
<div class="item" data-title="Quickstarts">
<div class="container">
<a class="item" data-title="Setting Up Your Local Environment" href="path-to-page"></a>
<a class="item" data-title="5-minute Quickstart" href="path-to-page"></a>
<a class="item" data-title="Kubernetes 101" href="path-to-page"></a>
<a class="item" data-title="Kubernetes 201" href="path-to-page"></a>
</div>
</div>
<div class="item" data-title="Running Kubernetes">
<div class="container">
<a class="item" data-title="Running Kubernetes on Your Local Machine" href="path-to-page"></a>
<a class="item" data-title="Running Kubernetes on Google Container Engine" href="path-to-page"></a>
<div class="item" data-title="Third-level Schtuff">
<div class="container">
<a class="item" data-title="Third Level One" href="path-to-page"></a>
<a class="item" data-title="Third Level Two" href="path-to-page"></a>
<a class="item" data-title="Third Level Three" href="path-to-page"></a>
<a class="item" data-title="Third Level Four" href="path-to-page"></a>
</div>
</div>
<a class="item" data-title="Running Kubernetes on Turn-Key Cloud Solutions" href="path-to-page"></a>
<a class="item" data-title="Running Kubernetes on Custom Solutions" href="path-to-page"></a>
</div>
</div>
-->
{% for item in tree %}
{% if item.section %}
<div class="item" data-title="{{ item.title }}">
<div class="container">
{% assign tree = item.section %}
{% assign subsection=true %}
{% include tree.html %}
</div>
<div>
{% else %}
{% assign statusHTML = "" %}
{% endif %}
{% if item.section %}
{% capture sectionHTML %}<a class="tlw-control tlw-collapsed">▸</a>{% endcapture %}
{% else %}
{% assign sectionHTML = "" %}
{% if item.status %}
{% capture statusHTML %} <sup style="color: red">{{item.status}}</sup>{% endcapture %}
{% else %}
{% assign statusHTML = "" %}
{% endif %}
{% if item.path %}
{% if page.url | remove: ".html" | remove "index" == item.path %}
{% capture tocItemColor %}style="color:red;"{% endcapture %}
{% else %}
{% assign tocItemColor = "" %}
{% endif %}
{% endif %}
<a class="item" {{ tocItemColor }} href="{{ item.path }}" title="{{ item.title }}" data-title="{{ item.title }} - {{ item.path }}">{{ item.title }}{{ statusHTML }}</a>
{% endif %}
{% if item.path %}
{% if page.url | remove: ".html" | remove "index" == item.path %}
{% capture tocItemColor %}style="color:red;"{% endcapture %}
{% else %}
{% capture tocItemColor %}{% endcapture %}
{% endif %}
<li {{ tocItemColor }}>{{ sectionHTML }}<a href="{{ item.path }}" title="{{ item.title }}" data-title="{{ item.title }} - {{ item.path }}"><span>{{ item.title }} {{ statusHTML }}</span></a></li>
{% else %}
{% if item.include %}
{% assign tree = site.data[item.include].toc %}
{% assign subsection=false %}
{% include tree.html %}
{% else %}
<li>{{ sectionHTML }}<span class="tlw-title tlw-control-title" data-title="{{ item.title }}">{{ item.title }}{{ statusHTML }}</span></li>
{% endif %}
{% endif %}
{% if item.break %}
<hr>
{% endif %}
{% if item.section %}
{% assign tree = item.section %}
{% assign subsection=true %}
{% include tree.html %}
{% endif %}
{% endfor %}
</ul>
{% endfor %}