@difizen/libro-virtualized 0.1.2

package/src/utils/get-updated-offset-for-index.ts

@@ -0,0 +1,33 @@
+/**
+ * Determines a new offset that ensures a certain cell is visible, given the current offset.
+ * If the cell is already visible then the current offset will be returned.
+ * If the current offset is too great or small, it will be adjusted just enough to ensure the specified index is visible.
+ *
+ * @param align Desired alignment within container; one of "auto" (default), "start", or "end"
+ * @param cellOffset Offset (x or y) position for cell
+ * @param cellSize Size (width or height) of cell
+ * @param containerSize Total size (width or height) of the container
+ * @param currentOffset Container's current (x or y) offset
+ * @return Offset to use to ensure the specified cell is visible
+ */
+export default function getUpdatedOffsetForIndex({
+  align = 'auto',
+  cellOffset,
+  cellSize,
+  containerSize,
+  currentOffset,
+}: any) {
+  const maxOffset = cellOffset;
+  const minOffset = maxOffset - containerSize + cellSize;
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+    case 'end':
+      return minOffset;
+    case 'center':
+      return maxOffset - (containerSize - cellSize) / 2;
+    default:
+      return Math.max(minOffset, Math.min(maxOffset, currentOffset));
+  }
+}

package/src/utils/init-cell-metadata.ts

@@ -0,0 +1,32 @@
+/**
+ * Initializes metadata for an axis and its cells.
+ * This data is used to determine which cells are visible given a container size and scroll position.
+ *
+ * @param cellCount Total number of cells.
+ * @param size Either a fixed size or a function that returns the size for a given given an index.
+ * @return Object mapping cell index to cell metadata (size, offset)
+ */
+export default function initCellMetadata({ cellCount, size }: any) {
+  const sizeGetter = typeof size === 'function' ? size : () => size;
+
+  const cellMetadata = [];
+  let offset = 0;
+
+  for (let i = 0; i < cellCount; i++) {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const size = sizeGetter({ index: i });
+
+    if (size === null || isNaN(size)) {
+      throw Error(`Invalid size returned for cell ${i} of value ${size}`);
+    }
+
+    cellMetadata[i] = {
+      size,
+      offset,
+    };
+
+    offset += size;
+  }
+
+  return cellMetadata;
+}

package/src/utils/request-animation-timeout.ts

@@ -0,0 +1,44 @@
+import { caf, raf } from './animation-frame.js';
+
+export type AnimationTimeoutId = {
+  id: number;
+};
+
+export const cancelAnimationTimeout = (frame: AnimationTimeoutId) => caf(frame.id);
+
+/**
+ * Recursively calls requestAnimationFrame until a specified delay has been met or exceeded.
+ * When the delay time has been reached the function you're timing out will be called.
+ *
+ * Credit: Joe Lambert (https://gist.github.com/joelambert/1002116#file-requesttimeout-js)
+ */
+export const requestAnimationTimeout = (
+  callback: () => any,
+  delay: number,
+): AnimationTimeoutId => {
+  let start: number;
+  // wait for end of processing current event handler, because event handler may be long
+  Promise.resolve()
+    .then(() => {
+      start = Date.now();
+      return;
+    })
+    .catch((e) => {
+      //
+    });
+
+  const timeout = () => {
+    if (Date.now() - start >= delay) {
+      callback();
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      frame.id = raf(timeout);
+    }
+  };
+
+  const frame: AnimationTimeoutId = {
+    id: raf(timeout),
+  };
+
+  return frame;
+};

package/src/utils/test-helper.ts

@@ -0,0 +1,20 @@
+import initCellMetadata from './init-cell-metadata.js';
+
+// Default cell sizes and offsets for use in below tests
+export function getCellMetadata() {
+  const cellSizes = [
+    10, // 0: 0..0 (min)
+    20, // 1: 0..10
+    15, // 2: 0..30
+    10, // 3: 5..45
+    15, // 4: 20..55
+    30, // 5: 50..70
+    20, // 6: 70..100
+    10, // 7: 80..110
+    30, //  8: 110..110 (max)
+  ];
+  return initCellMetadata({
+    cellCount: cellSizes.length,
+    size: ({ index }: any) => cellSizes[index],
+  });
+}

package/src/vendor/binary-search-bounds.ts

@@ -0,0 +1,203 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable no-param-reassign */
+// @ts-nocheck
+/**
+ * Binary Search Bounds
+ * https://github.com/mikolalysenko/binary-search-bounds
+ * Mikola Lysenko
+ *
+ * Inlined because of Content Security Policy issue caused by the use of `new Function(...)` syntax.
+ * Issue reported here: https://github.com/mikolalysenko/binary-search-bounds/issues/5
+ **/
+
+function _GEA(a, l, h, y) {
+  let i = h + 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (x >= y) {
+      i = m;
+      h = m - 1;
+    } else {
+      l = m + 1;
+    }
+  }
+  return i;
+}
+function _GEP(a, l, h, y, c) {
+  let i = h + 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (c(x, y) >= 0) {
+      i = m;
+      h = m - 1;
+    } else {
+      l = m + 1;
+    }
+  }
+  return i;
+}
+function dispatchBsearchGE(a, y, c, l, h) {
+  if (typeof c === 'function') {
+    return _GEP(a, l === void 0 ? 0 : l | 0, h === void 0 ? a.length - 1 : h | 0, y, c);
+  } else {
+    return _GEA(a, c === void 0 ? 0 : c | 0, l === void 0 ? a.length - 1 : l | 0, y);
+  }
+}
+
+function _GTA(a, l, h, y) {
+  let i = h + 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (x > y) {
+      i = m;
+      h = m - 1;
+    } else {
+      l = m + 1;
+    }
+  }
+  return i;
+}
+function _GTP(a, l, h, y, c) {
+  let i = h + 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (c(x, y) > 0) {
+      i = m;
+      h = m - 1;
+    } else {
+      l = m + 1;
+    }
+  }
+  return i;
+}
+function dispatchBsearchGT(a, y, c, l, h) {
+  if (typeof c === 'function') {
+    return _GTP(a, l === void 0 ? 0 : l | 0, h === void 0 ? a.length - 1 : h | 0, y, c);
+  } else {
+    return _GTA(a, c === void 0 ? 0 : c | 0, l === void 0 ? a.length - 1 : l | 0, y);
+  }
+}
+
+function _LTA(a, l, h, y) {
+  let i = l - 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (x < y) {
+      i = m;
+      l = m + 1;
+    } else {
+      h = m - 1;
+    }
+  }
+  return i;
+}
+function _LTP(a, l, h, y, c) {
+  let i = l - 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (c(x, y) < 0) {
+      i = m;
+      l = m + 1;
+    } else {
+      h = m - 1;
+    }
+  }
+  return i;
+}
+function dispatchBsearchLT(a, y, c, l, h) {
+  if (typeof c === 'function') {
+    return _LTP(a, l === void 0 ? 0 : l | 0, h === void 0 ? a.length - 1 : h | 0, y, c);
+  } else {
+    return _LTA(a, c === void 0 ? 0 : c | 0, l === void 0 ? a.length - 1 : l | 0, y);
+  }
+}
+
+function _LEA(a, l, h, y) {
+  let i = l - 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (x <= y) {
+      i = m;
+      l = m + 1;
+    } else {
+      h = m - 1;
+    }
+  }
+  return i;
+}
+function _LEP(a, l, h, y, c) {
+  let i = l - 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (c(x, y) <= 0) {
+      i = m;
+      l = m + 1;
+    } else {
+      h = m - 1;
+    }
+  }
+  return i;
+}
+function dispatchBsearchLE(a, y, c, l, h) {
+  if (typeof c === 'function') {
+    return _LEP(a, l === void 0 ? 0 : l | 0, h === void 0 ? a.length - 1 : h | 0, y, c);
+  } else {
+    return _LEA(a, c === void 0 ? 0 : c | 0, l === void 0 ? a.length - 1 : l | 0, y);
+  }
+}
+
+function _EQA(a, l, h, y) {
+  l - 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    if (x === y) {
+      return m;
+    } else if (x <= y) {
+      l = m + 1;
+    } else {
+      h = m - 1;
+    }
+  }
+  return -1;
+}
+function _EQP(a, l, h, y, c) {
+  l - 1;
+  while (l <= h) {
+    const m = (l + h) >>> 1,
+      x = a[m];
+    const p = c(x, y);
+    if (p === 0) {
+      return m;
+    } else if (p <= 0) {
+      l = m + 1;
+    } else {
+      h = m - 1;
+    }
+  }
+  return -1;
+}
+function dispatchBsearchEQ(a, y, c, l, h) {
+  if (typeof c === 'function') {
+    return _EQP(a, l === void 0 ? 0 : l | 0, h === void 0 ? a.length - 1 : h | 0, y, c);
+  } else {
+    return _EQA(a, c === void 0 ? 0 : c | 0, l === void 0 ? a.length - 1 : l | 0, y);
+  }
+}
+
+export default {
+  ge: dispatchBsearchGE,
+  gt: dispatchBsearchGT,
+  lt: dispatchBsearchLT,
+  le: dispatchBsearchLE,
+  eq: dispatchBsearchEQ,
+};

package/src/vendor/detect-element-resize.ts

@@ -0,0 +1,241 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-this-alias */
+/* eslint-disable no-var */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable no-param-reassign */
+// @ts-nocheck
+
+/**
+ * Detect Element Resize.
+ * https://github.com/sdecima/javascript-detect-element-resize
+ * Sebastian Decima
+ *
+ * Forked from version 0.5.3; includes the following modifications:
+ * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
+ * 2) Defer initialization code via a top-level function wrapper (to support SSR).
+ * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
+ * 4) Add nonce for style element.
+ **/
+
+export default function createDetectElementResize(nonce) {
+  // Check `document` and `window` in case of server-side rendering
+  let _window;
+  if (typeof window !== 'undefined') {
+    _window = window;
+  } else if (typeof self !== 'undefined') {
+    _window = self;
+  } else {
+    _window = global;
+  }
+
+  const attachEvent = typeof document !== 'undefined' && document.attachEvent;
+
+  if (!attachEvent) {
+    const requestFrame = (function () {
+      const raf =
+        _window.requestAnimationFrame ||
+        _window.mozRequestAnimationFrame ||
+        _window.webkitRequestAnimationFrame ||
+        function (fn) {
+          return _window.setTimeout(fn, 20);
+        };
+      return function (fn) {
+        return raf(fn);
+      };
+    })();
+
+    const cancelFrame = (function () {
+      const cancel =
+        _window.cancelAnimationFrame ||
+        _window.mozCancelAnimationFrame ||
+        _window.webkitCancelAnimationFrame ||
+        _window.clearTimeout;
+      return function (id) {
+        return cancel(id);
+      };
+    })();
+
+    var resetTriggers = function (element) {
+      const triggers = element.__resizeTriggers__,
+        expand = triggers.firstElementChild,
+        contract = triggers.lastElementChild,
+        expandChild = expand.firstElementChild;
+      contract.scrollLeft = contract.scrollWidth;
+      contract.scrollTop = contract.scrollHeight;
+      expandChild.style.width = expand.offsetWidth + 1 + 'px';
+      expandChild.style.height = expand.offsetHeight + 1 + 'px';
+      expand.scrollLeft = expand.scrollWidth;
+      expand.scrollTop = expand.scrollHeight;
+    };
+
+    const checkTriggers = function (element) {
+      return (
+        element.offsetWidth !== element.__resizeLast__.width ||
+        element.offsetHeight !== element.__resizeLast__.height
+      );
+    };
+
+    var scrollListener = function (e) {
+      // Don't measure (which forces) reflow for scrolls that happen inside of children!
+      if (
+        e.target.className &&
+        typeof e.target.className.indexOf === 'function' &&
+        e.target.className.indexOf('contract-trigger') < 0 &&
+        e.target.className.indexOf('expand-trigger') < 0
+      ) {
+        return;
+      }
+
+      const element = this;
+      resetTriggers(this);
+      if (this.__resizeRAF__) {
+        cancelFrame(this.__resizeRAF__);
+      }
+      this.__resizeRAF__ = requestFrame(function () {
+        if (checkTriggers(element)) {
+          element.__resizeLast__.width = element.offsetWidth;
+          element.__resizeLast__.height = element.offsetHeight;
+          element.__resizeListeners__.forEach(function (fn) {
+            fn.call(element, e);
+          });
+        }
+      });
+    };
+
+    /* Detect CSS Animations support to detect element display/re-attach */
+    var animation = false,
+      keyframeprefix = '',
+      animationstartevent = 'animationstart',
+      domPrefixes = 'Webkit Moz O ms'.split(' '),
+      startEvents =
+        'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(
+          ' ',
+        ),
+      pfx = '';
+    {
+      const elm = document.createElement('fakeelement');
+      if (elm.style.animationName !== undefined) {
+        animation = true;
+      }
+
+      if (animation === false) {
+        for (let i = 0; i < domPrefixes.length; i++) {
+          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+            pfx = domPrefixes[i];
+            keyframeprefix = '-' + pfx.toLowerCase() + '-';
+            animationstartevent = startEvents[i];
+            animation = true;
+            break;
+          }
+        }
+      }
+    }
+
+    var animationName = 'resizeanim';
+    var animationKeyframes =
+      '@' +
+      keyframeprefix +
+      'keyframes ' +
+      animationName +
+      ' { from { opacity: 0; } to { opacity: 0; } } ';
+    var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+  }
+
+  const createStyles = function (doc) {
+    if (!doc.getElementById('detectElementResize')) {
+      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+      const css =
+          (animationKeyframes ? animationKeyframes : '') +
+          '.resize-triggers { ' +
+          (animationStyle ? animationStyle : '') +
+          'visibility: hidden; opacity: 0; } ' +
+          '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = doc.head || doc.getElementsByTagName('head')[0],
+        style = doc.createElement('style');
+
+      style.id = 'detectElementResize';
+      style.type = 'text/css';
+
+      if (nonce !== null) {
+        style.setAttribute('nonce', nonce);
+      }
+
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(doc.createTextNode(css));
+      }
+
+      head.appendChild(style);
+    }
+  };
+
+  const addResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.attachEvent('onresize', fn);
+    } else {
+      if (!element.__resizeTriggers__) {
+        const doc = element.ownerDocument;
+        const elementStyle = _window.getComputedStyle(element);
+        if (elementStyle && elementStyle.position === 'static') {
+          element.style.position = 'relative';
+        }
+        createStyles(doc);
+        element.__resizeLast__ = {};
+        element.__resizeListeners__ = [];
+        (element.__resizeTriggers__ = doc.createElement('div')).className =
+          'resize-triggers';
+        element.__resizeTriggers__.innerHTML =
+          '<div class="expand-trigger"><div></div></div>' +
+          '<div class="contract-trigger"></div>';
+        element.appendChild(element.__resizeTriggers__);
+        resetTriggers(element);
+        element.addEventListener('scroll', scrollListener, true);
+
+        /* Listen for a css animation to detect element display/re-attach */
+        if (animationstartevent) {
+          element.__resizeTriggers__.__animationListener__ = function animationListener(
+            e,
+          ) {
+            if (e.animationName === animationName) {
+              resetTriggers(element);
+            }
+          };
+          element.__resizeTriggers__.addEventListener(
+            animationstartevent,
+            element.__resizeTriggers__.__animationListener__,
+          );
+        }
+      }
+      element.__resizeListeners__.push(fn);
+    }
+  };
+
+  const removeResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.detachEvent('onresize', fn);
+    } else {
+      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+      if (!element.__resizeListeners__.length) {
+        element.removeEventListener('scroll', scrollListener, true);
+        if (element.__resizeTriggers__.__animationListener__) {
+          element.__resizeTriggers__.removeEventListener(
+            animationstartevent,
+            element.__resizeTriggers__.__animationListener__,
+          );
+          element.__resizeTriggers__.__animationListener__ = null;
+        }
+        try {
+          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+        } catch (e) {
+          // Preact compat; see developit/preact-compat/issues/228
+        }
+      }
+    }
+  };
+
+  return {
+    addResizeListener,
+    removeResizeListener,
+  };
+}