sidebar.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. {% comment %}
  2. Partial for the textbook sidebar. Renders each chapter and its sections from
  3. _data/toc.yml .
  4. Much of the logic here is to add active classes to the currently active
  5. section. The currently active section / chapter should be highlighted in the
  6. sidebar.
  7. If a chapter or any of its sections are the current page, we should display the
  8. chapter's sections. Otherwise, we hide the sections to keep the sidebar short.
  9. We also prefix the sidebar entries with the chapter/section number. We assume
  10. a 1-level nesting; we will label 1.2, but not 1.2.1.
  11. {% endcomment %}
  12. {% assign chapter_num = 1 %}
  13. <nav id="js-sidebar" class="c-textbook__sidebar">
  14. {% if site.textbook_logo %}<a href="{{ site.textbook_logo_link }}"><img src="{{ site.textbook_logo | relative_url }}" class="textbook_logo" id="sidebar-logo" alt="textbook logo" data-turbolinks-permanent/></a>{% endif %}
  15. <h2 class="c-sidebar__title">{{ site.title }}</h2>
  16. <ul class="c-sidebar__chapters">
  17. {% for chapter in site.data.toc %}
  18. {% comment %}
  19. If the entry is a divider, render a divider and move to next entry.
  20. {% endcomment %}
  21. {% if chapter.divider %}
  22. <li class="c-sidebar__divider"></li>
  23. {% continue %}
  24. {% elsif chapter.header %}
  25. <li><h2 class="c-sidebar__title">{{ chapter.header }}</li>
  26. {% continue %}
  27. {% endif %}
  28. {% comment %}
  29. If the entry is the current page, assign a CSS class to highlight it.
  30. {% endcomment %}
  31. {% if page.url contains chapter.url %}
  32. {% assign active_class = "c-sidebar__entry--active" %}
  33. {% else %}
  34. {% assign active_class = "" %}
  35. {% endif %}
  36. {% assign topUrl = chapter.url | relative_url %}
  37. {% unless chapter.external == true %}
  38. {% assign topUrl = topUrl | append: '.html' %}
  39. {% endunless %}
  40. <li class="c-sidebar__chapter">
  41. <a class="c-sidebar__entry {{ active_class }}"
  42. href="{{ topUrl }}"
  43. >
  44. {% unless chapter.not_numbered or site.number_toc_chapters != true %}
  45. {{ chapter_num }}.
  46. {% endunless %}
  47. {{ chapter.title }}
  48. </a>
  49. {% if chapter.sections %}
  50. {% comment %}
  51. By default, all sections are hidden. We show a chapter's sections
  52. if the chapter or any of its sections are the current page.
  53. {% endcomment %}
  54. {% assign any_section_active = 0 %}
  55. {% for section in chapter.sections %}
  56. {% if page.url contains section.url or chapter.expand_sections %}
  57. {% assign any_section_active = 1 %}
  58. {% elsif section.subsections %}
  59. {% for subsection in section.subsections %}
  60. {% if page.url contains subsection.url %}
  61. {% assign any_section_active = 1 %}
  62. {% endif %}
  63. {% endfor %}
  64. {% elsif page.url contains chapter.url %}
  65. {% assign any_section_active = 1 %}
  66. {% endif %}
  67. {% endfor %}
  68. {% if any_section_active > 0 or site.collapse_inactive_chapters == false %}
  69. {% assign hide_section_class = "" %}
  70. {% else %}
  71. {% assign hide_section_class = "u-hidden-visually" %}
  72. {% endif %}
  73. {% assign section_num = 1 %}
  74. <ul class="c-sidebar__sections {{ hide_section_class }}">
  75. {% for section in chapter.sections %}
  76. {% comment %}
  77. If the entry is the current page, assign a CSS class to highlight
  78. it.
  79. {% endcomment %}
  80. {% if page.url contains section.url %}
  81. {% assign active_class = "c-sidebar__entry--active" %}
  82. {% else %}
  83. {% assign active_class = "" %}
  84. {% endif %}
  85. <li class="c-sidebar__section">
  86. <a class="c-sidebar__entry {{ active_class }}"
  87. href="{{ section.url | relative_url | append: '.html'}}"
  88. >
  89. {% unless chapter.not_numbered or section.not_numbered or site.number_toc_chapters != true %}
  90. {{ chapter_num }}.{{ section_num }}
  91. {% endunless %}
  92. {{ section.title }}
  93. </a>
  94. {% assign subsection_num = 1 %}
  95. {% for subsection in section.subsections %}
  96. {% comment %}
  97. Now add sub-sections. These will always be shown if they exist.
  98. {% endcomment %}
  99. {% if page.url contains subsection.url %}
  100. {% assign active_class = "c-sidebar__entry--active" %}
  101. {% else %}
  102. {% assign active_class = "" %}
  103. {% endif %}
  104. <li class="c-sidebar__subsection">
  105. <a class="c-sidebar__entry {{ active_class }}"
  106. href="{{ subsection.url | relative_url | append: '.html'}}"
  107. >
  108. {% unless chapter.not_numbered or section.not_numbered or subsection.not_numbered or site.number_toc_chapters != true %}
  109. {{ chapter_num }}.{{ section_num }}.{{ subsection_num }}
  110. {% assign subsection_num = subsection_num | plus: 1 %}
  111. {% endunless %}
  112. {{ subsection.title }}
  113. </a>
  114. {% endfor %}
  115. </li>
  116. {% unless chapter.not_numbered or section.not_numbered %}
  117. {% assign section_num = section_num | plus: 1 %}
  118. {% endunless %}
  119. {% endfor %}
  120. </ul>
  121. {% endif %}
  122. </li>
  123. {% unless chapter.not_numbered %}
  124. {% assign chapter_num = chapter_num | plus: 1 %}
  125. {% endunless %}
  126. {% endfor %}
  127. </ul>
  128. <p class="sidebar_footer">{{ site.sidebar_footer_text }}</p>
  129. </nav>