adding models to the source causes full redraw of the columns

[fatzh]

Hi,

first of all, thx for the nice plugin :)

I'm trying to get deckgrid to work nicely with ngInfiniteScroll, but it looks like the columns are redrawn for every new item added to the collection, is that correct ? I've seen a closed ticket where it's supposed to work.. I just can't see how.

My items are images, every time I add some new images, it triggers a complete redraw of the layout (including the new items, which is correct). All images are re-loaded, etc... which makes for a rather bad user experience...

Can you please let me know if there's a way to add new items to the source model without triggering a complete redraw ?

[chrisgco]

+1

[symrad]

This is the solution I implemented (I know it can be done in a more elegant way, with regard to $$addElementsToColumns function but unfortunately I did not have much time):

Deckgrid.prototype.$$onModelChange = function $$onModelChange (newModel, oldModel) {
            var self = this;
            newModel = newModel || [];
            oldModel = oldModel || [];

            var newModelOldLength = angular.copy(newModel);
            newModelOldLength.splice(oldModel.length);

            if(angular.equals(oldModel, newModelOldLength) && oldModel.length != 0){
                var elementsToAdd = angular.copy(newModel);
                elementsToAdd = elementsToAdd.splice(-(newModel.length - oldModel.length));
                self.$$addElementsToColumns(elementsToAdd);
            }else{
                self.$$createColumns();
            }
};

Deckgrid.prototype.$$addElementsToColumns = function $$addElementsToColumns (elements) {
            var self = this;

            if (!this.$$scope.layout) {
                return $log.error('angular-deckgrid: No CSS configuration found (see ' +
                                   'https://github.com/akoenig/angular-deckgrid#the-grid-configuration)');
            }

            angular.forEach(elements, function onIteration (card, index) {
                index = self.$$getTotalElements();
                var column = (index % self.$$scope.layout.columns) | 0;

                if (!self.$$scope.columns[column]) {
                    self.$$scope.columns[column] = [];
                }

                card.$index = index;
                self.$$scope.columns[column].push(card);
            });
};

Deckgrid.prototype.$$getTotalElements = function $$getTotalElements () {
        var number = 0;
        angular.forEach(this.$$scope.columns, function onIteration (value, index) {
                number += value.length;
        });
            return number;
};

This is my fork https://github.com/symrad/angular-deckgrid/blob/master/angular-deckgrid.js.

[Tsarpf]

@symrad Thanks, your changes work great!