Merge pull request #43 from allejo/feature/submenu-classes

allejo · Aug 1, 2020 · 80782d7 · 80782d7
2 parents 60ad45e + ac56595
commit 80782d7
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -47,19 +47,20 @@ Alright, so how do you use it?
 
 This snippet is highly customizable. Here are the available parameters to change the behavior of the snippet.
 
-| Parameter      |  Type  | Default | Description |
-| -------------- | :----: | :-----: | ----------- |
-| `html`         | string | <sup>*</sup> | the HTML of compiled markdown generated by kramdown in Jekyll |
-| `sanitize`     | bool   | false  | when set to true, the headers will be stripped of any HTML in the TOC |
-| `class`        | string | ''     | a CSS class assigned to the TOC; concat multiple classes with '.' |
-| `id`           | string | ''     | an ID to be assigned to the TOC |
-| `h_min`        | int    | 1      | the minimum TOC header level to use; any heading lower than this value will be ignored |
-| `h_max`        | int    | 6      | the maximum TOC header level to use; any heading greater than this value will be ignored |
-| `ordered`      | bool   | false  | when set to true, an ordered list will be outputted instead of an unordered list |
-| `item_class`   | string | ''     | add custom class for each list item; has support for `%level%` placeholder, which is the current heading level |
-| `baseurl`      | string | ''     | add a base url to the TOC links for when your TOC is on another page than the actual content |
-| `anchor_class` | string | ''     | add custom class(es) for each anchor element |
-| `skipNoIDs`    | bool   | false  | skip headers that do not have an `id` attribute |
+| Parameter       |  Type  | Default | Description |
+| --------------- | :----: | :-----: | ----------- |
+| `html`          | string | <sup>*</sup> | the HTML of compiled markdown generated by kramdown in Jekyll |
+| `sanitize`      | bool   | false  | when set to true, the headers will be stripped of any HTML in the TOC |
+| `class`         | string | ''     | a CSS class assigned to the TOC; concat multiple classes with '.' |
+| `id`            | string | ''     | an ID to be assigned to the TOC |
+| `h_min`         | int    | 1      | the minimum TOC header level to use; any heading lower than this value will be ignored |
+| `h_max`         | int    | 6      | the maximum TOC header level to use; any heading greater than this value will be ignored |
+| `ordered`       | bool   | false  | when set to true, an ordered list will be outputted instead of an unordered list |
+| `item_class`    | string | ''     | add custom class for each list item; has support for `%level%` placeholder, which is the current heading level |
+| `submenu_class` | string | ''     | add custom class(es) for each child group of headings; has support for '%level%' placeholder which is the current "submenu" heading level |
+| `baseurl`       | string | ''     | add a base url to the TOC links for when your TOC is on another page than the actual content |
+| `anchor_class`  | string | ''     | add custom class(es) for each anchor element |
+| `skipNoIDs`     | bool   | false  | skip headers that do not have an `id` attribute |
 
 <sup>*</sup> This is a required parameter
 

diff --git a/_includes/toc.html b/_includes/toc.html
@@ -24,7 +24,7 @@
         OTHER DEALINGS IN THE SOFTWARE.
     {% endcomment %}
     {% comment %}
-        Version 1.0.13
+        Version 1.0.14
           https://github.com/allejo/jekyll-toc
 
         "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
@@ -36,16 +36,17 @@
             * html         (string) - the HTML of compiled markdown generated by kramdown in Jekyll
 
         Optional Parameters:
-            * sanitize     (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
-            * class        (string) :   ''   - a CSS class assigned to the TOC
-            * id           (string) :   ''   - an ID to assigned to the TOC
-            * h_min        (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
-            * h_max        (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored
-            * ordered      (bool)   : false  - when set to true, an ordered list will be outputted instead of an unordered list
-            * item_class   (string) :   ''   - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level
-            * baseurl      (string) :   ''   - add a base url to the TOC links for when your TOC is on another page than the actual content
-            * anchor_class (string) :   ''   - add custom class(es) for each anchor element
-            * skipNoIDs    (bool)   : false  - skip headers that do not have an `id` attribute
+            * sanitize      (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
+            * class         (string) :   ''   - a CSS class assigned to the TOC
+            * id            (string) :   ''   - an ID to assigned to the TOC
+            * h_min         (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
+            * h_max         (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored
+            * ordered       (bool)   : false  - when set to true, an ordered list will be outputted instead of an unordered list
+            * item_class    (string) :   ''   - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level
+            * submenu_class (string) :   ''   - add custom class(es) for each child group of headings; has support for '%level%' placeholder which is the current "submenu" heading level
+            * baseurl       (string) :   ''   - add a base url to the TOC links for when your TOC is on another page than the actual content
+            * anchor_class  (string) :   ''   - add custom class(es) for each anchor element
+            * skipNoIDs     (bool)   : false  - skip headers that do not have an `id` attribute
 
         Output:
             An ordered or unordered list representing the table of contents of a markdown block. This snippet will only
@@ -59,6 +60,7 @@
     {% assign maxHeader = include.h_max | default: 6 %}
     {% assign nodes = include.html | split: '<h' %}
     {% assign firstHeader = true %}
+    {% assign previousLevel = 0 %}
 
     {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
 
@@ -116,8 +118,25 @@
             {% capture list_item %}{{ anchor_body }}{% endcapture %}
         {% endif %}
 
+        <!--
+        If we have a submenu class and we're unindenting, then we need to add a "closing" class to this group of bullet
+        points
+        -->
+        {% if include.submenu_class and previousLevel > indentAmount %}
+            <!--
+            `space` is the current indentation, so we if want to close off the previous grouping, we need to add one
+            more level of indentation 
+            -->
+            {% assign submenuIndentation = space | prepend: '    ' %}
+
+            {% capture my_toc %}{{ my_toc }}
+{{ submenuIndentation }}{:.{{ include.submenu_class | replace: '%level%', previousLevel }}}{% endcapture %}
+        {% endif %}
+
         {% capture my_toc %}{{ my_toc }}
 {{ space }}{{ listModifier }} {{ listItemClass }} {{ list_item }}{% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
+
+        {% assign previousLevel = indentAmount %}
     {% endfor %}
 
     {% if include.class and include.class != blank %}
@@ -129,4 +148,23 @@
         {% capture my_toc %}{: #{{ include.id }}}
 {{ my_toc | lstrip }}{% endcapture %}
     {% endif %}
+
+    <!--
+    If we have a submenu class, we need to close off all the remaining list item groups so that submenu classes are
+    applied correctly to them
+    -->
+    {% if include.submenu_class != blank %}
+        <!-- The last level of indentation that we were at, we need to work backwards from there closing each group -->
+        {% for i in (1..previousLevel) %}
+            {% assign lvl = previousLevel | plus: 1 | minus: i %} <!-- Invert the indent level based on `i` -->
+            {% assign closingSpace = '' %}
+
+            {% for i in (1..lvl) %}
+                {% assign closingSpace = closingSpace | prepend: '    ' %}
+            {% endfor %}
+
+            {% capture my_toc %}{{ my_toc }}
+{{ closingSpace }}{:.{{ include.submenu_class | replace: '%level%', lvl }}}{% endcapture %}
+        {% endfor %}
+    {% endif %}
 {% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}
diff --git a/_tests/sanitizeDisabled.md b/_tests/sanitizeDisabled.md
@@ -5,7 +5,7 @@
 {% capture markdown %}
 # Heading 1
 
-## `Heading` 2.1
+## Heading 2.1
 
 ### Heading **3**
 
@@ -24,7 +24,7 @@
         <a href="#heading-1">Heading 1</a>
         <ul>
             <li>
-                <a href="#heading-21"><code class="highlighter-rouge">Heading</code> 2.1</a>
+                <a href="#heading-21">Heading 2.1</a>
                 <ul>
                     <li>
                         <a href="#heading-3">Heading <strong>3</strong></a>

diff --git a/_tests/subMenuClass.md b/_tests/subMenuClass.md
@@ -0,0 +1,46 @@
+---
+# https://github.com/allejo/jekyll-toc/issues/40
+---
+
+{% capture markdown %}
+# Heading 1
+
+## Heading 2.1
+
+### Heading 3.1
+
+### Heading 3.2
+
+## Heading 2.2
+
+### Heading 3.3
+
+### Heading 3.4
+{% endcapture %}
+{% assign text = markdown | markdownify %}
+
+{% include toc.html html=text submenu_class="submenu-%level%" %}
+
+<!-- /// -->
+
+<ul>
+    <li>
+        <a href="#heading-1">Heading 1</a>
+        <ul class="submenu-1">
+            <li>
+                <a href="#heading-21">Heading 2.1</a>
+                <ul class="submenu-2">
+                    <li><a href="#heading-31">Heading 3.1</a></li>
+                    <li><a href="#heading-32">Heading 3.2</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="#heading-22">Heading 2.2</a>
+                <ul class="submenu-2">
+                    <li><a href="#heading-33">Heading 3.3</a></li>
+                    <li><a href="#heading-34">Heading 3.4</a></li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
diff --git a/_tests/subMenuClassSkipNoIDs.md b/_tests/subMenuClassSkipNoIDs.md
@@ -0,0 +1,42 @@
+---
+# https://github.com/allejo/jekyll-toc/issues/40
+---
+
+{% capture markdown %}
+# Heading 1
+
+## Heading 2.1
+
+<h3>Heading 3.1</h3>
+
+<h3>Heading 3.2</h3>
+
+## Heading 2.2
+
+### Heading 3.3
+
+### Heading 3.4
+{% endcapture %}
+{% assign text = markdown | markdownify %}
+
+{% include toc.html html=text skipNoIDs=true submenu_class="submenu-%level%" %}
+
+<!-- /// -->
+
+<ul>
+    <li>
+        <a href="#heading-1">Heading 1</a>
+        <ul class="submenu-1">
+            <li>
+                <a href="#heading-21">Heading 2.1</a>
+            </li>
+            <li>
+                <a href="#heading-22">Heading 2.2</a>
+                <ul class="submenu-2">
+                    <li><a href="#heading-33">Heading 3.3</a></li>
+                    <li><a href="#heading-34">Heading 3.4</a></li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>