Dynamic Infinite List In Vanilla JavaScript – Infilist

Category: Javascript | March 7, 2019
Author: samlinz
Views Total: 911 views
Official Page: Go to website
Last Update: March 7, 2019
License: MIT

Preview:

Dynamic Infinite List In Vanilla JavaScript – Infilist

Description:

The Infilist JavaScript library helps you dynamically generate a list view (vertical scroller) with infinite scroll and asynchronous callback support.

How to use it:

Download and insert the main JavaScript into the document.

<script src="build/scroll.min.js"></script>

Initialize the library with following required parameters:

  • GENERATOR: Callback used to generate the list
  • TRESHOLD: Amount of pixels below and above the parent border which are deemed ‘in view’. Calculated as CHILD_SIZE * TRESHOLD.
  • CHILD_SIZE: Fixed height of a single list element.
myList = new InfiScroll(containerEl, {
  generator: function(index, resolve) {
    // Generate the HTMLElement in any way you want to here and then
    // resolve the Promise with it.
    const element = XXX;
    resolve(element);
  },
  childSize: 100,
  treshold: 7, 
  }
});

Optional settings with default values.

myList = new InfiScroll(containerEl, {

  // Size of the list.
  SIZE: "size", 

  // Generator function.
  QUERY: "generator", 

  // Boolean indicating if the list should initially display full height.
  FIXED_SIZE: "fixedSize",

  // Size of the cache. 
  CACHE_SIZE: "cacheSize", 

  // Function which will check if view should be updated
  INVALIDATE_CHECK: "check", 

  // Callback for DOM deletion
  DOM_DELETE: "domDelete", 

  // Callback to show or hide spinner animation.
  TOGGLE_SPINNER: "spinner", 

  // Callback to show or hide spinner animation.
  THROTTLE_SCROLL: "throttleScroll", 

  // Do not reset scroll height when reloading.
  KEEP_POSITION_ON_RELOAD: "keepPositionOnReload", 

  // Do not reset scroll height when reloading.
  BATCH_LOAD: "batchLoad" 
  
});

API methods.

// Invalidate the list explicitly.
myList.invalidate();

// Update the size of the list, also causes entire list to be invalidated.
myList.updateSize(newSize: number);

// Remove all children from list and reload.
myList.reload();

// Update a single item in the list
myList.updateItem(index, ...data);

// Unload event listeners
myList.dispose();

Changelog:

03/07/2019

  • fix crash if elements to be removed do not exists after reload

02/20/2019

  • fix js error while removing ghost elements

You Might Be Interested In:


Leave a Reply