InfiniList.js

/* ************************************************************************

   Copyright: Hexcode Technologies

   License:LGPL

   Authors: Phyo Arkar Lwin

************************************************************************ */

/**
 * Infinilist Auto Adjusting List  implementation with scroll lock. new item will always be scroll to bottom.
 */
qx.Class.define('phwabe.utils.list.InfiniList', {
  extend: qx.ui.list.List,
  events: {
    "resizeHeight": "qx.event.type.Event",
    "scrolledUp": "qx.event.type.Event"

  },
  members: {
    __deferredCall: null,
    __scrollLock: false,
    __oldScrollPos: null,
    _initLayer: function() {
      this.base(arguments);

      this.__rowConf = this.getPane().getRowConfig()
      this._scrollY = this.getChildControl('scrollbar-y')
      this._scrollY.setBackgroundColor("rgb(239, 239, 239)")
      this.__setupListeners()
    },

    __setupListeners: function() {

      this.addListener("changeModel", function(data) {
        this.getModel().addListener("changeLength", function() {
          this.__scrollLock = true
          this.scrollLast()

        }, this)
      }, this)

      this._layer.addListener("updated", this._onUpdated, this);

      this.addListener("roll", function(e) {

        deltaY = e.getDelta().y
        if (deltaY < 0) {
          this.__scrollLock = false
        }
      }, this)

    },

    _onUpdated: function(event) {
      if (this.__deferredCall === null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {

          qx.ui.core.queue.Widget.add(this, 'updateSize');


        }, this);
      }
      this.__deferredCall.schedule();
      // qx.ui.core.queue.Widget.add(this, 'updateSize');
    },

    _updateSize: function(callback) {
      var firstRow = this._layer.getFirstRow();
      var lastRow = this.getModel().length - 1
      var rowSize = this._layer.getRowSizes().length;
      if (rowSize == 0) {
        this._scrollY.setPosition((this.getPane().getScrollMaxY() - 1))
        return
      }
      for (var row = firstRow; row < firstRow + rowSize; row++) {
        var widget = this._layer.getRenderedCellWidget(row, 0);

        if (widget !== null) {
          var height = widget.getSizeHint().height;
          var current_height = this.__rowConf.getItemSize(row);
          if (height > current_height) {
            this.__rowConf.setItemSize(row, height);

          }

        } else {
          continue
        }

        if (row === lastRow) {
            // widget.addListenerOnce('appear',this.scrollLast,this)
          this.getPane().addListenerOnce("scrollY", function() {
              this.scrollLast()
            }, this)
            // console.log(widget)
          this.scrollLast()
        }


      }
    },
    scrollLast: function(check) {
      // console.log(this.getPane().getScrollY())
      // console.log(this.getPane().getScrollMaxY())
      if (this.__scrollLock === true ) {
        this.getPane().setScrollY(this.getPane().getScrollMaxY())
      }

    },
    syncWidget: function(jobs) {
      // var that = this
      if (jobs.updateSize) {
        this._updateSize()
      }

    }
  }
});