CEWall/js/list.js

var ease = {
  linear: function (e) {
    return e;
  },
  easeInQuad: function (e) {
    return e * e;
  },
  easeOutQuad: function (e) {
    return e * (2 - e);
  },
  easeInOutQuad: function (e) {
    return e < 0.5 ? 2 * e * e : (4 - 2 * e) * e - 1;
  },
  easeInCubic: function (e) {
    return e * e * e;
  },
  easeOutCubic: function (e) {
    return --e * e * e + 1;
  },
  easeInOutCubic: function (e) {
    return e < 0.5 ? 4 * e * e * e : (e - 1) * (2 * e - 2) * (2 * e - 2) + 1;
  },
  easeInQuart: function (e) {
    return e * e * e * e;
  },
  easeOutQuart: function (e) {
    return 1 - --e * e * e * e;
  },
  easeInOutQuart: function (e) {
    return e < 0.5 ? 8 * e * e * e * e : 1 - 8 * --e * e * e * e;
  },
  easeInQuint: function (e) {
    return e * e * e * e * e;
  },
  easeOutQuint: function (e) {
    return 1 + --e * e * e * e * e;
  },
  easeInOutQuint: function (e) {
    return e < 0.5 ? 16 * e * e * e * e * e : 1 + 16 * --e * e * e * e * e;
  },
  easeInOutCustom: function (e) {
    return e < 0.5 ? 16 * e * e * e * e * e : 1 + 16 * --e * e * e * e * e;
  },
};
var NEWTON_ITERATIONS = 4,
  NEWTON_MIN_SLOPE = 0.001,
  SUBDIVISION_PRECISION = 1e-7,
  SUBDIVISION_MAX_ITERATIONS = 10,
  kSplineTableSize = 11,
  kSampleStepSize = 1 / (kSplineTableSize - 1),
  float32ArraySupported = "function" == typeof Float32Array,
  easeInOut = new bezier(0.57, 0.09, 0.105, 1.005);
function ads(e, t) {
  (document.getElementById(t) || document.documentElement).classList.add(e);
}
function rds(e, t) {
  (document.getElementById(t) || document.documentElement).classList.remove(e);
}
function event(e, t, r, n) {
  // ga && ga('send', 'event', e, t, r, n);
}
function Vec2(e, t) {
  this.x = e;
  this.y = t;
  this.lerp = function (e, t) {
    (this.x += (e.x - this.x) * t), (this.y += (e.y - this.y) * t);
  };
  this.plus = function (e) {
    return new Vec2(this.x + e.x, this.y + e.y);
  };
  this.minus = function (e) {
    return new Vec2(this.x - e.x, this.y - e.y);
  };
  this.length = function () {
    return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
  };
}
function A(e, t) {
  return 1 - 3 * t + 3 * e;
}
function B(e, t) {
  return 3 * t - 6 * e;
}
function C(e) {
  return 3 * e;
}
function calcBezier(e, t, r) {
  return ((A(t, r) * e + B(t, r)) * e + C(t)) * e;
}
function getSlope(e, t, r) {
  return 3 * A(t, r) * e * e + 2 * B(t, r) * e + C(t);
}
function binarySubdivide(e, t, r, n, o) {
  for (var i, a, l = 0; 0 < (i = calcBezier((a = t + (r - t) / 2), n, o) - e) ? (r = a) : (t = a), Math.abs(i) > SUBDIVISION_PRECISION && ++l < SUBDIVISION_MAX_ITERATIONS; );
  return a;
}
function newtonRaphsonIterate(e, t, r, n) {
  for (var o = 0; o < NEWTON_ITERATIONS; ++o) {
    var i = getSlope(t, r, n);
    if (0 === i) return t;
    t -= (calcBezier(t, r, n) - e) / i;
  }
  return t;
}
function LinearEasing(e) {
  return e;
}

function bezier(a, t, l, r) {
  if (!(0 <= a && a <= 1 && 0 <= l && l <= 1)) throw new Error("bezier x values must be in [0, 1] range");
  if (a === t && l === r) return LinearEasing;
  for (var s = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize), e = 0; e < kSplineTableSize; ++e) s[e] = calcBezier(e * kSampleStepSize, a, l);
  return function (e) {
    return 0 === e
      ? 0
      : 1 === e
      ? 1
      : calcBezier(
          (function (e) {
            for (var t = 0, r = 1, n = kSplineTableSize - 1; r !== n && s[r] <= e; ++r) t += kSampleStepSize;
            var o = t + ((e - s[--r]) / (s[r + 1] - s[r])) * kSampleStepSize,
              i = getSlope(o, a, l);
            return NEWTON_MIN_SLOPE <= i ? newtonRaphsonIterate(e, o, a, l) : 0 === i ? o : binarySubdivide(e, t, t + kSampleStepSize, a, l);
          })(e),
          t,
          r
        );
  };
}

var animUtil = {
  queue: [],
  i: 0,
  init: function () {
    browserController.addToRenderLoop(animUtil.render);
  },
  runAnimation: function (e, t, r, n) {
    var o = {
      callback: e,
      duration: t,
      easing: r,
      then: n,
      t: 0,
      p: 0,
      end: function () {
        animUtil.finish(this);
      },
      finished: !1,
    };
    return animUtil.queue.push(o), o;
  },
  render: function () {
    for (animUtil.i = 0; animUtil.i < animUtil.queue.length; animUtil.i++) animUtil.run(animUtil.queue[animUtil.i]);
  },
  run: function (e) {
    (e.t += browserController.state.delta), (e.p = Math.min(1, e.t / e.duration)), e.callback(e.easing ? e.easing(e.p) : e.p), 1 <= e.p && animUtil.finish(e);
  },
  finish: function (e) {
    e.then && e.then(), (e.finished = !0), animUtil.queue.splice(animUtil.queue.indexOf(e), 1), animUtil.i--;
  },
};

/**导航控制器 已整理完毕*/
var navigationController = {
  startSite: function () {
    let ti = setTimeout(function () {
      clearTimeout(ti);
      ads("show-grid");
      // if (isFirstLoad) {
      //   setTimeout(function () {
      //     ads("show-intro");
      //   }, 10);
      // }
    }, 400);
  },
};

/**浏览器控制器 已整理完毕*/
var browserController = {
  state: {
    scrollTop: 0,
    toRender: [],
    toResize: [],
    resizeTimeout: null,
    mouse: {
      x: 0,
      y: 0,
      xLag: 0,
      yLag: 0,
      lag: 3,
      xLagSlow: 0,
      yLagSlow: 0,
      slowLag: 20,
      down: !1,
    },
    dpi: window.devicePixelRatio || 1,
    t: 0,
    d: Date.now(),
    delta: 0,
    rem: 0,
    isMobile: window.innerWidth < 800,
    isPortrait: window.innerHeight > window.innerWidth,
  },
  initialize: function () {
    window.addEventListener("resize", browserController.onResize);
    browserController.renderLoop();
  },
  addToRenderLoop: function (e) {
    browserController.state.toRender.push(e);
    browserController.state.toRender.push(() => {});
  },
  addToResizeLoop: function (e) {
    browserController.state.toResize.push(e);
  },
  renderBaseWork: function () {
    browserController.state.delta = Date.now() - browserController.state.d;
    browserController.state.t += browserController.state.delta;
    browserController.state.d = Date.now();
    browserController.state.mouse.xLag += (browserController.state.mouse.x - browserController.state.mouse.xLag) / browserController.state.mouse.lag;
    browserController.state.mouse.yLag += (browserController.state.mouse.y - browserController.state.mouse.yLag) / browserController.state.mouse.lag;
    browserController.state.mouse.xLagSlow += (browserController.state.mouse.x - browserController.state.mouse.xLagSlow) / browserController.state.mouse.slowLag;
    browserController.state.mouse.yLagSlow += (browserController.state.mouse.y - browserController.state.mouse.yLagSlow) / browserController.state.mouse.slowLag;
  },
  renderLoop: function () {
    browserController.renderBaseWork();
    browserController.state.toRender.forEach(function (e) {
      e();
    });
    requestAnimationFrame(browserController.renderLoop);
  },

  onResize: function () {
    clearTimeout(browserController.state.resizeTimeout), (browserController.state.resizeTimeout = setTimeout(browserController.resizeLoop, 100));
  },

  resizeLoop: function () {
    browserController.state.toResize.forEach(function (e) {
      e();
    });
  },
};

/**拖拽工具 已整理完毕*/
var dragUtil = {
  state: {
    draggableElements: [],
  },
  init: function () {
    browserController.addToRenderLoop(dragUtil.render);
    window.addEventListener("mouseout", function (e) {
      var t = (e = e || window.event).relatedTarget || e.toElement;
      (t && "HTML" != t.nodeName) || dragUtil.endAllDrags();
    });
  },
  registerDraggableElement: function (e, t) {
    var r = {
      el: e,
      callback: t,
      dragging: !1,
      startPos: {
        x: 0,
        y: 0,
      },
      currentPos: {
        x: 0,
        y: 0,
      },
      diff: {
        x: 0,
        y: 0,
      },
      thisDiff: {
        x: 0,
        y: 0,
      },
      endDrag: function () {
        this.dragging = !1;
      },
      getDist: function () {
        return Math.sqrt(Math.pow(this.diff.x, 2) + Math.pow(this.diff.y, 2));
      },
    };
    e.addEventListener("mousedown", dragUtil.onDragStart.bind(dragUtil, r)),
      e.addEventListener("mousemove", dragUtil.onDragMove.bind(dragUtil, r)),
      e.addEventListener("mouseup", dragUtil.onDragEnd.bind(dragUtil, r)),
      // e.addEventListener('mouseover', dragUtil.onMouseOver.bind(dragUtil, r)),
      // e.addEventListener('mouseout', dragUtil.onMouseOut.bind(dragUtil, r)),
      e.addEventListener("touchstart", dragUtil.onDragStart.bind(dragUtil, r)),
      e.addEventListener("touchmove", dragUtil.onDragMove.bind(dragUtil, r)),
      e.addEventListener("touchend", dragUtil.onDragEnd.bind(dragUtil, r)),
      dragUtil.state.draggableElements.push(r);
  },
  normalizeEvent: function (e) {
    return e.touches && 0 < e.touches.length ? ((e.clientX = e.touches[0].clientX), (e.clientY = e.touches[0].clientY)) : e.clientX || ((e.clientX = 0), (e.clientY = 0)), e;
  },
  onDragStart: function (e, t) {
    e.dragging = !0;
    t = dragUtil.normalizeEvent(t);
    e.startPos.x = e.currentPos.x = t.clientX;
    e.startPos.y = e.currentPos.y = t.clientY;
    e.diff.x = 0;
    e.diff.y = 0;
    e.thisDiff.x = 0;
    e.thisDiff.y = 0;
    gridController.state.isHandleDrag = !1;
  },
  onDragMove: function (e, t) {
    if (e.dragging) {
      t = dragUtil.normalizeEvent(t);
      e.currentPos.x = t.clientX;
      e.currentPos.y = t.clientY;
      var r = e.currentPos.x - e.startPos.x;
      var n = e.currentPos.y - e.startPos.y;
      e.thisDiff.x = r - e.diff.x;
      e.thisDiff.y = n - e.diff.y;
      e.diff.x = r;
      e.diff.y = n;
      // gridController.state.isHandleDrag = !1;
    }
  },
  onMouseOver: function (e, t) {
    t = dragUtil.normalizeEvent(t);
    e.startPos.x = e.currentPos.x = t.clientX;
    e.startPos.y = e.currentPos.y = t.clientY;
    e.diff.x = 0;
    e.diff.y = 0;
    e.thisDiff.x = 0;
    e.thisDiff.y = 0;
    e.endDrag();
    e.callback(e);
  },
  onMouseOut: function (e, t) {},
  onDragEnd: function (e) {
    e.dragging && (e.endDrag(), e.callback(e), (gridController.state.isHandleDrag = !0));
  },
  endAllDrags: function () {
    dragUtil.state.draggableElements.forEach(function (e) {
      dragUtil.onDragEnd(e);
    });
  },
  clearDraggableElements: function () {
    dragUtil.state.draggableElements = [];
  },
  render: function () {
    dragUtil.state.draggableElements.forEach(function (e) {
      e.dragging && e.callback(e);
    });
  },
};

/**网格控制器 */
var gridController = {
  state: {
    items: [], //所有框
    showItems: {}, //在屏幕内的框
    imageAspect: Math.sqrt(3) / 2, //图像纵横比 原始0.65
    screenAspect: window.innerWidth / window.innerHeight, //屏幕纵横比
    gridEl: null,
    rows: 0,
    cols: 0,
    colWidth: 0,
    rowHeight: 0,
    itemSpace: 0, //间距
    itemWidth: 217 * (!window.isMobile ? 1 : 0.6),
    itemHeight: 251 * (!window.isMobile ? 1 : 0.6),
    flipWidth: 0,
    flipHeight: 0,
    target: new Vec2(1e8, 1e8),
    offset: new Vec2(1e8, 1e8),
    initTarget: new Vec2(1e8, 1e8),
    focus: null,
    selected: null,
    count: 32,
    lerpRate: 1,
    canDrag: !0,
    template: null,
    flipped: !1,
    canIncrement: !0,
    cardArray: null,
    needsCreate: !1,
    canSelect: 1,
    isHandleDrag: !0,
    isClick: false,
  },
  /**初始 */
  init: function (e) {
    gridController.state.grid = document.getElementById("grid");
    dragUtil.registerDraggableElement(gridController.state.grid, gridController.handleDrag);
    gridController.state.screenCenter = new Vec2(window.innerWidth / 2, window.innerHeight / 2);
    gridController.state.cardArray = e;
    gridController.create();
    browserController.addToRenderLoop(this.render);
    browserController.addToResizeLoop(this.handleResize);
    gridController.getgif(5);
  },
  //部分图片转为gif图
  getgif: function (seconds) {
    const tt = setTimeout(() => {
      clearTimeout(tt);
      $(".grid__itemPicture.hasurl").each(function () {
        const gif = $(this).attr("gif");
        const newSrc = `https://vr.njmuseum.com/img/ww/${gif}`;
        $(this).find("img").attr("src", newSrc);
      });
    }, seconds * 1000);
  },
  /**场景调整大小 */
  handleResize: function () {
    gridController.state.screenCenter = new Vec2(window.innerWidth / 2, window.innerHeight / 2);
    gridController.create();
  },

  /**创建网格 */
  create: function (boo = true) {
    var e = gridController.state.cardArray;
    //横屏/竖屏
    if (window.innerWidth > window.innerHeight) {
      let b = Math.ceil(window.innerHeight / (gridController.state.itemHeight * 0.75));
      n = Math.ceil(window.innerWidth / gridController.state.itemWidth) + 1;
      let c = Math.ceil(e.length / n);
      o = c > b ? c : b;
      o = o % 2 == 0 ? o : o + 1;
    } else {
      let a = Math.ceil(window.innerWidth / gridController.state.itemWidth) + 1;
      o = Math.ceil(window.innerHeight / (gridController.state.itemHeight * 0.75));
      o = o % 2 == 0 ? o : o + 1;
      let c = Math.ceil(e.length / o);
      n = c > a ? c : a;
    }

    gridController.state.rows = o;
    gridController.state.cols = n;
    gridController.state.colWidth = gridController.state.itemWidth;
    gridController.state.rowHeight = gridController.state.itemHeight;
    gridController.state.flipWidth = gridController.state.colWidth * n;
    gridController.state.flipHeight = gridController.state.rowHeight * o * 0.75;
    gridController.state.count = o * n;
    gridController.state.grid.innerHTML = "";
    gridController.state.showItems = {};
    gridController.state.items = [];
    gridController.state.target = new Vec2(1e8, 1e8);
    gridController.state.offset = new Vec2(1e8, 1e8);
    // debugger;
    for (var l = 0, s = 0; s < n; s++) {
      for (var d = 0; d < o; d++) {
        this.createItem(d, s, l);
        l++;
      }
    }
    let keys = Object.keys(gridController.state.showItems);
    if (keys.length >= e.length) {
      gridController.state.canDrag = 0;
      let showArr = [];
      if (e.length < 10) {
        // 排序逻辑
        const sortedArray = Object.values(gridController.state.showItems).sort((a, b) => a.interval - b.interval || b.intervalX - a.intervalX);
        // const sortedArray = [
        //   ...Object.values(gridController.state.showItems),
        // ].sort(
        //   (a, b) => a.intervalY - b.intervalY || a.intervalX - b.intervalX
        // );
        showArr = new Array(keys.length).fill(0);
        for (let i = 0; i < e.length; i++) {
          let obj = sortedArray[i];
          let inx = keys.indexOf(obj.index + "");
          showArr[inx] = e[i];
        }
      } else {
        let arr1 = new Array(keys.length).fill(0);
        showArr = gridController.replaceRandomly(arr1, e);
      }
      let nint = 0;
      gridController.state.items.forEach((n, inx) => {
        gridController.state.grid.append(n.el);
        if (keys.indexOf(n.index + "") != -1) {
          if (showArr[nint] != 0) {
            n.card.className = "grid__itemCard";
            n.el.id = showArr[nint] + "_" + n.index;
            n.el.style.zIndex = Math.floor(Math.random() * 9999);
            n.image = gridController.createImage(showArr[nint], "grid__itemPicture");
            n.card.append(n.image);
          }
          nint++;
        }
      });
    } else {
      let arr1 = new Array(gridController.state.items.length).fill(0);
      let showArr = gridController.replaceRandomly(arr1, e);
      gridController.state.items.forEach((n, inx) => {
        gridController.state.grid.append(n.el);
        let ids = showArr[inx] != 0 ? showArr[inx] : e[Math.floor(Math.random() * e.length)];
        n.card.className = "grid__itemCard";
        n.el.id = ids + "_" + n.index;
        n.el.style.zIndex = Math.floor(Math.random() * 9999);
        n.image = gridController.createImage(ids, "grid__itemPicture");
        n.card.append(n.image);
      });
    }
  },

  replaceRandomly: function (arr1, arr2) {
    const result = [...arr1];
    const availableIndices = result.map((_, index) => index);
    for (const value of arr2) {
      if (availableIndices.length === 0) break;
      const randomIndex = Math.floor(Math.random() * availableIndices.length);
      const targetIndex = availableIndices[randomIndex];
      result[targetIndex] = value;
      availableIndices.splice(randomIndex, 1);
    }
    return result;
  },

  /**创建网格单独对象 */
  createItem: function (e, t, r) {
    var n = {
      row: e,
      col: t,
      el: document.createElement("div"),
      offset: new Vec2(0, 0),
      pos: new Vec2(0, 0),
      target: new Vec2(0, 0),
      interval: 0,
      intervalX: 0,
      intervalY: 0,
      zDistance: 0,
      zTarget: 0,
      zRate: 0.1,
      angle: 0,
      angleTarget: 0,
      index: r,
      order: 0,
      uid: "",
      card: document.createElement("div"),
      back: document.createElement("div"),
      image: "",
      close: document.createElement("div"),
      anim: null,
    };
    n.el.className = "grid__item";
    n.el.id = n.index;
    n.card.className = "grid__itemCard showBack";
    n.back.className = "grid__itemBack";
    n.card.append(n.back);
    n.el.append(n.card);
    n.el.style.height = gridController.state.itemHeight + "px";
    n.el.style.width = gridController.state.itemWidth + "px";
    n.el.addEventListener("mousedown", gridController.setFocus.bind(n));
    n.el.addEventListener("touchstart", gridController.setFocus.bind(n));
    n.offset.x = t * (gridController.state.itemWidth + gridController.state.itemSpace) + (parseInt(e % 2) == 0 ? 0 : gridController.state.itemWidth / 2);
    n.offset.y = e * gridController.state.itemHeight * 0.75;
    let xx = ((n.offset.x + gridController.state.offset.x) % gridController.state.flipWidth) - gridController.state.colWidth;
    let yy = ((n.offset.y + gridController.state.offset.y) % gridController.state.flipHeight) - gridController.state.rowHeight;
    gridController.state.items.push(n);

    if (!window.isMobile) {
      if (xx >= gridController.state.itemWidth * 0.5 && xx < window.innerWidth - gridController.state.itemWidth * 1.5 && yy > 0 && yy < window.innerHeight - gridController.state.itemHeight * 0.75) {
        n.intervalX = Math.abs(xx + gridController.state.itemWidth * 0.5 - window.innerWidth * 0.5);
        n.intervalY = Math.abs(yy + gridController.state.itemHeight * 0.5 - window.innerHeight * 0.5);
        n.interval = gridController.calculateDistance(xx + gridController.state.itemWidth * 0.5, yy + gridController.state.itemHeight * 0.5);
        gridController.state.showItems[n.index] = n;
      }
    } else {
      // let w = $('.logo').width();
      // let h = $('.logo').height();
      // let ww = $('.select .option').width();
      // let hh = $('.select .option').height();
      // console.log(w, h, ww, hh, xx, yy, n.index);

      // console.log(gridController.state.target);
      //手机版
      if (
        // !(xx >= 0 && xx <= w && yy >= 0 && yy <= h) &&
        // !(xx >= ww && xx <= window.innerWidth && yy >= hh && yy <= h) &&
        xx >= 0 &&
        xx < window.innerWidth - gridController.state.itemWidth * 0.5 &&
        yy >= -10 &&
        yy < window.innerHeight - gridController.state.itemHeight * 0.75
      ) {
        n.intervalX = Math.abs(xx + gridController.state.itemWidth * 0.5 - window.innerWidth * 0.5);
        n.intervalY = Math.abs(yy + gridController.state.itemHeight * 0.5 - window.innerHeight * 0.5);
        n.interval = gridController.calculateDistance(xx + gridController.state.itemWidth * 0.5, yy + gridController.state.itemHeight * 0.75);
        gridController.state.showItems[n.index] = n;
      }
    }
  },

  /**计算网格到页面中心点的距离 */
  calculateDistance: function (pointX, pointY) {
    const dx = pointX - window.innerWidth * 0.5;
    const dy = pointY - window.innerHeight * 0.5;
    return Math.floor(Math.sqrt(dx * dx + dy * dy) * 100) / 100;
  },

  deleteItem: function (newArr) {
    gridController.state.items.forEach((e, t) => {
      gridController.state.grid.removeChild(e.el);
    });
    gridController.state.items = [];
    gridController.state.cardArray = newArr;
    gridController.create(false);
    gridController.positionCardsInCenter();
    var temptime = setTimeout(() => {
      gridController.deselectItem();
      clearTimeout(temptime);
    }, 100);
  },

  /**创建网格单独对象图 */
  createImage: function (e, t) {
    let gifArr = [
      // "hbts04",
      "10：12156",
      "0：5268",
      // '2：6587',
      // '0：8178',
      // '2：823',
      // '2：6923',
      "10：23225",
      "10：8069",
      "10：2259",
      "3：2106",
      "10：26104",
      "10：19001",
      "3：7550",
      "111111",
      "10：28529",
    ];

    var html = `<div class="${t} ${!lxs[e].url && gifArr.indexOf(e) != -1 ? "hasurl" : ""}" gif="${gifArr.indexOf(e) != -1 ? e + ".gif" : ""}">
  <img src="${`https://houseoss.4dkankan.com/project/hubeiMuseum/wwq/modelImg/${e}.png`}" />
  <div class="shadow">
    <div class="name">
      <i>${getName(lxs[e].name).dynasty}</i>
      <h3>${getName(lxs[e].name).name}</h3>
    </div>
    <div class="iconbox">
      <div class="threed" ></div>
    </div>
    <div class="coverbox">
    <div class="right" onclick="openDetail('${e}',event)"></div>
    </div>
  </div>
</div>`;

    // 创建一个临时容器
    var container = document.createElement("div");
    container.innerHTML = html;

    // 返回生成的 DOM 元素
    return container.firstElementChild;
  },

  //拖拽
  handleDrag: function (e) {
    if (gridController.state.canDrag) {
      var t = browserController.state.isMobile ? 2 : 1;
      gridController.state.target.x += e.thisDiff.x * t;
      gridController.state.target.y += e.thisDiff.y * t;
    }
    0 == e.dragging &&
      (e.getDist() < 10 && gridController.state.focus && (!gridController.state.selected && gridController.state.canSelect ? gridController.selectItem(gridController.state.focus) : gridController.deselectItem(), (gridController.state.canSelect = !0)), (gridController.state.focus = null));
  },
  //设置焦点
  setFocus: function () {
    gridController.state.focus = this;
  },
  // 选择某一个进详情页
  selectItem: function (e) {
    if ($("body").hasClass("wapbody") && !gridController.state.isClick && !$(e.el).hasClass("active")) {
      gridController.state.isClick = true;
      $(".grid__item").removeClass("active later");
      $(e.el).addClass("active");
      let ti = setTimeout(function () {
        clearTimeout(ti);
        $(e.el).addClass("later");
        gridController.state.isClick = false;
      }, 400);
    }
  },

  moveToCenterAnim: function (e) {
    this.item.target.x = this.item.pos.x = this.start.x + this.move.x * e;
    this.item.target.y = this.item.pos.y = this.start.y + this.move.y * e;
  },

  /**卡片中心位置 */
  positionCardsInCenter: function () {
    gridController.state.items.forEach(function (e, t) {
      var r = e.el.getBoundingClientRect(),
        n = new Vec2(gridController.state.screenCenter.x - r.width / 2, gridController.state.screenCenter.y - r.height / 2);
      e.target.x = e.pos.x = n.x;
      e.target.y = e.pos.y = n.y;
      gridController.drawItem(e);
    });
  },

  // 关闭详情页
  deselectItem: function () {
    gridController.state.selected = null;
    gridController.state.lerpRate = 0.19;
    setTimeout(function () {
      let keys = Object.keys(gridController.state.showItems);
      gridController.state.canDrag = gridController.state.cardArray.length > keys.length;
      gridController.state.lerpRate = 1;
      isSwitchingOver = true;
    }, 500);
    gridController.state.needsCreate && (gridController.create(), (gridController.state.needsCreate = !1));
  },

  setOrder: function (e) {
    e.order = gridController.getOrder(e);
  },

  getOrder: function (e) {
    return gridController.state.count - ((e.index - gridController.state.selected.index + gridController.state.count) % gridController.state.count);
  },

  render: function () {
    if (gridController.state.canDrag && gridController.state.isHandleDrag && !document.documentElement.classList.contains("show-intro") && $(".fp-completely").index() === 1) {
      // 文物自动移动
      gridController.state.target.x += 0.3;
    }
    gridController.state.offset.lerp(gridController.state.target, 0.1);
    gridController.state.items.forEach(gridController.updateItem);
    gridController.state.items.forEach(gridController.drawItem);
  },

  updateItem: function (e) {
    var t = gridController.state.selected == e;
    if (gridController.state.selected) {
      var r = gridController.state.flipped ? 10 : 6;
      e.zTarget = 2 * e.order - gridController.state.count + (t ? r : 0);
    } else {
      e.target.x = ((e.offset.x + gridController.state.offset.x) % gridController.state.flipWidth) - gridController.state.colWidth;
      e.target.y = ((e.offset.y + gridController.state.offset.y) % gridController.state.flipHeight) - gridController.state.rowHeight;
    }
    e.pos.lerp(e.target, gridController.state.lerpRate);
  },

  /**坐标更新 */
  drawItem: function (e) {
    var t;
    if (browserController.state.isMobile) {
      t = window.innerWidth / 40;
    } else {
      t = 1.5 * Math.min(12, Math.max(0, window.innerHeight - 550) / 40 + 4);
    }
    e.el.style.transform = "translate3d(" + e.pos.x + "px, " + e.pos.y + "px, " + e.zDistance * t + "px)";
  },

  updateInit: function (newArr) {
    if (isSwitchingOver) {
      isSwitchingOver = false;
      let allNum = 0;
      gridController.state.selected = gridController.state.items[0];
      gridController.state.items.forEach((e, t) => {
        var r = new Vec2(e.pos.x, e.pos.y),
          n = e.el.getBoundingClientRect(),
          o = new Vec2(n.left + n.width / 2, n.top + n.height / 2),
          i = gridController.state.screenCenter.minus(o);
        e.centerPos = gridController.state.screenCenter.minus(new Vec2(n.width / 2, n.height / 2));
        gridController.setOrder(e);
        gridController.state.lerpRate = 1;
        var a = e.index * 10 + Math.ceil(300 * Math.random()) + 100;
        setTimeout(() => {
          animUtil.runAnimation(
            gridController.moveToCenterAnim.bind({
              start: r,
              item: e,
              move: i,
            }),
            600,
            easeInOut,
            () => {
              allNum++;
              if (allNum >= gridController.state.items.length) {
                gridController.deleteItem(newArr);
                gridController.state.target = new Vec2(1e8, 1e8);
                gridController.state.offset = new Vec2(1e8, 1e8);
              }
            }
          );
        }, 0);
      });
      gridController.getgif(3);
    }
  },
};

function gridinit() {
  browserController.initialize();
  animUtil.init();
  dragUtil.init();
}