re-calculate position of a modifier when item of array is spliced

[elinfante]

Hi,

I have a directive that controls the thumbnails of a carrousel (fa-enter,fa-leave, ...). Each thumbnail is positioned depending on the index of the array. That works as expected, my problem comes when I delete the first item of the array (fa-leave triggers) I want the others to be animated to reposition depending on the index of the array.

Is there a cool way of achieving that? I was hoping some sort of event or function like fa-leave that triggers the other elements of the array when the array changes the number of elements... not sure If that exists.

Thanks!

[elinfante]

After many trial an error I have managed to find a pretty neat solution, in my opinion.

I watch any changes in the length of the array, if so I recalculate the positions for each thumbnail.

Code below:

// When I remove one of the photos from the array I trigger this
scope.$watch('photos', function(newV,oldV){
    if (newV.length != oldV.length) {
        reposition();
    }
},true);  

And this is the function:

function reposition() {
    var slide = new Transform.translate(translateThumbX(scope.$index), translateThumbY(scope.$index), 0)
    transform.delay(50 * scope.$index);
    return transform.set(slide, {duration: 250,transition: SnapTransition})
}