Function ImageSwipe

ts/ImageSwipe.tsx:18–109

(props: ImageSwipeProps)

// Two images on top of one another with a slider to move the divider from left
// to right.
export function ImageSwipe(props: ImageSwipeProps) {
  const mode = props.mode ?? 'swipe';
  const [rangePosition, setRangePosition] = React.useState<number | null>(null);
  const sliderRef = React.createRef<HTMLInputElement>();
  const onSlide = () => {
    if (sliderRef.current) {
      setRangePosition(Number(sliderRef.current.value));
    }
  };

  const pair = props.filePair;
  const imA = _.clone(pair.image_a);
  const imB = _.clone(pair.image_b);
  let containerWidth = Math.max(imA.width, imB.width);
  const rangeMax = containerWidth;
  const pct = 100.0 * ((rangePosition ?? rangeMax / 2) / rangeMax);
  const frac = pct / 100.0;
  let scaleDown = 1;
  if (props.shrinkToFit) {
    scaleDown = Math.min(1.0, (window.innerWidth - 30) / containerWidth);
    imA.width *= scaleDown;
    imA.height *= scaleDown;
    imB.width *= scaleDown;
    imB.height *= scaleDown;
    containerWidth = Math.max(imA.width, imB.width);
  }
  const diffBoxDiv = makePerceptualBoxDiv(props.pdiffMode, pair, scaleDown);
  const urlA = `/a/image/${pair.a}`;
  const urlB = `/b/image/${pair.b}`;
  const styleA: React.CSSProperties & {backgroundSize: string; backgroundImage: string} = {
    backgroundImage: `url(${urlA})`,
    backgroundSize: `${imA.width}px ${imA.height}px`,
    width: `${imA.width}px`,
    height: `${imA.height}px`,
  };
  const styleB: React.CSSProperties & {backgroundSize: string; backgroundImage: string} = {
    backgroundImage: `url(${urlB})`,
    backgroundSize: `${imB.width}px ${imB.height}px`,
    width: `${imB.width}px`,
    height: `${imB.height}px`,
  };
  const styleContainer: React.CSSProperties = {
    width: containerWidth,
    height: Math.max(imA.height, imB.height),
  };
  if (mode === 'swipe') {
    _.extend(styleA, {
      width: Math.floor(frac * imA.width),
    });
    const bgTop = -Math.floor(frac * imB.width);
    _.extend(styleB, {
      left: Math.floor(frac * imB.width),
      width: null,
      right: containerWidth - imB.width,
      backgroundPosition: `${bgTop} px top`,
    });
  } else {
    _.extend(styleB, {opacity: frac});