@danielgindi/virtual-list-helper 1.0.4 → 1.0.6

package/dist/virtual-list-helper.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/virtual-list-helper 1.0.4
+ * @danielgindi/virtual-list-helper 1.0.6
  * git://github.com/danielgindi/virtual-list-helper.git
  */
 'use strict';
@@ -4517,7 +4517,46 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
 
 /** */
 
-var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#__PURE__*/function () {
+var hasOwnProperty = 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 () {
   /**
    * @param {VirtualListHelper~Options} opts
    */
@@ -4895,6 +4934,7 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
       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;
@@ -4904,123 +4944,172 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
       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);
+
+        // 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;});
           }
 
-          // Mark all of them for potential reuse
-          for (var i = 0; i < existingCount; i++) {
-            existingEls[i][ReuseElSymbol] = true;
+          if (existingEl === undefined) {
+            existingEl = (existingRange.firstIndex < firstRenderIndex || existingRange.firstValidArrayIndex > 0 ?
+            existingEls.find(function (x) {return (
+                (x[ItemIndexSymbol] < firstRenderIndex || false === hasOwnProperty.call(x, ItemIndexSymbol)) &&
+                x[ReuseElSymbol] === true);}) :
+            undefined) ||
+            findLast(existingEls, function (x) {return 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) {
+            delete existingEl[ReuseElSymbol];
+          }
 
-          // Find existing elements index range
-          var existingRange = _this._getExistingElsRange();
+          return existingEl;
+        };
 
-          // Find first visible element
-          var firstVisibleIndex = binarySearchPosition(p.cachedItemPositions, scrollTop);
-          var firstRenderIndex = Math.max(0, firstVisibleIndex - 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);
 
-          // Iterate over viewport
-          var index = firstRenderIndex;
-          var renderPos = _this._calculateItemPosition(index);
-          var bufferEnd = buffer;
+          if (before && before === existingEl)
+          before = before.nextSibling;
 
-          /** @type Node|undefined */
-          var lastEl = undefined;
+          // Dequeue the element by reusing or creating a new one
+          var itemEl = this._dequeueElementForIndex(existingEl, index, before, true);
+          insertedItems.push([itemEl, index]);
 
-          // 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;
+          fragment = insertBeforeWithFragment(itemEl, fragment, before, itemParent);
+        }
 
-            if (existingRange.firstIndex !== -1 && index >= existingRange.firstIndex && index <= existingRange.lastIndex) {
-              existingEl = existingEls.find(function (x) {return x[ItemIndexSymbol] === index && x[ReuseElSymbol] === true;});
-            }
+        // Insert any remaining fragment
+        if (fragment && fragment.childNodes.length > 0) {
+          insertBefore(fragment, before, itemParent);
+        }
 
-            if (existingEl === undefined) {
-              existingEl = (existingRange.firstIndex < firstRenderIndex || existingRange.firstValidArrayIndex > 0 ?
-              existingEls.find(function (x) {return (
-                  (x[ItemIndexSymbol] < firstRenderIndex || false === hasOwnProperty.call(x, ItemIndexSymbol)) &&
-                  x[ReuseElSymbol] === true);}) :
-              undefined) ||
-              findLast(existingEls, function (x) {return x[ReuseElSymbol] === true;});
-            }
+        // 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];
+        }
 
-            if (existingEl !== undefined) {
-              delete existingEl[ReuseElSymbol];
-            }
+        // 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;
@@ -5028,9 +5117,9 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
         parent.removeChild(el);
         if (onItemUnrender && el[ItemIndexSymbol] !== undefined)
         onItemUnrender(el);
-        existingEls.splice(_i, 1);
+        existingEls.splice(_i3, 1);
 
-        _i--;
+        _i3--;
         existingCount--;
       }
     }
@@ -5068,16 +5157,28 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
         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);
         }
       }
 
@@ -5160,7 +5261,7 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
         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);
         }
       }
 
@@ -5303,7 +5404,7 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
     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);
@@ -5554,10 +5655,11 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
      * @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;
@@ -5595,12 +5697,6 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
         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);
@@ -5616,35 +5712,65 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
           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 ||
-          cachedItemHeight === undefined && p.cachedItemEstimatedHeights[index] === itemHeight)) {
+      // Add index metadata to item
+      itemEl[ItemIndexSymbol] = index;
 
-            p.cachedItemHeights[index] = itemHeight;
-            this._setItemPositionsNeedsUpdate(index + 1);
-          }
+      return itemEl;
+    }
+
+    /**
+     * 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;
 
-          // Set item top position
-          var pos = this._calculateItemPosition(index);
-          var supportedTransform = getSupportedTransform();
+      if (before !== false) {
+        if (!(before instanceof Node))
+        before = null;
 
-          if (supportedTransform === false) {
-            /**@type ElementCSSInlineStyle*/itemEl.style.top = "".concat(pos, "px");
-          } else {
-            /**@type ElementCSSInlineStyle*/itemEl.style[supportedTransform] = "translateY(".concat(pos, "px)");
-          }
+        // 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)");
+        }
+      }
     }
 
     /**
@@ -5664,10 +5790,10 @@ var hasOwnProperty = Object.prototype.hasOwnProperty;var VirtualListHelper = /*#
         break;
       }
 
-      for (var _i2 = existingEls.length - 1; _i2 >= 0; _i2--) {
-        if (false === hasOwnProperty.call(existingEls[_i2], ItemIndexSymbol))
+      for (var _i4 = existingEls.length - 1; _i4 >= 0; _i4--) {
+        if (false === hasOwnProperty.call(existingEls[_i4], ItemIndexSymbol))
         continue;
-        lastValidArrayIndex = _i2;
+        lastValidArrayIndex = _i4;
         break;
       }
 
@@ -5788,7 +5914,7 @@ var getSupportedTransform = function getSupportedTransform() {
     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;