ipink-util/dist/utils/toast.mjs

util.js

import { Config, getSdk } from './config.mjs';

const htmlToast = (content, duration = 3e3, complete, mask, success, fail) => {
  let errMsg = {};
  try {
    let removeChild = function() {
      let target = document.getElementsByClassName("toast_container") && document.getElementsByClassName("toast_container")[0];
      if (target) {
        target.parentElement.removeChild(target);
        if (mask) {
          startTouchEvent();
        }
      }
    }, touchDefault = function(e) {
      e.stopPropagation();
      e.preventDefault();
    }, stopTouchEvent = function() {
      document.addEventListener("touchstart", touchDefault, false);
      document.addEventListener("touchmove", touchDefault, false);
      document.addEventListener("touchend", touchDefault, false);
    }, startTouchEvent = function() {
      document.removeEventListener("touchstart", touchDefault, false);
      document.removeEventListener("touchmove", touchDefault, false);
      document.removeEventListener("touchend", touchDefault, false);
    };
    if (typeof document == "undefined" || !document.createElement) {
      errMsg = {
        errMsg: "不支持【document】对象！"
      };
      fail && fail(errMsg);
      complete && complete(errMsg);
    }
    if (mask) {
      stopTouchEvent();
    }
    const toastStyle = `
			.toast_container { }
			.toast-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99998; text-align: center;  animation: toast-fadein 3s forwards; -webkit-animation: toast-fadein 3s forwards; background: rgba(17,17,17,.8); font-size: calc(100vw / 750); max-width: 85vw; white-space:normal;  padding: 10px 15px; border-radius: 5px; box-sizing:content-box; line-height: calc(100vw / 750 * 42px); }
			.toast-content { padding: 0; font-size: 28em !important; overflow: hidden; position: relative; color: #ffffff; word-break: break-all; }
			@keyframes toast-fadein { 0% {opacity: 0.1;} 10% {opacity: 1;} 30% { opacity: 1; } 60% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
		`;
    const style = document.createElement("style");
    style.type = "text/css";
    style.id = "toast-style";
    style.innerHTML = toastStyle;
    var toastBox = document.querySelector("div.toast-box");
    if (!toastBox) {
      var toast_container = document.createElement("div");
      toast_container.className = "toast_container";
      var toast_div = document.createElement("div");
      toast_container.appendChild(style);
      toast_container.appendChild(toast_div);
      toast_div.className = "toast-box";
      toast_div.style.cssText = `animation-duration: ${duration / 1e3}s;`;
      var alert_p = document.createElement("p");
      alert_p.className = "toast-content";
      alert_p.innerHTML = content;
      toast_div.appendChild(alert_p);
      (document.getElementsByTagName("uni-app") && document.getElementsByTagName("uni-app")[0] || document.body).appendChild(toast_container);
      let timeId = setTimeout(function() {
        clearTimeout(timeId);
        removeChild();
        complete && complete();
        success && success();
      }, duration);
      if (typeof uni !== "undefined") {
        uni.addInterceptor("navigateTo", {
          success(e) {
            clearTimeout(timeId);
            removeChild();
          }
        });
        uni.addInterceptor("navigateBack", {
          success(e) {
            clearTimeout(timeId);
            removeChild();
          }
        });
      }
    }
  } catch (e) {
    fail && fail(e);
    complete && complete(e);
  }
};
const toast = (options) => {
  let {
    title = "",
    icon = "none",
    mask = false,
    duration = Config.toast_duration,
    complete,
    success,
    fail,
    ...args
  } = options || {};
  if (typeof options === "string") {
    title = options;
  }
  if (!title) return "";
  if (Config.use_inner_toast && typeof document !== "undefined" && document.createElement && document.removeEventListener) {
    return htmlToast(title, duration, complete, mask, success, fail);
  }
  let sdk = getSdk();
  let params = {
    title,
    icon,
    mask,
    duration,
    success,
    fail,
    ...args,
    complete
  };
  if (sdk) {
    typeof uni !== "undefined" ? uni.showToast(params) : wx.showToast(params);
  } else {
    let errMsg = {
      errMsg: "不支持【document】对象！"
    };
    fail && fail(errMsg);
    complete && complete(errMsg);
  }
};
const showModal = (options) => {
  return new Promise((resolve) => {
    let sdk = getSdk();
    if (sdk) {
      const modal = typeof uni !== "undefined" ? uni.showModal : wx.showModal;
      modal({
        ...options || {},
        success: (e) => {
          options?.success && options.success(e);
          resolve(true);
        },
        fail: (e) => {
          options?.fail && options.fail(e);
          resolve(false);
        }
      });
    } else {
      resolve(true);
    }
  });
};

export { htmlToast, showModal, toast };