caph-list

An element directive which provides a high performance scrollable list component. This directive creates container and wrapper element to arrange the item view, and calculates the item view count per a page to fit container size, and then creates current, previous and next page. The item views in each page are updated by the given template view and item data, and then they are arranged to the corresponding position on each page. This directive updates the item views in each page when moving to the previous or next page by scrolling the wrapper element to previous or next position.

You can create it easily by only setting options and template view. Note that the template view should be a focusable.

At first, prepare data to the corresponding scope. Usually use AJAX to request the data. So $http service will help you. (Refer to the details in https://code.angularjs.org/1.3.15/docs/api/ng/service/$http.)

 $http.get('/someUrl').success(function(response) {
     $scope.items = response.items;
 });

And then, create a 'caph-list' using the received data on the scope.

 <caph-list items="item in items">
     <div class="item" focusable>{{$index}}</div> <!-- you can also use each object of array throughout 'item' variable. e.g. {{item.title}} -->
 </caph-list>

The 'items' option consists of repeat expression. The expression indicating how to enumerate a collection. This format is currently supported:

This directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index. Special properties are exposed on the local scope of each template instance, including:

The above example creates a list with the following structure.

 <div class="caph-list-container"> <!-- container -->
     <div class="caph-list-wrapper> <!-- wrapper -->
         <div class="item" focusable>0</div> <!-- template view -->
         <div class="item" focusable>1</div> <!-- template view -->
         <div class="item" focusable>2</div> <!-- template view -->
         ...
     </div>
 </div>

By default, the scroll direction is 'horizontal'. If you want to change the scroll direction to vertical, set the 'direction' option to 'vertical'.

 <caph-list direction="vertical" ... >
     ...
 </caph-list>

You can also change the class name of container and wrapper.

 <caph-list container-class="container" wrapper-class="wrapper" ... >
     ...
 </caph-list>

Then, you can see a list with the following structure.

 <div class="container"> <!-- container -->
     <div class="wrapper> <!-- wrapper -->
         ...
     </div>
 </div>

Note that container and template view should have their own size such as width and height. Because this directive arranges the views based on that sizes. Suppose that style is defined like below.

 .container {
     width: 1000px;
     height: 600px;
 }

 .item {
     width: 100px;
     height: 200px;
 }

If you create a 'caph-list' like below, its row count will be 3 and column count will be 10.

 <caph-list container-class="container" ... >
     <div class="item" ... > ... </div>
 </caph-list>

So if your data count is greater than 30, you can scroll the list horizontally after reaching the last column.

You can change the scroll effect by setting 'duration' and 'ease' option. These option values are same as CSS3 transition value. Refer to the 'transition-duration' and 'transition-timing-function' in http://www.w3schools.com/css/css3_transitions.asp.

The followings are all available options.

If you create 'caph-list' successfully, you can control it directly by sending event.

 jQuery('caph-list').eq(0).trigger('resize');

The followings are all available events.