@opensig/opendesign/lib/carousel/effects/toggle.js

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

"use strict";
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
const is = require("../../_utils/is.js");
const effect = require("./effect.js");
class Toggle extends effect {
  constructor(slideElList, slideContainer, activeIndex, options) {
    super(slideElList, slideContainer, options);
    __publicField(this, "slideList");
    __publicField(this, "isChanging");
    __publicField(this, "resolveArr");
    this.isChanging = false;
    this.resolveArr = [];
    this.slideList = slideElList.map((el, idx) => {
      el.addEventListener("animationend", () => {
        el.classList.remove(
          "o-carousel-toggle-in",
          "o-carousel-toggle-out"
          /* OUT */
        );
        this.isChanging = false;
        if (idx === this.currentIndex) {
          this.resolveArr.forEach((fn) => fn(null));
          this.resolveArr = [];
        }
      });
      return {
        index: idx,
        el
      };
    });
    this.active(activeIndex, false, false);
  }
  handleTouchStart() {
  }
  handleTouchMove() {
  }
  handleTouchEnd(pos) {
    if (this.isChanging) {
      return;
    }
    const { dx, dy } = pos;
    let toIdx = this.currentIndex;
    if (Math.abs(dy) < Math.abs(dx) && Math.abs(dx) > 20) {
      toIdx += dx < 0 ? 1 : -1;
      return toIdx;
    }
    return;
  }
  active(toIndex, animate = true, force = false) {
    return new Promise((resolve) => {
      if (this.total === 0 || this.isChanging || !force && this.currentIndex === toIndex) {
        return resolve(null);
      }
      if (this.currentIndex !== toIndex && is.isFunction(this.onBeforeChange) && this.onBeforeChange(toIndex, this.currentIndex) === false) {
        Promise.resolve(null);
      }
      this.isChanging = animate;
      const toSlide = this.slideList[toIndex];
      const fromSlide = this.slideList[this.currentIndex];
      if (!toSlide) {
        return resolve(null);
      }
      fromSlide == null ? void 0 : fromSlide.el.classList.remove("o-carousel-toggle-current");
      toSlide.el.classList.add(
        "o-carousel-toggle-current"
        /* CURRENT */
      );
      if (this.activeClass) {
        toSlide.el.classList.add(this.activeClass);
        fromSlide == null ? void 0 : fromSlide.el.classList.remove(this.activeClass);
      }
      if (animate) {
        toSlide.el.classList.add(
          "o-carousel-toggle-in"
          /* IN */
        );
        fromSlide.el.classList.add(
          "o-carousel-toggle-out"
          /* OUT */
        );
        this.resolveArr.push(resolve);
      } else {
        return resolve(toIndex);
      }
    }).then(() => {
      if (is.isFunction(this.onChanged) && this.currentIndex !== toIndex) {
        this.onChanged(toIndex, this.currentIndex);
      }
      this.currentIndex = toIndex;
      return toIndex;
    });
  }
  destroyed() {
  }
}
module.exports = Toggle;