react-film/lib/esm/getView.js

React component for showing carousel just like a film strip

import "core-js/modules/es.array.slice.js";

/* eslint no-magic-numbers: "off" */
import * as browser from './browser';
import best from './util/best';
export default function getView(dir, scrollable, itemContainer, scrollingTo) {
  var rtl = dir === 'rtl';

  if (itemContainer && scrollable) {
    var scrollLeft = scrollingTo || scrollable.scrollLeft;
    var trueScrollLeft = rtl && (browser.edgeUWP || browser.internetExplorer) ? -scrollLeft : scrollLeft;
    var items = itemContainer.children; // This will enumerate <li> inside <FilmStrip>

    var scrollCenter = trueScrollLeft + scrollable.offsetWidth / 2;
    var index = best([].slice.call(items), function (item) {
      var offsetCenter = item.offsetLeft + item.offsetWidth / 2;
      return 1 / Math.abs(scrollCenter - offsetCenter);
    });

    if (~index) {
      var item = items[index];
      var offsetCenter = item.offsetLeft + item.offsetWidth / 2;
      var indexFraction = index + (scrollCenter - offsetCenter) / item.offsetWidth * (rtl ? -1 : 1); // We "fix" indexFraction if the viewport is at the start/end of the content
      // This is to simplify code that use Math.round(indexFraction) to find the scrollable index
      // if (scrollLeft === 0) {
      //   indexFraction = 0;
      // } else if (scrollLeft >= scrollable.scrollWidth - scrollable.offsetWidth) {
      //   indexFraction = items.length - 1;
      // } else if (indexFraction % 1 > .99 || indexFraction % 1 < .01) {
      //   indexFraction = Math.round(indexFraction);
      // }

      if (indexFraction % 1 > 0.99 || indexFraction % 1 < 0.01) {
        indexFraction = Math.round(indexFraction);
      }

      var selectedIndex;

      if (Math.abs(trueScrollLeft) < 1) {
        selectedIndex = 0;
      } else if (rtl ? trueScrollLeft <= scrollable.offsetWidth - scrollable.scrollWidth : trueScrollLeft >= scrollable.scrollWidth - scrollable.offsetWidth) {
        selectedIndex = items.length - 1;
      } else {
        selectedIndex = Math.round(indexFraction);
      }

      return {
        index: selectedIndex,
        indexFraction: indexFraction
      };
    }
  }
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nZXRWaWV3LmpzIl0sIm5hbWVzIjpbImJyb3dzZXIiLCJiZXN0IiwiZ2V0VmlldyIsImRpciIsInNjcm9sbGFibGUiLCJpdGVtQ29udGFpbmVyIiwic2Nyb2xsaW5nVG8iLCJydGwiLCJzY3JvbGxMZWZ0IiwidHJ1ZVNjcm9sbExlZnQiLCJlZGdlVVdQIiwiaW50ZXJuZXRFeHBsb3JlciIsIml0ZW1zIiwiY2hpbGRyZW4iLCJzY3JvbGxDZW50ZXIiLCJvZmZzZXRXaWR0aCIsImluZGV4Iiwic2xpY2UiLCJjYWxsIiwiaXRlbSIsIm9mZnNldENlbnRlciIsIm9mZnNldExlZnQiLCJNYXRoIiwiYWJzIiwiaW5kZXhGcmFjdGlvbiIsInJvdW5kIiwic2VsZWN0ZWRJbmRleCIsInNjcm9sbFdpZHRoIiwibGVuZ3RoIl0sIm1hcHBpbmdzIjoiOztBQUFBO0FBRUEsT0FBTyxLQUFLQSxPQUFaLE1BQXlCLFdBQXpCO0FBQ0EsT0FBT0MsSUFBUCxNQUFpQixhQUFqQjtBQUVBLGVBQWUsU0FBU0MsT0FBVCxDQUFpQkMsR0FBakIsRUFBc0JDLFVBQXRCLEVBQWtDQyxhQUFsQyxFQUFpREMsV0FBakQsRUFBOEQ7QUFDM0UsTUFBTUMsR0FBRyxHQUFHSixHQUFHLEtBQUssS0FBcEI7O0FBRUEsTUFBSUUsYUFBYSxJQUFJRCxVQUFyQixFQUFpQztBQUMvQixRQUFNSSxVQUFVLEdBQUdGLFdBQVcsSUFBSUYsVUFBVSxDQUFDSSxVQUE3QztBQUNBLFFBQU1DLGNBQWMsR0FBR0YsR0FBRyxLQUFLUCxPQUFPLENBQUNVLE9BQVIsSUFBbUJWLE9BQU8sQ0FBQ1csZ0JBQWhDLENBQUgsR0FBdUQsQ0FBQ0gsVUFBeEQsR0FBcUVBLFVBQTVGO0FBQ0EsUUFBTUksS0FBSyxHQUFHUCxhQUFhLENBQUNRLFFBQTVCLENBSCtCLENBR087O0FBQ3RDLFFBQU1DLFlBQVksR0FBR0wsY0FBYyxHQUFHTCxVQUFVLENBQUNXLFdBQVgsR0FBeUIsQ0FBL0Q7QUFDQSxRQUFNQyxLQUFLLEdBQUdmLElBQUksQ0FBQyxHQUFHZ0IsS0FBSCxDQUFTQyxJQUFULENBQWNOLEtBQWQsQ0FBRCxFQUF1QixVQUFBTyxJQUFJLEVBQUk7QUFDL0MsVUFBTUMsWUFBWSxHQUFHRCxJQUFJLENBQUNFLFVBQUwsR0FBa0JGLElBQUksQ0FBQ0osV0FBTCxHQUFtQixDQUExRDtBQUVBLGFBQU8sSUFBSU8sSUFBSSxDQUFDQyxHQUFMLENBQVNULFlBQVksR0FBR00sWUFBeEIsQ0FBWDtBQUNELEtBSmlCLENBQWxCOztBQU1BLFFBQUksQ0FBQ0osS0FBTCxFQUFZO0FBQ1YsVUFBTUcsSUFBSSxHQUFHUCxLQUFLLENBQUNJLEtBQUQsQ0FBbEI7QUFFQSxVQUFNSSxZQUFZLEdBQUdELElBQUksQ0FBQ0UsVUFBTCxHQUFrQkYsSUFBSSxDQUFDSixXQUFMLEdBQW1CLENBQTFEO0FBQ0EsVUFBSVMsYUFBYSxHQUFHUixLQUFLLEdBQUksQ0FBQ0YsWUFBWSxHQUFHTSxZQUFoQixJQUFnQ0QsSUFBSSxDQUFDSixXQUF0QyxJQUFzRFIsR0FBRyxHQUFHLENBQUMsQ0FBSixHQUFRLENBQWpFLENBQTVCLENBSlUsQ0FNVjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBRUEsVUFBSWlCLGFBQWEsR0FBRyxDQUFoQixHQUFvQixJQUFwQixJQUE0QkEsYUFBYSxHQUFHLENBQWhCLEdBQW9CLElBQXBELEVBQTBEO0FBQ3hEQSxRQUFBQSxhQUFhLEdBQUdGLElBQUksQ0FBQ0csS0FBTCxDQUFXRCxhQUFYLENBQWhCO0FBQ0Q7O0FBRUQsVUFBSUUsYUFBSjs7QUFFQSxVQUFJSixJQUFJLENBQUNDLEdBQUwsQ0FBU2QsY0FBVCxJQUEyQixDQUEvQixFQUFrQztBQUNoQ2lCLFFBQUFBLGFBQWEsR0FBRyxDQUFoQjtBQUNELE9BRkQsTUFFTyxJQUNMbkIsR0FBRyxHQUNDRSxjQUFjLElBQUlMLFVBQVUsQ0FBQ1csV0FBWCxHQUF5QlgsVUFBVSxDQUFDdUIsV0FEdkQsR0FFQ2xCLGNBQWMsSUFBSUwsVUFBVSxDQUFDdUIsV0FBWCxHQUF5QnZCLFVBQVUsQ0FBQ1csV0FIckQsRUFJTDtBQUNBVyxRQUFBQSxhQUFhLEdBQUdkLEtBQUssQ0FBQ2dCLE1BQU4sR0FBZSxDQUEvQjtBQUNELE9BTk0sTUFNQTtBQUNMRixRQUFBQSxhQUFhLEdBQUdKLElBQUksQ0FBQ0csS0FBTCxDQUFXRCxhQUFYLENBQWhCO0FBQ0Q7O0FBRUQsYUFBTztBQUNMUixRQUFBQSxLQUFLLEVBQUVVLGFBREY7QUFFTEYsUUFBQUEsYUFBYSxFQUFiQTtBQUZLLE9BQVA7QUFJRDtBQUNGO0FBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQgbm8tbWFnaWMtbnVtYmVyczogXCJvZmZcIiAqL1xuXG5pbXBvcnQgKiBhcyBicm93c2VyIGZyb20gJy4vYnJvd3Nlcic7XG5pbXBvcnQgYmVzdCBmcm9tICcuL3V0aWwvYmVzdCc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIGdldFZpZXcoZGlyLCBzY3JvbGxhYmxlLCBpdGVtQ29udGFpbmVyLCBzY3JvbGxpbmdUbykge1xuICBjb25zdCBydGwgPSBkaXIgPT09ICdydGwnO1xuXG4gIGlmIChpdGVtQ29udGFpbmVyICYmIHNjcm9sbGFibGUpIHtcbiAgICBjb25zdCBzY3JvbGxMZWZ0ID0gc2Nyb2xsaW5nVG8gfHwgc2Nyb2xsYWJsZS5zY3JvbGxMZWZ0O1xuICAgIGNvbnN0IHRydWVTY3JvbGxMZWZ0ID0gcnRsICYmIChicm93c2VyLmVkZ2VVV1AgfHwgYnJvd3Nlci5pbnRlcm5ldEV4cGxvcmVyKSA/IC1zY3JvbGxMZWZ0IDogc2Nyb2xsTGVmdDtcbiAgICBjb25zdCBpdGVtcyA9IGl0ZW1Db250YWluZXIuY2hpbGRyZW47IC8vIFRoaXMgd2lsbCBlbnVtZXJhdGUgPGxpPiBpbnNpZGUgPEZpbG1TdHJpcD5cbiAgICBjb25zdCBzY3JvbGxDZW50ZXIgPSB0cnVlU2Nyb2xsTGVmdCArIHNjcm9sbGFibGUub2Zmc2V0V2lkdGggLyAyO1xuICAgIGNvbnN0IGluZGV4ID0gYmVzdChbXS5zbGljZS5jYWxsKGl0ZW1zKSwgaXRlbSA9PiB7XG4gICAgICBjb25zdCBvZmZzZXRDZW50ZXIgPSBpdGVtLm9mZnNldExlZnQgKyBpdGVtLm9mZnNldFdpZHRoIC8gMjtcblxuICAgICAgcmV0dXJuIDEgLyBNYXRoLmFicyhzY3JvbGxDZW50ZXIgLSBvZmZzZXRDZW50ZXIpO1xuICAgIH0pO1xuXG4gICAgaWYgKH5pbmRleCkge1xuICAgICAgY29uc3QgaXRlbSA9IGl0ZW1zW2luZGV4XTtcblxuICAgICAgY29uc3Qgb2Zmc2V0Q2VudGVyID0gaXRlbS5vZmZzZXRMZWZ0ICsgaXRlbS5vZmZzZXRXaWR0aCAvIDI7XG4gICAgICBsZXQgaW5kZXhGcmFjdGlvbiA9IGluZGV4ICsgKChzY3JvbGxDZW50ZXIgLSBvZmZzZXRDZW50ZXIpIC8gaXRlbS5vZmZzZXRXaWR0aCkgKiAocnRsID8gLTEgOiAxKTtcblxuICAgICAgLy8gV2UgXCJmaXhcIiBpbmRleEZyYWN0aW9uIGlmIHRoZSB2aWV3cG9ydCBpcyBhdCB0aGUgc3RhcnQvZW5kIG9mIHRoZSBjb250ZW50XG4gICAgICAvLyBUaGlzIGlzIHRvIHNpbXBsaWZ5IGNvZGUgdGhhdCB1c2UgTWF0aC5yb3VuZChpbmRleEZyYWN0aW9uKSB0byBmaW5kIHRoZSBzY3JvbGxhYmxlIGluZGV4XG4gICAgICAvLyBpZiAoc2Nyb2xsTGVmdCA9PT0gMCkge1xuICAgICAgLy8gICBpbmRleEZyYWN0aW9uID0gMDtcbiAgICAgIC8vIH0gZWxzZSBpZiAoc2Nyb2xsTGVmdCA+PSBzY3JvbGxhYmxlLnNjcm9sbFdpZHRoIC0gc2Nyb2xsYWJsZS5vZmZzZXRXaWR0aCkge1xuICAgICAgLy8gICBpbmRleEZyYWN0aW9uID0gaXRlbXMubGVuZ3RoIC0gMTtcbiAgICAgIC8vIH0gZWxzZSBpZiAoaW5kZXhGcmFjdGlvbiAlIDEgPiAuOTkgfHwgaW5kZXhGcmFjdGlvbiAlIDEgPCAuMDEpIHtcbiAgICAgIC8vICAgaW5kZXhGcmFjdGlvbiA9IE1hdGgucm91bmQoaW5kZXhGcmFjdGlvbik7XG4gICAgICAvLyB9XG5cbiAgICAgIGlmIChpbmRleEZyYWN0aW9uICUgMSA+IDAuOTkgfHwgaW5kZXhGcmFjdGlvbiAlIDEgPCAwLjAxKSB7XG4gICAgICAgIGluZGV4RnJhY3Rpb24gPSBNYXRoLnJvdW5kKGluZGV4RnJhY3Rpb24pO1xuICAgICAgfVxuXG4gICAgICBsZXQgc2VsZWN0ZWRJbmRleDtcblxuICAgICAgaWYgKE1hdGguYWJzKHRydWVTY3JvbGxMZWZ0KSA8IDEpIHtcbiAgICAgICAgc2VsZWN0ZWRJbmRleCA9IDA7XG4gICAgICB9IGVsc2UgaWYgKFxuICAgICAgICBydGxcbiAgICAgICAgICA/IHRydWVTY3JvbGxMZWZ0IDw9IHNjcm9sbGFibGUub2Zmc2V0V2lkdGggLSBzY3JvbGxhYmxlLnNjcm9sbFdpZHRoXG4gICAgICAgICAgOiB0cnVlU2Nyb2xsTGVmdCA+PSBzY3JvbGxhYmxlLnNjcm9sbFdpZHRoIC0gc2Nyb2xsYWJsZS5vZmZzZXRXaWR0aFxuICAgICAgKSB7XG4gICAgICAgIHNlbGVjdGVkSW5kZXggPSBpdGVtcy5sZW5ndGggLSAxO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2VsZWN0ZWRJbmRleCA9IE1hdGgucm91bmQoaW5kZXhGcmFjdGlvbik7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiB7XG4gICAgICAgIGluZGV4OiBzZWxlY3RlZEluZGV4LFxuICAgICAgICBpbmRleEZyYWN0aW9uXG4gICAgICB9O1xuICAgIH1cbiAgfVxufVxuIl19