ionic-framework/js/angular/service/collectionRepeatManager.js

IonicModule
.factory('$collectionRepeatManager', [
  '$rootScope',
  '$timeout',
function($rootScope, $timeout) {
  function CollectionRepeatManager(options) {
    var self = this;
    this.dataSource = options.dataSource;
    this.element = options.element;
    this.scrollView = options.scrollView;

    this.isVertical = !!this.scrollView.options.scrollingY;
    this.renderedItems = {};

    this.lastRenderScrollValue = this.bufferTransformOffset = this.hasBufferStartIndex =
      this.hasBufferEndIndex = this.bufferItemsLength = 0;
    this.setCurrentIndex(0);

    this.scrollView.__$callback = this.scrollView.__callback;
    this.scrollView.__callback = angular.bind(this, this.renderScroll);

    function getViewportSize() { return self.viewportSize; }
    if (this.isVertical) {
      this.scrollView.options.getContentHeight = getViewportSize;

      this.scrollValue = function() {
        return this.scrollView.__scrollTop;
      };
      this.scrollMaxValue = function() {
        return this.scrollView.__maxScrollTop;
      };
      this.scrollSize = function() {
        return this.scrollView.__clientHeight;
      };
      this.secondaryScrollSize = function() {
        return this.scrollView.__clientWidth;
      };
      this.transformString = function(y, x) {
        return 'translate3d('+x+'px,'+y+'px,0)';
      };
      this.primaryDimension = function(dim) {
        return dim.height;
      };
      this.secondaryDimension = function(dim) {
        return dim.width;
      };
    } else {
      this.scrollView.options.getContentWidth = getViewportSize;

      this.scrollValue = function() {
        return this.scrollView.__scrollLeft;
      };
      this.scrollMaxValue = function() {
        return this.scrollView.__maxScrollLeft;
      };
      this.scrollSize = function() {
        return this.scrollView.__clientWidth;
      };
      this.secondaryScrollSize = function() {
        return this.scrollView.__clientHeight;
      };
      this.transformString = function(x, y) {
        return 'translate3d('+x+'px,'+y+'px,0)';
      };
      this.primaryDimension = function(dim) {
        return dim.width;
      };
      this.secondaryDimension = function(dim) {
        return dim.height;
      };
    }
  }

  CollectionRepeatManager.prototype = {
    destroy: function() {
      for (var i in this.renderedItems) {
        this.removeItem(i);
      }
    },
    calculateDimensions: function() {
      var primaryPos = 0;
      var secondaryPos = 0;
      var len = this.dataSource.dimensions.length;
      var secondaryScrollSize = this.secondaryScrollSize();
      var previous;

      return this.dataSource.dimensions.map(function(dim) {
        var rect = {
          primarySize: this.primaryDimension(dim),
          secondarySize: Math.min(this.secondaryDimension(dim), secondaryScrollSize)
        };

        if (previous) {
          secondaryPos += previous.secondarySize;
          if (previous.primaryPos === primaryPos &&
              secondaryPos + rect.secondarySize > secondaryScrollSize) {
            secondaryPos = 0;
            primaryPos += previous.primarySize;
          } else {
          }
        }

        rect.primaryPos = primaryPos;
        rect.secondaryPos = secondaryPos;

        previous = rect;
        return rect;
      }, this);
    },
    resize: function() {
      this.dimensions = this.calculateDimensions();
      var last = this.dimensions[this.dimensions.length - 1];
      this.viewportSize = last ? last.primaryPos + last.primarySize : 0;
      this.setCurrentIndex(0);
      this.render(true);
    },
    setCurrentIndex: function(index, height) {
      this.currentIndex = index;

      this.hasPrevIndex = index > 0;
      if (this.hasPrevIndex) {
        this.previousPos = this.dimensions[index - 1].primaryPos;
      }
      this.hasNextIndex = index + 1 < this.dataSource.getLength();
      if (this.hasNextIndex) {
        this.nextPos = this.dimensions[index + 1].primaryPos;
      }
    },
    renderScroll: ionic.animationFrameThrottle(function(transformLeft, transformTop, zoom, wasResize) {
      if (this.isVertical) {
        transformTop = this.getTransformPosition(transformTop);
      } else {
        transformLeft = this.getTransformPosition(transformLeft);
      }
      return this.scrollView.__$callback(transformLeft, transformTop, zoom, wasResize);
    }),
    getTransformPosition: function(transformPos) {
      if ((this.hasNextIndex && transformPos >= this.nextPos) ||
          (this.hasPrevIndex && transformPos < this.previousPos) ||
           Math.abs(transformPos - this.lastRenderScrollValue) > 100) {
        this.render();
      }
      return transformPos - this.lastRenderScrollValue;
    },
    getIndexForScrollValue: function(i, scrollValue) {
      var rect;
      //Scrolling up
      if (scrollValue <= this.dimensions[i].primaryPos) {
        while ( (rect = this.dimensions[i - 1]) && rect.primaryPos > scrollValue) {
          i--;
        }
      //Scrolling down
      } else {
        while ( (rect = this.dimensions[i + 1]) && rect.primaryPos < scrollValue) {
          i++;
        }
      }
      return i;
    },
    render: function(shouldRedrawAll) {
      var i;
      if (this.currentIndex >= this.dataSource.getLength() || shouldRedrawAll) {
        for (i in this.renderedItems) {
          this.removeItem(i);
        }
        if (this.currentIndex >= this.dataSource.getLength()) return null;
      }

      var rect;
      var scrollValue = this.scrollValue();
      var scrollDelta = scrollValue - this.lastRenderScrollValue;
      var scrollSize = this.scrollSize();
      var scrollSizeEnd = scrollSize + scrollValue;
      var startIndex = this.getIndexForScrollValue(this.currentIndex, scrollValue);

      //Make buffer start on previous row
      var bufferStartIndex = Math.max(startIndex - 1, 0);
      while (bufferStartIndex > 0 &&
         (rect = this.dimensions[bufferStartIndex]) &&
         rect.primaryPos === this.dimensions[startIndex - 1].primaryPos) {
        bufferStartIndex--;
      }
      var startPos = this.dimensions[bufferStartIndex].primaryPos;

      i = bufferStartIndex;
      while ((rect = this.dimensions[i]) && (rect.primaryPos - rect.primarySize < scrollSizeEnd)) {
        this.renderItem(i, rect.primaryPos - startPos, rect.secondaryPos);
        i++;
      }
      var bufferEndIndex = i - 1;

      for (i in this.renderedItems) {
        if (i < bufferStartIndex || i > bufferEndIndex) {
          this.removeItem(i);
        }
      }

      this.setCurrentIndex(startIndex);
      this.lastRenderScrollValue = startPos;
    },
    renderItem: function(dataIndex, primaryPos, secondaryPos) {
      var item = this.dataSource.getItem(dataIndex);
      if (item) {
        this.dataSource.attachItem(item);
        item.element[0].style[ionic.CSS.TRANSFORM] = this.transformString(
          primaryPos, secondaryPos, secondaryPos
        );
        this.renderedItems[dataIndex] = item;
      } else {
        delete this.renderedItems[dataIndex];
      }
    },
    removeItem: function(dataIndex) {
      var item = this.renderedItems[dataIndex];
      if (item) {
        this.dataSource.detachItem(item);
        delete this.renderedItems[dataIndex];
      }
    }
  };

  return CollectionRepeatManager;
}]);