publikationen.html

---
layout: page
published: true
title: Publikationen
---

<section>
    <div class="wrapper">
        <h2>Publikationen</h2>
        <p>Hier finden sich alle Veröffentlichungen des Bündnis F5.</p>

        {% assign publikationen = site.publikationen | sort: 'date' | reverse %}

        <div id="year-filter">
            <details id="yearFilter" class="dropdown">
                <summary id="yearCurrent" role="button">
                    Jahr
                </summary>
                <ul>
                    <li><button class="button-filter filtered" onclick="changeYear('year-all')">Alle</button></li>
                    {% assign years = "" | split: ", " %}
                    {% for publikation in site.publikationen %}
                    {% assign year = publikation.date | date: "%Y" | split: ", " %}
                    {% assign years = years | concat: year %}
                    {% endfor %}
                    {% assign years = years | uniq | sort %}
                    {% for year in years %}
                    <li><button class="button-filter" onclick="changeYear('year-{{ year }}')">{{ year }}</button></li>
                    {% endfor %}
                </ul>
            </details>
        </div>

        <div id="publication-filter">
            <details id="categoryFilter" class="dropdown">
                <summary id="categoryCurrent" role="button">
                    Kategorie
                </summary>
                <ul>
                    <li><button class="button-filter categorized" onclick="changeType('all_types')">Alle</button></li>
                    {% assign categories = "" | split: ", " %}
                    {% for publikation in site.publikationen %}
                    {% assign category = publikation.categories %}
                    {% assign categories = categories | concat: category %}
                    {% endfor %}
                    {% assign categories = categories | uniq | sort %}
                    {% for category in categories %}
                    <li><button class="button-filter" id="{{ category }}" onclick="changeType('{{ category }}')">{{
                            category | capitalize }}</button></li>
                    {% endfor %}
                </ul>
            </details>
        </div>

        <a class="button-rss" href="/feed/publikationen.xml" target="_blank" rel="noopener noreferrer">RSS</a>

        {% for publikation in publikationen %}
        <div class="publication-item year-all all_types {{ publikation.categories }} year-{{ publikation.date | date: '%Y' }}"
            data-event-date="{{ publikation.date | date: '%Y-%m-%d' }}">
            <article class="publication-list">
                <p class="publication-date">
                    <time datetime="{{ publikation.date }}">
                        {{ publikation.date | date: "%-d" }}{% assign m = publikation.date | date: "%-m" %}
                        {% case m %}
                        {% when '1' %}Januar
                        {% when '2' %}Februar
                        {% when '3' %}M&auml;rz
                        {% when '4' %}April
                        {% when '5' %}Mai
                        {% when '6' %}Juni
                        {% when '7' %}Juli
                        {% when '8' %}August
                        {% when '9' %}September
                        {% when '10' %}Oktober
                        {% when '11' %}November
                        {% when '12' %}Dezember
                        {% endcase %}
                        {{ publikation.date | date: "%Y" }}
                    </time>
                    <span class="publication-category">{{ publikation.categories }}</span>
                </p>
                <h1 class="publication-title {% unless publikation.subtitle %}mb-2{% endunless %}"><a href="{{ publikation.url }}">{{ publikation.title }}</a></h1>
                {% if publikation.subtitle %}<p class="publication-subtitle">{{ publikation.subtitle }}</p>{% endif
                %}
                <div class="publication-summary">{{ publikation.content | truncatewords:40 | strip_html }}</div>
                {% if publikation.authors %}
                <hr>
                {% assign authors = publikation.authors | join: ',' | split: ',' %}
                <p class="publication-authors">{% for author in authors %}<span class="publication-author">{{ author
                        }}</span>{% endfor %}</p>
                {% endif %}
            </article>
            <hr class="light-hr">
        </div>
        {% endfor %}

        <!-- Data filtering for publications -->
        <script>
            let currentYear = "year-all";
            let currentType = "all_types";

            update();

            function changeType(type) {
                currentType = type;
                update();
            }

            function changeYear(year) {
                currentYear = year;
                update();
            }

            function update() {
                document
                    .querySelectorAll(".publication-item")
                    .forEach((item) => {
                        if (item.classList.contains(currentType)) {
                            item.classList.add("visible");
                        } else {
                            item.classList.remove("visible");
                        }

                        if (!item.classList.contains(currentYear)) {
                            item.classList.remove("visible");
                        }
                    });

                window.updateCards = update;
            }
        </script>

        <script>
            // Function to add selected class to the selected type filter
            var categoryDetail =  document.getElementById("categoryFilter");
            var categoryCurrent =  document.getElementById("categoryCurrent");
            var btnContainer = document.getElementById("publication-filter");
            var btns = btnContainer.getElementsByClassName("button-filter");
            for (var i = 0; i < btns.length; i++) {
                btns[i].addEventListener("click", function () {
                    var current = document.getElementsByClassName(" categorized");
                    current[0].className = current[0].className.replace(" categorized", "");
                    this.className += " categorized";
                    categoryDetail.removeAttribute('open');
                    categoryCurrent.innerText = this.innerHTML;
                });
            }
        </script>

        <script>
            // Function to add selected class to the selected year filter
            var yearDetail =  document.getElementById("yearFilter");
            var yearCurrent =  document.getElementById("yearCurrent");
            var yearContainer = document.getElementById("year-filter");
            var years = yearContainer.getElementsByClassName("button-filter");
            for (var j = 0; j < years.length; j++) {
                years[j].addEventListener("click", function () {
                    var currentYear = document.getElementsByClassName(" filtered");
                    currentYear[0].className = currentYear[0].className.replace(
                        " filtered",
                        ""
                    );
                    this.className += " filtered";
                    yearDetail.removeAttribute("open");
                    yearCurrent.innerText = this.innerHTML;
                });
            }
        </script>

        <script>
            // Function to close details if another summary is clicked
            const summaries = document.querySelectorAll('summary');

            summaries.forEach((summary) => {
                summary.addEventListener('click', closeOpenedDetails);
            });

            function closeOpenedDetails() {
                summaries.forEach((summary) => {
                    let detail = summary.parentNode;
                    if (detail != this.parentNode) {
                        detail.removeAttribute('open');
                    }
                });
            }
        </script>
    </div>
</section>