[indexSelector] create widget

This widget needs to be able to render this:

API

Given this html:

<div id="sort-results"></div>

And JavaScript:

instant.addWidget(
  instant.widgets.indexSelector({
    container : "#sort-results",
    indices: [{
      name: 'index', label: 'Relevance'
    }, {
      name: 'index_priceASC', label: 'Highest price'
    }, {
      name: 'index_priceDESC', label: 'Lowest price'
    }]
  })
);

We render:

<select>
  <option value="index">Relevance</option>
  <option value="index_priceASC">Highest price</option>
  <option value="index_priceDESC">Lowest price</option>
</select>

Options

• container string or DOMElement
• indices array of objects
• cssClass string (comma separated list of css classes to apply to root element)

Behavior

The selected index is the one set in the helper as the current one.

If the selected index is not one from the list, then we should throw an error.

[vvo]

To provide a higher level of customization for this widget, we should enhance it.

So that people could pass their own template (so that they can use bootstrap dropdown components for example).

For this, we only need to provide an API to the instantiated widget, something like:

var selector =   instant.widgets.indexSelector({
  container : "#sort-results",
  indices: [{
    name: 'index', label: 'Relevance'
  }, {
    name: 'index_priceASC', label: 'Highest price'
  }, {
    name: 'index_priceDESC', label: 'Lowest price'
  }],
  template: 'Your template, you will receive an array of indices and one of them will have the `selected` property set'
});

selector.changeIndex('index_priceASC');

But I do not know how it will play with react and how to bind the events in it. Maybe that’s not the good way to do it.

For people wishing to use complex switch widgets like bootstrap widgets we should put this in userland (= do the widget ourselves in another repo, or let the community do it).

If you agree with this I will open another issue with this enhancement.

[pixelastic]

Do we have use-cases where an implementation uses this kind of widget for something else than sort order?