@whitesev/pops 2.4.6 → 2.5.0

package/src/components/folder/types/index.ts

@@ -0,0 +1,97 @@
+import type {
+  PopsTitleConfig,
+  PopsDragConfig,
+  PopsCommonConfig,
+  PopsMoreButtonConfig,
+} from "../../../types/components";
+
+/**
+ * pops.folder的folder配置信息
+ */
+export interface PopsFolderDataConfig {
+  /**
+   * 文件/文件夹名
+   */
+  fileName: string;
+  /**
+   * 文件大小，如果是文件夹的话，为0
+   */
+  fileSize: number | string;
+  /**
+   * 文件类型，如果是文件夹，填入空字符串
+   */
+  fileType: string;
+  /**
+   * 创建时间
+   */
+  createTime: number;
+  /**
+   * 修改时间(最新时间)
+   */
+  latestTime: number;
+  /**
+   * 是否是文件夹
+   */
+  isFolder: boolean;
+  /**
+   * 层级
+   */
+  index: number;
+  /**
+   * 点击事件
+   */
+  clickEvent?: (
+    event: MouseEvent | PointerEvent,
+    config: PopsFolderDataConfig
+  ) =>
+    | Promise<
+        | {
+            autoDownload: boolean;
+            url: string;
+            mode: "a" | "aBlank" | "iframe" | "open" | "openBlank";
+          }
+        | null
+        | undefined
+        | void
+        | PopsFolderDataConfig[]
+      >
+    | null
+    | undefined
+    | void
+    | PopsFolderDataConfig[];
+}
+
+/**
+ * pops.folder
+ */
+export interface PopsFolderDetails extends PopsTitleConfig, PopsDragConfig, PopsMoreButtonConfig, PopsCommonConfig {
+  /**
+   * 排序
+   */
+  sort: {
+    /**
+     * 比较的名字，默认为fileName
+     */
+    name: "fileName" | "fileSize" | "latestTime";
+    /**
+     * 是否降序，默认false（升序）
+     * @default false
+     */
+    isDesc: boolean;
+    /**
+     * 触发排序的回调
+     * @returns
+     * + true 中止内部的排序
+     */
+    callback?: (
+      targert: HTMLElement,
+      event: PointerEvent | MouseEvent,
+      sortName: "fileName" | "fileSize" | "latestTime",
+      sortDesc: boolean
+    ) => boolean | undefined | void;
+  };
+  /**
+   * 文件夹信息
+   */
+  folder: PopsFolderDataConfig[];
+}

package/src/components/iframe/config.ts

@@ -0,0 +1,60 @@
+import type { PopsIframeDetails } from "./types";
+
+export const PopsIframeConfig = (): DeepRequired<PopsIframeDetails> => {
+  return {
+    title: {
+      position: "center",
+      text: "",
+      html: false,
+      style: "",
+    },
+    loading: {
+      enable: true,
+      icon: true,
+      text: "",
+    },
+    useShadowRoot: true,
+    class: "",
+    url: window.location.href,
+    only: false,
+    zIndex: 10000,
+    mask: {
+      enable: false,
+      clickEvent: {
+        toClose: false,
+        toHide: false,
+      },
+      clickCallBack: null,
+    },
+    animation: "pops-anim-fadein-zoom",
+    position: "center",
+    drag: true,
+    dragLimit: true,
+    dragExtraDistance: 3,
+    dragMoveCallBack() {},
+    dragEndCallBack() {},
+    width: window.innerWidth < 550 ? "88vw" : "350px",
+    height: window.innerHeight < 450 ? "70vh" : "200px",
+    topRightButton: "min|max|mise|close",
+    sandbox: false,
+    forbiddenScroll: false,
+    loadEndCallBack() {},
+    btn: {
+      min: {
+        callback() {},
+      },
+      max: {
+        callback() {},
+      },
+      mise: {
+        callback() {},
+      },
+      close: {
+        callback() {},
+      },
+    },
+
+    style: null,
+    beforeAppendToPageCallBack() {},
+  };
+};

package/src/components/iframe/index.css

@@ -0,0 +1,76 @@
+.pops[type-value="iframe"] {
+  --container-title-height: 55px;
+  transition:
+    width 0.35s ease,
+    height 0.35s ease;
+}
+.pops[type-value="iframe"] .pops-content {
+  overflow: hidden;
+}
+.pops-loading {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5;
+  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+}
+.pops-loading:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  display: block;
+  margin: -20px 0 0 -20px;
+  padding: 20px;
+  border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));
+  border-radius: 50%;
+  content: "";
+  border-top-color: transparent;
+  animation: pops-anim-wait-rotate 1.2s linear infinite;
+}
+.pops[type-value="iframe"].pops[type-module="min"] {
+  bottom: 0;
+  max-width: 200px;
+  max-height: 53px;
+  position: unset;
+}
+.pops[type-value="iframe"].pops[type-module="min"] .pops-header-control[data-type="min"] {
+  display: none;
+}
+.pops[type-value="iframe"].pops-iframe-unset-top {
+  top: unset !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-left {
+  left: unset !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-transform {
+  transform: none !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-transition {
+  transition: none !important;
+}
+.pops[type-value="iframe"].pops[type-module="max"] {
+  width: 100% !important;
+  height: 100% !important;
+}
+.pops[type-value="iframe"] iframe[pops] {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.pops-iframe-content-global-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+  width: 0;
+  height: 4px;
+  background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));
+  animation: iframeLoadingChange 2s forwards;
+}
+
+.pops-anim:has(.pops[type-value="iframe"].pops[type-module="min"]) {
+  position: unset;
+}

package/src/components/iframe/index.ts

@@ -0,0 +1,334 @@
+import { PopsCore } from "../../PopsCore";
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsCSS } from "../../PopsCSS";
+import { PopsInstData } from "../../PopsInst";
+import type { PopsEventDetails } from "../../types/event";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import { PopsIframeConfig } from "./config";
+import type { PopsIframeDetails } from "./types";
+import type { PopsType } from "../../types/main";
+
+export const PopsIframe = {
+  init(details: PopsIframeDetails) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "iframe";
+
+    let config = PopsIframeConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, details);
+    if (config.url == null) {
+      throw new Error("config.url不能为空");
+    }
+    config = PopsHandler.handleOnly(popsType, config);
+
+    const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+    PopsHandler.handleInit($shadowRoot, [
+      {
+        name: "index",
+        css: PopsCSS.index,
+      },
+      {
+        name: "ninePalaceGridPosition",
+        css: PopsCSS.ninePalaceGridPosition,
+      },
+      {
+        name: "scrollbar",
+        css: PopsCSS.scrollbar,
+      },
+      {
+        name: "anim",
+        css: PopsCSS.anim,
+      },
+      {
+        name: "common",
+        css: PopsCSS.common,
+      },
+      {
+        name: "iframeCSS",
+        css: PopsCSS.iframeCSS,
+      },
+    ]);
+
+    const maskExtraStyle = config.animation != null && <string>config.animation != "" ? "position:absolute;" : "";
+
+    // 先把z-index提取出来
+    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
+
+    const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
+    const iframeLoadingHTML = '<div class="pops-loading"></div>';
+    const titleText = config.title!.text!.trim() !== "" ? config.title.text : config.url;
+    const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
+    const animHTML = PopsElementHandler.createAnim(
+      guid,
+      popsType,
+      config,
+      /*html*/ `
+            <div class="pops-title pops-${popsType}-title" style="text-align: ${
+              config.title.position
+            };${headerStyle}">${
+              config.title.html
+                ? titleText
+                : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`
+            }${headerBtnHTML}</div>
+			<div class="pops-content pops-${popsType}-content">
+                <div class="pops-${popsType}-content-global-loading"></div>
+                <iframe src="${config.url}" pops ${
+                  config.sandbox ? "sandbox='allow-forms allow-same-origin allow-scripts'" : ""
+                }>
+                </iframe>
+			</div>${config.loading.enable ? iframeLoadingHTML : ""}`,
+      "",
+      zIndex
+    );
+    /**
+     * 弹窗的主元素，包括动画层
+     */
+
+    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+    const {
+      popsElement: $pops,
+      headerCloseBtnElement,
+      headerControlsElement,
+      titleElement: $title,
+      iframeElement: $iframe,
+      loadingElement,
+      contentLoadingElement: $contentLoading,
+      headerMinBtnElement,
+      headerMaxBtnElement,
+      headerMiseBtnElement,
+    } = PopsHandler.handleQueryElement($anim, popsType);
+    let $iframeContainer = PopsCore.document.querySelector<HTMLDivElement>(".pops-iframe-container");
+    if (!$iframeContainer) {
+      $iframeContainer = PopsCore.document.createElement("div");
+      $iframeContainer.className = "pops-iframe-container";
+      $iframeContainer.style.cssText =
+        "display: flex;position: fixed;bottom: 0px;flex-flow: wrap-reverse;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;";
+      popsDOMUtils.appendBody($iframeContainer);
+    }
+    /**
+     * 遮罩层元素
+     */
+    let $mask: HTMLDivElement | null = null;
+    /**
+     * 已创建的元素列表
+     */
+    const elementList: HTMLElement[] = [$anim];
+
+    if (config.mask.enable) {
+      const _handleMask_ = PopsHandler.handleMask({
+        type: popsType,
+        guid: guid,
+
+        config: config,
+        animElement: $anim,
+        maskHTML: maskHTML,
+      });
+      $mask = _handleMask_.maskElement;
+      elementList.push($mask);
+    }
+
+    const eventDetails = PopsHandler.handleEventDetails(
+      guid,
+      $shadowContainer,
+      $shadowRoot,
+      popsType,
+      $anim,
+
+      $pops!,
+      $mask!,
+      config
+    ) as any as PopsEventDetails & {
+      iframeElement: HTMLIFrameElement;
+    };
+
+    eventDetails["iframeElement"] = $iframe!;
+
+    popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
+      /* 动画加载完毕 */
+      $anim.style.width = "0%";
+      $anim.style.height = "0%";
+    });
+
+    popsDOMUtils.on($iframe, "load", () => {
+      /* iframe加载中... */
+      loadingElement?.remove();
+      $contentLoading!.style.animation = "iframeLoadingChange_85 0.3s forwards";
+      popsDOMUtils.on($contentLoading, popsDOMUtils.getAnimationEndNameList(), () => {
+        /* 动画加载完毕就移除 */
+        $contentLoading!.remove();
+      });
+
+      if (config.title!.text!.trim() === "" && $iframe!.contentDocument) {
+        /* 同域名下的才可以获取网页标题 */
+        $title!.querySelector<HTMLElement>("p")!.innerText = $iframe!.contentDocument.title;
+      }
+
+      config.loadEndCallBack(eventDetails);
+    });
+    /* 创建到页面中 */
+
+    popsDOMUtils.append($shadowRoot, elementList);
+    if (typeof config.beforeAppendToPageCallBack === "function") {
+      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
+    }
+
+    $iframeContainer.appendChild($shadowContainer);
+    if ($mask != null) {
+      $anim.after($mask);
+    }
+    /* 拖拽 */
+    if (config.drag) {
+      PopsInstanceUtils.drag($pops!, {
+        dragElement: $title!,
+        limit: config.dragLimit,
+        extraDistance: config.dragExtraDistance,
+        moveCallBack: config.dragMoveCallBack,
+        endCallBack: config.dragEndCallBack,
+      });
+    }
+    const TYPE_MODULE = "type-module";
+    /* 最小化按钮点击事件 */
+    let origin_left = "";
+    let origin_top = "";
+    let origin_is_max = false;
+    popsDOMUtils.on<PointerEvent | MouseEvent>(
+      headerMinBtnElement,
+      "click",
+      (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        origin_left = $pops.style.left;
+        origin_top = $pops.style.top;
+        $pops.classList.add("pops-iframe-unset-top");
+        $pops.classList.add("pops-iframe-unset-left");
+        $pops.classList.add("pops-iframe-unset-transform");
+        $pops.style.transitionDuration = "";
+
+        $pops.setAttribute(TYPE_MODULE, "min");
+        headerControlsElement.setAttribute("type", "min");
+        // 隐藏放大图标
+        headerMaxBtnElement.style.setProperty("display", "none");
+        // 显示复位图标
+        headerMiseBtnElement.style.setProperty("display", "");
+        if (typeof config?.btn?.min?.callback === "function") {
+          config.btn.min.callback(eventDetails, event);
+        }
+      },
+      {
+        capture: true,
+      }
+    );
+    /* 最大化按钮点击事件 */
+    popsDOMUtils.on<MouseEvent | PointerEvent>(
+      headerMaxBtnElement,
+      "click",
+      (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if ($pops.getAttribute(TYPE_MODULE) !== "min") {
+          origin_left = $pops.style.left;
+          origin_top = $pops.style.top;
+        }
+        origin_is_max = true;
+        $pops.style.transitionDuration = "";
+        $pops.style.transform = "";
+        $pops.removeAttribute(TYPE_MODULE);
+        $pops.classList.add("pops-iframe-unset-transition");
+        $pops.classList.add("pops-iframe-unset-left");
+        $pops.classList.add("pops-iframe-unset-top");
+        $pops.classList.add("pops-iframe-unset-transform");
+        $pops.classList.remove("pops-iframe-unset-transition");
+        $pops.setAttribute(TYPE_MODULE, "max");
+        headerControlsElement.setAttribute("type", "max");
+        // 隐藏放大图标
+        headerMaxBtnElement.style.setProperty("display", "none");
+        // 显示复位图标
+        headerMiseBtnElement.style.setProperty("display", "");
+        if (typeof config?.btn?.max?.callback === "function") {
+          config.btn.max.callback(eventDetails, event);
+        }
+      },
+      {
+        capture: true,
+      }
+    );
+    /* 先隐藏窗口化按钮 */
+    headerMiseBtnElement?.style?.setProperty("display", "none");
+    /* 复位按钮点击事件 */
+    popsDOMUtils.on<MouseEvent | PointerEvent>(
+      headerMiseBtnElement,
+      "click",
+      (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (origin_is_max && $pops.getAttribute(TYPE_MODULE) === "min") {
+          $pops.classList.add("pops-iframe-unset-transition");
+          $pops.classList.add("pops-iframe-unset-left");
+          $pops.classList.add("pops-iframe-unset-top");
+          $pops.classList.add("pops-iframe-unset-transform");
+          $pops.classList.remove("pops-iframe-unset-transition");
+          $pops.setAttribute(TYPE_MODULE, "max");
+          headerControlsElement.setAttribute("type", "max");
+        } else {
+          origin_is_max = false;
+          $pops.style.left = origin_left;
+          $pops.style.top = origin_top;
+          $pops.style.transitionDuration = "";
+          $pops.style.transform = "";
+          headerControlsElement.removeAttribute("type");
+          $pops.removeAttribute(TYPE_MODULE);
+          $pops.classList.remove("pops-iframe-unset-top");
+          $pops.classList.remove("pops-iframe-unset-left");
+          $pops.classList.remove("pops-iframe-unset-transform");
+
+          // 显示放大图标
+          headerMaxBtnElement.style.setProperty("display", "");
+          // 隐藏复位图标
+          headerMiseBtnElement.style.setProperty("display", "none");
+        }
+        if (typeof config?.btn?.mise?.callback === "function") {
+          config.btn.mise.callback(eventDetails, event);
+        }
+      },
+      {
+        capture: true,
+      }
+    );
+    /* 关闭按钮点击事件 */
+    popsDOMUtils.on<MouseEvent | PointerEvent>(
+      headerCloseBtnElement,
+      "click",
+      (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
+        if (typeof config?.btn?.close?.callback === "function") {
+          config.btn.close.callback(eventDetails, event);
+        }
+      },
+      {
+        capture: true,
+      }
+    );
+
+    PopsHandler.handlePush(popsType, {
+      guid: guid,
+      animElement: $anim,
+
+      popsElement: $pops!,
+
+      maskElement: $mask!,
+      $shadowContainer: $shadowContainer,
+      $shadowRoot: $shadowRoot,
+    });
+
+    const result = PopsHandler.handleResultDetails(eventDetails);
+    return result;
+  },
+};

package/src/components/iframe/types/index.ts

@@ -0,0 +1,139 @@
+import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig } from "../../../types/components";
+
+import type { PopsEventDetails } from "../../../types/event";
+
+/**
+ * pops.iframe的按钮的点击回调参数event
+ */
+export interface PopsBtnIframeCallBackEvent {
+  /**
+   * 动画元素（包裹着弹窗元素）
+   */
+  animElement: HTMLElement;
+  /**
+   * 弹窗元素
+   */
+  popsElement: HTMLElement;
+  /**
+   * 遮罩层元素，如果未设置，那么不存在
+   */
+  maskElement?: HTMLElement;
+  /**
+   * iframe元素
+   */
+  iframePopsElement: HTMLIFrameElement;
+  /**
+   * 使用的方法名
+   */
+  function: "iframe";
+  /**
+   * 唯一id
+   */
+  guid: string;
+}
+
+/**
+ * pops.iframe
+ */
+export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, PopsCommonConfig {
+  /**
+   * 加载配置
+   */
+  loading: {
+    /**
+     * 是否启用加载中的loading
+     */
+    enable: boolean;
+    /**
+     * 是否启用loading图标
+     */
+    icon: boolean;
+    /**
+     * 文字
+     */
+    text: string;
+  };
+  /**
+   * 按钮配置
+   */
+  btn: {
+    /**
+     * 最小化
+     */
+    min: {
+      /**
+       * 点击的回调函数
+       */
+      callback: (
+        eventDetails: PopsEventDetails & {
+          iframeElement: HTMLIFrameElement;
+        },
+        event: MouseEvent | PointerEvent
+      ) => void;
+    };
+    /**
+     * 最大化
+     */
+    max: {
+      /**
+       * 点击的回调函数
+       */
+      callback: (
+        eventDetails: PopsEventDetails & {
+          iframeElement: HTMLIFrameElement;
+        },
+        event: MouseEvent | PointerEvent
+      ) => void;
+    };
+    /**
+     * 窗口化
+     */
+    mise: {
+      /**
+       * 点击的回调函数
+       */
+      callback: (
+        eventDetails: PopsEventDetails & {
+          iframeElement: HTMLIFrameElement;
+        },
+        event: MouseEvent | PointerEvent
+      ) => void;
+    };
+    /**
+     * 关闭
+     */
+    close: {
+      /**
+       * 点击的回调函数
+       */
+      callback: (
+        eventDetails: PopsEventDetails & {
+          iframeElement: HTMLIFrameElement;
+        },
+        event: MouseEvent | PointerEvent
+      ) => void;
+    };
+  };
+  /**
+   * 加载的地址，默认为window.location.href
+   * @default window.location.href
+   */
+  url?: string;
+  /**
+   * 右上角按钮顺序：最小化、最大化、窗口化、关闭
+   */
+  topRightButton: "min|max|mise|close";
+  /**
+   * 是否启用沙箱，默认false
+   * @default false
+   */
+  sandbox?: boolean;
+  /**
+   * 加载完毕的回调
+   */
+  loadEndCallBack?: (
+    details: PopsEventDetails & {
+      iframeElement: HTMLIFrameElement;
+    }
+  ) => void;
+}