gesture-react-motion.js

/*eslint-disable */

import React from 'react';
import {TransitionSpring} from '../../src/Spring';

// debugging on mobile <3
// console.log = function(...args){
//   let div = document.createElement('div');
//   div.textContent = JSON.stringify(args.join(' '));
//   let parent = document.querySelector('#content');
//   parent.insertBefore(div, parent.firstChild);
// };

React.initializeTouchEvents(true);

let Gesture = React.createClass({
  getInitialState() {
    return {
      touchDown: false,
      touchPosition: [0, 0],
      startPosition: [0, 0],
      velocity: [0, 0],
      prevTime: 0,
      flick: false
    };
  },

  componentWillMount() {
    document.body.addEventListener('touchstart', this.handleTouchStart);
    document.body.addEventListener('touchend', this.handleEnd);
    document.body.addEventListener('touchmove', this.handleTouchMove);
    document.body.addEventListener('touchcancel', this.handleTouchCancel);

    document.body.addEventListener('mousedown', this.handleMouseDown);
    document.body.addEventListener('mouseup', this.handleEnd);
    document.body.addEventListener('mousemove', this.handleMouseMove);
  },

  componentDidUpdate() {
    let {touchDown, flick} = this.state;
    if(!touchDown && flick) {
      this.setState({
        flick: false,
        velocity: [0, 0]
      });
    }
  },

  handleTouchMove(e) {
    e.preventDefault();
    e.stopPropagation();

    this.handleMouseMove(e.touches[0]);

    return false;
  },

  handleTouchStart(e) {
    e.preventDefault();
    e.stopPropagation();

    this.handleMouseDown(e.touches[0]);

    return false;
  },

  handleTouchCancel(e) {
    console.log("handleTouchCancel -->", e);
  },

  handleEnd() {
    let {velocity: [vx, vy]} = this.state;
    const size = Math.sqrt(vx * vx + vy * vy);
    const flick = size > 0.5 && size < 10; // test out these

    if(flick) console.log("flick", [vx, vy]);

    this.setState(() => {
      return {
        touchDown: false,
        flick: flick,
        startPosition: [0, 0],
      };
    });
    this.forceUpdate();
  },

  handleMouseMove(e) {
    if(e.preventDefault) {
      e.preventDefault();
      e.stopPropagation();
    }
    let {pageX, pageY} = e;

    let {touchDown, touchPosition: [x, y], prevTime} = this.state;
    if(!touchDown || (x === 0 && y === 0)) {
      this.setState({
        touchPosition: [pageX, pageY],
        startPosition: [pageX, pageY],
        prevTime: Date.now(),
        flick: false,
        velocity: [0, 0],
      });

      return false;
    }

    const dt = Date.now() - prevTime;
    const vx = (x - pageX) / dt;
    const vy = (y - pageY) / dt;

    this.setState({
      touchPosition: [pageX, pageY],
      velocity: [vx, vy],
      prevTime: Date.now(),
      flick: false,
    });

    return false;
  },

  handleMouseDown(e) {
    if(e.preventDefault) {
      e.preventDefault();
      e.stopPropagation();
    }

    let {pageX, pageY} = e;
    this.setState({
      touchPosition: [pageX, pageY],
      startPosition: [pageX, pageY],
      touchDown: true,
      flick: false
    });

    return false;
  },

  render() {
    let {
      velocity,
      flick,
      touchDown,
      touchPosition: [pageX, pageY],
      startPosition: [startX, startY],
    } = this.state;

    if(flick) {
      window.hackOn = true;
      console.log('flick was true in Gesture');
    } else {
      // window.hackOn = false;
    }

    return this.props.children(touchDown, [pageX - startX, pageY - startY], velocity, flick);
  }
});

let Demo = React.createClass({
  getInitialState() {
    return {
      photos: {
        './0.jpg': [500, 350]
      },
      currPhoto: 0,
    };
  },

  intricateSet(value, [vx, vy]) {
    let {currPhoto, photos} = this.state;
    let retValue = JSON.parse(JSON.stringify(value));
    const currKey = Object.keys(photos)[currPhoto];
    retValue[currKey].val.left = -vx * 1000;
    retValue[currKey].val.top = -vy * 1000;
    console.log('intricateSet', retValue[currKey].val.left, retValue[currKey].val.top);
    return retValue;
  },

  handleChange({target: {value}}) {
    // Should change pictures when you flick
  },

  getValues([deltaX, deltaY], touchDown) {
    let {photos, currPhoto} = this.state;
    let keys = Object.keys(photos);
    let currKey = keys[currPhoto];
    let [width, height] = photos[currKey];
    let widths = keys.map(key => {
      let [origW, origH] = photos[key];
      return height / origH * origW;
    });
    let offset = 0;
    for (var i = 0; i < widths.length; i++) {
      if (keys[i] === currKey) {
        break;
      }
      offset -= widths[i];
    }
    let configs = {};
    keys.reduce((prevLeft, key, i) => {
      let [origW, origH] = photos[key];
      configs[key] = {
        val: {
          left: prevLeft,
          top: 0,
          height: height,
          width: height / origH * origW,
        },
        config: [100, 8],
      };
      return prevLeft + widths[i];
    }, offset);
    configs.container = {val: {height, width}};

    if(touchDown) {
      configs[currKey].val.left += deltaX;
      configs[currKey].val.top += deltaY;
      configs[currKey].config = [];
    }
    return configs;
  },

  render() {
    let {photos, currPhoto} = this.state;
    return (
      <Gesture>
        {(touchDown, mouseDelta, velocity, flick) =>
          <div>
            {flick + " - " + touchDown + " - " + (touchDown ? mouseDelta : [0, 0])} // Some dev stuff
            <TransitionSpring
              className="demo4"
              endValue={this.getValues.bind(null, mouseDelta, touchDown)}
              testFlick={flick}
              currVelocity={currV => flick ? this.intricateSet(currV, velocity) : currV}>
              {({container, ...rest}) =>
                <div className="demo4-inner" style={container.val}>
                  {Object.keys(rest).map((key) =>
                    <img
                      className="demo4-photo"
                      key={key}
                      src={key}
                      style={makeTransition(rest[key].val)} />
                  )}
                </div>
              }
            </TransitionSpring>
          </div>
        }
      </Gesture>
    );
  }
});

function makeTransition({top, left}) {
  return {
    position: 'absolute',
    MsTransform: `translate(${left}px,${top}px)`,
    WebkitTransform: `translate(${left}px,${top}px)`,
    transform: `translate(${left}px,${top}px)`,
  }
}

export default Demo;