Article Filtering

Hide articles that do not match a category while keeping every article loaded.

Filter loaded articles by category

hiddenByFilter article.defaultData timeline.requestRedraw()

The selector sets the Article hiddenByFilter option to true for articles outside the chosen category. Hidden articles disappear from the timeline but remain available in timeline.articles.

Show category

Set values evaluates the filter once per selection and is the better choice for timelines with thousands of articles. Predicate function is more convenient for smaller timelines, but runs the filter again whenever the timeline redraws.

const categorySelect = document.querySelector("#article-filter-category");

categorySelect.addEventListener("change", () => {
  const category = categorySelect.value;

  timeline.articles.forEach((article) => {
    const shouldShow =
      category === "all" ||
      article.data.category === category;

    article.hiddenByFilter = !shouldShow;
  });

  timeline.requestRedraw();
});

const categorySelect = document.querySelector("#article-filter-category");
let selectedCategory = categorySelect.value;

const timelineOptions = {
  article: {
    defaultData: {
      hiddenByFilter(article) {
        const shouldShow =
          selectedCategory === "all" ||
          article.data.category === selectedCategory;

        return !shouldShow;
      }
    }
  }
};

const timeline = new Histropedia.Timeline(container, timelineOptions);
timeline.load(articles);

categorySelect.addEventListener("change", () => {
  selectedCategory = categorySelect.value;
  timeline.requestRedraw();
});

timelineOptions.article.defaultData.hiddenByFilter is inherited by every loaded article unless that article supplies its own value. See the Article reference for per-article overrides.