@whitesev/pops 1.7.3 → 1.7.5

package/src/components/iframe/index.ts

@@ -1,3 +1,4 @@
+import { PopsCore } from "../../Core";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
@@ -20,7 +21,6 @@ export class PopsIframe {
 			pops.config.cssText.common,
 			pops.config.cssText.iframeCSS,
 		]);
-
 		let config: Required<PopsIframeDetails> = PopsIframeConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
@@ -98,6 +98,16 @@ export class PopsIframe {
 			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);
+		}
 		/**
 		 * 遮罩层元素
 		 */
@@ -145,9 +155,7 @@ export class PopsIframe {
 		popsDOMUtils.on($iframe, "load", () => {
 			/* iframe加载中... */
 			loadingElement?.remove();
-
 			$contentLoading!.style.animation = "iframeLoadingChange_85 0.3s forwards";
-
 			popsDOMUtils.on(
 				$contentLoading,
 				popsDOMUtils.getAnimationEndNameList(),
@@ -159,12 +167,11 @@ export class PopsIframe {
 
 			if (config.title!.text!.trim() === "" && $iframe!.contentDocument) {
 				/* 同域名下的才可以获取网页标题 */
-
 				$title!.querySelector<HTMLElement>("p")!.innerText =
 					$iframe!.contentDocument.title;
 			}
 
-			config.loadEndCallBack(eventDetails as any);
+			config.loadEndCallBack(eventDetails);
 		});
 		/* 创建到页面中 */
 
@@ -173,7 +180,7 @@ export class PopsIframe {
 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
 		}
 
-		popsDOMUtils.appendBody($shadowContainer);
+		$iframeContainer.appendChild($shadowContainer);
 		if ($mask != null) {
 			$anim.after($mask);
 		}
@@ -187,46 +194,33 @@ export class PopsIframe {
 				endCallBack: config.dragEndCallBack,
 			});
 		}
-		let normalLeft = "";
+		const TYPE_MODULE = "type-module";
 		/* 最小化按钮点击事件 */
-
+		let origin_left = "";
+		let origin_top = "";
+		let origin_is_max = false;
 		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,
+				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);
+				}
 			}
 		);
 		/* 最大化按钮点击事件 */
@@ -234,75 +228,69 @@ export class PopsIframe {
 			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,
+				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);
+				}
 			}
 		);
 		/* 先隐藏窗口化按钮 */
 		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,
+				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);
+				}
 			}
 		);
 		/* 关闭按钮点击事件 */
@@ -315,38 +303,9 @@ export class PopsIframe {
 					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,
+				if (typeof config?.btn?.close?.callback === "function") {
+					config.btn.close.callback(eventDetails, event);
+				}
 			}
 		);
 

package/src/components/loading/index.css

@@ -48,7 +48,8 @@
 	overflow: hidden;
 	width: auto;
 	font-size: inherit;
-	line-height: 2em;
+	line-height: normal;
+	align-content: center;
 }
 .pops[type-value="loading"] .pops-loading-content p[pops] {
 	display: inline-block;

package/src/components/panel/PanelHandleContentDetails.ts

@@ -903,7 +903,7 @@ export const PanelHandleContentDetails = () => {
 				setPanEvent() {
 					const AnyTouch = popsUtils.AnyTouch();
 					this.$tooltip = new AnyTouch(this.$ele.button, {
-						preventEvent() {
+						preventDefault() {
 							return false;
 						},
 					});

package/src/components/panel/index.css

@@ -23,26 +23,28 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-weight: 500;
-	line-height: var(--container-title-height);
+	line-height: normal;
+	align-content: center;
 }
 .pops[type-value="panel"] .pops-panel-content {
 	width: 100%;
-	height: calc(
+	/*height: calc(
 		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);
+	);*/
+	flex: 1;
 	overflow: auto;
 	word-break: break-word;
 }
 .pops[type-value="panel"] .pops-panel-btn {
-	position: absolute;
-	bottom: 0;
 	display: flex;
 	padding: 10px 10px 10px 10px;
 	width: 100%;
 	height: var(--container-bottom-btn-height);
+	max-height: var(--container-bottom-btn-height);
+	line-height: normal;
 	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
 	text-align: right;
-	line-height: var(--container-bottom-btn-height);
+	align-content: center;
 	align-items: center;
 }
 
@@ -226,9 +228,14 @@ section.pops-panel-container
 	align-items: center;
 	position: relative;
 	font-size: 14px;
-	line-height: 20px;
+	line-height: normal;
+	align-content: center;
 	height: 32px;
 	vertical-align: middle;
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
 }
 .pops-panel-switch input.pops-panel-switch__input {
 	position: absolute;
@@ -287,7 +294,8 @@ section.pops-panel-container
 section.pops-panel-container .pops-panel-slider:has(> input[type="range"]) {
 	overflow: hidden;
 	height: 25px;
-	line-height: 25px;
+	line-height: normal;
+	align-content: center;
 	display: flex;
 	align-items: center;
 }
@@ -360,6 +368,10 @@ section.pops-panel-container
 	height: 32px;
 	display: flex;
 	align-items: center;
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
 }
 
 .pops-slider-width {
@@ -575,7 +587,8 @@ section.pops-panel-container
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
-	line-height: 1;
+	line-height: normal;
+	align-content: center;
 	height: 32px;
 	white-space: nowrap;
 	cursor: text;
@@ -622,7 +635,8 @@ section.pops-panel-container
 }
 .pops-panel-input .pops-panel-icon {
 	height: inherit;
-	line-height: inherit;
+	line-height: normal;
+	align-content: center;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -694,7 +708,8 @@ section.pops-panel-container
 /* select的CSS */
 .pops-panel-select select {
 	height: 32px;
-	line-height: 32px;
+	line-height: normal;
+	align-content: center;
 	min-width: 200px;
 	border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));
 	border-radius: 5px;
@@ -751,7 +766,8 @@ section.pops-panel-container
 	padding: 4px 12px;
 	gap: 6px;
 	min-height: 32px;
-	line-height: 24px;
+	line-height: normal;
+	align-content: center;
 	border-radius: var(--el-border-radius-base);
 	background-color: var(--el-fill-color-blank);
 	transition: var(--el-transition-duration);
@@ -815,7 +831,8 @@ section.pops-panel-container
 	--color: inherit;
 	height: 1em;
 	width: 1em;
-	line-height: 1em;
+	line-height: normal;
+	align-content: center;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -851,7 +868,8 @@ section.pops-panel-container
 	height: 24px;
 	padding: 0 9px;
 	font-size: var(--el-tag-font-size);
-	line-height: 1;
+	line-height: normal;
+	align-content: center;
 	border-width: 1px;
 	border-style: solid;
 	border-radius: var(--el-tag-border-radius);
@@ -901,6 +919,7 @@ section.pops-panel-container
 .pops-panel-select-multiple .el-select__tags-text {
 	display: block;
 	line-height: normal;
+	align-content: center;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;

package/src/components/prompt/index.css

@@ -16,31 +16,33 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-weight: 500;
-	line-height: var(--container-title-height);
-}
-.pops[type-value="prompt"] .pops-prompt-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
+	line-height: normal;
+	align-content: center;
 }
 .pops[type-value="prompt"] .pops-prompt-content {
 	width: 100%;
-	height: calc(
+	/*height: calc(
 		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);
+	);*/
+	flex: 1;
 	overflow: auto;
 	word-break: break-word;
 }
+.pops[type-value="prompt"] .pops-prompt-content p[pops] {
+	padding: 5px 10px;
+	color: rgb(51, 51, 51);
+	text-indent: 15px;
+}
 .pops[type-value="prompt"] .pops-prompt-btn {
-	position: absolute;
-	bottom: 0;
 	display: flex;
 	padding: 10px 10px 10px 10px;
 	width: 100%;
 	height: var(--container-bottom-btn-height);
+	max-height: var(--container-bottom-btn-height);
+	line-height: normal;
+	align-content: center;
 	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
 	text-align: right;
-	line-height: var(--container-bottom-btn-height);
 	align-items: center;
 }
 .pops[type-value="prompt"] input[pops] {

package/src/components/rightClickMenu/index.css

@@ -30,7 +30,8 @@
 i.pops-rightClickMenu-icon {
 	height: 1em;
 	width: 1em;
-	line-height: 1em;
+	line-height: normal;
+	align-content: center;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;

package/src/css/button.css

@@ -45,7 +45,7 @@
 	display: flex;
 	align-items: center;
 	height: var(--button-height);
-	line-height: 1;
+	line-height: normal;
 	box-sizing: border-box;
 	user-select: none;
 	-webkit-user-select: none;

package/src/css/common.css

@@ -20,5 +20,19 @@
 	border: 0;
 }
 .pops-no-border-important {
-	border: 0;
+	border: 0 !important;
+}
+.pops-user-select-none {
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
+}
+.pops-line-height-center {
+	line-height: normal;
+	align-content: center;
+}
+.pops-width-fill {
+	width: -webkit-fill-available;
+	width: -moz-available;
 }

package/src/css/index.css

@@ -25,6 +25,8 @@
 	box-sizing: border-box;
 	overflow: hidden;
 	transition: all 0.35s;
+	display: flex;
+	flex-direction: column;
 }
 .pops-anim {
 	position: fixed;
@@ -51,7 +53,7 @@
 .pops i.pops-bottom-icon {
 	height: 1em;
 	width: 1em;
-	line-height: 1em;
+	line-height: normal;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -90,9 +92,6 @@
 .pops-header-controls button.pops-header-control[type="max"],
 .pops-header-controls button.pops-header-control[type="mise"],
 .pops-header-controls button.pops-header-control[type="min"] {
-	position: relative;
-	float: right;
-	margin: 0 2px;
 	outline: 0 !important;
 	border: 0;
 	border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
@@ -122,14 +121,25 @@ button.pops-header-control {
 	background: 0 0;
 	cursor: pointer;
 	position: unset;
-	line-height: 1.15;
+	line-height: normal;
 }
 button.pops-header-control i:hover {
 	color: rgb(64, 158, 255);
 }
 .pops-header-controls[data-margin] button.pops-header-control {
 	margin: 0 6px;
+	display: flex;
+    align-items: center;
 }
 .pops[type-value] .pops-header-controls {
 	display: flex;
+	gap: 6px;
+}
+
+/* 标题禁止选中文字 */
+.pops [class^="pops"][class*="-title"] p[pops] {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }