---
# "Timeline" page
layout: page
custom-foot: js/timeline-js.html
---
{%- assign field = site.data.theme.timeline-field | default: page.timeline-field | default: "date" -%}
{% if site.data.theme.timeline-child-objects == true %}
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
{% else %}
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
{% endif %}
{%- assign items = items | where_exp: 'item','item[field]' | sort: field -%}
{%- assign raw-dates = items | map: field | compact | uniq -%}
{%- capture clean-years -%}{% for date in raw-dates %}{% if date contains "-" %}{{ date | strip | split: "-" | first }}{% elsif date contains "/" %}{{ date | strip | split: "/" | last }}{% else %}{{ date | strip }}{% endif %}{% unless forloop.last %};{% endunless %}{%- endfor -%}{%- endcapture -%}
{%- assign uniqueYears = clean-years | replace: ";;",";" | split: ";" | compact | uniq | sort -%}
{%- if site.data.theme.year-navigation -%}
{%- assign navYears = site.data.theme.year-navigation | split: ";" -%}
{%- elsif site.data.theme.year-nav-increment -%}
{%- capture navYears -%}
{%- for i in uniqueYears -%}{%- assign t = i | modulo: site.data.theme.year-nav-increment -%}
{%- if t == 0 -%}{{ i }}{% unless forloop.last %};{% endunless %}{% endif %}{% endfor %}{%- endcapture -%}
{%- assign navYears = navYears | split: ";" -%}
{%- endif -%}
{%- if navYears -%}
<div class="dropdown float-end" id="year-nav">
    <button class="btn btn-primary dropdown-toggle" type="button" id="yearButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Year
    </button>
    <div class="dropdown-menu" aria-labelledby="yearButton">
        {% for y in navYears %}
        <a class="dropdown-item" href="#y{{ y }}">{{ y }}</a>{% endfor %}
    </div>
</div>
{%- endif -%}

{{ content }}

<h3><a href="#y{{ uniqueYears | first }}">{{ uniqueYears | first }}</a> to <a href="#y{{ uniqueYears | last }}">{{ uniqueYears | last }}</a></h3>

<table id="timeline" class="table table-striped">
    <tbody>
        {% for year in uniqueYears %}
        <tr id="y{{ year }}">
            <th>
                <h3>{{ year }}</h3>
            </th>
            <td>
                <div class="row">
                    {%- assign inYear = items | where_exp: 'item', 'item[field] contains year' -%}
                    {% for item in inYear %}
                    <div class="col-lg-4 col-md-6">
                        <a href="{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}" >
                            {% if item.image_thumb %}
                            <img class="lazyload img-thumbnail timeline-thumb" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="{{ item.image_thumb | relative_url }}" alt="{{ item.image_alt_text | default: item.description | default: item.title | escape }}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ item.title | escape }}">
                            {% else %}
                            <div class="card"> 
                                <div class="card-body text-center">
                                    <div class="h5 text-dark">{{ item.title }}</div>
                                    <svg class="bi timeline-thumb text-body" fill="currentColor" aria-hidden="true">
                                        {%- assign icon_template = item.display_template | default: item.format -%}
                                        <use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#{% if icon_template contains 'image' %}icon-image{% elsif icon_template contains 'pdf' %}icon-pdf{% elsif icon_template contains 'audio' %}icon-audio{% elsif icon_template contains 'video' %}icon-video{% elsif icon_template contains 'panorama' %}icon-panorama{% elsif icon_template contains 'compound' %}icon-compound-object{% elsif icon_template contains 'multiple' %}icon-multiple{% else %}icon-default{% endif %}"/>
                                    </svg>
                                </div>
                            </div>
                            {% endif %}
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
