"path-view" custom element:

This element displays a list of items in a single row. One item is selectable at the time, and the component tries to show the full content of the selected node.

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.

Counter
<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:

Selected Item:
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.