30-seconds-of-code/node_modules/gatsby-plugin-transition-link/AniLink/PaintDrip.js

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.default = void 0;

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

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

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

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

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

var _react = _interopRequireWildcard(require("react"));

var _ = _interopRequireDefault(require("../"));

var _gsap = require("gsap");

var _colorConvert = _interopRequireDefault(require("color-convert"));

var _jsxFileName = "/Users/tylerbarnes/Documents/GitHub/transitionlink-workspace/gatsby-plugin-transition-link/src/AniLink/PaintDrip.js";

var PaintDrip =
/*#__PURE__*/
function (_Component) {
  (0, _inheritsLoose2.default)(PaintDrip, _Component);

  function PaintDrip(props) {
    var _this;

    _this = _Component.call(this, props) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "createRipple", function (_ref, event, hex, color, node) {
      var length = _ref.length;
      var body = document.body;
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      var piTwo = Math.PI * 2;
      var rgb = hex ? _colorConvert.default.hex.rgb(hex).join(",") : "0,0,255";
      rgb = color ? _colorConvert.default.keyword.rgb(color) : rgb;
      canvas.style.zIndex = 10000;
      canvas.style.top = 0;
      canvas.style.position = "fixed";
      var vw = canvas.width = window.innerWidth;
      var vh = canvas.height = window.innerHeight;
      body.appendChild(canvas); // Event coords

      var x = event.clientX;
      var y = event.clientY; // Delta - difference between event and farthest corner

      var dx = x < vw / 2 ? vw - x : x;
      var dy = y < vh / 2 ? vh - y : y;
      var radius = Math.sqrt(dx * dx + dy * dy);
      var ripple = {
        alpha: 0,
        radius: 0,
        x: x,
        y: y
      };
      var seconds = length;
      new _gsap.TimelineMax({
        onUpdate: drawRipple,
        onComplete: function onComplete() {
          return removeCanvas(seconds / 3);
        }
      }).to(ripple, seconds / 4, {
        alpha: 1
      }).set(node, {
        visibility: "hidden"
      }, seconds / 1.75).to(ripple, seconds - seconds / 3, {
        radius: radius,
        ease: _gsap.Power1.easeIn
      }, 0).to(canvas, seconds / 3, {
        x: "100%",
        ease: _gsap.Power1.easeIn
      }, "+=.2");

      function drawRipple() {
        ctx.clearRect(0, 0, vw, vh);
        ctx.beginPath();
        ctx.arc(ripple.x, ripple.y, ripple.radius, 0, piTwo, false);
        var fillStyle = "rgba(" + rgb + "," + ripple.alpha + ")";
        ctx.fillStyle = fillStyle;
        ctx.fill();
      }

      window.addEventListener("resize", onResize);

      function removeCanvas(wait) {
        if (wait === void 0) {
          wait = 0;
        }

        setTimeout(function () {
          body.removeChild(canvas);
        }, wait);
      }

      function onResize() {
        vw = canvas.width = window.innerWidth;
        vh = canvas.height = window.innerHeight;
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "getDirection", function (from) {
      switch (from) {
        case "left":
          return {
            xPercent: -5
          };

        case "right":
          return {
            xPercent: 5
          };

        case "top":
          return {
            yPercent: -5
          };

        case "bottom":
          return {
            yPercent: 5
          };

        default:
          return {};
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "slideIn", function (_ref2, node, from) {
      var length = _ref2.length;
      new _gsap.TimelineMax().from(node, length, (0, _extends2.default)({}, _this.getDirection(from), {
        ease: _gsap.Power1.easeOut
      }));
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onResize", function () {
      _this.vw = _this.canvas.width = window.innerWidth;
      _this.vh = _this.canvas.height = window.innerHeight;
    });
    _this.createRipple = _this.createRipple.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    return _this;
  }

  var _proto = PaintDrip.prototype;

  _proto.componentWillUnmount = function componentWillUnmount() {
    window.removeEventListener("resize", this.onResize);
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        removedExit = _this$props.exit,
        removedEntry = _this$props.entry,
        removedProp = _this$props.paintDrip,
        duration = _this$props.duration,
        _this$props$direction = _this$props.direction,
        direction = _this$props$direction === void 0 ? "left" : _this$props$direction,
        props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["exit", "entry", "paintDrip", "duration", "direction"]);
    var aniLength = duration || 1;
    var aniDelay = aniLength / 1.75;
    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.default, (0, _extends2.default)({
      exit: {
        length: aniLength,
        trigger: function trigger(_ref3) {
          var exit = _ref3.exit,
              e = _ref3.e,
              node = _ref3.node;
          return _this2.createRipple(exit, e, props.hex, props.color, node);
        }
      },
      entry: {
        delay: aniDelay,
        length: aniLength,
        trigger: function trigger(_ref4) {
          var entry = _ref4.entry,
              node = _ref4.node;
          return _this2.slideIn(entry, node, direction);
        }
      }
    }, props, {
      __source: {
        fileName: _jsxFileName,
        lineNumber: 134
      },
      __self: this
    }), props.children));
  };

  return PaintDrip;
}(_react.Component);

exports.default = PaintDrip;