diff options
author | Quentin Dufour <quentin@deuxfleurs.fr> | 2023-03-01 15:38:36 +0100 |
---|---|---|
committer | Quentin Dufour <quentin@deuxfleurs.fr> | 2023-03-01 15:38:36 +0100 |
commit | 6cac8feab52e8105bc7be0f1b3a0f37a313635b4 (patch) | |
tree | 7ca3329f022350a02ac3a3410f825f2f1011aea1 /templates | |
parent | 75a62c57897f0e19433eadbfd9cf7c1409b7f047 (diff) | |
download | guide.deuxfleurs.fr-6cac8feab52e8105bc7be0f1b3a0f37a313635b4.tar.gz guide.deuxfleurs.fr-6cac8feab52e8105bc7be0f1b3a0f37a313635b4.zip |
rework menu logic part 1
Diffstat (limited to 'templates')
-rw-r--r-- | templates/_nav.html | 217 | ||||
-rw-r--r-- | templates/index.html | 4 |
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> |