jquery.dgtable 0.6.0 → 0.6.2

package/dist/jquery.dgtable.umd.js

@@ -1,5 +1,5 @@
 /*!
- * jquery.dgtable 0.6.0
+ * jquery.dgtable 0.6.2
  * git://github.com/danielgindi/jquery.dgtable.git
  */
 (function (global, factory) {
@@ -5987,7 +5987,46 @@
 
   /** */
 
-  var hasOwnProperty$1 = Object.prototype.hasOwnProperty;var
+  var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+
+  var hasInsertAdjacentElement = Element.prototype.insertAdjacentElement !== undefined;
+
+  function insertBefore(el, before, parent) {
+    if (!before)
+    parent.appendChild(el);else
+    if (hasInsertAdjacentElement === true)
+    before.insertAdjacentElement('beforebegin', el);else
+    parent.insertBefore(el, before);
+  }
+
+  /**
+   *
+   * @param {Element} itemEl
+   * @param {DocumentFragment|null} fragment
+   * @param {Node|undefined} before
+   * @param {Element} itemParent
+   * @returns {DocumentFragment|null}
+   */
+  function insertBeforeWithFragment(itemEl, fragment, before, itemParent) {
+    if (itemEl.parentNode !== itemParent) {
+      if (!fragment)
+      fragment = document.createDocumentFragment();
+      fragment.appendChild(itemEl);
+    } else {
+      // insert fragment
+      if (fragment && fragment.childNodes.length > 0) {
+        insertBefore(fragment, before, itemParent);
+        fragment = null;
+      }
+
+      // insert element
+      if (itemEl.nextSibling !== before) {
+        insertBefore(itemEl, before, itemParent);
+      }
+    }
+
+    return fragment;
+  }var
 
   VirtualListHelper = /*#__PURE__*/function () {
     /**
@@ -6367,6 +6406,7 @@
         var list = p.list;
         var virtual = p.virtual;
         var virtualWrapper = p.virtualWrapper;
+        var itemParent = p.currentItemsParent;
         var scrollTop = list.scrollTop;
         var visibleHeight = list.clientHeight;
         var visibleBottom = scrollTop + visibleHeight;
@@ -6376,123 +6416,172 @@
         var existingEls = p.existingEls;
         var existingCount = existingEls.length;
 
-        if (virtual) {(function () {
-            var originalWidth = list.clientWidth;
+        if (virtual) {
+          var originalWidth = list.clientWidth;
 
+          if (!virtualWrapper) {
+            virtualWrapper = p.virtualWrapper = p.userItemsParent;
             if (!virtualWrapper) {
-              virtualWrapper = p.virtualWrapper = p.userItemsParent;
-              if (!virtualWrapper) {
-                virtualWrapper = p.virtualWrapper = document.createElement('div');
-                list.appendChild(virtualWrapper);
-              }
+              virtualWrapper = p.virtualWrapper = document.createElement('div');
+              list.appendChild(virtualWrapper);
+            }
 
-              _this._resetCurrentItemsParent();
+            this._resetCurrentItemsParent();
+            itemParent = p.currentItemsParent;
 
-              if (p.autoVirtualWrapperWidth) {
-                virtualWrapper.style.width = '100%';
-                p.virtualWrapperWidthWasSet = true;
-              } else {
-                p.virtualWrapperWidthWasSet = false;
-              }
+            if (p.autoVirtualWrapperWidth) {
+              virtualWrapper.style.width = '100%';
+              p.virtualWrapperWidthWasSet = true;
+            } else {
+              p.virtualWrapperWidthWasSet = false;
             }
+          }
+
+          // Mark all of them for potential reuse
+          for (var i = 0; i < existingCount; i++) {
+            existingEls[i][ReuseElSymbol] = true;
+          }
+
+          // Make sure we have at least estimated positions for all items so we can translate scroll position
+          this._calculateItemPosition(p.count - 1);
+
+          // Find existing elements index range
+          var existingRange = this._getExistingElsRange();
+
+          // Find first visible element
+          var firstVisibleIndex = binarySearchPosition(p.cachedItemPositions, scrollTop);
+          var firstRenderIndex = Math.max(0, firstVisibleIndex - buffer);
 
-            // Mark all of them for potential reuse
-            for (var i = 0; i < existingCount; i++) {
-              existingEls[i][ReuseElSymbol] = true;
+          // Iterate over viewport
+          var index = firstRenderIndex;
+          var renderPos = this._calculateItemPosition(index);
+          var bufferEnd = buffer;
+
+          // we want to render until viewport's bottom + buffer items
+          var maxIndexToRender = Math.max(index, binarySearchPosition(p.cachedItemPositions, visibleBottom - 1) + 1 + buffer);
+
+          var insertedItems = [];
+
+          /** @type DocumentFragment|null */
+          var fragment = null;
+
+          // Find the element to insert before
+          var before = virtualWrapper.childNodes[0];
+
+          var findElementToReuse = function findElementToReuse(index) {
+            // Find existing element to reuse
+            /** @type Element|undefined */
+            var existingEl = undefined;
+
+            if (existingRange.firstIndex !== -1 && index >= existingRange.firstIndex && index <= existingRange.lastIndex) {
+              existingEl = existingEls.find(function (x) {return x[ItemIndexSymbol] === index && x[ReuseElSymbol] === true;});
             }
 
-            // Make sure we have at least estimated positions for all items so we can translate scroll position
-            _this._calculateItemPosition(p.count - 1);
+            if (existingEl === undefined) {
+              existingEl = (existingRange.firstIndex < firstRenderIndex || existingRange.firstValidArrayIndex > 0 ?
+              existingEls.find(function (x) {return (
+                  (x[ItemIndexSymbol] < firstRenderIndex || false === hasOwnProperty$1.call(x, ItemIndexSymbol)) &&
+                  x[ReuseElSymbol] === true);}) :
+              undefined) ||
+              findLast(existingEls, function (x) {return x[ReuseElSymbol] === true;});
+            }
 
-            // Find existing elements index range
-            var existingRange = _this._getExistingElsRange();
+            if (existingEl !== undefined) {
+              delete existingEl[ReuseElSymbol];
+            }
 
-            // Find first visible element
-            var firstVisibleIndex = binarySearchPosition(p.cachedItemPositions, scrollTop);
-            var firstRenderIndex = Math.max(0, firstVisibleIndex - buffer);
+            return existingEl;
+          };
 
-            // Iterate over viewport
-            var index = firstRenderIndex;
-            var renderPos = _this._calculateItemPosition(index);
-            var bufferEnd = buffer;
+          // First we iterate and try to add all at once in a fragment, as much as we can.
+          // And then reflow the at once.
+          for (; index < count && index < maxIndexToRender; index++) {
+            var existingEl = findElementToReuse(index);
 
-            /** @type Node|undefined */
-            var lastEl = undefined;
+            if (before && before === existingEl)
+            before = before.nextSibling;
 
-            // If rendering position has not reached the viewport bottom
-            //    AND we have not rendered all the buffer items yet
-            while ((renderPos < visibleBottom || bufferEnd-- > 0) && index < count) {
-              // Find existing element to reuse
-              /** @type Element|undefined */
-              var existingEl = undefined;
+            // Dequeue the element by reusing or creating a new one
+            var itemEl = this._dequeueElementForIndex(existingEl, index, before, true);
+            insertedItems.push([itemEl, index]);
 
-              if (existingRange.firstIndex !== -1 && index >= existingRange.firstIndex && index <= existingRange.lastIndex) {
-                existingEl = existingEls.find(function (x) {return x[ItemIndexSymbol] === index && x[ReuseElSymbol] === true;});
-              }
+            fragment = insertBeforeWithFragment(itemEl, fragment, before, itemParent);
+          }
 
-              if (existingEl === undefined) {
-                existingEl = (existingRange.firstIndex < firstRenderIndex || existingRange.firstValidArrayIndex > 0 ?
-                existingEls.find(function (x) {return (
-                    (x[ItemIndexSymbol] < firstRenderIndex || false === hasOwnProperty$1.call(x, ItemIndexSymbol)) &&
-                    x[ReuseElSymbol] === true);}) :
-                undefined) ||
-                findLast(existingEls, function (x) {return x[ReuseElSymbol] === true;});
-              }
+          // Insert any remaining fragment
+          if (fragment && fragment.childNodes.length > 0) {
+            insertBefore(fragment, before, itemParent);
+          }
 
-              if (existingEl !== undefined) {
-                delete existingEl[ReuseElSymbol];
-              }
+          // Iterate on inserted items and reflow them
+          for (var _i = 0, _insertedItems = insertedItems; _i < _insertedItems.length; _i++) {var item = _insertedItems[_i];
+            var _index = item[1];
+            this._insertItemAndFlow(item[0], _index, false /* inserted already */);
+            renderPos = p.cachedItemPositions[_index] + p.cachedItemHeights[_index];
+          }
+
+          // See if we still need to insert more items
+          if (renderPos < visibleBottom) {
+            for (; (renderPos < visibleBottom || bufferEnd-- > 0) && index < count; index++) {
+              var _existingEl = findElementToReuse(index);
 
-              // Find the element to insert before
-              var insertBefore = lastEl ? lastEl.nextSibling : virtualWrapper.childNodes[0];
-              if (insertBefore && insertBefore === existingEl)
-              insertBefore = insertBefore.nextSibling;
+              if (before && before === _existingEl)
+              before = before.nextSibling;
 
               // Dequeue the element by reusing or creating a new one
-              lastEl = _this._dequeueElementForIndex(existingEl, index, insertBefore);
+              this._dequeueElementForIndex(_existingEl, index, before, false);
 
               // Increment pointers
               renderPos = p.cachedItemPositions[index] + p.cachedItemHeights[index];
-              index++;
             }
+          }
 
-            // Calculate up to date scroll height
-            var scrollHeight = _this.estimateFullHeight();
-            p.virtualWrapper.style.height = scrollHeight + 'px';
+          // Calculate up-to-date scroll height
+          var scrollHeight = this.estimateFullHeight();
+          p.virtualWrapper.style.height = scrollHeight + 'px';
 
-            if (originalWidth !== list.clientWidth)
-            _this.render();})();
+          if (originalWidth !== list.clientWidth)
+          this.render();
         } else {// non-virtual
           if (count !== existingEls.length) {
-            for (var i = 0; i < existingCount; i++) {
-              existingEls[i][ReuseElSymbol] = true;
+            for (var _i2 = 0; _i2 < existingCount; _i2++) {
+              existingEls[_i2][ReuseElSymbol] = true;
             }
 
-            /** @type Node|undefined */
-            var lastEl = undefined;var _loop = function _loop(
-            index) {
+            // Find the element to insert before
+            var _before = list.childNodes[0];
+
+            /** @type DocumentFragment|null */
+            var _fragment = null;var _loop = function _loop(
+
+            _index2) {
               // Find existing element to reuse
-              var existingEl = existingEls.find(function (x) {return x[ItemIndexSymbol] === index && x[ReuseElSymbol] === true;});
+              var existingEl = existingEls.find(function (x) {return x[ItemIndexSymbol] === _index2 && x[ReuseElSymbol] === true;});
 
               if (existingEl !== undefined) {
                 delete existingEl[ReuseElSymbol];
               }
 
-              // Find the element to insert before
-              var insertBefore = lastEl ? lastEl.nextSibling : list.childNodes[0];
-              if (insertBefore && insertBefore === existingEl)
-              insertBefore = insertBefore.nextSibling;
+              if (_before && _before === existingEl)
+              _before = _before.nextSibling;
 
               // Dequeue the element by reusing or creating a new one
-              lastEl = _this._dequeueElementForIndex(existingEl, index, insertBefore);};for (var index = 0; index < count; index++) {_loop(index);
+              var itemEl = _this._dequeueElementForIndex(existingEl, _index2, _before, true);
+
+              _fragment = insertBeforeWithFragment(itemEl, _fragment, _before, itemParent);};for (var _index2 = 0; _index2 < count; _index2++) {_loop(_index2);
+            }
+
+            // Insert any remaining fragment
+            if (_fragment && _fragment.childNodes.length > 0) {
+              insertBefore(_fragment, _before, itemParent);
             }
           }
         }
 
         // Cleanup extra unused elements
         existingCount = existingEls.length; // May have changed
-        for (var _i = 0; _i < existingCount; _i++) {
-          var el = existingEls[_i];
+        for (var _i3 = 0; _i3 < existingCount; _i3++) {
+          var el = existingEls[_i3];
           if (el[ReuseElSymbol] !== true) continue;
 
           var parent = el.parentNode;
@@ -6500,9 +6589,9 @@
           parent.removeChild(el);
           if (onItemUnrender && el[ItemIndexSymbol] !== undefined)
           onItemUnrender(el);
-          existingEls.splice(_i, 1);
+          existingEls.splice(_i3, 1);
 
-          _i--;
+          _i3--;
           existingCount--;
         }
       }
@@ -6540,16 +6629,28 @@
           if (existingRange.firstValidArrayIndex === -1)
           return this;
 
+          var itemParent = p.currentItemsParent;
+
           var startIndex = existingRange.firstValidArrayIndex + atIndex - existingRange.firstIndex;
 
           this._pushItemIndexesAt(atIndex, count);
 
           /** @type Node|undefined */
-          var lastEl = existingEls[startIndex - 1];
+          var before = existingEls[startIndex - 1] ?
+          existingEls[startIndex - 1].nextSibling :
+          existingEls[0];
+
+          /** @type DocumentFragment|null */
+          var fragment = null;
 
           for (var index = atIndex, end = atIndex + count; index < end; index++) {
-            var insertBefore = lastEl ? lastEl.nextSibling : existingEls[0];
-            lastEl = this._dequeueElementForIndex(undefined, index, insertBefore);
+            var itemEl = this._dequeueElementForIndex(undefined, index, before, true);
+            fragment = insertBeforeWithFragment(itemEl, fragment, before, itemParent);
+          }
+
+          // Insert any remaining fragment
+          if (fragment && fragment.childNodes.length > 0) {
+            insertBefore(fragment, before, itemParent);
           }
         }
 
@@ -6632,7 +6733,7 @@
           if (index >= existingRange.firstIndex && index <= existingRange.lastIndex) {
             var itemEl = existingEls[existingRange.firstValidArrayIndex + index - existingRange.firstIndex];
             delete itemEl[ItemIndexSymbol];
-            this._dequeueElementForIndex(itemEl, index, itemEl.nextSibling);
+            this._dequeueElementForIndex(itemEl, index, itemEl.nextSibling, false);
           }
         }
 
@@ -6775,7 +6876,7 @@
       function createGhostItemElement(ghostIndex, append, ghostTester) {
         var p = this._p;
 
-        var itemEl = this._dequeueElementForIndex(null, ghostIndex, false);
+        var itemEl = this._dequeueElementForIndex(null, ghostIndex, false, true);
         try {
           if (append) {
             p.currentItemsParent.appendChild(itemEl);
@@ -7026,13 +7127,14 @@
        * @param {Element|undefined} itemEl
        * @param {number} index
        * @param {Node|boolean|undefined} insertBefore
+       * @param {boolean|undefined} avoidDomReflow
        * @returns {Element}
        * @private
        */ }, { key: "_dequeueElementForIndex", value:
-      function _dequeueElementForIndex(itemEl, index, insertBefore) {
+      function _dequeueElementForIndex(itemEl, index, insertBefore, avoidDomReflow) {
         var p = this._p;
         var virtualWrapper = p.virtualWrapper;
-        var itemParent = p.currentItemsParent;
+        p.currentItemsParent;
         var existingEls = p.existingEls;
         var onItemRender = p.onItemRender;
         var onItemUnrender = p.onItemUnrender;
@@ -7067,12 +7169,6 @@
           if (!(insertBefore instanceof Node))
           insertBefore = null;
 
-          // Insert into DOM
-          if (itemEl.parentNode !== itemParent ||
-          itemEl.nextSibling !== insertBefore) {
-            itemParent.insertBefore(itemEl, insertBefore);
-          }
-
           // Remove from existing list
           if (!isNew) {
             var i = existingEls.indexOf(itemEl);
@@ -7088,37 +7184,65 @@
             existingEls.splice(beforeIndex, 0, itemEl);
           }
 
-          if (virtualWrapper) {
-            // Calculate height
-            var itemHeight = itemEl.getBoundingClientRect().height;
+          if (!avoidDomReflow) {
+            this._insertItemAndFlow(itemEl, index, insertBefore);
+          }
+        }
 
-            // Put calculated height into cache, and invalidate positions if it's different
-            var cachedItemHeight = p.cachedItemHeights[index];
-            if (cachedItemHeight !== itemHeight) {
-              p.cachedItemHeights[index] = itemHeight;
-            }
+        // Add index metadata to item
+        itemEl[ItemIndexSymbol] = index;
 
-            if (cachedItemHeight !== undefined && itemHeight !== cachedItemHeight ||
-            cachedItemHeight === undefined && itemHeight !== p.cachedItemEstimatedHeights[index]) {
-              this._setItemPositionsNeedsUpdate(index + 1);
-            }
+        return itemEl;
+      }
 
-            // Set item top position
-            var pos = this._calculateItemPosition(index);
-            var supportedTransform = getSupportedTransform();
+      /**
+       * Insert item element into the DOM, set it's flow in the DOM, and update the item's position. <br />
+       * @param {Element|undefined} itemEl
+       * @param {number} index
+       * @param {Node|boolean|undefined} before
+       * @private
+       */ }, { key: "_insertItemAndFlow", value:
+      function _insertItemAndFlow(itemEl, index, before) {
+        var p = this._p;
+        var virtualWrapper = p.virtualWrapper;
+        var itemParent = p.currentItemsParent;
 
-            if (supportedTransform === false) {
-              /**@type ElementCSSInlineStyle*/itemEl.style.top = "".concat(pos, "px");
-            } else {
-              /**@type ElementCSSInlineStyle*/itemEl.style[supportedTransform] = "translateY(".concat(pos, "px)");
-            }
+        if (before !== false) {
+          if (!(before instanceof Node))
+          before = null;
+
+          // Insert into DOM
+          if (itemEl.parentNode !== itemParent ||
+          itemEl.nextSibling !== before) {
+            insertBefore(itemEl, before, itemParent);
           }
         }
 
-        // Add index metadata to item
-        itemEl[ItemIndexSymbol] = index;
+        if (virtualWrapper) {
+          // Calculate height
+          var itemHeight = itemEl.getBoundingClientRect().height;
 
-        return itemEl;
+          // Put calculated height into cache, and invalidate positions if it's different
+          var cachedItemHeight = p.cachedItemHeights[index];
+          if (cachedItemHeight !== itemHeight) {
+            p.cachedItemHeights[index] = itemHeight;
+          }
+
+          if (cachedItemHeight !== undefined && itemHeight !== cachedItemHeight ||
+          cachedItemHeight === undefined && itemHeight !== p.cachedItemEstimatedHeights[index]) {
+            this._setItemPositionsNeedsUpdate(index + 1);
+          }
+
+          // Set item top position
+          var pos = this._calculateItemPosition(index);
+          var supportedTransform = getSupportedTransform();
+
+          if (supportedTransform === false) {
+            /**@type ElementCSSInlineStyle*/itemEl.style.top = "".concat(pos, "px");
+          } else {
+            /**@type ElementCSSInlineStyle*/itemEl.style[supportedTransform] = "translateY(".concat(pos, "px)");
+          }
+        }
       }
 
       /**
@@ -7138,10 +7262,10 @@
           break;
         }
 
-        for (var _i2 = existingEls.length - 1; _i2 >= 0; _i2--) {
-          if (false === hasOwnProperty$1.call(existingEls[_i2], ItemIndexSymbol))
+        for (var _i4 = existingEls.length - 1; _i4 >= 0; _i4--) {
+          if (false === hasOwnProperty$1.call(existingEls[_i4], ItemIndexSymbol))
           continue;
-          lastValidArrayIndex = _i2;
+          lastValidArrayIndex = _i4;
           break;
         }
 
@@ -7262,7 +7386,7 @@
       var prefixes = ['transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'];
       var div = document.createElement('div');
       _isTransformSupported = false;
-      for (var _i3 = 0, _prefixes = prefixes; _i3 < _prefixes.length; _i3++) {var item = _prefixes[_i3];
+      for (var _i5 = 0, _prefixes = prefixes; _i5 < _prefixes.length; _i5++) {var item = _prefixes[_i5];
         if (div && div.style[item] !== undefined) {
           _isTransformSupported = item;
           break;
@@ -7422,7 +7546,7 @@
     /**
      * @private
      * @field {number} estimatedRowHeight */
-    o.estimatedRowHeight = options.estimatedRowHeight === undefined ? 40 : options.estimatedRowHeight;
+    o.estimatedRowHeight = options.estimatedRowHeight || undefined;
 
     /**
      * @private
@@ -7684,7 +7808,7 @@
       autoVirtualWrapperWidth: false,
       virtual: true,
       buffer: o.rowsBufferSize,
-      estimatedItemHeight: o.estimatedRowHeight || 40,
+      estimatedItemHeight: o.estimatedRowHeight ? o.estimatedRowHeight : p.virtualRowHeight || 40,
       itemElementCreatorFn: function itemElementCreatorFn() {
         return createElement('div');
       },
@@ -10620,6 +10744,41 @@
 
     var tableClassName = o.tableClassName;
 
+    // Calculate virtual row heights
+    if (o.virtualTable && !p.virtualRowHeight) {
+      var createDummyRow = function createDummyRow() {
+        var row = createElement('div'),
+          cell = row.appendChild(createElement('div')),
+          cellInner = cell.appendChild(createElement('div'));
+        row.className = tableClassName + '-row';
+        cell.className = tableClassName + '-cell';
+        cellInner.innerHTML = '0';
+        row.style.visibility = 'hidden';
+        row.style.position = 'absolute';
+        return row;
+      };
+
+      var $dummyTbody,$dummyWrapper = $('<div>').
+        addClass(that.el.className).
+        css({ 'z-index': -1, 'position': 'absolute', left: '0', top: '-9999px', width: '1px', overflow: 'hidden' }).
+        append(
+        $('<div>').addClass(tableClassName).append(
+        $dummyTbody = $('<div>').addClass(tableClassName + '-body').css('width', 99999)));
+
+
+
+      $dummyWrapper.appendTo(document.body);
+
+      var row1 = createDummyRow(),row2 = createDummyRow(),row3 = createDummyRow();
+      $dummyTbody.append(row1, row2, row3);
+
+      p.virtualRowHeightFirst = Css.getElementHeight(row1, true, true, true);
+      p.virtualRowHeight = Css.getElementHeight(row2, true, true, true);
+      p.virtualRowHeightLast = Css.getElementHeight(row3, true, true, true);
+
+      $dummyWrapper.remove();
+    }
+
     // Create inner table and tbody
     if (!p.$table) {