Timeline-vertical-navigation NPM

timeline-vertical-navigation

Navigate in time same way as Google Photos. Built with StencilJS

Properties

Property	Attribute	Type	Default
`darkmode`	`darkmode`	`boolean`	`false`
`dates` (required)	`dates`	`Date[] or string`	`undefined`
`opaquebackground`	`opaquebackground`	`boolean`	`false`
`pinned`	`pinned`	`boolean`	`false`

Events

Event	Description	Type
`dateSelected`		`CustomEvent<Date>`

Methods

updateSelectedDate(date: Date) => void

Example with native HTML & JavaScript

For the demo, there is an "items-grid" component you can find in source, this is an example of what your scrollable component could be.

<timeline-vertical-navigation
  dates="2020-03-31, 2022-09-12, 2022-04-01, 2022-03-12, 2022-03-13, 2022-03-14, 2022-03-15, 2000-01-01, 2010-12-01, 2013-10-01, 2010-11-21, 1998-07-28, 2000-01-01, 2000-01-11, 2002-03-11, 2002-04-11, 2002-04-12, 2025-01-01"
></timeline-vertical-navigation>
<script>
  const timelineVerticalNavigation = document.querySelector('timeline-vertical-navigation');
  timelineVerticalNavigation.addEventListener('dateSelected', e => {
    const selectedDate = e.detail;
    // You can scroll into your scrollable component to the selected date
    {yourScrollableComponent}.scrollToDate(selectedDate);
  });
  // Then your scrollable component need to dispatch which date is currently displayed in order to update the selected date
   {yourScrollableComponent}.addEventListener('scrolledToDate', e => {
        const firstDateVisible = e.detail;
        const timelineVerticalNavigation = document.querySelector('timeline-vertical-navigation');
        timelineVerticalNavigation.updateSelectedDate(firstDateVisible);
      });
</script>