"path-view" custom element:

Simple Example

To build, add the component to the view and attatch items with .build([...]) method.

const view = document.getElementById('one');
  view.build([
    {title: 'first'},
    {title: 'two'},
    {title: 'three'},
    {title: 'four'}
  ]);

Empty List

If you do not provide the list to the build method, it generate a single item with "empty list" title.

Symbols and Counter

You can optionally add non-Latin characters, symbols, and more! Also, you can attach a custom element to the end of the list. This element can display the selected item, act as a counter or even be a clickable element.

<path-view id="three">
  <span>Counter</span>
</path-view>

Long List

If the list is longer than your viewport, the component tries to show the active item (the last item or the last one with the checked: true property).

const view = document.getElementById('four');
view.build([
  {title: '1 - This is a Long Text', checked: true},
  {title: '2 - This is a Long Text', checked: true},
  {title: '3 - This is a Long Text'},
  {title: '4 - This is a Long Text'},
  {title: '5 - This is a Long Text'},
  {title: '6 - This is a Long Text'},
  {title: '7 - This is a Long Text'},
  {title: '8 - This is a Long Text'},
  {title: '9 - This is a Long Text'},
  {title: '10 - This is a Long Text'},
  {title: '11 - This is a Long Text'},
  {title: '12 - This is a Long Text'}
]);

Note that the last checked item is highlighted

Events

This component only supports a single event:

• "change": fires when a new item is selected.

const view = document.getElementById('five');
view.addEventListener('change', e => {
  document.getElementById('selected').value = JSON.stringify(e.target.value);
});
view.build([
  {title: 'first'},
  {title: 'two'},
  {title: 'three'},
  {title: 'four', a: 1, b: 2}
]);
view.dispatchEvent(new Event('change'));

To get the value of the currently selected item use e.target.value. Note that to update the input after DOM loaded, you can generate a fake change event.