@findify/react-components/lib/helpers/trackProductPosition.js

Findify react UI components

import { useEffect, useRef } from 'react';
var cache = {};

var makeItem = function makeItem(item) {
  return {
    item_id: item.get('id'),
    variant_item_id: item.get('selected_variant_id'),
    rid: item.meta.get('rid'),
    visible_at: []
  };
};

var handleViewportChange = function handleViewportChange(item, isInViewport) {
  var uid = item.get('id') + item.meta.get('rid');
  if (!isInViewport && !cache[uid]) return;
  var cachedItem = cache[uid] = cache[uid] || makeItem(item);

  if (isInViewport) {
    cachedItem.visible_at.push([Date.now()]);
  } else {
    cachedItem.visible_at[cachedItem.visible_at.length - 1].push(Date.now());
  }
};

export default (function (item) {
  var container = useRef(null);
  useEffect(function () {
    if (!container.current || !('IntersectionObserver' in window)) return;

    var handleIntersect = function handleIntersect(entries) {
      if (!container.current) return;
      entries.forEach(function (entry) {
        handleViewportChange(item, entry.isIntersecting);
      });
    };

    var observer = new IntersectionObserver(handleIntersect, {
      root: null,
      rootMargin: '0px',
      threshold: 0.5
    });
    observer.observe(container.current);
    item.analytics.onLeavePage(function (ranges) {
      item.analytics.sendEvent('dwell-list', {
        visible_at: ranges,
        items: Object.keys(cache).map(function (k) {
          return cache[k];
        })
      });
    }, 'list');
    return function () {
      if (observer && container.current) observer.unobserve(container.current);
    };
  }, []);
  return container;
});