index count plus direction for cursor based scrolling

[MartyBolton]

Hi, I know you talked about cursor based scrolling before and to some extent this is up to the datasource but I'm wondering... is there an easy way to figure out direction? This way, I know to use a cursor based feed like twitter's max_id and since_id or other cursor based ids to go off and fetch dynamic feed data based on a cursor. So, being new to ui-scroll can you point me to how I can get direction from the next datasource get event? Or have you considered adding this? Basically, I'm thinking I use the direction to know if I should get next set of results or previous. I guess I can use the topvisible and do math on the index or something, hoping you can show me valid syntax to calculate direction. What can I do in my get to calculate the direction you think?
thanks
Marty

[mfeingold]

One way of doing it is to use get signature with the descriptor

[MartyBolton]

Hi, thanks, not sure how to do that - can you send a couple line example?

Here's what I have so far, for anyone else too - who is looking to do cursor wise scrolling to rest api as I am. The weird thing that I found is that the adapter topVisibleScope.$index is undefined until it gets created by the adapter. And the other issue is being called twice at start up for negative direction by design, here's how I handled direction (isForward (bool)) and startup. This looks promising but wondering if anyone has any better ideas? Basically all the magic happens at loadFeedCursor with count, mad_id and since_id.

 var feedsource;
    feedsource = {};
    feedsource.get = function (index, count, success) {
        return $timeout(function () {
            var isForward = true;
            var max_id = 0;
            var since_id = 0;
            if ($scope.adapterContainer.adapter.topVisibleScope) {
                isForward = (index > $scope.adapterContainer.adapter.topVisibleScope.$index) ? true : false;
                 // I don't use these yet but planning on it today - basically the return sends back these values and i put them in the adapter but may end up putting them in controller scope object.
                 max_id = $scope.adapterContainer.adapter.max_id;
                 since_id = $scope.adapterContainer.adapter.max_id;
                }
            } else {
                if (index < 0) {
                    return success([]);
                }
            }

            console.log('isForward ' + isForward);

            loadFeedCursor(count, max_id, since_id).then(function (resp) {
                return success(resp);
            });

        }, 100);
    };

[mfeingold]

Your code shows one way of doing this.

Here is something to illustrate another:

var feedsource;
 feedsource = {};
 feedsource.get = function(descriptor, success) {
  isForward = 'append' in descriptor;
  console.log('isForward' + isForward + ' start ' + descriptor.index + ' count ' + descriptor.count)
  success([]); 
}; 

As side note - there is no need for calling success from a $timeout. I used it in the examples to emulate the network asynchronicity

[MartyBolton]

ah, thanks Michael, I was just reading the doc on this, I don't know how I missed the append, prepend direction. I love it. In my testing now the back end is all set but the front end keeps calling me with index 1, count over and over and I'm returning the right items, so I need to look now. Once I get this working, I'll share here - maybe be a good example for cursor based scrolling.
thanks again!

[MartyBolton]

So thanks for your help! I got this to work much better now! The only issue left is that I noticed with smaller buffer-size of say 5 and about 6 posts per page, I sometimes see jittery or infinite looping where it bounces back and fourth. I raised buffer to 10 and seems better. The replace it not perfect. There's still some scrolling mis-placement (but could be something i'm not doing).

Question - does this require fixed size

content? I have irregular posts like a twitter feed. Wondering if anything I need to worry about with non fixed size items.

Here's the final code, still with timeout but I'll remove that.

So much easier. thanks!

    var feedsource;
    feedsource = {};
    feedsource.get = function (descriptor, success) {
        return $timeout(function () {
            var max_id, since_id;
            if (descriptor.append) {
                max_id = descriptor.append.aId;
            }
            if (descriptor.prepend) {
                since_id = descriptor.prepend.aId;
            }
            loadFeedCursor(descriptor.count, max_id, since_id).then(function (resp) {
                return success(resp.items);
            });
        }, 100);
    };

[mfeingold]

first of all there is no need to funnel it through $timeout. Just put the insides of the anonymous function directly in the get method. As I said, the $timeout in the examples are only to pretend that the data are accessed asynchronously over the net. In real life there is no need to pretend.

As to the size - as long as your items are block items you should be fine. Inline items can give you headaches though.

Also be careful; descriptor,append will be falsy if descriptor.append value is undefined. The way to check the presence is ('append' in descriptor)

[MartyBolton]

thanks Michael. Append is undefined at start right, so my if test will fail, I default to count only when at start. I now pass max_id xor since_id to my rest api. Seems like that is working well. My invariant is that a valid append/prepend will always point to an item, which is used to get the activity id. Therefore in effect, the id is the max/since id - I don't need to save them anywhere.
thanks again!
-- closing

[mfeingold]

@MartyBolton With if (descriptor.append) you cannot tell apart whether append is undefined or just not there. I am not sure if in your case it is a concern.
Also remove the $timeout call - there is no reason to have it there