@whitesev/pops 1.4.0 → 1.5.0

package/src/components/folder/indexType.ts

@@ -0,0 +1,87 @@
+import type {
+	PopsTitleConfig,
+	PopsDragConfig,
+	PopsCommonConfig,
+	PopsMoreButtonConfig,
+} from "../../types/components";
+
+/**
+ * pops.folder的folder配置信息
+ */
+export interface PopsFolderDataConfig {
+	/**
+	 * 文件/文件夹名
+	 */
+	fileName: string;
+	/**
+	 * 文件大小，如果是文件夹的话，为0
+	 */
+	fileSize: number;
+	/**
+	 * 文件类型，如果是文件夹，为空
+	 */
+	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;
+}
+
+/**
+ * pops.folder
+ */
+export interface PopsFolderDetails
+	extends PopsTitleConfig,
+		PopsDragConfig,
+		PopsMoreButtonConfig,
+		PopsCommonConfig {
+	/**
+	 * 排序
+	 */
+	sort: {
+		/**
+		 * 比较的名字，默认为fileName
+		 */
+		name: "fileName" | "fileSize" | "latestTime";
+		/**
+		 * 是否降序，默认false（升序）
+		 */
+		isDesc: boolean;
+		/**
+		 * 触发排序的回调，如果返回true，则中止内部的排序
+		 */
+		callback: (
+			targert: HTMLElement,
+			event: PointerEvent | MouseEvent,
+			sortName: "fileName" | "fileSize" | "latestTime",
+			sortDesc: boolean
+		) => boolean;
+	};
+	/**
+	 * 文件夹信息
+	 */
+	folder: PopsFolderDataConfig[];
+}

package/src/components/iframe/index.css

@@ -0,0 +1,90 @@
+.pops[type-value="iframe"] {
+	--container-title-height: 55px;
+}
+.pops[type-value] .pops-iframe-title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.pops[type-value="iframe"] .pops-iframe-title {
+	width: calc(100% - 0px);
+	height: var(--container-title-height);
+	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+}
+.pops[type-value="iframe"] .pops-iframe-title p[pops] {
+	width: 100%;
+	overflow: hidden;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: 500;
+	line-height: var(--container-title-height);
+}
+.pops[type-value="iframe"] .pops-iframe-content p[pops] {
+	padding: 5px 10px;
+	color: #333;
+	text-indent: 15px;
+}
+.pops[type-value="iframe"] .pops-iframe-content {
+	width: 100%;
+	height: calc(100% - var(--container-title-height));
+	overflow: hidden;
+	word-break: break-word;
+}
+.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"] {
+	top: unset !important;
+	bottom: 0;
+	max-width: 200px;
+	max-height: 53px;
+	transform: none;
+}
+.pops[type-value="iframe"].pops[type-module="min"]
+	.pops-header-control[type="min"] {
+	display: none;
+}
+.pops[type-value="iframe"].pops[type-module="max"] {
+	top: unset !important;
+	left: unset !important;
+	width: 100% !important;
+	height: 100% !important;
+	transform: none;
+}
+.pops[type-value="iframe"] iframe[pops] {
+	width: calc(100% - 4px);
+	height: calc(100% - 4px);
+	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;
+}

package/src/components/iframe/index.ts

@@ -0,0 +1,415 @@
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { pops } from "../../Pops";
+import type { PopsEventDetails } from "../../types/event";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import type { PopsIframeDetails } from "./indexType";
+
+export class PopsIframe {
+	constructor(details: PopsIframeDetails) {
+		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+		PopsHandler.handleInit($shadowRoot, [
+			pops.config.cssText.index,
+			pops.config.cssText.ninePalaceGridPosition,
+			pops.config.cssText.scrollbar,
+			pops.config.cssText.anim,
+			pops.config.cssText.common,
+			pops.config.cssText.iframeCSS,
+		]);
+
+		let config: Required<PopsIframeDetails> = {
+			title: {
+				position: "center",
+				text: "",
+				html: false,
+				style: "",
+			},
+			loading: {
+				enable: true,
+				icon: true,
+				text: "",
+			},
+			class: "",
+			url: window.location.href,
+			only: false,
+			zIndex: 10000,
+			mask: {
+				enable: false,
+				clickEvent: {
+					toClose: false,
+					toHide: false,
+				},
+
+				clickCallBack: void 0,
+			},
+			animation: "pops-anim-fadein-zoom",
+			position: "center",
+			drag: false,
+			dragLimit: true,
+			dragExtraDistance: 3,
+			dragMoveCallBack() {},
+			dragEndCallBack() {},
+			width: "300px",
+			height: "250px",
+			topRightButton: "min|max|mise|close",
+			sandbox: false,
+			forbiddenScroll: false,
+			loadEndCallBack() {},
+			btn: {
+				min: {
+					callback() {},
+				},
+				max: {
+					callback() {},
+				},
+				mise: {
+					callback() {},
+				},
+				close: {
+					callback() {},
+				},
+			},
+
+			style: null,
+			beforeAppendToPageCallBack() {},
+		};
+		config = popsUtils.assign(config, details);
+		if (config.url == null) {
+			throw "config.url不能为空";
+		}
+		let guid = popsUtils.getRandomGUID();
+		const PopsType = "iframe";
+
+		config = PopsHandler.handleOnly(PopsType, config);
+		let maskExtraStyle =
+			config.animation != null && (config as any).animation != ""
+				? "position:absolute;"
+				: "";
+		let maskHTML = PopsElementHandler.getMaskHTML(
+			guid,
+
+			config.zIndex,
+			maskExtraStyle
+		);
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
+		let iframeLoadingHTML = '<div class="pops-loading"></div>';
+		let titleText =
+			config.title!.text!.trim() !== "" ? config.title.text : config.url;
+		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
+			PopsType,
+			config
+		);
+		let animHTML = PopsElementHandler.getAnimHTML(
+			guid,
+			PopsType,
+			config,
+			`
+            <div 
+                class="pops-iframe-title"
+                style="text-align: ${config.title.position};${headerStyle}"
+            >
+                ${
+									config.title.html
+										? titleText
+										: `<p pops style="${headerPStyle}">${titleText}</p>`
+								}
+                ${headerBtnHTML}
+            </div>
+                        <div class="pops-iframe-content">
+                <div class="pops-iframe-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 : ""}
+            `,
+			""
+		);
+		/**
+		 * 弹窗的主元素，包括动画层
+		 */
+
+		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 $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 as any);
+		});
+		/* 创建到页面中 */
+
+		popsDOMUtils.append($shadowRoot, elementList);
+		if (typeof config.beforeAppendToPageCallBack === "function") {
+			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
+		}
+
+		popsDOMUtils.appendBody($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,
+			});
+		}
+		let normalLeft = "";
+		/* 最小化按钮点击事件 */
+
+		popsDOMUtils.on<PointerEvent | MouseEvent>(
+			headerMinBtnElement,
+			"click",
+			(event) => {
+				/**
+				 * 所有最小化的iframe数组
+				 */
+				let allMinElementList: HTMLElement[] = [];
+
+				pops.config.layer.iframe.forEach((item) => {
+					if (
+						item.animElement != $anim &&
+						item.popsElement.getAttribute("type-module") === "min"
+					) {
+						allMinElementList.push(item.popsElement);
+					}
+				});
+				let maxLeftValue = allMinElementList.length
+					? allMinElementList.length * 205
+					: 0;
+
+				$pops!.style.transitionDuration = "";
+
+				normalLeft = $pops!.style.left;
+
+				$pops!.style.left = maxLeftValue + "px";
+
+				$pops!.setAttribute("type-module", "min");
+
+				$anim!
+					.querySelector<HTMLDivElement>(".pops-header-controls")
+					?.setAttribute("type", "max");
+
+				config.btn.min.callback(eventDetails, event);
+			},
+			{
+				capture: true,
+			}
+		);
+		/* 最大化按钮点击事件 */
+		popsDOMUtils.on<MouseEvent | PointerEvent>(
+			headerMaxBtnElement,
+			"click",
+			(event) => {
+				$pops!.style.transitionDuration = "";
+
+				normalLeft = $pops!.style.left;
+
+				$pops!.removeAttribute("type-module");
+
+				$pops!.setAttribute("type-module", "max");
+
+				headerControlsElement!.setAttribute("type", "max");
+
+				headerMaxBtnElement!.style.setProperty("display", "none");
+
+				headerMiseBtnElement!.style.setProperty("display", "");
+
+				config.btn.max.callback(eventDetails, event);
+			},
+			{
+				capture: true,
+			}
+		);
+		/* 先隐藏窗口化按钮 */
+		headerMiseBtnElement?.style?.setProperty("display", "none");
+		/* 窗口化按钮点击事件 */
+		popsDOMUtils.on<MouseEvent | PointerEvent>(
+			headerMiseBtnElement,
+			"click",
+			(event) => {
+				$pops!.style.transitionDuration = "";
+
+				$pops!.style.left = normalLeft;
+
+				headerControlsElement!.removeAttribute("type");
+
+				$pops!.removeAttribute("type-module");
+				/**
+				 * 所有最小化的iframe数组
+				 */
+				let allMinElementList: HTMLElement[] = [];
+				pops.config.layer.iframe.forEach((item) => {
+					if (
+						item.animElement != $anim &&
+						$pops!.getAttribute("type-module") === "min"
+					) {
+						allMinElementList.push(item.popsElement);
+					}
+				});
+				allMinElementList.sort(
+					PopsInstanceUtils.sortElementListByProperty<HTMLElement, number>(
+						(obj) => {
+							return parseInt(getComputedStyle(obj).left);
+						},
+						(obj) => {
+							return parseInt(getComputedStyle(obj).left);
+						},
+						false
+					)
+				);
+				allMinElementList.forEach((item, index) => {
+					item.style.left = index * 205 + "px";
+				});
+
+				headerMiseBtnElement!.style.setProperty("display", "none");
+
+				headerMaxBtnElement!.style.setProperty("display", "");
+
+				config.btn.mise.callback(eventDetails, event);
+			},
+			{
+				capture: true,
+			}
+		);
+		/* 关闭按钮点击事件 */
+		popsDOMUtils.on<MouseEvent | PointerEvent>(
+			headerCloseBtnElement,
+			"click",
+			(event) => {
+				PopsInstanceUtils.removeInstance([pops.config.layer.iframe], guid, false);
+				setTimeout(() => {
+					let allIsMinElementList: HTMLElement[] = [];
+					pops.config.layer.iframe.forEach((item) => {
+						if (
+							item.animElement != $anim &&
+							$pops!.getAttribute("type-module") === "min"
+						) {
+							allIsMinElementList.push(item.popsElement);
+						}
+					});
+
+					allIsMinElementList.sort(
+						PopsInstanceUtils.sortElementListByProperty(
+							(obj) => {
+								return parseInt(getComputedStyle(obj).left);
+							},
+							(obj) => {
+								return parseInt(getComputedStyle(obj).left);
+							},
+							false
+						)
+					);
+
+					allIsMinElementList.forEach((item, index) => {
+						item.style.left = index * 205 + "px";
+					});
+				}, 1000 * 0.3);
+
+				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;
+	}
+}