rework menu logic part 1

2 files changed, 86 insertions, 135 deletions

diff --git a/templates/_nav.html b/templates/_nav.html
index b05e472..b183a57 100644
--- a/templates/_nav.html
+++ b/templates/_nav.html
@@ -1,147 +1,98 @@
-{% macro navsection(hierarchy, level, current) %}
-  {% set sec = hierarchy | nth(n=level) %}
-  {% set sec = get_section(path=sec) %}
-  {% set maxlevel = hierarchy | length %}
-
+{# (Public) Entrypoint to be used by zola "pages" #}
+{% macro page(target) %}
+  {% set root = get_section(path=target.ancestors | last) %}
+  {{ nav::inner_nav(root=root, current=target) }}
+{% endmacro %}
 
-  {# Ici on regarde si toutes les sous-sections et pages contenues ont #}
-  {# une variable weight_custom. Au passage on note ces poids.         #}
-  {% set temoin = true %}
-  {% set liste = [] %}
-  {% if sec.subsections %}
-    {% for s in sec.subsections %}
-      {% set s_temp = get_section(path=s) %}
-      {% if not s_temp.extra.weight_custom %}
-        {% set_global temoin = false %}
-      {% else %}
-        {% set_global liste = liste | concat(with=s_temp.extra.weight_custom) %}
-      {% endif %}
-    {% endfor %}
-  {% endif %}
-  {% if sec.pages %}
-    {% for p in sec.pages %}
-      {% if not p.extra.weight_custom %}
-        {% set_global temoin = false %}
-      {% else %}
-        {% set_global liste = liste | concat(with=p.extra.weight_custom) %}
-      {% endif %}
-    {% endfor %}
-  {% endif %}
+{# (Public) Entrypoint to be used by zola "sections" #}
+{% macro section(target) %}
+  {{ nav::inner_nav(root=target, current=target) }}
+{% endmacro %}
 
+{# -------------------------- #}
 
-  {# Si toutes les sous-sections et pages ont une variable weight_custom, #}
-  {# on classe selon elle. Sinon, on utilise la méthode classique.        #}
-  {% if temoin %}
-    {% set_global liste = liste | sort %}
-    {% for x in liste %}
-      {% if sec.subsections %}
-        {% for y in sec.subsections %}
-          {% set p = get_section(path=y) %}
-          {% if p.extra.weight_custom == x %}
-            <div class="toc-item">
-              {% if p.subsections or p.pages %}
-                {% if p.path == current.path %}
-                  <a class="subtext" href="{{ p.permalink | safe}}">‣ <b>{{ p.title }}</b></a>
-                {% elif hierarchy is containing(y) %}
-                  <a class="subtext" href="{{ p.permalink | safe}}">‣ {{ p.title }}</a>
-                {% else %}
-                  <a class="subtext" href="{{ p.permalink | safe}}">‣ {{ p.title }}</a>
-                {% endif %}
-                {% if hierarchy is containing(y) or current.path == p.path %}
-                  {% if level + 1 < maxlevel %}
-                    <div class="nav-subsection">
-                      {{ nav::navsection(hierarchy=hierarchy,level=level + 1,current=current) }}
-                    </div>
-                  {% endif %}
-                {% endif %}
-              {% else %}
-                {% if p.path == current.path %}
-                <a class="subtext" href="{{p.permalink | safe}}"><b>{{ p.title }}</b></a>
-                {% else %}
-                  <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a>
-                {% endif %}
-              {% endif %}
-            </div>
-          {% endif %}
-        {% endfor %}
-      {% endif %}
-      {% if sec.pages %}
-        {% for p in sec.pages %}
-          {% if p.extra.weight_custom == x %}
-            <div class="toc-item">
-              {% if p.path == current.path %}
-              <a class="subtext" href="{{p.permalink | safe}}"><b>{{ p.title }}</b></a>
-              {% else %}
-                <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a>
-              {% endif %}
-            </div>
-          {% endif %}
-        {% endfor %}
-      {% endif %}	  
-    {% endfor %}
-  {% else %}
-    {% if sec.subsections %}
-      {% for s in sec.subsections %}
-        {% set p = get_section(path=s) %}
-        <div class="toc-item">
-          {% if p.subsections or p.pages %}
-            {% if p.path == current.path %}
-              <a class="subtext" href="{{ p.permalink | safe}}">‣ <b>{{ p.title }}</b></a>
-            {% elif hierarchy is containing(s) %}
-              <a class="subtext" href="{{ p.permalink | safe}}">‣ {{ p.title }}</a>
-            {% else %}
-              <a class="subtext" href="{{ p.permalink | safe}}">‣ {{ p.title }}</a>
-            {% endif %}
-            {% if hierarchy is containing(s) or current.path == p.path %}
-              {% if level + 1 < maxlevel %}
-                <div class="nav-subsection">
-                  {{ nav::navsection(hierarchy=hierarchy,level=level + 1,current=current) }}
-                </div>
-              {% endif %}
-            {% endif %}
-          {% else %}
-            {% if p.path == current.path %}
-            <a class="subtext" href="{{p.permalink | safe}}"><b>{{ p.title }}</b></a>
-            {% else %}
-              <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a>
-            {% endif %}
-          {% endif %}
-        </div>
-        {% endfor %}
-    {% endif %}
+{# (Private) Shared+root logic to build the menu #}
+{% macro inner_nav(root, current) %}
+  {{ nav::hamburger(root=root) }}
   
-    {% if sec.pages %}
-      {% for p in sec.pages %}
-        <div class="toc-item">
-          {% if p.path == current.path %}
-          <a class="subtext" href="{{p.permalink | safe}}"><b>{{ p.title }}</b></a>
-          {% else %}
-            <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a>
-          {% endif %}
-        </div>
-      {% endfor %}
-    {% endif %}
-  {% endif %}	
-{% endmacro navsection %}
+  {# Section title #}
+  <div class="toc-item toc-section">
+    <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
+  </div>
 
-{% macro navmenu(current) %}
-  {% if current.ancestors %}
-    {% set hierarchy = current.ancestors | slice(start=1) | concat(with=current.relative_path) %}
+  {# Choose between "tree" (has extra.parent) and "list" (default) collections #}
+  {% set root_tree = root.pages | group_by(attribute="extra.parent") %}
+  {% if root.relative_path in root_tree %}
+    {% set tree_breadcrumb = nav::breadcrumb(corpus=root.pages, root=root.relative_path, target=current)|split(pat=":")|slice(start=1) %}
+    {{ nav::tree(
+         tree=root_tree, 
+         cursor=root.relative_path, 
+         selected=current, 
+         crumb=tree_breadcrumb) }}
   {% else %}
-    {% set hierarchy = [current.relative_path] %}
-  {% endif %}
-
-  {% set root_path = hierarchy | nth(n=0) %}
-  {% set root = get_section(path=root_path) %}
+    {{ nav::list(list=root.pages, selected=current) }}
+  {% endif %}   
+{% endmacro %}
 
+{# On small screens, like a smartphone, hide the menu behind an hamburger icon #}
+{% macro hamburger(root) %}
   <input id="menu-toggle" type="checkbox" />
   <label class='menu-button-container' for="menu-toggle">
     <div class="menu-button"></div>
     <div class="toc-item toc-menu-title subtext">{{ root.title }}</div>
   </label>
-  
-  <div class="toc-item toc-section">
-    <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
+{% endmacro %}
+
+{# Build a breadcrumb for the page #}
+{# It's ugly because this is the hacky part of the project #}
+{% macro breadcrumb(corpus, root, target) %}{% if 'parent' in target.extra and target.extra.parent != root %}{% set new_target = get_page(path=target.extra.parent) %}{{ nav::breadcrumb(corpus=corpus, root=root, target=new_target) }}:{{ new_target.relative_path }}{% endif %}{% endmacro %}
+
+{% macro list(list, selected) %}
+  {% for page in list %}
+    {% set is_selected = page.relative_path == selected.relative_path %}
+    <div class="toc-item">
+      {{ nav::link(page=page, is_selected=is_selected, is_parent=false) }}
+    </div>
+  {% endfor %}
+{% endmacro %}
+
+{# Tree menu rendering #}
+{% macro tree(tree, cursor, selected, crumb) %}
+  {% for page in tree | get(key=cursor) %}
+  {% set is_selected = page.relative_path == selected.relative_path %}
+  <div class="toc-item">
+
+    {# LINK WITH SUBSECTION #}
+    {% if page.relative_path in tree %}
+      {{ nav::link(page=page, is_selected=is_selected, is_parent=true) }} 
+      {% if page.relative_path in crumb or is_selected %}
+        <div class="nav-subsection">
+          {% set ncrumb = crumb | slice(start=1) %}
+          {% set ncursor = page.relative_path %}
+          {% if ncursor in tree %}
+            {{ nav::tree(tree=tree, cursor=ncursor, selected=selected, crumb=ncrumb) }}
+          {% endif %}
+        </div>
+      {% endif %}
+
+    {# SIMPLE LINK #}
+    {% else %}
+      {{ nav::link(page=page, is_selected=is_selected, is_parent=false) }}
+    {% endif %}
   </div>
-  {{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }}
+  {% endfor %}
+{% endmacro %}
+
+{% macro subsection() %}
+
 {% endmacro %}
+
+{% macro link(page, is_selected, is_parent) %}
+  <a class="subtext" href="{{page.permalink | safe}}">
+      {% if is_selected %}<b>{% endif %}
+      {% if is_parent %}‣ {% endif %}
+      {{ page.title }}
+      {% if is_selected %}</b>{% endif %}
+  </a>
+{% endmacro %}
+
diff --git a/templates/index.html b/templates/index.html
index fd4e9bf..085a81a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -29,9 +29,9 @@
             <div class="toc {% if page.ancestors or section.ancestors %}{% else %}toc-homepage{% endif %}">
                 <div class="toc-sticky">
                     {% if page %}
-                    {{ nav::navmenu(current=page) }}
+                        {{ nav::page(target=page) }}
                     {% else %}
-                    {{ nav::navmenu(current=section) }}
+                        {{ nav::section(target=section) }}
                     {% endif %}
                 </div>
             </div>