react-film/lib/getView.js

React component for showing carousel just like a film strip

"use strict";

require("core-js/modules/es.array.iterator.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.string.iterator.js");

require("core-js/modules/es.weak-map.js");

require("core-js/modules/web.dom-collections.iterator.js");

require("core-js/modules/es.object.define-property.js");

require("core-js/modules/es.object.get-own-property-descriptor.js");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = getView;

require("core-js/modules/es.array.slice.js");

var browser = _interopRequireWildcard(require("./browser"));

var _best = _interopRequireDefault(require("./util/best"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/* eslint no-magic-numbers: "off" */
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 = (0, _best["default"])([].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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9nZXRWaWV3LmpzIl0sIm5hbWVzIjpbImdldFZpZXciLCJkaXIiLCJzY3JvbGxhYmxlIiwiaXRlbUNvbnRhaW5lciIsInNjcm9sbGluZ1RvIiwicnRsIiwic2Nyb2xsTGVmdCIsInRydWVTY3JvbGxMZWZ0IiwiYnJvd3NlciIsImVkZ2VVV1AiLCJpbnRlcm5ldEV4cGxvcmVyIiwiaXRlbXMiLCJjaGlsZHJlbiIsInNjcm9sbENlbnRlciIsIm9mZnNldFdpZHRoIiwiaW5kZXgiLCJzbGljZSIsImNhbGwiLCJpdGVtIiwib2Zmc2V0Q2VudGVyIiwib2Zmc2V0TGVmdCIsIk1hdGgiLCJhYnMiLCJpbmRleEZyYWN0aW9uIiwicm91bmQiLCJzZWxlY3RlZEluZGV4Iiwic2Nyb2xsV2lkdGgiLCJsZW5ndGgiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVBOztBQUNBOzs7Ozs7QUFIQTtBQUtlLFNBQVNBLE9BQVQsQ0FBaUJDLEdBQWpCLEVBQXNCQyxVQUF0QixFQUFrQ0MsYUFBbEMsRUFBaURDLFdBQWpELEVBQThEO0FBQzNFLE1BQU1DLEdBQUcsR0FBR0osR0FBRyxLQUFLLEtBQXBCOztBQUVBLE1BQUlFLGFBQWEsSUFBSUQsVUFBckIsRUFBaUM7QUFDL0IsUUFBTUksVUFBVSxHQUFHRixXQUFXLElBQUlGLFVBQVUsQ0FBQ0ksVUFBN0M7QUFDQSxRQUFNQyxjQUFjLEdBQUdGLEdBQUcsS0FBS0csT0FBTyxDQUFDQyxPQUFSLElBQW1CRCxPQUFPLENBQUNFLGdCQUFoQyxDQUFILEdBQXVELENBQUNKLFVBQXhELEdBQXFFQSxVQUE1RjtBQUNBLFFBQU1LLEtBQUssR0FBR1IsYUFBYSxDQUFDUyxRQUE1QixDQUgrQixDQUdPOztBQUN0QyxRQUFNQyxZQUFZLEdBQUdOLGNBQWMsR0FBR0wsVUFBVSxDQUFDWSxXQUFYLEdBQXlCLENBQS9EO0FBQ0EsUUFBTUMsS0FBSyxHQUFHLHNCQUFLLEdBQUdDLEtBQUgsQ0FBU0MsSUFBVCxDQUFjTixLQUFkLENBQUwsRUFBMkIsVUFBQU8sSUFBSSxFQUFJO0FBQy9DLFVBQU1DLFlBQVksR0FBR0QsSUFBSSxDQUFDRSxVQUFMLEdBQWtCRixJQUFJLENBQUNKLFdBQUwsR0FBbUIsQ0FBMUQ7QUFFQSxhQUFPLElBQUlPLElBQUksQ0FBQ0MsR0FBTCxDQUFTVCxZQUFZLEdBQUdNLFlBQXhCLENBQVg7QUFDRCxLQUphLENBQWQ7O0FBTUEsUUFBSSxDQUFDSixLQUFMLEVBQVk7QUFDVixVQUFNRyxJQUFJLEdBQUdQLEtBQUssQ0FBQ0ksS0FBRCxDQUFsQjtBQUVBLFVBQU1JLFlBQVksR0FBR0QsSUFBSSxDQUFDRSxVQUFMLEdBQWtCRixJQUFJLENBQUNKLFdBQUwsR0FBbUIsQ0FBMUQ7QUFDQSxVQUFJUyxhQUFhLEdBQUdSLEtBQUssR0FBSSxDQUFDRixZQUFZLEdBQUdNLFlBQWhCLElBQWdDRCxJQUFJLENBQUNKLFdBQXRDLElBQXNEVCxHQUFHLEdBQUcsQ0FBQyxDQUFKLEdBQVEsQ0FBakUsQ0FBNUIsQ0FKVSxDQU1WO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFFQSxVQUFJa0IsYUFBYSxHQUFHLENBQWhCLEdBQW9CLElBQXBCLElBQTRCQSxhQUFhLEdBQUcsQ0FBaEIsR0FBb0IsSUFBcEQsRUFBMEQ7QUFDeERBLFFBQUFBLGFBQWEsR0FBR0YsSUFBSSxDQUFDRyxLQUFMLENBQVdELGFBQVgsQ0FBaEI7QUFDRDs7QUFFRCxVQUFJRSxhQUFKOztBQUVBLFVBQUlKLElBQUksQ0FBQ0MsR0FBTCxDQUFTZixjQUFULElBQTJCLENBQS9CLEVBQWtDO0FBQ2hDa0IsUUFBQUEsYUFBYSxHQUFHLENBQWhCO0FBQ0QsT0FGRCxNQUVPLElBQ0xwQixHQUFHLEdBQ0NFLGNBQWMsSUFBSUwsVUFBVSxDQUFDWSxXQUFYLEdBQXlCWixVQUFVLENBQUN3QixXQUR2RCxHQUVDbkIsY0FBYyxJQUFJTCxVQUFVLENBQUN3QixXQUFYLEdBQXlCeEIsVUFBVSxDQUFDWSxXQUhyRCxFQUlMO0FBQ0FXLFFBQUFBLGFBQWEsR0FBR2QsS0FBSyxDQUFDZ0IsTUFBTixHQUFlLENBQS9CO0FBQ0QsT0FOTSxNQU1BO0FBQ0xGLFFBQUFBLGFBQWEsR0FBR0osSUFBSSxDQUFDRyxLQUFMLENBQVdELGFBQVgsQ0FBaEI7QUFDRDs7QUFFRCxhQUFPO0FBQ0xSLFFBQUFBLEtBQUssRUFBRVUsYUFERjtBQUVMRixRQUFBQSxhQUFhLEVBQWJBO0FBRkssT0FBUDtBQUlEO0FBQ0Y7QUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludCBuby1tYWdpYy1udW1iZXJzOiBcIm9mZlwiICovXG5cbmltcG9ydCAqIGFzIGJyb3dzZXIgZnJvbSAnLi9icm93c2VyJztcbmltcG9ydCBiZXN0IGZyb20gJy4vdXRpbC9iZXN0JztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gZ2V0VmlldyhkaXIsIHNjcm9sbGFibGUsIGl0ZW1Db250YWluZXIsIHNjcm9sbGluZ1RvKSB7XG4gIGNvbnN0IHJ0bCA9IGRpciA9PT0gJ3J0bCc7XG5cbiAgaWYgKGl0ZW1Db250YWluZXIgJiYgc2Nyb2xsYWJsZSkge1xuICAgIGNvbnN0IHNjcm9sbExlZnQgPSBzY3JvbGxpbmdUbyB8fCBzY3JvbGxhYmxlLnNjcm9sbExlZnQ7XG4gICAgY29uc3QgdHJ1ZVNjcm9sbExlZnQgPSBydGwgJiYgKGJyb3dzZXIuZWRnZVVXUCB8fCBicm93c2VyLmludGVybmV0RXhwbG9yZXIpID8gLXNjcm9sbExlZnQgOiBzY3JvbGxMZWZ0O1xuICAgIGNvbnN0IGl0ZW1zID0gaXRlbUNvbnRhaW5lci5jaGlsZHJlbjsgLy8gVGhpcyB3aWxsIGVudW1lcmF0ZSA8bGk+IGluc2lkZSA8RmlsbVN0cmlwPlxuICAgIGNvbnN0IHNjcm9sbENlbnRlciA9IHRydWVTY3JvbGxMZWZ0ICsgc2Nyb2xsYWJsZS5vZmZzZXRXaWR0aCAvIDI7XG4gICAgY29uc3QgaW5kZXggPSBiZXN0KFtdLnNsaWNlLmNhbGwoaXRlbXMpLCBpdGVtID0+IHtcbiAgICAgIGNvbnN0IG9mZnNldENlbnRlciA9IGl0ZW0ub2Zmc2V0TGVmdCArIGl0ZW0ub2Zmc2V0V2lkdGggLyAyO1xuXG4gICAgICByZXR1cm4gMSAvIE1hdGguYWJzKHNjcm9sbENlbnRlciAtIG9mZnNldENlbnRlcik7XG4gICAgfSk7XG5cbiAgICBpZiAofmluZGV4KSB7XG4gICAgICBjb25zdCBpdGVtID0gaXRlbXNbaW5kZXhdO1xuXG4gICAgICBjb25zdCBvZmZzZXRDZW50ZXIgPSBpdGVtLm9mZnNldExlZnQgKyBpdGVtLm9mZnNldFdpZHRoIC8gMjtcbiAgICAgIGxldCBpbmRleEZyYWN0aW9uID0gaW5kZXggKyAoKHNjcm9sbENlbnRlciAtIG9mZnNldENlbnRlcikgLyBpdGVtLm9mZnNldFdpZHRoKSAqIChydGwgPyAtMSA6IDEpO1xuXG4gICAgICAvLyBXZSBcImZpeFwiIGluZGV4RnJhY3Rpb24gaWYgdGhlIHZpZXdwb3J0IGlzIGF0IHRoZSBzdGFydC9lbmQgb2YgdGhlIGNvbnRlbnRcbiAgICAgIC8vIFRoaXMgaXMgdG8gc2ltcGxpZnkgY29kZSB0aGF0IHVzZSBNYXRoLnJvdW5kKGluZGV4RnJhY3Rpb24pIHRvIGZpbmQgdGhlIHNjcm9sbGFibGUgaW5kZXhcbiAgICAgIC8vIGlmIChzY3JvbGxMZWZ0ID09PSAwKSB7XG4gICAgICAvLyAgIGluZGV4RnJhY3Rpb24gPSAwO1xuICAgICAgLy8gfSBlbHNlIGlmIChzY3JvbGxMZWZ0ID49IHNjcm9sbGFibGUuc2Nyb2xsV2lkdGggLSBzY3JvbGxhYmxlLm9mZnNldFdpZHRoKSB7XG4gICAgICAvLyAgIGluZGV4RnJhY3Rpb24gPSBpdGVtcy5sZW5ndGggLSAxO1xuICAgICAgLy8gfSBlbHNlIGlmIChpbmRleEZyYWN0aW9uICUgMSA+IC45OSB8fCBpbmRleEZyYWN0aW9uICUgMSA8IC4wMSkge1xuICAgICAgLy8gICBpbmRleEZyYWN0aW9uID0gTWF0aC5yb3VuZChpbmRleEZyYWN0aW9uKTtcbiAgICAgIC8vIH1cblxuICAgICAgaWYgKGluZGV4RnJhY3Rpb24gJSAxID4gMC45OSB8fCBpbmRleEZyYWN0aW9uICUgMSA8IDAuMDEpIHtcbiAgICAgICAgaW5kZXhGcmFjdGlvbiA9IE1hdGgucm91bmQoaW5kZXhGcmFjdGlvbik7XG4gICAgICB9XG5cbiAgICAgIGxldCBzZWxlY3RlZEluZGV4O1xuXG4gICAgICBpZiAoTWF0aC5hYnModHJ1ZVNjcm9sbExlZnQpIDwgMSkge1xuICAgICAgICBzZWxlY3RlZEluZGV4ID0gMDtcbiAgICAgIH0gZWxzZSBpZiAoXG4gICAgICAgIHJ0bFxuICAgICAgICAgID8gdHJ1ZVNjcm9sbExlZnQgPD0gc2Nyb2xsYWJsZS5vZmZzZXRXaWR0aCAtIHNjcm9sbGFibGUuc2Nyb2xsV2lkdGhcbiAgICAgICAgICA6IHRydWVTY3JvbGxMZWZ0ID49IHNjcm9sbGFibGUuc2Nyb2xsV2lkdGggLSBzY3JvbGxhYmxlLm9mZnNldFdpZHRoXG4gICAgICApIHtcbiAgICAgICAgc2VsZWN0ZWRJbmRleCA9IGl0ZW1zLmxlbmd0aCAtIDE7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBzZWxlY3RlZEluZGV4ID0gTWF0aC5yb3VuZChpbmRleEZyYWN0aW9uKTtcbiAgICAgIH1cblxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgaW5kZXg6IHNlbGVjdGVkSW5kZXgsXG4gICAgICAgIGluZGV4RnJhY3Rpb25cbiAgICAgIH07XG4gICAgfVxuICB9XG59XG4iXX0=