@whitesev/pops 2.2.8 → 2.2.9

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

@@ -1,101 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,75 +0,0 @@
-.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

@@ -1,351 +0,0 @@
-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,
-			},
-		]);
-
-		let maskExtraStyle =
-			// @ts-ignore
-			config.animation != null && config.animation != ""
-				? "position:absolute;"
-				: "";
-
-		// 先把z-index提取出来
-		let zIndex = PopsHandler.handleZIndex(config.zIndex);
-		let maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
-
-		let headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
-		let iframeLoadingHTML = '<div class="pops-loading"></div>';
-		let titleText =
-			config.title!.text!.trim() !== "" ? config.title.text : config.url;
-		let { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(
-			popsType,
-			config
-		);
-		let 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
-		);
-		/**
-		 * 弹窗的主元素，包括动画层
-		 */
-
-		let $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-		let {
-			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;user-select: none;-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;";
-			popsDOMUtils.appendBody($iframeContainer);
-		}
-		/**
-		 * 遮罩层元素
-		 */
-		let $mask: HTMLDivElement | null = null;
-		/**
-		 * 已创建的元素列表
-		 */
-		let elementList: HTMLElement[] = [$anim];
-
-		if (config.mask.enable) {
-			let _handleMask_ = PopsHandler.handleMask({
-				type: popsType,
-				guid: guid,
-
-				config: config,
-				animElement: $anim,
-				maskHTML: maskHTML,
-			});
-			$mask = _handleMask_.maskElement;
-			elementList.push($mask);
-		}
-
-		let 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,
-		});
-
-		let result = PopsHandler.handleResultDetails(eventDetails);
-		return result;
-	},
-};