feat(virtualRepeat): Infinite scroll and deferred data loading

[kseamon]

Includes demos for both infinite scroll and deferred loading.
Could be enhanced further in the future with a loading spinner of some sort.

[gkalpak]

Is this needed here ?

[jelbourn]

I'm thinking it would be easier for the user to instead explicitly set some attribute when they want infinite scrolling and then check that the model provided has the appropriate methods. Something like:

<div md-virtual-repeat="item in ctrl.dynamicItems" md-infinite>
  {{item}}
</div>

I think most angular users would rather specify an attribute than extend a base class.

[kseamon]

@ThomasBurleson Thoughts? That would be less Google JSish, but might also result in less useful errors if they don't implement the interface methods (unless I manually check and throw exceptions).

[jelbourn]

I'd say to manually check and throw.

[kseamon]

Also, md-infinite isn't quite right... infinite scroll is one of two behaviors unlocked by this feature (hence the two demos).

md-deferred? md-deferred-data? md-deferred-load?

[jelbourn]

md-on-demand ?

[kseamon]

Done

[ThomasBurleson]

@jelbourn, @kseamon - I like the md-on-demand attribute and the use of the attribute instead of the model subclassing. Currently issues:

• I do not think we are clearly articulating the expected model interface methods when onDemand is enabled; the comment is very easy to miss.
• Should this information also be in the source docs?
• If the interface is not correct, I think we should throw an Error or at least warn the developer in the console.

[kseamon]

The interface is enforced by exceptions and is documented in the virtual repeat source code.

[jelbourn]

Check here whether model has the required functions?

[kseamon]

Hmm... I'd rather not have to do these checks on each digest cycle, but for full correctness I'd have to.

[jelbourn]

I think a one-time check is sufficient for now.

[jelbourn]

LGTM for the code itself, would be good to hear Thomas' thoughts on the attribute name.

[ThomasBurleson]

In my experience the following is always a better approach:

var buffer = [], pageOffset = pageNumber * this.PAGE_SIZE;
for (var i = pageOffset; i < pageOffset + this.PAGE_SIZE; i++) {
    buffer.push(i);
}

this.loadedPages[pageNumber] = buffer;

[kseamon]

Better how? Remember this is just a demo script.

[ThomasBurleson]

@kseamon - really cool feature here.

[kseamon]

What's blocking merging of this PR at this point?

[jelbourn]

@ThomasBurleson added the "needs work" label, but I don't know what he had in mind.

[ThomasBurleson]

@kseamon, @jelbourn - On the local source (with this PR merged), I just updated the source with additional comments to clearly articulate the use of the required interface:

/**
 * This VirtualRepeatModelArrayLike class enforces the interface requirements
 * for infinite scrolling within a mdVirtualRepeatContainer. An object with this
 * interface must implement the following interface with two (2) methods:
 *
 * getItemAtIndex: function(index) -> item at that index or null if it is not yet
 *     loaded (It should start downloading the item in that case).
 *
 * getLength: function() -> number The data legnth to which the repeater container
 *     should be sized. Ideally, when the count is known, this method should return it.
 *     Otherwise, return a higher number than the currently loaded items to produce an
 *     infinite-scroll behavior.
 *
 * @usage
 * <hljs lang="html">
 *  <md-virtual-repeat-container md-orient-horizontal>
 *    <div md-virtual-repeat="i in items" md-on-demand>
 *      Hello {{i}}!
 *    </div>
 *  </md-virtual-repeat-container>
 * </hljs>
 *
 */
function VirtualRepeatModelArrayLike(model) {
  if (!angular.isFunction(model.getItemAtIndex) ||
      !angular.isFunction(model.getLength)) {
    throw Error('Object passed to md-virtual-repeat must implement functions getItemAtIndex() ' +
        'and getLength() when md-on-demand is enabled');
  }

  this.model = model;
}

[ThomasBurleson]

I am merging now.