This is a proposed design for a new SproutCore class. If you are working on this view, use this page to document the design. If you are a potential user, please add comments at the bottom with feedback.

Purpose

Since SproutCore has incremental rendering, you typically do not need a standard pagination control to display large amounts of data in the web browser. However, we still need some convenient ways for the user to quickly jump to a specific part of the collection.

The purpose of this class is to provide a view that can display an ordered list of items which the user can click on. When attached to a collection view, this will jump the selection to the first item that belongs to the group.

UI Design

Pending a proper mockup, this textual example should do:

For the control above, when the user clicks on “B” it will select the first item beginning with a “B”.

API

The view has the following properties:

SC.IndexScrollerView = SC.ButtonView.extend({

  /** An array of groups to display.  Can be either:
   - array of strings:  strings are both the names to display and the value
  - array of hashes with two keys:  name: the display name and value: the value of the group.
 */
  groups: [],

  /**
    The most recently selected value.
  */
  value: null,

  /** Action method to be called when the button is pressed.  Will be overridden by instance.
  action: function(value) {
  }
});

You should observe the groups property. Whenever it changes, rebuild the HTML contents of the view. When the user clicks on the view, determine which group they clicked on and set the value property and call the action() method. See the existing ButtonView source for a place to start overriding things.

The HTML generated should look something like this:

<ul class="sc-index-scroller-view">
   <li class="index-group">A</li>
   <li class="index-group">B</li>
   ...
   <li class="index-group">Z</li>
</ul>

Related Links

Comments

Having a vertical index would be nice too. -August