Dynamic load

[fidoboy]

Hi! I'm trying to create a dynamic load system to have something like an infinite cards carousel. So, initially i have three cards loaded (0,1 and 2 indexes), and the number 1 (the middle one) is displayed, but then when user swipes to next card (number 2) i need to make an ajax call to load the next one (the third) and unload the first one (index 0).

The same happens (but reverse) when user swipes to previous card (index 0)

Any idea about how can i create this? Does this script support dynamic loading?

NOTE: Right now it works loading the next one, but can't swipe into it… may be i need a method to force the card flow refresh (?)

Thanks in advance

[fidoboy]

@konsumer any idea?

[konsumer]

I think dynamic is fine (you can adjust card array on the fly.) You should be able to display a "window" array of the other array. Only do finite swiping, though (page or single card) otherwise you will have to somehow anticipate the array length, and it won't display cards while it's AJAXing, which is a pretty clunky user-experience. If I have time, I will make a demo, and make sure the library can do this, or feel free to make a pull-request, if you get to it first.

[fidoboy]

A working example or demo could be amazing, thanks.

I'm testing many ideas but can't get it working. About the user experience I believe that if the card is created but not filled until there are a Ajax response, it's not a problem... And you can display a loading indicator. The issue is to have the card items rendered fine and on the right positions... They are filled asynchronous using Ajax requests :)

[fidoboy]

The issue is if your directive could allow a new attribute called buffer (for example) and this way it always render the same small amount of items out of a larger dataset (with thousands of items) then when the user swipes the card, the 'window' is moved left or right

[fidoboy]

If buffer is 6 (for example) then only 6 items should be rendered always

[fidoboy]

A working example or demo could be amazing! My problem right now is how to add or remove items from array without flicker on screen... The user experience should be the same than when using a limited array.

I'm testing but can't find a cool way to solve it. There must be a way to keep only a limited amount of rendered items to avoid Memory problems due to a very large DOM.

Enviado desde mi iPhone

El 19/08/2014, a las 18:43, "David Konsumer" notifications@github.com escribió:

I think dynamic is fine (you can adjust card array on the fly.) You should be able to display a "window" array of the other array. Only do finite swiping, though (page or single card) otherwise you will have to somehow anticipate the array length, and it won't display cards while it's AJAXing, which is a pretty clunky user-experience. If I have time, I will make a demo, and make sure the library can do this, or feel free to make a pull-request, if you get to it first.

—
Reply to this email directly or view it on GitHub.

[konsumer]

The cards array in the model already can do this. I don't think pre-filling & managing look-ahead is a great user-experience, but I will leave that for you to work out. Since lazy-loading is an edge-case that I probably won't use angular-card flow for, I don't think I should change how it works, feel free to fork it, though, if it's super-important to you to separately manage the buffer. I think it's not necessary, though. I will make a demo using the existing library functionality later, if I have time, that demonstrates dynamically modifying the array of cards.

[fidoboy]

If you use card flow on a mobile device and you have a list of 3000 images (for example) you will need to do lazy load and keep the DOM items under control. Also think if you need to display additional items inside each card (description text, etc)

[fidoboy]

However if you only need to display 5 or 6 images, then it's fine as it is right now.

[konsumer]

I still don't think it needs to be changed to accomplish your goal. Again, feel free to fork it if you disagree.

[fidoboy]

As you wish. Any case, there are already many carousels but there is no one that supports lazy loading using larger datasets

[konsumer]

You are misunderstanding me. What I am saying is that lazy-loading is a standard thing you can do with regular angular stuff (watch an array, when it gets close to an edge load more), and my lib doesn't need to be changed to do it.

[fidoboy]

I'm sorry, my English is a bit limited sometimes... :) yes I understand, I know how to load more items into my array with no problem... The issue is to render them on the DOM and here is where cardflow comes

[fidoboy]

Using other words, I don't know what event to use or when to render my items into the ng-repeat without breaking the positions or the user experience

[fidoboy]

It's not only to lazy load and render new items (cards) but also to destroy the old ones to always have the same amount of items on DOM