Add collapsing for sections (#148)

Add collapsing for sections

4 files changed, 100 insertions, 13 deletions

diff --git a/config.toml b/config.toml
index fa1b3cf..aa283a6 100644
--- a/config.toml
+++ b/config.toml
@@ -119,6 +119,7 @@ toc = true
 recent = true # TOC / index
 recent_items = 15
 series = true
+section_items = 10 # Max amount of section items allowed to displayed in a list, use 0 to disable
 #Series_parts = "$NUMBER_OF_PARTS part Series"
 
 meta_index = { position="bottom", size="s90", author=false, readtime=false, readstring="min", date=true, updated=false, categories_tags=true, divider="" }
diff --git a/sass/abridge.scss b/sass/abridge.scss
index a4190b2..cf6960a 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -1182,6 +1182,21 @@ $syntax: true !default;//syntax highlighting for code blocks
     max-width: 30rem;
     margin: var(--s2) auto;
   }
+
+  // Hides the next .hidden_li element when details is closed
+  details:not([open]) + .hidden_li {
+    height: 0;
+    visibility: hidden;
+    overflow: hidden;
+  }
+
+  summary {
+    margin-left: -1em;
+    margin-bottom: .2rem;
+    color: var(--c4);
+  }
+  
+
   .blockdiv {
     border-radius: var(--br);
     border-top: 5px solid var(--a1);
@@ -1575,4 +1590,4 @@ $syntax: true !default;//syntax highlighting for code blocks
   //.z-variable.z-language.z-fenced.z-markdown {
   //    color: var(--h1);
   //}
-}
+}
\ No newline at end of file
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 66673d1..d5ea391 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -297,3 +297,12 @@
       </nav>
   {%- endif %}
 {%- endmacro %}
+
+{%- macro series_link(inner, page) %}
+  {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
+  {%- if inner.content == page.content %}
+      <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}"><b>{{ inner.title }}</b></a></li>
+    {% else %}
+      <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+  {%- endif %}
+{%- endmacro %}
\ No newline at end of file
diff --git a/templates/page.html b/templates/page.html
index 6aac7e1..d7abe0b 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -63,11 +63,12 @@
         <a class="b s150" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag.name }} ({{ parts_string }})</a>
         <ol>
         {%- for inner in tag.pages | sort(attribute="date") %}
-        {%- if inner.content == page.content %}
-        <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}"><b>{{ inner.title }}</b></a></li>
-        {% else %}
-        <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
-        {%- endif %}
+          {%- if inner.content == page.content %}
+            <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}"><b>{{ inner.title }}</b></a></li>
+            {%- set_global current_section_index = loop.index0 %} {# Finds the current section, needed for pagination logic later #}
+          {% else %}
+            <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+          {%- endif %}
         {%- endfor %}
         </ol>
       </div>
@@ -101,17 +102,78 @@
     {%- if toc %}
 
     <div class="sblock">
-      {%- if page.extra.section %}
+      {%- if page.extra.section %} 
+      {%- set num_extra_pages = config.extra.section_items | default(value=5) %}
       <div class="blockdiv">
         <a class="b s150" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ parts_string }}</a>
         <ol>
-        {%- for inner in tag.pages | sort(attribute="date") %}
-        {%- if inner.content == page.content %}
-        <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}"><b>{{ inner.title }}</b></a></li>
-        {% else %}
-        <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+        {%- if tag.page_count > num_extra_pages and num_extra_pages > 0 %}
+          {%- set sorted_array = tag.pages | sort(attribute="date") %} 
+          {%- set num_pages = tag.page_count %}
+        
+          {# Shows the first page #}
+          {{ macros::series_link(inner=sorted_array.0, page=page) }}
+
+          {# Hides the next couple of pages if the current section is more than 3 away from start #}
+          {%- if current_section_index > 3 %}
+            <details>
+              <summary>More...</summary>
+            </details>
+            <div class="hidden_li">
+              {%- for inner in sorted_array | slice(start=1, end=(current_section_index - 2)) %}
+                <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+              {%- endfor %}
+            </div>
+          {%- endif %}
+
+          {# Max(current_section_index - 2, 1) #}
+          {%- if (current_section_index - 2 ) > 1 %}
+            {%- set num = current_section_index - 2 %}
+          {%- else %}
+            {%- set num = 1 %}
+          {%- endif %}
+          
+          {# Shows two pages before current page #}
+          {%- for inner in sorted_array | slice(start=num, end=current_section_index) %}
+            <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+          {%- endfor %}
+
+          {# Shows the current page #}
+          {%- if current_section_index != 0 and current_section_index != (num_pages - 1) %}
+            {{ macros::series_link(inner=sorted_array[current_section_index], page=page) }}
+          {%- endif %}
+
+          {# Min(num_pages - 1, current_section_index + 3) #}
+          {%- if (num_pages - 2 ) < (current_section_index + 3) %}
+            {%- set num = num_pages - 1 %}
+          {%- else %}
+            {%- set num = current_section_index + 3 %}
+          {%- endif %}
+
+          {%- for inner in sorted_array | slice(start=(current_section_index + 1), end=num ) %}
+            <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+          {%- endfor %}
+
+          {%- if current_section_index < num_pages - 4 %}
+            <details>
+              <summary>More...</summary>
+            </details>
+            <div class="hidden_li">
+              {%- for inner in sorted_array | slice(start=(current_section_index + 3), end=(num_pages - 1)) %}
+                <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+              {%- endfor %}
+            </div>
+          {%- endif %}
+        
+        {%- set last = num_pages - 1%}
+        {{ macros::series_link(inner=sorted_array[last], page=page) }}
+
+        {# If there is not more than max pages render normally #}
+        {%- else %}
+          {%- for inner in tag.pages | sort(attribute="date") %}
+            {{ macros::series_link(inner=inner, page=page) }}
+          {%- endfor %}
         {%- endif %}
-        {%- endfor %}
         </ol>
       </div>
       {%- endif %}