QuickReference/public/js/anzhiyu/people.js

"use strict";
function _toConsumableArray(e) {
  return _arrayWithoutHoles(e) || _iterableToArray(e) || _unsupportedIterableToArray(e) || _nonIterableSpread();
}

function _nonIterableSpread() {
  throw new TypeError(
    "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
  );
}

function _unsupportedIterableToArray(e, r) {
  if (e) {
    if ("string" == typeof e) return _arrayLikeToArray(e, r);
    var t = Object.prototype.toString.call(e).slice(8, -1);
    return (
      "Object" === t && e.constructor && (t = e.constructor.name),
      "Map" === t || "Set" === t
        ? Array.from(e)
        : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)
        ? _arrayLikeToArray(e, r)
        : void 0
    );
  }
}

function _iterableToArray(e) {
  if (("undefined" != typeof Symbol && null != e[Symbol.iterator]) || null != e["@@iterator"]) return Array.from(e);
}

function _arrayWithoutHoles(e) {
  if (Array.isArray(e)) return _arrayLikeToArray(e);
}

function _arrayLikeToArray(e, r) {
  (null == r || r > e.length) && (r = e.length);
  for (var t = 0, a = new Array(r); t < r; t++) a[t] = e[t];
  return a;
}

function _classCallCheck(e, r) {
  if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
}

function _defineProperties(e, r) {
  for (var t = 0; t < r.length; t++) {
    var a = r[t];
    (a.enumerable = a.enumerable || !1),
      (a.configurable = !0),
      "value" in a && (a.writable = !0),
      Object.defineProperty(e, a.key, a);
  }
}

function _createClass(e, r, t) {
  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), e;
}
var peopleConfig = {
    src: GLOBAL_CONFIG.peoplecanvas.img,
    rows: 15,
    cols: 7,
  },
  randomRange = function (e, r) {
    return e + Math.random() * (r - e);
  },
  randomIndex = function (e) {
    return 0 | randomRange(0, e.length);
  },
  removeFromArray = function (e, r) {
    return e.splice(r, 1)[0];
  },
  removeItemFromArray = function (e, r) {
    return removeFromArray(e, e.indexOf(r));
  },
  removeRandomFromArray = function (e) {
    return removeFromArray(e, randomIndex(e));
  },
  getRandomFromArray = function (e) {
    return e[0 | randomIndex(e)];
  },
  resetPeep = function (e) {
    var r,
      t,
      a = e.stage,
      n = e.peep,
      o = 0.5 < Math.random() ? 1 : -1,
      i = 100 - 250 * gsap.parseEase("power2.in")(Math.random()),
      s = a.height - n.height + i;
    return (
      1 == o ? ((r = -n.width), (t = a.width), (n.scaleX = 1)) : ((r = a.width + n.width), (t = 0), (n.scaleX = -1)),
      (n.x = r),
      (n.y = s),
      {
        startX: r,
        startY: (n.anchorY = s),
        endX: t,
      }
    );
  },
  normalWalk = function (e) {
    var r = e.peep,
      t = e.props,
      a = (t.startX, t.startY),
      n = t.endX,
      o = gsap.timeline();
    return (
      o.timeScale(randomRange(0.5, 1.5)),
      o.to(
        r,
        {
          duration: 10,
          x: n,
          ease: "none",
        },
        0
      ),
      o.to(
        r,
        {
          duration: 0.25,
          repeat: 40,
          yoyo: !0,
          y: a - 10,
        },
        0
      ),
      o
    );
  },
  walks = [normalWalk],
  Peep = (function () {
    function a(e) {
      var r = e.image,
        t = e.rect;
      _classCallCheck(this, a),
        (this.image = r),
        this.setRect(t),
        (this.x = 0),
        (this.y = 0),
        (this.anchorY = 0),
        (this.scaleX = 1),
        (this.walk = null);
    }
    return (
      _createClass(a, [
        {
          key: "setRect",
          value: function (e) {
            (this.rect = e),
              (this.width = e[2]),
              (this.height = e[3]),
              (this.drawArgs = [this.image].concat(_toConsumableArray(e), [0, 0, this.width, this.height]));
          },
        },
        {
          key: "render",
          value: function (e) {
            e.save(),
              e.translate(this.x, this.y),
              e.scale(this.scaleX, 1),
              e.drawImage.apply(e, _toConsumableArray(this.drawArgs)),
              e.restore();
          },
        },
      ]),
      a
    );
  })(),
  img = document.createElement("img");
(img.onload = init), (img.src = peopleConfig.src);
let peoplecanvasEl = document.getElementById("peoplecanvas");

let ctx = peoplecanvasEl ? peoplecanvasEl.getContext("2d") : undefined,
  stage = {
    width: 0,
    height: 0,
  },
  allPeeps = [],
  availablePeeps = [],
  crowd = [];

function init() {
  if (!peoplecanvasEl) return;
  createPeeps(), resize(), gsap.ticker.add(render), window.addEventListener("resize", resize);
}
document.addEventListener("pjax:success", e => {
  peoplecanvasEl = document.getElementById("peoplecanvas");
  if (peoplecanvasEl) {
    (ctx = peoplecanvasEl ? peoplecanvasEl.getContext("2d") : undefined), window.removeEventListener("resize", resize);
    gsap.ticker.remove(render);
    setTimeout(() => {
      if (!peoplecanvasEl) return;
      resize(), gsap.ticker.add(render), window.addEventListener("resize", resize);
    }, 300);
  }
});

function createPeeps() {
  for (
    var e = peopleConfig.rows,
      r = peopleConfig.cols,
      t = e * r,
      a = img.naturalWidth / e,
      n = img.naturalHeight / r,
      o = 0;
    o < t;
    o++
  )
    allPeeps.push(
      new Peep({
        image: img,
        rect: [(o % e) * a, ((o / e) | 0) * n, a, n],
      })
    );
}

function resize() {
  if (peoplecanvasEl && peoplecanvasEl.clientWidth != 0) {
    (stage.width = peoplecanvasEl.clientWidth),
      (stage.height = peoplecanvasEl.clientHeight),
      (peoplecanvasEl.width = stage.width * devicePixelRatio),
      (peoplecanvasEl.height = stage.height * devicePixelRatio),
      crowd.forEach(function (e) {
        e.walk.kill();
      }),
      (crowd.length = 0),
      (availablePeeps.length = 0),
      availablePeeps.push.apply(availablePeeps, allPeeps),
      initCrowd();
  }
}

function initCrowd() {
  for (; availablePeeps.length; ) addPeepToCrowd().walk.progress(Math.random());
}

function addPeepToCrowd() {
  var e = removeRandomFromArray(availablePeeps),
    r = getRandomFromArray(walks)({
      peep: e,
      props: resetPeep({
        peep: e,
        stage: stage,
      }),
    }).eventCallback("onComplete", function () {
      removePeepFromCrowd(e), addPeepToCrowd();
    });
  return (
    (e.walk = r),
    crowd.push(e),
    crowd.sort(function (e, r) {
      return e.anchorY - r.anchorY;
    }),
    e
  );
}

function removePeepFromCrowd(e) {
  removeItemFromArray(crowd, e), availablePeeps.push(e);
}

function render() {
  if (!peoplecanvasEl) return;
  (peoplecanvasEl.width = peoplecanvasEl.width),
    ctx.save(),
    ctx.scale(devicePixelRatio, devicePixelRatio),
    crowd.forEach(function (e) {
      e.render(ctx);
    }),
    ctx.restore();
}