☰

pops

纯JavaScript编写的弹窗，内置方法confirm、alert、prompt、loading、iframe、isPhone、tooltip、folder、panel、rightClickMenu。

当前为 2024-06-18 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/456485/1396237/pops.js 

  1. (function (global, factory) {
  2. 	/**
  3. 	 * 不使用define
  4. 	 * typeof define === "function" && define.amd
  5. 	 * define(factory)
  6. 	 */
  7. 	if (typeof exports === "object" && typeof module !== "undefined") {
  8. 		/* 适用于NodeJs或typeScript */
  9. 		module.exports = factory();
  10. 	} else {
  11. 		// @ts-ignore
  12. 		global = typeof globalThis !== "undefined" ? globalThis : global || self;
  13. 		/* 适用于浏览器中，且this对象是window，如果this是其它，那么会在其它对象下注册(不可用)对象 */
  14. 		// @ts-ignore
  15. 		global.pops = factory(global.pops);
  16. 	}
  17. 	// @ts-ignore
  18. })(typeof window !== "undefined" ? window : this, function (AnotherPops) {
  19. 	"use strict";
  20.  
  21. 	const OriginPrototype = {
  22. 		Object: {
  23. 			defineProperty: Object.defineProperty,
  24. 		},
  25. 	};
  26.  
  27. 	/** 工具类 */
  28. 	const PopsUtils = {
  29. 		/** .on绑定的事件 @type {unique symbol} */
  30. 		SymbolEvents: Symbol(
  31. 			"events_" +
  32. 				(((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  33. 		),
  34. 		// @ts-ignore
  35. 		assignJSON(target, source) {
  36. 			/* JSON数据存在即替换 */
  37. 			if (source == null) {
  38. 				return target;
  39. 			}
  40. 			for (var target_key in target) {
  41. 				if (typeof source[target_key] !== "undefined") {
  42. 					if (
  43. 						typeof source[target_key] === "object" &&
  44. 						!(source[target_key] instanceof Node)
  45. 					) {
  46. 						target[target_key] = this.assignJSON(
  47. 							target[target_key],
  48. 							source[target_key]
  49. 						);
  50. 					} else {
  51. 						target[target_key] = source[target_key];
  52. 					}
  53. 				}
  54. 			}
  55. 			return target;
  56. 		},
  57. 		/**
  58. 		 * 字符串转HTMLElement
  59. 		 * @param {string} elementString
  60. 		 * @returns {HTMLElement}
  61. 		 */
  62. 		parseTextToDOM(elementString) {
  63. 			/* 去除前后的换行和空格 */
  64. 			elementString = elementString
  65. 				.replace(/^[\n|\s]*/g, "")
  66. 				.replace(/[\n|\s]*$/g, "");
  67. 			// @ts-ignore
  68. 			let targetElement = PopsDOMUtils.createElement("div", {
  69. 				innerHTML: elementString,
  70. 			});
  71. 			// @ts-ignore
  72. 			return targetElement.firstChild;
  73. 		},
  74. 		/**
  75. 		 * 生成随机GUID
  76. 		 * @returns {string}
  77. 		 */
  78. 		getRandomGUID() {
  79. 			function randomId() {
  80. 				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  81. 			}
  82. 			return `${randomId()}${randomId()}-${randomId()}-${randomId()}-${randomId()}-${randomId()}${randomId()}${randomId()}`;
  83. 		},
  84. 		/**
  85. 		 * 判断元素/页面中是否包含该元素
  86. 		 * @param {HTMLElement} target （可选）
  87. 		 * @param {HTMLElement[]|HTMLElement} sourceList
  88. 		 */
  89. 		// @ts-ignore
  90. 		contains(target, sourceList) {
  91. 			if (arguments.length === 1) {
  92. 				return this.contains(
  93. 					document.body || document.documentElement,
  94. 					arguments[0]
  95. 				);
  96. 			}
  97. 			// @ts-ignore
  98. 			if (typeof sourceList[Symbol.iterator] === "function") {
  99. 				let flag = true;
  100. 				// @ts-ignore
  101. 				for (const sourceNode of sourceList) {
  102. 					if (!target.contains(sourceNode)) {
  103. 						flag = false;
  104. 						break;
  105. 					}
  106. 				}
  107. 				return flag;
  108. 			} else {
  109. 				// @ts-ignore
  110. 				return this.contains(target, [sourceList]);
  111. 			}
  112. 		},
  113. 		/**
  114. 		 * 元素后追加元素
  115. 		 * @param {HTMLElement} target （可选）
  116. 		 * @param {HTMLElement[]|HTMLElement} sourceList
  117. 		 */
  118. 		appendChild(target, sourceList) {
  119. 			if (arguments.length === 1) {
  120. 				this.appendChild(
  121. 					document.body || document.documentElement,
  122. 					arguments[0]
  123. 				);
  124. 				return;
  125. 			}
  126. 			// @ts-ignore
  127. 			if (typeof sourceList[Symbol.iterator] === "function") {
  128. 				// @ts-ignore
  129. 				sourceList.forEach((item) => {
  130. 					this.appendChild(target, item);
  131. 				});
  132. 				return;
  133. 			}
  134.  
  135. 			// @ts-ignore
  136. 			target.appendChild(sourceList);
  137. 		},
  138. 		/**
  139. 		 * 删除配置中对应的对象
  140. 		 * @param {any[]} targets
  141. 		 * @param {string} guid
  142. 		 * @param {boolean} removeAll 是否全部删除
  143. 		 * @returns
  144. 		 */
  145. 		configRemove(targets, guid, removeAll = false) {
  146. 			/**
  147. 			 *
  148. 			 * @param {PopsLayerCommonConfig} item
  149. 			 */
  150. 			function removeItem(item) {
  151. 				item?.animElement?.remove();
  152. 				item?.popsElement?.remove();
  153. 				item?.maskElement?.remove();
  154. 				item?.$shadowContainer?.remove();
  155. 			}
  156. 			targets.forEach((target) => {
  157. 				target.forEach(
  158. 					/**
  159. 					 * @param {PopsLayerCommonConfig} item
  160. 					 * @param {number} index
  161. 					 */
  162. 					(item, index) => {
  163. 						if (removeAll || item["guid"] === guid) {
  164. 							if (
  165. 								pops.config.animation.hasOwnProperty(
  166. 									// @ts-ignore
  167. 									item.animElement.getAttribute("anim")
  168. 								)
  169. 							) {
  170. 								item.animElement.style.width = "100%";
  171. 								item.animElement.style.height = "100%";
  172. 								// @ts-ignore
  173. 								item.animElement.style["animation-name"] =
  174. 									item.animElement.getAttribute("anim") + "-reverse";
  175. 								if (
  176. 									pops.config.animation.hasOwnProperty(
  177. 										// @ts-ignore
  178. 										item.animElement.style["animation-name"]
  179. 									)
  180. 								) {
  181. 									PopsDOMUtils.on(
  182. 										item.animElement,
  183. 										// @ts-ignore
  184. 										PopsDOMUtils.getAnimationEndNameList(),
  185. 										void 0,
  186. 										function () {
  187. 											removeItem(item);
  188. 										},
  189. 										{
  190. 											capture: true,
  191. 										}
  192. 									);
  193. 								} else {
  194. 									removeItem(item);
  195. 								}
  196. 							} else {
  197. 								removeItem(item);
  198. 							}
  199. 							target.splice(index, 1);
  200. 						}
  201. 					}
  202. 				);
  203. 			});
  204.  
  205. 			return targets;
  206. 		},
  207. 		/**
  208. 		 * 隐藏
  209. 		 * @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"} popsType
  210. 		 * @param {any[]} source
  211. 		 * @param {string} guid
  212. 		 * @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
  213. 		 * @param {HTMLElement} animElement
  214. 		 * @param {HTMLElement} maskElement
  215. 		 */
  216. 		hide(popsType, source, guid, config, animElement, maskElement) {
  217. 			let popsElement = animElement.querySelector(".pops[type-value]");
  218. 			if (popsType === "drawer") {
  219. 				setTimeout(() => {
  220. 					maskElement.style.setProperty("display", "none");
  221. 					// @ts-ignore
  222. 					if (["top", "bottom"].includes(config.direction)) {
  223. 						// @ts-ignore
  224. 						popsElement.style.setProperty("height", 0);
  225. 						// @ts-ignore
  226. 					} else if (["left", "right"].includes(config.direction)) {
  227. 						// @ts-ignore
  228. 						popsElement.style.setProperty("width", 0);
  229. 					} else {
  230. 						// @ts-ignore
  231. 						console.error("未知direction：", config.direction);
  232. 					}
  233. 					// @ts-ignore
  234. 				}, config.closeDelay);
  235. 			} else {
  236. 				source.forEach((item) => {
  237. 					if (item.guid === guid) {
  238. 						/* 存在动画 */
  239. 						item.animElement.style.width = "100%";
  240. 						item.animElement.style.height = "100%";
  241. 						item.animElement.style["animation-name"] =
  242. 							item.animElement.getAttribute("anim") + "-reverse";
  243. 						if (
  244. 							pops.config.animation.hasOwnProperty(
  245. 								item.animElement.style["animation-name"]
  246. 							)
  247. 						) {
  248. 							function animationendCallBack() {
  249. 								item.animElement.style.display = "none";
  250. 								if (item.maskElement) {
  251. 									item.maskElement.style.display = "none";
  252. 								}
  253. 								PopsDOMUtils.off(
  254. 									item.animElement,
  255. 									// @ts-ignore
  256. 									PopsDOMUtils.getAnimationEndNameList(),
  257. 									void 0,
  258. 									animationendCallBack,
  259. 									{
  260. 										capture: true,
  261. 									}
  262. 								);
  263. 							}
  264. 							PopsDOMUtils.on(
  265. 								item.animElement,
  266. 								// @ts-ignore
  267. 								PopsDOMUtils.getAnimationEndNameList(),
  268. 								void 0,
  269. 								animationendCallBack,
  270. 								{
  271. 									capture: true,
  272. 								}
  273. 							);
  274. 						} else {
  275. 							item.animElement.style.display = "none";
  276. 							if (item.maskElement) {
  277. 								item.maskElement.style.display = "none";
  278. 							}
  279. 						}
  280.  
  281. 						return;
  282. 					}
  283. 				});
  284. 			}
  285. 		},
  286. 		/**
  287. 		 * 显示
  288. 		 * @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"} popsType
  289. 		 * @param {any[]} source
  290. 		 * @param {string} guid
  291. 		 * @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
  292. 		 * @param {HTMLElement} animElement
  293. 		 * @param {HTMLElement} maskElement
  294. 		 */
  295. 		show(popsType, source, guid, config, animElement, maskElement) {
  296. 			let popsElement = animElement.querySelector(".pops[type-value]");
  297. 			if (popsType === "drawer") {
  298. 				setTimeout(() => {
  299. 					maskElement.style.setProperty("display", "");
  300. 					// @ts-ignore
  301. 					if (["top", "bottom"].includes(config.direction)) {
  302. 						// @ts-ignore
  303. 						popsElement.style.setProperty("height", config.size);
  304. 						// @ts-ignore
  305. 					} else if (["left", "right"].includes(config.direction)) {
  306. 						// @ts-ignore
  307. 						popsElement.style.setProperty("width", config.size);
  308. 					} else {
  309. 						// @ts-ignore
  310. 						console.error("未知direction：", config.direction);
  311. 					}
  312. 					// @ts-ignore
  313. 				}, config.openDelay);
  314. 			} else {
  315. 				source.forEach((item) => {
  316. 					if (item.guid === guid) {
  317. 						item.animElement.style.width = "";
  318. 						item.animElement.style.height = "";
  319. 						item.animElement.style["animation-name"] = item.animElement
  320. 							.getAttribute("anim")
  321. 							.replace("-reverse", "");
  322. 						if (
  323. 							pops.config.animation.hasOwnProperty(
  324. 								item.animElement.style["animation-name"]
  325. 							)
  326. 						) {
  327. 							item.animElement.style.display = "";
  328. 							if (item.maskElement) {
  329. 								item.maskElement.style.display = "";
  330. 							}
  331. 							function animationendCallBack() {
  332. 								PopsDOMUtils.off(
  333. 									item.animElement,
  334. 									// @ts-ignore
  335. 									PopsDOMUtils.getAnimationEndNameList(),
  336. 									void 0,
  337. 									animationendCallBack,
  338. 									{
  339. 										capture: true,
  340. 									}
  341. 								);
  342. 							}
  343. 							PopsDOMUtils.on(
  344. 								item.animElement,
  345. 								// @ts-ignore
  346. 								PopsDOMUtils.getAnimationEndNameList(),
  347. 								void 0,
  348. 								animationendCallBack,
  349. 								{
  350. 									capture: true,
  351. 								}
  352. 							);
  353. 						} else {
  354. 							item.animElement.style.display = "";
  355. 							if (item.maskElement) {
  356. 								item.maskElement.style.display = "";
  357. 							}
  358. 						}
  359. 					}
  360. 					return;
  361. 				});
  362. 			}
  363. 		},
  364. 		/**
  365. 		 * 关闭
  366. 		 * @param {string} popsType
  367. 		 * @param {any} source
  368. 		 * @param {string} guid
  369. 		 * @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
  370. 		 * @param {HTMLElement} animElement
  371. 		 */
  372. 		close(popsType, source, guid, config, animElement) {
  373. 			let popsElement = animElement.querySelector(".pops[type-value]");
  374. 			/**
  375. 			 * 动画结束事件
  376. 			 */
  377. 			function transitionendEvent() {
  378. 				/**
  379. 				 *
  380. 				 * @param {TransitionEvent} event
  381. 				 */
  382. 				function closeCallBack(event) {
  383. 					if (event.propertyName !== "transform") {
  384. 						return;
  385. 					}
  386. 					// @ts-ignore
  387. 					PopsDOMUtils.off(
  388. 						popsElement,
  389. 						PopsDOMUtils.getTransitionEndNameList(),
  390. 						void 0,
  391. 						closeCallBack
  392. 					);
  393. 					PopsUtils.configRemove([source], guid);
  394. 				}
  395. 				/* 监听过渡结束 */
  396. 				// @ts-ignore
  397. 				PopsDOMUtils.on(
  398. 					popsElement,
  399. 					PopsDOMUtils.getTransitionEndNameList(),
  400. 					void 0,
  401. 					closeCallBack
  402. 				);
  403. 				// @ts-ignore
  404. 				let popsTransForm = getComputedStyle(popsElement).transform;
  405. 				if (popsTransForm !== "none") {
  406. 					PopsDOMUtils.trigger(
  407. 						// @ts-ignore
  408. 						popsElement,
  409. 						PopsDOMUtils.getTransitionEndNameList(),
  410. 						void 0,
  411. 						true
  412. 					);
  413. 					return;
  414. 				}
  415. 				// @ts-ignore
  416. 				if (["top"].includes(config.direction)) {
  417. 					// @ts-ignore
  418. 					popsElement.style.setProperty("transform", "translateY(-100%)");
  419. 					// @ts-ignore
  420. 				} else if (["bottom"].includes(config.direction)) {
  421. 					// @ts-ignore
  422. 					popsElement.style.setProperty("transform", "translateY(100%)");
  423. 					// @ts-ignore
  424. 				} else if (["left"].includes(config.direction)) {
  425. 					// @ts-ignore
  426. 					popsElement.style.setProperty("transform", "translateX(-100%)");
  427. 					// @ts-ignore
  428. 				} else if (["right"].includes(config.direction)) {
  429. 					// @ts-ignore
  430. 					popsElement.style.setProperty("transform", "translateX(100%)");
  431. 				} else {
  432. 					// @ts-ignore
  433. 					console.error("未知direction：", config.direction);
  434. 				}
  435. 			}
  436.  
  437. 			if (popsType === "drawer") {
  438. 				setTimeout(() => {
  439. 					transitionendEvent();
  440. 					// @ts-ignore
  441. 				}, config.closeDelay);
  442. 			} else {
  443. 				PopsUtils.configRemove([source], guid);
  444. 			}
  445. 		},
  446. 		/**
  447. 		 * 获取所有弹窗中的最大的z-index
  448. 		 * @param {number} defaultValue
  449. 		 */
  450. 		getPopsMaxZIndex(defaultValue) {
  451. 			let maxZIndex = 0;
  452. 			// @ts-ignore
  453. 			let maxZIndexElement = null;
  454.  
  455. 			Object.keys(pops.config.layer).forEach((item) => {
  456. 				// @ts-ignore
  457. 				pops.config.layer[item].forEach(
  458. 					/**
  459. 					 * @param {PopsLayerCommonConfig} item2
  460. 					 */
  461. 					(item2) => {
  462. 						let itemZIndex = parseInt(
  463. 							getComputedStyle(item2["animElement"]).zIndex
  464. 						);
  465. 						maxZIndexElement =
  466. 							// @ts-ignore
  467. 							itemZIndex > maxZIndex ? item2["animElement"] : maxZIndexElement;
  468. 						maxZIndex = itemZIndex > maxZIndex ? itemZIndex : maxZIndex;
  469. 					}
  470. 				);
  471. 			});
  472. 			maxZIndex = maxZIndex === 0 ? defaultValue : maxZIndex;
  473. 			return { zIndex: maxZIndex, animElement: maxZIndexElement };
  474. 		},
  475. 		/**
  476. 		 * 获取CSS Rule
  477. 		 * @param {StyleSheet} sheet
  478. 		 * @returns
  479. 		 */
  480. 		getKeyFrames(sheet) {
  481. 			let result = {};
  482. 			// @ts-ignore
  483. 			Object.keys(sheet.cssRules).forEach((key) => {
  484. 				if (
  485. 					// @ts-ignore
  486. 					sheet.cssRules[key].type === 7 &&
  487. 					// @ts-ignore
  488. 					sheet.cssRules[key].name.startsWith("pops-anim-")
  489. 				) {
  490. 					// @ts-ignore
  491. 					result[sheet.cssRules[key].name] = sheet.cssRules[key];
  492. 				}
  493. 			});
  494. 			return result;
  495. 		},
  496. 		/**
  497. 		 * 拖拽元素
  498. 		 * 说明：
  499. 		 * + 元素的position为absolute或者fixed
  500. 		 * + 会为元素的
  501. 		 * @param {HTMLElement} moveElement
  502. 		 * @param {{
  503. 		 * dragElement: HTMLElement,
  504. 		 * limit: boolean,
  505. 		 * extraDistance: number,
  506. 		 * container: Element|Window,
  507. 		 * moveCallBack?: (moveElement: HTMLElement,left: number,top: number) => void,
  508. 		 * endCallBack?: (moveElement: HTMLElement,left: number,top: number) => void,
  509. 		 * preventEvent?: (event: TouchEvent|PointerEvent) => boolean;
  510. 		 * }} options
  511. 		 */
  512. 		// @ts-ignore
  513. 		drag(moveElement, options = {}) {
  514. 			options = Object.assign(
  515. 				{
  516. 					limit: true,
  517. 					extraDistance: 3,
  518. 					container: globalThis,
  519. 				},
  520. 				options
  521. 			);
  522. 			let isMove = false;
  523. 			/* 点击元素，left偏移 */
  524. 			let clickElementLeftOffset = 0;
  525. 			/* 点击元素，top偏移 */
  526. 			let clickElementTopOffset = 0;
  527. 			let AnyTouch = PopsUtils.AnyTouch();
  528. 			// @ts-ignore
  529. 			let anyTouchElement = new AnyTouch(options.dragElement, {
  530. 				// @ts-ignore
  531. 				preventEvent(event) {
  532. 					if (typeof options.preventEvent === "function") {
  533. 						return options.preventEvent(event);
  534. 					} else {
  535. 						return false;
  536. 					}
  537. 				},
  538. 			});
  539. 			// @ts-ignore
  540. 			PopsDOMUtils.css(options.dragElement, {
  541. 				cursor: "move",
  542. 			});
  543. 			/**
  544. 			 * 获取移动元素的transform偏移
  545. 			 */
  546. 			// @ts-ignore
  547. 			function getTransform(element) {
  548. 				let transform_left = 0;
  549. 				let transform_top = 0;
  550. 				let elementTransform = globalThis.getComputedStyle(element).transform;
  551. 				if (
  552. 					elementTransform !== "none" &&
  553. 					elementTransform != null &&
  554. 					elementTransform !== ""
  555. 				) {
  556. 					// @ts-ignore
  557. 					let elementTransformSplit = elementTransform
  558. 						.match(/\((.+)\)/)[1]
  559. 						.split(",");
  560. 					transform_left = Math.abs(parseInt(elementTransformSplit[4]));
  561. 					transform_top = Math.abs(parseInt(elementTransformSplit[5]));
  562. 				}
  563. 				return {
  564. 					transformLeft: transform_left,
  565. 					transformTop: transform_top,
  566. 				};
  567. 			}
  568. 			/**
  569. 			 * 修改移动的元素的style
  570. 			 */
  571. 			// @ts-ignore
  572. 			function changeMoveElementStyle(element) {
  573. 				let old_transitionDuration = element.style.transitionDuration;
  574. 				if (globalThis.getComputedStyle(element).transitionDuration !== "0s") {
  575. 					element.style.transitionDuration = "0s";
  576. 				}
  577. 				return () => {
  578. 					element.style.transitionDuration = old_transitionDuration;
  579. 				};
  580. 			}
  581. 			/**
  582. 			 * 获取容器的高度、宽度，一般是window为容器
  583. 			 */
  584. 			// @ts-ignore
  585. 			function getContainerWidthOrHeight(container) {
  586. 				container = container ?? globalThis;
  587. 				return {
  588. 					width: PopsDOMUtils.width(container),
  589. 					height: PopsDOMUtils.height(container),
  590. 				};
  591. 			}
  592. 			/**
  593. 			 * 获取容器的最小left、top偏移
  594. 			 */
  595. 			// @ts-ignore
  596. 			function getContainerTopOrLeft(container) {
  597. 				container = container ?? globalThis;
  598. 				if (PopsUtils.isWin(container)) {
  599. 					return {
  600. 						left: 0,
  601. 						top: 0,
  602. 					};
  603. 				} else {
  604. 					let rect = container.getBoundingClientRect();
  605. 					return {
  606. 						left: rect.left,
  607. 						top: rect.top,
  608. 					};
  609. 				}
  610. 			}
  611. 			let transformInfo = getTransform(moveElement);
  612. 			let transformLeft = transformInfo.transformLeft;
  613. 			let transformTop = transformInfo.transformTop;
  614. 			// @ts-ignore
  615. 			let resumeMoveElementStyle = null;
  616. 			// @ts-ignore
  617. 			anyTouchElement.on("pan", function (event) {
  618. 				if (!isMove) {
  619. 					isMove = true;
  620. 					let rect = options.dragElement.getBoundingClientRect();
  621. 					clickElementLeftOffset = event.x - rect.left;
  622. 					clickElementTopOffset = event.y - rect.top;
  623. 					transformInfo = getTransform(moveElement);
  624. 					transformLeft = transformInfo.transformLeft;
  625. 					transformTop = transformInfo.transformTop;
  626. 					//if (event.nativeEvent.offsetX) {
  627. 					//  clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
  628. 					//} else {
  629. 					//  clickElementLeftOffset = parseInt(event.getOffset().x);
  630. 					//}
  631. 					//if (event.nativeEvent.offsetY) {
  632. 					//  clickElementTopOffset = parseInt(event.nativeEvent.offsetY);
  633. 					//} else {
  634. 					//  clickElementTopOffset = parseInt(event.getOffset().y);
  635. 					//}
  636. 					resumeMoveElementStyle = changeMoveElementStyle(moveElement);
  637. 				}
  638.  
  639. 				/** 当前移动的left偏移 */
  640. 				let currentMoveLeftOffset =
  641. 					event.x - clickElementLeftOffset + transformLeft;
  642. 				/** 当前移动的top偏移 */
  643. 				let currentMoveTopOffset =
  644. 					event.y - clickElementTopOffset + transformTop;
  645. 				/* 拖拽移动 */
  646. 				if (event.phase === "move") {
  647. 					if (options.limit) {
  648. 						/* 限制在容器内移动 */
  649. 						/* left偏移最大值 */
  650. 						let maxLeftOffset =
  651. 							getContainerWidthOrHeight(options.container).width -
  652. 							PopsDOMUtils.width(moveElement) +
  653. 							transformLeft;
  654. 						let { left: minLeftOffset, top: minTopOffset } =
  655. 							getContainerTopOrLeft(options.container);
  656. 						/* top偏移的最大值 */
  657. 						let maxTopOffset =
  658. 							getContainerWidthOrHeight(options.container).height -
  659. 							PopsDOMUtils.height(moveElement) +
  660. 							transformTop;
  661. 						if (currentMoveLeftOffset > maxLeftOffset) {
  662. 							/* 不允许超过容器的最大宽度 */
  663. 							currentMoveLeftOffset = maxLeftOffset;
  664. 						}
  665. 						if (currentMoveTopOffset > maxTopOffset) {
  666. 							/* 不允许超过容器的最大高度 */
  667. 							currentMoveTopOffset = maxTopOffset;
  668. 						}
  669. 						if (
  670. 							currentMoveLeftOffset - options.extraDistance * 2 <
  671. 							minLeftOffset + transformLeft
  672. 						) {
  673. 							/* 不允许left偏移小于容器最小值 */
  674. 							currentMoveLeftOffset = minLeftOffset + transformLeft;
  675. 							/* 最左边 +额外距离 */
  676. 							currentMoveLeftOffset += options.extraDistance;
  677. 						} else {
  678. 							/* 最右边 -额外距离 */
  679. 							currentMoveLeftOffset -= options.extraDistance;
  680. 						}
  681. 						if (
  682. 							currentMoveTopOffset - options.extraDistance * 2 <
  683. 							minTopOffset + transformTop
  684. 						) {
  685. 							/* 不允许top偏移小于容器最小值 */
  686. 							currentMoveTopOffset = minTopOffset + transformTop;
  687. 							/* 最上面 +额外距离 */
  688. 							currentMoveTopOffset += options.extraDistance;
  689. 						} else {
  690. 							/* 最下面 -额外距离 */
  691. 							currentMoveTopOffset -= options.extraDistance;
  692. 						}
  693. 					}
  694. 					if (typeof options.moveCallBack === "function") {
  695. 						options.moveCallBack(
  696. 							moveElement,
  697. 							currentMoveLeftOffset,
  698. 							currentMoveTopOffset
  699. 						);
  700. 					}
  701. 					// @ts-ignore
  702. 					PopsDOMUtils.css(moveElement, {
  703. 						left: currentMoveLeftOffset + "px",
  704. 						top: currentMoveTopOffset + "px",
  705. 					});
  706. 				}
  707.  
  708. 				/* 停止拖拽 */
  709. 				if (event.phase === "end") {
  710. 					isMove = false;
  711. 					// @ts-ignore
  712. 					if (typeof resumeMoveElementStyle === "function") {
  713. 						// @ts-ignore
  714. 						resumeMoveElementStyle();
  715. 						resumeMoveElementStyle = null;
  716. 					}
  717. 					if (typeof options.endCallBack === "function") {
  718. 						options.endCallBack(
  719. 							moveElement,
  720. 							currentMoveLeftOffset,
  721. 							currentMoveTopOffset
  722. 						);
  723. 					}
  724. 				}
  725. 			});
  726. 			/* 因为会覆盖上面的点击事件，主动触发一下 */
  727. 			// @ts-ignore
  728. 			anyTouchElement.on(["click", "tap"], function (event) {
  729. 				// @ts-ignore
  730. 				event.changedPoints.forEach((item) => {
  731. 					// @ts-ignore
  732. 					PopsDOMUtils.trigger(item.target, "click", void 0, transformLeft);
  733. 				});
  734. 			});
  735. 		},
  736. 		/**
  737. 		 * AnyTouch
  738. 		 * + https://fastly.jsdelivr.net/npm/any-touch@2.2.0/dist/any-touch.umd.min.js
  739. 		 * + https://github.com/any86/any-touch/blob/master/README.CN.md
  740. 		 */
  741. 		AnyTouch() {
  742. 			let anyTouch = null;
  743. 			// @ts-ignore
  744. 			// @ts-ignore
  745. 			(function (global, factory) {
  746. 				anyTouch = factory();
  747. 			})(this, function () {
  748. 				"use strict";
  749.  
  750. 				/*! *****************************************************************************
  751.         Copyright (c) Microsoft Corporation.
  752.     
  753.         Permission to use, copy, modify, and/or distribute this software for any
  754.         purpose with or without fee is hereby granted.
  755.     
  756.         THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  757.         REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  758.         AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  759.         INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  760.         LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  761.         OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  762.         PERFORMANCE OF THIS SOFTWARE.
  763.         ***************************************************************************** */
  764. 				/* global Reflect, Promise */
  765.  
  766. 				// @ts-ignore
  767. 				var extendStatics = function (d, b) {
  768. 					extendStatics =
  769. 						Object.setPrototypeOf ||
  770. 						({ __proto__: [] } instanceof Array &&
  771. 							function (d, b) {
  772. 								d.__proto__ = b;
  773. 							}) ||
  774. 						function (d, b) {
  775. 							for (var p in b)
  776. 								if (Object.hasOwnProperty.call(b, p)) d[p] = b[p];
  777. 						};
  778. 					return extendStatics(d, b);
  779. 				};
  780.  
  781. 				// @ts-ignore
  782. 				function __extends(d, b) {
  783. 					if (typeof b !== "function" && b !== null)
  784. 						throw new TypeError(
  785. 							"Class extends value " +
  786. 								String(b) +
  787. 								" is not a constructor or null"
  788. 						);
  789. 					extendStatics(d, b);
  790. 					function __() {
  791. 						this.constructor = d;
  792. 					}
  793. 					d.prototype =
  794. 						b === null
  795. 							? Object.create(b)
  796. 							: ((__.prototype = b.prototype), new __());
  797. 				}
  798.  
  799. 				// @ts-ignore
  800. 				var __assign = function () {
  801. 					__assign =
  802. 						Object.assign ||
  803. 						function __assign(t) {
  804. 							for (var s, i = 1, n = arguments.length; i < n; i++) {
  805. 								s = arguments[i];
  806. 								for (var p in s)
  807. 									if (Object.hasOwnProperty.call(s, p)) t[p] = s[p];
  808. 							}
  809. 							return t;
  810. 						};
  811. 					// @ts-ignore
  812. 					return __assign.apply(this, arguments);
  813. 				};
  814.  
  815. 				// @ts-ignore
  816. 				function __values(o) {
  817. 					var s = typeof Symbol === "function" && Symbol.iterator,
  818. 						m = s && o[s],
  819. 						i = 0;
  820. 					if (m) return m.call(o);
  821. 					if (o && typeof o.length === "number")
  822. 						return {
  823. 							next: function () {
  824. 								if (o && i >= o.length) o = void 0;
  825. 								return { value: o && o[i++], done: !o };
  826. 							},
  827. 						};
  828. 					throw new TypeError(
  829. 						s ? "Object is not iterable." : "Symbol.iterator is not defined."
  830. 					);
  831. 				}
  832.  
  833. 				var AnyEvent = (function () {
  834. 					function AnyEvent() {
  835. 						this.__map = {};
  836. 					}
  837. 					// @ts-ignore
  838. 					AnyEvent.prototype.beforeEach = function (interceptor) {
  839. 						this.__interceptor = interceptor;
  840. 					};
  841. 					// @ts-ignore
  842. 					AnyEvent.prototype.on = function (typeOrTypes, listener) {
  843. 						var e_1, _a;
  844. 						var types = Array.isArray(typeOrTypes)
  845. 							? typeOrTypes
  846. 							: [typeOrTypes];
  847. 						try {
  848. 							for (
  849. 								var types_1 = __values(types), types_1_1 = types_1.next();
  850. 								!types_1_1.done;
  851. 								types_1_1 = types_1.next()
  852. 							) {
  853. 								var type = types_1_1.value;
  854. 								// @ts-ignore
  855. 								this.__map[type] = this.__map[type] || [];
  856. 								// @ts-ignore
  857. 								var listeners = this.__map[type];
  858. 								if (listeners) {
  859. 									listeners.push(listener);
  860. 								}
  861. 							}
  862. 						} catch (e_1_1) {
  863. 							e_1 = { error: e_1_1 };
  864. 						} finally {
  865. 							try {
  866. 								if (types_1_1 && !types_1_1.done && (_a = types_1.return))
  867. 									_a.call(types_1);
  868. 							} finally {
  869. 								if (e_1) throw e_1.error;
  870. 							}
  871. 						}
  872. 						return this;
  873. 					};
  874. 					// @ts-ignore
  875. 					AnyEvent.prototype.emit = function (type, payload, callback) {
  876. 						var _this = this;
  877. 						if (void 0 !== this.__interceptor) {
  878. 							this.__interceptor(type, function () {
  879. 								_this.__emit(type, payload);
  880. 								callback && callback();
  881. 							});
  882. 						} else {
  883. 							this.__emit(type, payload);
  884. 							callback && callback();
  885. 						}
  886. 					};
  887. 					// @ts-ignore
  888. 					AnyEvent.prototype.__emit = function (type, event) {
  889. 						var e_2, _a;
  890. 						// @ts-ignore
  891. 						var listeners = this.__map[type];
  892. 						if (
  893. 							Array.isArray(listeners) &&
  894. 							(listeners === null || listeners === void 0
  895. 								? void 0
  896. 								: listeners.length)
  897. 						) {
  898. 							try {
  899. 								for (
  900. 									var listeners_1 = __values(listeners),
  901. 										listeners_1_1 = listeners_1.next();
  902. 									!listeners_1_1.done;
  903. 									listeners_1_1 = listeners_1.next()
  904. 								) {
  905. 									var listener = listeners_1_1.value;
  906. 									listener(event, type);
  907. 								}
  908. 							} catch (e_2_1) {
  909. 								e_2 = { error: e_2_1 };
  910. 							} finally {
  911. 								try {
  912. 									if (
  913. 										listeners_1_1 &&
  914. 										!listeners_1_1.done &&
  915. 										(_a = listeners_1.return)
  916. 									)
  917. 										_a.call(listeners_1);
  918. 								} finally {
  919. 									if (e_2) throw e_2.error;
  920. 								}
  921. 							}
  922. 						}
  923. 						this.event = event;
  924. 					};
  925. 					// @ts-ignore
  926. 					AnyEvent.prototype.off = function (type, listener) {
  927. 						// @ts-ignore
  928. 						var listeners = this.__map[type];
  929. 						if (void 0 !== listeners) {
  930. 							if (void 0 === listener) {
  931. 								// @ts-ignore
  932. 								delete this.__map[type];
  933. 							} else {
  934. 								// @ts-ignore
  935. 								var index = listeners.findIndex(function (cb) {
  936. 									return cb === listener;
  937. 								});
  938. 								listeners.splice(index, 1);
  939. 							}
  940. 						}
  941. 					};
  942. 					AnyEvent.prototype.destroy = function () {
  943. 						this.__map = {};
  944. 					};
  945. 					return AnyEvent;
  946. 				})();
  947.  
  948. 				var TOUCH_START = "touchstart";
  949. 				var TOUCH_MOVE = "touchmove";
  950. 				var TOUCH_END = "touchend";
  951. 				var TOUCH_CANCEL = "touchcancel";
  952. 				var MOUSE_UP = "mouseup";
  953. 				var MOUSE_MOVE = "mousemove";
  954. 				var MOUSE_DOWN = "mousedown";
  955. 				var TYPE_START$1 = "start";
  956. 				var TYPE_MOVE$1 = "move";
  957. 				var TYPE_END$1 = "end";
  958. 				// @ts-ignore
  959. 				function isFunction(input) {
  960. 					return "[object Function]" === Object.prototype.toString.call(input);
  961. 				}
  962.  
  963. 				var CLIENT_X = "clientX";
  964. 				var CLIENT_Y = "clientY";
  965. 				var COMPUTE_INTERVAL = 16;
  966. 				var TYPE_START = "start";
  967. 				var TYPE_MOVE = "move";
  968. 				var TYPE_CANCEL = "cancel";
  969. 				var TYPE_END = "end";
  970. 				var DIRECTION_LEFT = "left";
  971. 				var DIRECTION_RIGHT = "right";
  972. 				var DIRECTION_UP = "up";
  973. 				var DIRECTION_DOWN = "down";
  974.  
  975. 				var _a;
  976. 				var STATUS_CODE_AND_NAME_MAP =
  977. 					((_a = {}),
  978. 					// @ts-ignore
  979. 					(_a[4] = TYPE_START),
  980. 					// @ts-ignore
  981. 					(_a[5] = TYPE_MOVE),
  982. 					// @ts-ignore
  983. 					(_a[1] = TYPE_END),
  984. 					// @ts-ignore
  985. 					(_a[3] = TYPE_CANCEL),
  986. 					_a);
  987. 				// @ts-ignore
  988. 				function getStatusName(code) {
  989. 					// @ts-ignore
  990. 					return STATUS_CODE_AND_NAME_MAP[code];
  991. 				}
  992. 				// @ts-ignore
  993. 				function flow(isVaild, lastStatus, phase) {
  994. 					var _a, _b, _c, _d, _e, _f, _g;
  995. 					var STATE_MAP = {
  996. 						1:
  997. 							((_a = {}),
  998. 							// @ts-ignore
  999. 							(_a[0] = ((_b = {}), (_b[TYPE_MOVE] = 4), _b)),
  1000. 							// @ts-ignore
  1001. 							(_a[4] =
  1002. 								((_c = {}),
  1003. 								// @ts-ignore
  1004. 								(_c[TYPE_MOVE] = 5),
  1005. 								// @ts-ignore
  1006. 								(_c[TYPE_END] = 1),
  1007. 								// @ts-ignore
  1008. 								(_c[TYPE_CANCEL] = 3),
  1009. 								_c)),
  1010. 							// @ts-ignore
  1011. 							(_a[5] =
  1012. 								((_d = {}),
  1013. 								// @ts-ignore
  1014. 								(_d[TYPE_MOVE] = 5),
  1015. 								// @ts-ignore
  1016. 								(_d[TYPE_END] = 1),
  1017. 								// @ts-ignore
  1018. 								(_d[TYPE_CANCEL] = 3),
  1019. 								_d)),
  1020. 							_a),
  1021. 						0:
  1022. 							((_e = {}),
  1023. 							// @ts-ignore
  1024. 							(_e[4] =
  1025. 								((_f = {}),
  1026. 								// @ts-ignore
  1027. 								(_f[TYPE_MOVE] = 2),
  1028. 								// @ts-ignore
  1029. 								(_f[TYPE_END] = 1),
  1030. 								// @ts-ignore
  1031. 								(_f[TYPE_CANCEL] = 3),
  1032. 								_f)),
  1033. 							// @ts-ignore
  1034. 							(_e[5] =
  1035. 								((_g = {}),
  1036. 								// @ts-ignore
  1037. 								(_g[TYPE_START] = 2),
  1038. 								// @ts-ignore
  1039. 								(_g[TYPE_MOVE] = 2),
  1040. 								// @ts-ignore
  1041. 								(_g[TYPE_END] = 1),
  1042. 								// @ts-ignore
  1043. 								(_g[TYPE_CANCEL] = 3),
  1044. 								_g)),
  1045. 							_e),
  1046. 					};
  1047. 					// @ts-ignore
  1048. 					var map = STATE_MAP[Number(isVaild)][lastStatus];
  1049. 					return (void 0 !== map && map[phase]) || 0;
  1050. 				}
  1051. 				// @ts-ignore
  1052. 				function resetState(context) {
  1053. 					if ([1, 3, 2].includes(context.state)) {
  1054. 						context.state = 0;
  1055. 					}
  1056. 				}
  1057. 				// @ts-ignore
  1058. 				function isMoveOrEndOrCancel(state) {
  1059. 					return [5, 1, 3].includes(state);
  1060. 				}
  1061. 				// @ts-ignore
  1062. 				function isDisabled(context) {
  1063. 					if (context.disabled) {
  1064. 						context.state = 0;
  1065. 						return true;
  1066. 					}
  1067. 				}
  1068.  
  1069. 				// @ts-ignore
  1070. 				function createPluginContext(defaultOptions, options) {
  1071. 					return __assign(__assign(__assign({}, defaultOptions), options), {
  1072. 						state: 0,
  1073. 						disabled: false,
  1074. 					});
  1075. 				}
  1076.  
  1077. 				// @ts-ignore
  1078. 				function round2(n) {
  1079. 					return Math.round(n * 100) / 100;
  1080. 				}
  1081.  
  1082. 				function inputCreator() {
  1083. 					var id = 0;
  1084. 					var prevInput;
  1085. 					// @ts-ignore
  1086. 					var activeInput;
  1087. 					// @ts-ignore
  1088. 					var startInput;
  1089. 					// @ts-ignore
  1090. 					var startMultiInput;
  1091. 					// @ts-ignore
  1092. 					return function (basicsInput) {
  1093. 						// @ts-ignore
  1094. 						prevInput = activeInput;
  1095. 						if (void 0 !== basicsInput) {
  1096. 							id = Number.MAX_SAFE_INTEGER > id ? ++id : 1;
  1097. 							var pureInput = extendInput(basicsInput, id);
  1098. 							activeInput = pureInput;
  1099. 							var isStart = pureInput.isStart,
  1100. 								pointLength = pureInput.pointLength;
  1101. 							if (isStart) {
  1102. 								startInput = pureInput;
  1103. 								prevInput = void 0;
  1104. 								if (1 < pointLength) {
  1105. 									startMultiInput = pureInput;
  1106. 								} else {
  1107. 									startMultiInput = void 0;
  1108. 								}
  1109. 							}
  1110. 							return __assign(__assign({}, pureInput), {
  1111. 								prevInput: prevInput,
  1112. 								// @ts-ignore
  1113. 								startMultiInput: startMultiInput,
  1114. 								// @ts-ignore
  1115. 								startInput: startInput,
  1116. 							});
  1117. 						}
  1118. 					};
  1119. 				}
  1120. 				// @ts-ignore
  1121. 				function getCenter(points) {
  1122. 					var length = points.length;
  1123. 					if (0 < length) {
  1124. 						if (1 === length) {
  1125. 							var _a = points[0],
  1126. 								clientX = _a.clientX,
  1127. 								clientY = _a.clientY;
  1128. 							return { x: Math.round(clientX), y: Math.round(clientY) };
  1129. 						}
  1130. 						var countPoint = points.reduce(
  1131. 							// @ts-ignore
  1132. 							function (countPoint, point) {
  1133. 								countPoint.x += point[CLIENT_X];
  1134. 								countPoint.y += point[CLIENT_Y];
  1135. 								return countPoint;
  1136. 							},
  1137. 							{ x: 0, y: 0 }
  1138. 						);
  1139. 						return {
  1140. 							x: Math.round(countPoint.x / length),
  1141. 							y: Math.round(countPoint.y / length),
  1142. 						};
  1143. 					}
  1144. 				}
  1145. 				// @ts-ignore
  1146. 				function extendInput(basicsInput, id) {
  1147. 					var phase = basicsInput.phase,
  1148. 						points = basicsInput.points,
  1149. 						changedPoints = basicsInput.changedPoints,
  1150. 						nativeEvent = basicsInput.nativeEvent;
  1151. 					var pointLength = points.length;
  1152. 					var isStart = TYPE_START === phase;
  1153. 					var isEnd =
  1154. 						(TYPE_END === phase && 0 === pointLength) || TYPE_CANCEL === phase;
  1155. 					var timestamp = Date.now();
  1156. 					var _a = getCenter(points) || getCenter(changedPoints),
  1157. 						// @ts-ignore
  1158. 						x = _a.x,
  1159. 						// @ts-ignore
  1160. 						y = _a.y;
  1161. 					var currentTarget = nativeEvent.currentTarget;
  1162. 					return Object.assign(basicsInput, {
  1163. 						id: id,
  1164. 						x: x,
  1165. 						y: y,
  1166. 						timestamp: timestamp,
  1167. 						isStart: isStart,
  1168. 						isEnd: isEnd,
  1169. 						pointLength: pointLength,
  1170. 						currentTarget: currentTarget,
  1171. 						// @ts-ignore
  1172. 						getOffset: function (el) {
  1173. 							if (el === void 0) {
  1174. 								el = currentTarget;
  1175. 							}
  1176. 							var rect = el.getBoundingClientRect();
  1177. 							return {
  1178. 								x: x - Math.round(rect.left),
  1179. 								y: y - Math.round(rect.top),
  1180. 							};
  1181. 						},
  1182. 					});
  1183. 				}
  1184.  
  1185. 				function mouse() {
  1186. 					// @ts-ignore
  1187. 					var prevPoints;
  1188. 					var isPressed = false;
  1189. 					// @ts-ignore
  1190. 					var _target = null;
  1191. 					var createInput = inputCreator();
  1192. 					// @ts-ignore
  1193. 					return function (event) {
  1194. 						var clientX = event.clientX,
  1195. 							clientY = event.clientY,
  1196. 							type = event.type,
  1197. 							button = event.button,
  1198. 							target = event.target;
  1199. 						var points = [
  1200. 							{ clientX: clientX, clientY: clientY, target: target },
  1201. 						];
  1202. 						var phase;
  1203. 						if (MOUSE_DOWN === type && 0 === button) {
  1204. 							_target = target;
  1205. 							isPressed = true;
  1206. 							phase = TYPE_START$1;
  1207. 						} else if (isPressed) {
  1208. 							if (MOUSE_MOVE === type) {
  1209. 								phase = TYPE_MOVE$1;
  1210. 							} else if (MOUSE_UP === type) {
  1211. 								points = [];
  1212. 								phase = TYPE_END$1;
  1213. 								isPressed = false;
  1214. 							}
  1215. 						} else {
  1216. 							return;
  1217. 						}
  1218. 						// @ts-ignore
  1219. 						var changedPoints = prevPoints || [
  1220. 							{ clientX: clientX, clientY: clientY, target: target },
  1221. 						];
  1222. 						prevPoints = [
  1223. 							{ clientX: clientX, clientY: clientY, target: target },
  1224. 						];
  1225. 						if (void 0 !== phase) {
  1226. 							return createInput({
  1227. 								phase: phase,
  1228. 								changedPoints: changedPoints,
  1229. 								points: points,
  1230. 								// @ts-ignore
  1231. 								target: _target,
  1232. 								// @ts-ignore
  1233. 								targets: [_target],
  1234. 								nativeEvent: event,
  1235. 							});
  1236. 						}
  1237. 					};
  1238. 				}
  1239.  
  1240. 				// @ts-ignore
  1241. 				function touch(el) {
  1242. 					var createInput = inputCreator();
  1243. 					// @ts-ignore
  1244. 					return function (event) {
  1245. 						// @ts-ignore
  1246. 						var targets = [];
  1247. 						// @ts-ignore
  1248. 						var points = [];
  1249. 						Array.from(event.touches).forEach(function (_a) {
  1250. 							var clientX = _a.clientX,
  1251. 								clientY = _a.clientY,
  1252. 								target = _a.target;
  1253. 							if (el === null || el === void 0 ? void 0 : el.contains(target)) {
  1254. 								targets.push(target);
  1255. 								points.push({
  1256. 									clientX: clientX,
  1257. 									clientY: clientY,
  1258. 									target: target,
  1259. 								});
  1260. 							}
  1261. 						});
  1262. 						var changedPoints = Array.from(event.changedTouches).map(function (
  1263. 							_a
  1264. 						) {
  1265. 							var clientX = _a.clientX,
  1266. 								clientY = _a.clientY,
  1267. 								target = _a.target;
  1268. 							return { clientX: clientX, clientY: clientY, target: target };
  1269. 						});
  1270. 						return createInput({
  1271. 							phase: event.type.replace("touch", ""),
  1272. 							changedPoints: changedPoints,
  1273. 							// @ts-ignore
  1274. 							points: points,
  1275. 							nativeEvent: event,
  1276. 							target: event.target,
  1277. 							// @ts-ignore
  1278. 							targets: targets,
  1279. 						});
  1280. 					};
  1281. 				}
  1282.  
  1283. 				// @ts-ignore
  1284. 				function dispatchDomEvent(typeName, el, payload, eventInit) {
  1285. 					var data = {};
  1286. 					for (var key in payload) {
  1287. 						if (!["target", "currentTarget", "type"].includes(key)) {
  1288. 							// @ts-ignore
  1289. 							data[key] = payload[key];
  1290. 						}
  1291. 					}
  1292. 					// @ts-ignore
  1293. 					var event;
  1294. 					if (document.createEvent) {
  1295. 						event = document.createEvent("HTMLEvents");
  1296. 						event.initEvent(
  1297. 							typeName,
  1298. 							eventInit === null || eventInit === void 0
  1299. 								? void 0
  1300. 								: eventInit.bubbles,
  1301. 							eventInit === null || eventInit === void 0
  1302. 								? void 0
  1303. 								: eventInit.cancelable
  1304. 						);
  1305. 					} else {
  1306. 						event = new Event(typeName, eventInit);
  1307. 					}
  1308. 					Object.assign(event, data, {
  1309. 						match: function () {
  1310. 							return (
  1311. 								payload.targets &&
  1312. 								0 < payload.targets.length &&
  1313. 								// @ts-ignore
  1314. 								payload.targets.every(function (target) {
  1315. 									// @ts-ignore
  1316. 									return event.currentTarget.contains(target);
  1317. 								})
  1318. 							);
  1319. 						},
  1320. 					});
  1321. 					return el.dispatchEvent(event);
  1322. 				}
  1323.  
  1324. 				// @ts-ignore
  1325. 				function canPreventDefault(event, options) {
  1326. 					var preventDefault = options.preventDefault;
  1327. 					if (isFunction(preventDefault)) {
  1328. 						return preventDefault(event);
  1329. 					} else {
  1330. 						return !!preventDefault;
  1331. 					}
  1332. 				}
  1333.  
  1334. 				var ELEMENT_TYPES = [
  1335. 					TOUCH_START,
  1336. 					TOUCH_MOVE,
  1337. 					TOUCH_END,
  1338. 					TOUCH_CANCEL,
  1339. 					MOUSE_DOWN,
  1340. 				];
  1341. 				var WINDOW_TYPES = [MOUSE_MOVE, MOUSE_UP];
  1342. 				// @ts-ignore
  1343. 				function bindElement(el, catchEvent, options) {
  1344. 					ELEMENT_TYPES.forEach(function (type) {
  1345. 						el.addEventListener(type, catchEvent, options);
  1346. 					});
  1347. 					WINDOW_TYPES.forEach(function (type) {
  1348. 						window.addEventListener(type, catchEvent, options);
  1349. 					});
  1350. 					return function () {
  1351. 						ELEMENT_TYPES.forEach(function (types) {
  1352. 							el.removeEventListener(types, catchEvent);
  1353. 						});
  1354. 						WINDOW_TYPES.forEach(function (type) {
  1355. 							window.removeEventListener(type, catchEvent);
  1356. 						});
  1357. 					};
  1358. 				}
  1359.  
  1360. 				var TYPE_COMPUTED = "computed";
  1361. 				var DEFAULT_OPTIONS$6 = {
  1362. 					domEvents: { bubbles: true, cancelable: true },
  1363. 					// @ts-ignore
  1364. 					preventDefault: function (event) {
  1365. 						if (event.target && "tagName" in event.target) {
  1366. 							var tagName = event.target.tagName;
  1367. 							return !/^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(tagName);
  1368. 						}
  1369. 						return false;
  1370. 					},
  1371. 				};
  1372. 				var TYPE_UNBIND = "u";
  1373. 				var TYPE_INPUT = "input";
  1374. 				var TYPE_AT_AFTER = "at:after";
  1375. 				var default_1$1 = (function (_super) {
  1376. 					__extends(default_1, _super);
  1377. 					// @ts-ignore
  1378. 					function default_1(el, options) {
  1379. 						var _a;
  1380. 						// @ts-ignore
  1381. 						var _this = _super.call(this) || this;
  1382. 						// @ts-ignore
  1383. 						_this.v = "2.1.3";
  1384. 						// @ts-ignore
  1385. 						_this.__computeFunctionList = [];
  1386. 						// @ts-ignore
  1387. 						_this.__computeFunctionCreatorList = [];
  1388. 						// @ts-ignore
  1389. 						_this.__pluginContexts = [];
  1390. 						_this.__isIgnoreMouse = false;
  1391. 						// @ts-ignore
  1392. 						_this.el = el;
  1393. 						_this.c = {};
  1394. 						_this.__options = __assign(
  1395. 							__assign({}, DEFAULT_OPTIONS$6),
  1396. 							options
  1397. 						);
  1398. 						// @ts-ignore
  1399. 						var createInputFromTouch = touch(_this.el);
  1400. 						var createInputFromMouse = mouse();
  1401. 						// @ts-ignore
  1402. 						_this.__inputCreatorMap =
  1403. 							((_a = {}),
  1404. 							// @ts-ignore
  1405. 							(_a[TOUCH_START] = createInputFromTouch),
  1406. 							// @ts-ignore
  1407. 							(_a[TOUCH_MOVE] = createInputFromTouch),
  1408. 							// @ts-ignore
  1409. 							(_a[TOUCH_END] = createInputFromTouch),
  1410. 							// @ts-ignore
  1411. 							(_a[TOUCH_CANCEL] = createInputFromTouch),
  1412. 							// @ts-ignore
  1413. 							(_a[MOUSE_DOWN] = createInputFromMouse),
  1414. 							// @ts-ignore
  1415. 							(_a[MOUSE_MOVE] = createInputFromMouse),
  1416. 							// @ts-ignore
  1417. 							(_a[MOUSE_UP] = createInputFromMouse),
  1418. 							_a);
  1419. 						// @ts-ignore
  1420. 						_this.on(TYPE_AT_AFTER, function (payload) {
  1421. 							var target = payload.target,
  1422. 								__type = payload.__type;
  1423. 							var domEvents = _this.__options.domEvents;
  1424. 							// @ts-ignore
  1425. 							if (!!domEvents && void 0 !== _this.el && !!target) {
  1426. 								dispatchDomEvent(__type, target, payload, domEvents);
  1427. 								dispatchDomEvent(TYPE_AT_AFTER, target, payload, domEvents);
  1428. 							}
  1429. 						});
  1430. 						if (void 0 !== el) {
  1431. 							el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
  1432. 							var supportsPassive_1 = false;
  1433. 							try {
  1434. 								var opts = {};
  1435. 								OriginPrototype.Object.defineProperty(opts, "passive", {
  1436. 									get: function () {
  1437. 										supportsPassive_1 = true;
  1438. 									},
  1439. 								});
  1440. 								window.addEventListener(
  1441. 									"_",
  1442. 									function () {
  1443. 										return void 0;
  1444. 									},
  1445. 									opts
  1446. 								);
  1447. 							} catch (_b) {}
  1448. 							// @ts-ignore
  1449. 							_this.on(
  1450. 								TYPE_UNBIND,
  1451. 								bindElement(
  1452. 									el,
  1453. 									_this.catchEvent.bind(_this),
  1454. 									false === _this.__options.preventDefault && supportsPassive_1
  1455. 										? { passive: true }
  1456. 										: { passive: false }
  1457. 								)
  1458. 							);
  1459. 						}
  1460. 						return _this;
  1461. 					}
  1462. 					// @ts-ignore
  1463. 					default_1.prototype.use = function (plugin, pluginOptions) {
  1464. 						// @ts-ignore
  1465. 						this.__pluginContexts.push(plugin(this, pluginOptions));
  1466. 					};
  1467. 					// @ts-ignore
  1468. 					default_1.prototype.catchEvent = function (event) {
  1469. 						// @ts-ignore
  1470. 						var input = this.__inputCreatorMap[event.type](event);
  1471. 						if (void 0 !== input) {
  1472. 							var stopPropagation = function () {
  1473. 								return event.stopPropagation();
  1474. 							};
  1475. 							var stopImmediatePropagation = function () {
  1476. 								return event.stopImmediatePropagation();
  1477. 							};
  1478. 							var preventDefault = function () {
  1479. 								return event.preventDefault();
  1480. 							};
  1481. 							if (canPreventDefault(event, this.__options)) {
  1482. 								preventDefault();
  1483. 							} else {
  1484. 								if ("touchstart" === event.type) {
  1485. 									this.__isIgnoreMouse = true;
  1486. 								} else if ("touchmove" === event.type) {
  1487. 									this.__isIgnoreMouse = false;
  1488. 								}
  1489. 								if (this.__isIgnoreMouse && event.type.startsWith("mouse")) {
  1490. 									if ("mouseup" === event.type) {
  1491. 										this.__isIgnoreMouse = false;
  1492. 									}
  1493. 									return;
  1494. 								}
  1495. 							}
  1496. 							// @ts-ignore
  1497. 							this.emit(TYPE_INPUT, input);
  1498. 							this.emit2("at:".concat(input.phase), input, {});
  1499. 							var computed_1 = {};
  1500. 							// @ts-ignore
  1501. 							this.__computeFunctionList.forEach(function (compute) {
  1502. 								var result = compute(input, computed_1);
  1503. 								if (void 0 !== result) {
  1504. 									for (var key in result) {
  1505. 										// @ts-ignore
  1506. 										computed_1[key] = result[key];
  1507. 									}
  1508. 								}
  1509. 							});
  1510. 							// @ts-ignore
  1511. 							this.emit(
  1512. 								TYPE_COMPUTED,
  1513. 								__assign(__assign(__assign({}, input), computed_1), {
  1514. 									stopPropagation: stopPropagation,
  1515. 									stopImmediatePropagation: stopImmediatePropagation,
  1516. 									preventDefault: preventDefault,
  1517. 								})
  1518. 							);
  1519. 						}
  1520. 					};
  1521. 					default_1.prototype.compute = function (
  1522. 						// @ts-ignore
  1523. 						computeFunctionCreatorList,
  1524. 						// @ts-ignore
  1525. 						callback
  1526. 					) {
  1527. 						var e_1, _a;
  1528. 						try {
  1529. 							for (
  1530. 								var computeFunctionCreatorList_1 = __values(
  1531. 										computeFunctionCreatorList
  1532. 									),
  1533. 									computeFunctionCreatorList_1_1 =
  1534. 										computeFunctionCreatorList_1.next();
  1535. 								!computeFunctionCreatorList_1_1.done;
  1536. 								computeFunctionCreatorList_1_1 =
  1537. 									computeFunctionCreatorList_1.next()
  1538. 							) {
  1539. 								var computeFunctionCreator =
  1540. 									computeFunctionCreatorList_1_1.value;
  1541. 								if (
  1542. 									// @ts-ignore
  1543. 									!this.__computeFunctionCreatorList.includes(
  1544. 										computeFunctionCreator
  1545. 									)
  1546. 								) {
  1547. 									// @ts-ignore
  1548. 									this.__computeFunctionCreatorList.push(
  1549. 										computeFunctionCreator
  1550. 									);
  1551. 									// @ts-ignore
  1552. 									this.__computeFunctionList.push(computeFunctionCreator());
  1553. 								}
  1554. 							}
  1555. 						} catch (e_1_1) {
  1556. 							e_1 = { error: e_1_1 };
  1557. 						} finally {
  1558. 							try {
  1559. 								if (
  1560. 									computeFunctionCreatorList_1_1 &&
  1561. 									!computeFunctionCreatorList_1_1.done &&
  1562. 									(_a = computeFunctionCreatorList_1.return)
  1563. 								)
  1564. 									_a.call(computeFunctionCreatorList_1);
  1565. 							} finally {
  1566. 								if (e_1) throw e_1.error;
  1567. 							}
  1568. 						}
  1569. 						// @ts-ignore
  1570. 						this.on(TYPE_COMPUTED, callback);
  1571. 					};
  1572. 					// @ts-ignore
  1573. 					default_1.prototype.beforeEach = function (interceptor) {
  1574. 						var _this = this;
  1575. 						// @ts-ignore
  1576. 						_super.prototype.beforeEach.call(this, function (type, next) {
  1577. 							var _a;
  1578. 							if ((_a = _this.c) === null || _a === void 0 ? void 0 : _a.name) {
  1579. 								interceptor(type, next);
  1580. 							} else {
  1581. 								next();
  1582. 							}
  1583. 						});
  1584. 					};
  1585. 					// @ts-ignore
  1586. 					default_1.prototype.get = function (name) {
  1587. 						// @ts-ignore
  1588. 						return this.__pluginContexts.find(function (pluginContext) {
  1589. 							return name === pluginContext.name;
  1590. 						});
  1591. 					};
  1592. 					// @ts-ignore
  1593. 					default_1.prototype.set = function (newOptions) {
  1594. 						this.__options = __assign(__assign({}, this.__options), newOptions);
  1595. 					};
  1596. 					// @ts-ignore
  1597. 					default_1.prototype.emit2 = function (type, payload, pluginContext) {
  1598. 						var _this = this;
  1599. 						this.c = pluginContext;
  1600. 						// @ts-ignore
  1601. 						this.emit(
  1602. 							type,
  1603. 							__assign(__assign({}, payload), { type: type }),
  1604. 							function () {
  1605. 								// @ts-ignore
  1606. 								_this.emit(
  1607. 									TYPE_AT_AFTER,
  1608. 									__assign(__assign({}, payload), { name: type, __type: type })
  1609. 								);
  1610. 							}
  1611. 						);
  1612. 					};
  1613. 					default_1.prototype.destroy = function () {
  1614. 						// @ts-ignore
  1615. 						this.emit(TYPE_UNBIND);
  1616. 						_super.prototype.destroy.call(this);
  1617. 					};
  1618. 					return default_1;
  1619. 				})(AnyEvent);
  1620.  
  1621. 				// @ts-ignore
  1622. 				var getVLength = function (v) {
  1623. 					return Math.sqrt(v.x * v.x + v.y * v.y);
  1624. 				};
  1625.  
  1626. 				// @ts-ignore
  1627. 				var getDotProduct = function (v1, v2) {
  1628. 					return v1.x * v2.x + v1.y * v2.y;
  1629. 				};
  1630.  
  1631. 				// @ts-ignore
  1632. 				var getRadian = function (v1, v2) {
  1633. 					var mr = getVLength(v1) * getVLength(v2);
  1634. 					if (mr === 0) return 0;
  1635. 					var r = getDotProduct(v1, v2) / mr;
  1636. 					if (r > 1) r = 1;
  1637. 					return Math.acos(r);
  1638. 				};
  1639.  
  1640. 				// @ts-ignore
  1641. 				var getCross = function (v1, v2) {
  1642. 					return v1.x * v2.y - v2.x * v1.y;
  1643. 				};
  1644.  
  1645. 				// @ts-ignore
  1646. 				var radianToAngle = function (radian) {
  1647. 					return (radian / Math.PI) * 180;
  1648. 				};
  1649.  
  1650. 				// @ts-ignore
  1651. 				var getAngle = function (v1, v2) {
  1652. 					var angle = getRadian(v1, v2);
  1653. 					if (getCross(v1, v2) > 0) {
  1654. 						angle *= -1;
  1655. 					}
  1656. 					return radianToAngle(angle);
  1657. 				};
  1658.  
  1659. 				// @ts-ignore
  1660. 				var getDirection = function (x, y) {
  1661. 					if (0 === x && 0 === y) {
  1662. 						return;
  1663. 					}
  1664. 					if (Math.abs(x) >= Math.abs(y)) {
  1665. 						return 0 < x ? DIRECTION_RIGHT : DIRECTION_LEFT;
  1666. 					} else {
  1667. 						return 0 < y ? DIRECTION_DOWN : DIRECTION_UP;
  1668. 					}
  1669. 				};
  1670.  
  1671. 				function ComputeAngle() {
  1672. 					var angle = 0;
  1673. 					var deltaAngle = 0;
  1674. 					// @ts-ignore
  1675. 					// @ts-ignore
  1676. 					return function (input, computed) {
  1677. 						var prevVecotr = computed.prevVecotr,
  1678. 							startVecotr = computed.startVecotr,
  1679. 							activeVecotr = computed.activeVecotr;
  1680. 						if (activeVecotr) {
  1681. 							deltaAngle = Math.round(getAngle(activeVecotr, prevVecotr));
  1682. 							angle = Math.round(getAngle(activeVecotr, startVecotr));
  1683. 						}
  1684. 						return { angle: angle, deltaAngle: deltaAngle };
  1685. 					};
  1686. 				}
  1687.  
  1688. 				function ComputeDeltaXY() {
  1689. 					// @ts-ignore
  1690. 					return function (input) {
  1691. 						var prevInput = input.prevInput;
  1692. 						var deltaX = 0;
  1693. 						var deltaY = 0;
  1694. 						var deltaXYAngle = 0;
  1695. 						if (void 0 !== prevInput) {
  1696. 							deltaX = input.x - prevInput.x;
  1697. 							deltaY = input.y - prevInput.y;
  1698. 							if (0 !== deltaX || 0 !== deltaY) {
  1699. 								var deltaXY = Math.sqrt(
  1700. 									Math.pow(deltaX, 2) + Math.pow(deltaY, 2)
  1701. 								);
  1702. 								deltaXYAngle = Math.round(
  1703. 									radianToAngle(Math.acos(Math.abs(deltaX) / deltaXY))
  1704. 								);
  1705. 							}
  1706. 						}
  1707. 						return {
  1708. 							deltaX: deltaX,
  1709. 							deltaY: deltaY,
  1710. 							deltaXYAngle: deltaXYAngle,
  1711. 						};
  1712. 					};
  1713. 				}
  1714.  
  1715. 				function ComputeDistance() {
  1716. 					var displacementX = 0;
  1717. 					var displacementY = 0;
  1718. 					var distanceX = 0;
  1719. 					var distanceY = 0;
  1720. 					var distance = 0;
  1721. 					// @ts-ignore
  1722. 					var overallDirection;
  1723. 					// @ts-ignore
  1724. 					return function (input) {
  1725. 						var phase = input.phase,
  1726. 							startInput = input.startInput;
  1727. 						if (TYPE_START === phase) {
  1728. 							displacementX = 0;
  1729. 							displacementY = 0;
  1730. 							distanceX = 0;
  1731. 							distanceY = 0;
  1732. 							distance = 0;
  1733. 						} else if (TYPE_MOVE === phase) {
  1734. 							displacementX = Math.round(
  1735. 								input.points[0][CLIENT_X] - startInput.points[0][CLIENT_X]
  1736. 							);
  1737. 							displacementY = Math.round(
  1738. 								input.points[0][CLIENT_Y] - startInput.points[0][CLIENT_Y]
  1739. 							);
  1740. 							distanceX = Math.abs(displacementX);
  1741. 							distanceY = Math.abs(displacementY);
  1742. 							distance = Math.round(getVLength({ x: distanceX, y: distanceY }));
  1743. 							overallDirection = getDirection(displacementX, displacementY);
  1744. 						}
  1745. 						return {
  1746. 							displacementX: displacementX,
  1747. 							displacementY: displacementY,
  1748. 							distanceX: distanceX,
  1749. 							distanceY: distanceY,
  1750. 							distance: distance,
  1751. 							// @ts-ignore
  1752. 							overallDirection: overallDirection,
  1753. 						};
  1754. 					};
  1755. 				}
  1756.  
  1757. 				function ComputeScale() {
  1758. 					var scale = 1;
  1759. 					// @ts-ignore
  1760. 					// @ts-ignore
  1761. 					return function (input, computed) {
  1762. 						var deltaScale = 1;
  1763. 						var prevVecotr = computed.prevVecotr,
  1764. 							startVecotr = computed.startVecotr,
  1765. 							activeVecotr = computed.activeVecotr;
  1766. 						if (activeVecotr) {
  1767. 							deltaScale = round2(
  1768. 								getVLength(activeVecotr) / getVLength(prevVecotr)
  1769. 							);
  1770. 							scale = round2(
  1771. 								getVLength(activeVecotr) / getVLength(startVecotr)
  1772. 							);
  1773. 						}
  1774. 						return { scale: scale, deltaScale: deltaScale };
  1775. 					};
  1776. 				}
  1777.  
  1778. 				function ComputeVAndDir() {
  1779. 					var velocityX = 0;
  1780. 					var velocityY = 0;
  1781. 					var speedX = 0;
  1782. 					var speedY = 0;
  1783. 					// @ts-ignore
  1784. 					var direction;
  1785. 					// @ts-ignore
  1786. 					var lastValidInput;
  1787. 					// @ts-ignore
  1788. 					return function (input) {
  1789. 						if (void 0 !== input) {
  1790. 							// @ts-ignore
  1791. 							lastValidInput = lastValidInput || input.startInput;
  1792. 							var deltaTime = input.timestamp - lastValidInput.timestamp;
  1793. 							if (COMPUTE_INTERVAL < deltaTime) {
  1794. 								var deltaX = input.x - lastValidInput.x;
  1795. 								var deltaY = input.y - lastValidInput.y;
  1796. 								speedX = Math.round((deltaX / deltaTime) * 100) / 100;
  1797. 								speedY = Math.round((deltaY / deltaTime) * 100) / 100;
  1798. 								velocityX = Math.abs(speedX);
  1799. 								velocityY = Math.abs(speedY);
  1800. 								direction = getDirection(deltaX, deltaY);
  1801. 								lastValidInput = input;
  1802. 							}
  1803. 						}
  1804. 						return {
  1805. 							velocityX: velocityX,
  1806. 							velocityY: velocityY,
  1807. 							speedX: speedX,
  1808. 							speedY: speedY,
  1809. 							// @ts-ignore
  1810. 							direction: direction,
  1811. 						};
  1812. 					};
  1813. 				}
  1814.  
  1815. 				function ComputeMaxLength() {
  1816. 					var maxPointLength = 0;
  1817. 					// @ts-ignore
  1818. 					return function (input) {
  1819. 						var phase = input.phase;
  1820. 						if (TYPE_START === phase) {
  1821. 							maxPointLength = input.pointLength;
  1822. 						}
  1823. 						return { maxPointLength: maxPointLength };
  1824. 					};
  1825. 				}
  1826.  
  1827. 				// @ts-ignore
  1828. 				function computeVector(input) {
  1829. 					return {
  1830. 						x: input.points[1][CLIENT_X] - input.points[0][CLIENT_X],
  1831. 						y: input.points[1][CLIENT_Y] - input.points[0][CLIENT_Y],
  1832. 					};
  1833. 				}
  1834. 				function ComputeVectorForMutli() {
  1835. 					// @ts-ignore
  1836. 					var startVecotr;
  1837. 					// @ts-ignore
  1838. 					var prevVecotr;
  1839. 					var activeVecotr;
  1840. 					// @ts-ignore
  1841. 					return function (input) {
  1842. 						var prevInput = input.prevInput,
  1843. 							startMultiInput = input.startMultiInput;
  1844. 						if (
  1845. 							void 0 !== startMultiInput &&
  1846. 							void 0 !== prevInput &&
  1847. 							input.id !== startMultiInput.id &&
  1848. 							1 < prevInput.pointLength &&
  1849. 							1 < input.pointLength
  1850. 						) {
  1851. 							startVecotr = computeVector(startMultiInput);
  1852. 							prevVecotr = computeVector(prevInput);
  1853. 							activeVecotr = computeVector(input);
  1854. 						} else {
  1855. 							activeVecotr = void 0;
  1856. 						}
  1857. 						return {
  1858. 							// @ts-ignore
  1859. 							startVecotr: startVecotr,
  1860. 							// @ts-ignore
  1861. 							prevVecotr: prevVecotr,
  1862. 							activeVecotr: activeVecotr,
  1863. 						};
  1864. 					};
  1865. 				}
  1866.  
  1867. 				var DEFAULT_OPTIONS$5 = {
  1868. 					name: "tap",
  1869. 					pointLength: 1,
  1870. 					tapTimes: 1,
  1871. 					waitNextTapTime: 300,
  1872. 					maxDistance: 2,
  1873. 					maxDistanceFromPrevTap: 9,
  1874. 					maxPressTime: 250,
  1875. 				};
  1876. 				// @ts-ignore
  1877. 				function tap(at, options) {
  1878. 					var context = createPluginContext(DEFAULT_OPTIONS$5, options);
  1879. 					var tapCount = 0;
  1880. 					// @ts-ignore
  1881. 					var prevTapPoint;
  1882. 					// @ts-ignore
  1883. 					var prevTapTime;
  1884. 					// @ts-ignore
  1885. 					var countDownToFailTimer;
  1886. 					function reset() {
  1887. 						tapCount = 0;
  1888. 						prevTapPoint = void 0;
  1889. 						prevTapTime = void 0;
  1890. 					}
  1891. 					function countDownToFail() {
  1892. 						countDownToFailTimer = setTimeout(function () {
  1893. 							context.state = 2;
  1894. 							reset();
  1895. 						}, context.waitNextTapTime);
  1896. 					}
  1897. 					// @ts-ignore
  1898. 					function isValidDistanceFromPrevTap(center, options) {
  1899. 						// @ts-ignore
  1900. 						if (void 0 !== prevTapPoint) {
  1901. 							var distanceFromPreviousTap = getVLength({
  1902. 								// @ts-ignore
  1903. 								x: center.x - prevTapPoint.x,
  1904. 								// @ts-ignore
  1905. 								y: center.y - prevTapPoint.y,
  1906. 							});
  1907. 							prevTapPoint = center;
  1908. 							return options.maxDistanceFromPrevTap >= distanceFromPreviousTap;
  1909. 						} else {
  1910. 							prevTapPoint = center;
  1911. 							return true;
  1912. 						}
  1913. 					}
  1914. 					// @ts-ignore
  1915. 					function isValidInterval(waitNextTapTime) {
  1916. 						var now = performance.now();
  1917. 						// @ts-ignore
  1918. 						if (void 0 === prevTapTime) {
  1919. 							prevTapTime = now;
  1920. 							return true;
  1921. 						} else {
  1922. 							// @ts-ignore
  1923. 							var interval = now - prevTapTime;
  1924. 							prevTapTime = now;
  1925. 							return interval < waitNextTapTime;
  1926. 						}
  1927. 					}
  1928. 					// @ts-ignore
  1929. 					at.compute([ComputeDistance, ComputeMaxLength], function (computed) {
  1930. 						if (isDisabled(context)) return;
  1931. 						var phase = computed.phase,
  1932. 							x = computed.x,
  1933. 							y = computed.y;
  1934. 						if (TYPE_END !== phase) return;
  1935. 						context.state = 0;
  1936. 						if (test()) {
  1937. 							// @ts-ignore
  1938. 							clearTimeout(countDownToFailTimer);
  1939. 							if (
  1940. 								isValidDistanceFromPrevTap({ x: x, y: y }, context) &&
  1941. 								isValidInterval(context.waitNextTapTime)
  1942. 							) {
  1943. 								tapCount++;
  1944. 							} else {
  1945. 								tapCount = 1;
  1946. 							}
  1947. 							if (0 === tapCount % context.tapTimes) {
  1948. 								context.state = 1;
  1949. 								at.emit2(context.name, computed, context);
  1950. 								reset();
  1951. 							} else {
  1952. 								countDownToFail();
  1953. 							}
  1954. 						} else {
  1955. 							reset();
  1956. 							context.state = 2;
  1957. 						}
  1958. 						function test() {
  1959. 							var startInput = computed.startInput,
  1960. 								pointLength = computed.pointLength,
  1961. 								timestamp = computed.timestamp;
  1962. 							var deltaTime = timestamp - startInput.timestamp;
  1963. 							var distance = computed.distance,
  1964. 								maxPointLength = computed.maxPointLength;
  1965. 							return (
  1966. 								maxPointLength === context.pointLength &&
  1967. 								0 === pointLength &&
  1968. 								context.maxDistance >= distance &&
  1969. 								context.maxPressTime > deltaTime
  1970. 							);
  1971. 						}
  1972. 					});
  1973. 					return context;
  1974. 				}
  1975.  
  1976. 				var DEFAULT_OPTIONS$4 = { name: "pan", threshold: 10, pointLength: 1 };
  1977. 				// @ts-ignore
  1978. 				function pan(at, options) {
  1979. 					var context = createPluginContext(DEFAULT_OPTIONS$4, options);
  1980. 					at.compute(
  1981. 						[ComputeVAndDir, ComputeDistance, ComputeDeltaXY],
  1982. 						// @ts-ignore
  1983. 						function (computed) {
  1984. 							resetState(context);
  1985. 							if (isDisabled(context)) return;
  1986. 							var isValid = test();
  1987. 							context.state = flow(isValid, context.state, computed.phase);
  1988. 							if (isValid || isMoveOrEndOrCancel(context.state)) {
  1989. 								var name_1 = context.name;
  1990. 								at.emit2(name_1, computed, context);
  1991. 								at.emit2(
  1992. 									name_1 + getStatusName(context.state),
  1993. 									computed,
  1994. 									context
  1995. 								);
  1996. 								if (
  1997. 									![TYPE_END, TYPE_CANCEL].includes(computed.phase) &&
  1998. 									computed.direction
  1999. 								) {
  2000. 									at.emit2(name_1 + computed.direction, computed, context);
  2001. 								}
  2002. 							}
  2003. 							function test() {
  2004. 								var pointLength = computed.pointLength,
  2005. 									distance = computed.distance;
  2006. 								return (
  2007. 									context.pointLength === pointLength &&
  2008. 									context.threshold <= distance
  2009. 								);
  2010. 							}
  2011. 						}
  2012. 					);
  2013. 					return context;
  2014. 				}
  2015.  
  2016. 				var DEFAULT_OPTIONS$3 = {
  2017. 					name: "swipe",
  2018. 					threshold: 10,
  2019. 					velocity: 0.3,
  2020. 					pointLength: 1,
  2021. 				};
  2022. 				// @ts-ignore
  2023. 				function swipe(at, options) {
  2024. 					var context = createPluginContext(DEFAULT_OPTIONS$3, options);
  2025. 					at.compute(
  2026. 						[ComputeDistance, ComputeVAndDir, ComputeMaxLength],
  2027. 						// @ts-ignore
  2028. 						function (computed) {
  2029. 							context.state = 0;
  2030. 							if (context.disabled) return;
  2031. 							if (test()) {
  2032. 								var name_1 = context.name;
  2033. 								context.state = 1;
  2034. 								at.emit2(name_1, computed, context);
  2035. 								at.emit2(name_1 + computed.direction, computed, context);
  2036. 							}
  2037. 							function test() {
  2038. 								if (TYPE_END !== computed.phase) return false;
  2039. 								var velocityX = computed.velocityX,
  2040. 									velocityY = computed.velocityY,
  2041. 									distance = computed.distance,
  2042. 									maxPointLength = computed.maxPointLength;
  2043. 								return (
  2044. 									maxPointLength === context.pointLength &&
  2045. 									0 === computed.points.length &&
  2046. 									context.threshold < distance &&
  2047. 									context.velocity < Math.max(velocityX, velocityY)
  2048. 								);
  2049. 							}
  2050. 						}
  2051. 					);
  2052. 					return context;
  2053. 				}
  2054.  
  2055. 				var DEFAULT_OPTIONS$2 = {
  2056. 					name: "press",
  2057. 					pointLength: 1,
  2058. 					maxDistance: 9,
  2059. 					minPressTime: 251,
  2060. 				};
  2061. 				// @ts-ignore
  2062. 				function press(at, options) {
  2063. 					var context = createPluginContext(DEFAULT_OPTIONS$2, options);
  2064. 					var timeoutId = 0;
  2065. 					// @ts-ignore
  2066. 					at.compute([ComputeDistance], function (computed) {
  2067. 						if (isDisabled(context)) return;
  2068. 						var phase = computed.phase,
  2069. 							startInput = computed.startInput,
  2070. 							pointLength = computed.pointLength;
  2071. 						if (TYPE_START === phase && context.pointLength === pointLength) {
  2072. 							resetState(context);
  2073. 							clearTimeout(timeoutId);
  2074. 							timeoutId = setTimeout(function () {
  2075. 								context.state = 1;
  2076. 								at.emit2(context.name, computed, context);
  2077. 							}, context.minPressTime);
  2078. 						} else if (TYPE_END === phase && 1 === context.state) {
  2079. 							at.emit2(
  2080. 								"".concat(context.name).concat(DIRECTION_UP),
  2081. 								computed,
  2082. 								context
  2083. 							);
  2084. 						} else if (1 !== context.state) {
  2085. 							var deltaTime = computed.timestamp - startInput.timestamp;
  2086. 							if (
  2087. 								!test() ||
  2088. 								(context.minPressTime > deltaTime &&
  2089. 									[TYPE_END, TYPE_CANCEL].includes(phase))
  2090. 							) {
  2091. 								clearTimeout(timeoutId);
  2092. 								context.state = 2;
  2093. 							}
  2094. 						}
  2095. 						function test() {
  2096. 							var distance = computed.distance;
  2097. 							return distance && context.maxDistance > distance;
  2098. 						}
  2099. 					});
  2100. 					return context;
  2101. 				}
  2102.  
  2103. 				var DEFAULT_OPTIONS$1 = {
  2104. 					name: "pinch",
  2105. 					threshold: 0,
  2106. 					pointLength: 2,
  2107. 				};
  2108. 				// @ts-ignore
  2109. 				function pinch(at, options) {
  2110. 					var context = createPluginContext(DEFAULT_OPTIONS$1, options);
  2111. 					at.compute(
  2112. 						[ComputeVectorForMutli, ComputeScale],
  2113. 						// @ts-ignore
  2114. 						function (computed) {
  2115. 							resetState(context);
  2116. 							if (isDisabled(context)) return;
  2117. 							var isValid = test();
  2118. 							context.state = flow(isValid, context.state, computed.phase);
  2119. 							var name = context.name;
  2120. 							if (isValid || isMoveOrEndOrCancel(context.state)) {
  2121. 								at.emit2(name, computed, context);
  2122. 								var deltaScale = computed.deltaScale;
  2123. 								if (1 !== deltaScale) {
  2124. 									at.emit2(
  2125. 										name + (1 < deltaScale ? "in" : "out"),
  2126. 										computed,
  2127. 										context
  2128. 									);
  2129. 								}
  2130. 							}
  2131. 							var stateName = getStatusName(context.state);
  2132. 							if (stateName) {
  2133. 								at.emit2(name + stateName, computed, context);
  2134. 							}
  2135. 							function test() {
  2136. 								var pointLength = computed.pointLength,
  2137. 									scale = computed.scale;
  2138. 								computed.deltaScale;
  2139. 								computed.phase;
  2140. 								return (
  2141. 									context.pointLength === pointLength &&
  2142. 									context.threshold < Math.abs(scale - 1)
  2143. 								);
  2144. 							}
  2145. 						}
  2146. 					);
  2147. 					return context;
  2148. 				}
  2149.  
  2150. 				var DEFAULT_OPTIONS = {
  2151. 					name: "rotate",
  2152. 					threshold: 0,
  2153. 					pointLength: 2,
  2154. 				};
  2155. 				// @ts-ignore
  2156. 				function rotate(at, options) {
  2157. 					var context = createPluginContext(DEFAULT_OPTIONS, options);
  2158. 					at.compute(
  2159. 						[ComputeVectorForMutli, ComputeAngle],
  2160. 						// @ts-ignore
  2161. 						function (computed) {
  2162. 							if (isDisabled(context)) return;
  2163. 							resetState(context);
  2164. 							var isValid = test();
  2165. 							context.state = flow(isValid, context.state, computed.phase);
  2166. 							var name = context.name;
  2167. 							if (isValid || isMoveOrEndOrCancel(context.state)) {
  2168. 								at.emit2(name, computed, context);
  2169. 							}
  2170. 							var stateName = getStatusName(context.state);
  2171. 							if (stateName) {
  2172. 								at.emit2(name + stateName, computed, context);
  2173. 							}
  2174. 							function test() {
  2175. 								var pointLength = computed.pointLength,
  2176. 									angle = computed.angle;
  2177. 								return (
  2178. 									context.pointLength === pointLength &&
  2179. 									context.threshold < Math.abs(angle)
  2180. 								);
  2181. 							}
  2182. 						}
  2183. 					);
  2184. 					return context;
  2185. 				}
  2186.  
  2187. 				// @ts-ignore
  2188. 				function doubletap(at) {
  2189. 					at.use(tap, { name: "doubletap", tapTimes: 2 });
  2190. 					var doubleTapContext = at.get("doubletap");
  2191. 					// @ts-ignore
  2192. 					var timeID;
  2193. 					// @ts-ignore
  2194. 					at.beforeEach(function (type, next) {
  2195. 						if ("tap" === type) {
  2196. 							// @ts-ignore
  2197. 							clearTimeout(timeID);
  2198. 							timeID = setTimeout(function () {
  2199. 								if ([0, 2].includes(doubleTapContext.state)) {
  2200. 									next();
  2201. 								}
  2202. 							}, 300);
  2203. 						} else {
  2204. 							next();
  2205. 						}
  2206. 					});
  2207. 					return doubleTapContext;
  2208. 				}
  2209.  
  2210. 				var default_1 = (function (_super) {
  2211. 					__extends(default_1, _super);
  2212. 					// @ts-ignore
  2213. 					function default_1(el, options) {
  2214. 						// @ts-ignore
  2215. 						var _this = _super.call(this, el, options) || this;
  2216. 						_this.use(tap);
  2217. 						_this.use(pan);
  2218. 						_this.use(swipe);
  2219. 						_this.use(press);
  2220. 						_this.use(pinch);
  2221. 						_this.use(rotate);
  2222. 						return _this;
  2223. 					}
  2224. 					default_1.STATE_POSSIBLE = 0;
  2225. 					default_1.STATE_START = 4;
  2226. 					default_1.STATE_MOVE = 5;
  2227. 					default_1.STATE_END = 1;
  2228. 					default_1.STATE_CANCELLED = 3;
  2229. 					default_1.STATE_FAILED = 2;
  2230. 					default_1.STATE_RECOGNIZED = 1;
  2231. 					default_1.tap = tap;
  2232. 					default_1.pan = pan;
  2233. 					default_1.swipe = swipe;
  2234. 					default_1.press = press;
  2235. 					default_1.rotate = rotate;
  2236. 					default_1.pinch = pinch;
  2237. 					default_1.doubletap = doubletap;
  2238. 					return default_1;
  2239. 				})(default_1$1);
  2240.  
  2241. 				return default_1;
  2242. 			});
  2243. 			//# sourceMappingURL=any-touch.umd.js.map
  2244. 			return anyTouch;
  2245. 		},
  2246. 		/**
  2247. 		 * 排序数组
  2248. 		 * @param {(value: any)=>any} getBeforeValueFun
  2249. 		 * @param {(value: any)=>any} getAfterValueFun
  2250. 		 * @param {boolean} sortByDesc 排序是否降序，默认降序
  2251. 		 * @returns
  2252. 		 */
  2253. 		sortElementListByProperty(
  2254. 			getBeforeValueFun,
  2255. 			getAfterValueFun,
  2256. 			sortByDesc = true
  2257. 		) {
  2258. 			if (typeof sortByDesc !== "boolean") {
  2259. 				throw "参数 sortByDesc 必须为boolean类型";
  2260. 			}
  2261. 			if (getBeforeValueFun == null || getAfterValueFun == null) {
  2262. 				throw "获取前面的值或后面的值的方法不能为空";
  2263. 			}
  2264. 			// @ts-ignore
  2265. 			return function (after_obj, before_obj) {
  2266. 				var beforeValue = getBeforeValueFun(before_obj); /*  前 */
  2267. 				var afterValue = getAfterValueFun(after_obj); /* 后 */
  2268. 				if (sortByDesc) {
  2269. 					if (afterValue > beforeValue) {
  2270. 						return -1;
  2271. 					} else if (afterValue < beforeValue) {
  2272. 						return 1;
  2273. 					} else {
  2274. 						return 0;
  2275. 					}
  2276. 				} else {
  2277. 					if (afterValue < beforeValue) {
  2278. 						return -1;
  2279. 					} else if (afterValue > beforeValue) {
  2280. 						return 1;
  2281. 					} else {
  2282. 						return 0;
  2283. 					}
  2284. 				}
  2285. 			};
  2286. 		},
  2287. 		/**
  2288. 		 * 获取格式化后的时间
  2289. 		 * @param {string|number} [text= new Date()]	需要格式化的字符串或者时间戳
  2290. 		 * @param {string} [formatType = "yyyy-MM-dd HH:mm:ss"]	格式化成的显示类型
  2291. 		 * + yyyy 年
  2292. 		 * + MM 月
  2293. 		 * + dd 天
  2294. 		 * + HH 时 (24小时制)
  2295. 		 * + hh 时 (12小时制)
  2296. 		 * + mm 分
  2297. 		 * + ss 秒
  2298. 		 * @returns {string}	返回格式化后的时间
  2299. 		 * @example
  2300. 		 * Utils.formatTime("2022-08-21 23:59:00","HH:mm:ss");
  2301. 		 * > '23:59:00'
  2302. 		 * @example
  2303. 		 * Utils.formatTime(1899187424988,"HH:mm:ss");
  2304. 		 * > '15:10:13'
  2305. 		 * @example
  2306. 		 * Utils.formatTime()
  2307. 		 * > '2023-1-1 00:00:00'
  2308. 		 **/
  2309. 		formatTime: function (
  2310. 			// @ts-ignore
  2311. 			text = new Date(),
  2312. 			formatType = "yyyy-MM-dd HH:mm:ss"
  2313. 		) {
  2314. 			let time = text == null ? new Date() : new Date(text);
  2315. 			/**
  2316. 			 * 校验时间补0
  2317. 			 * @param {number} timeNum
  2318. 			 * @returns
  2319. 			 */
  2320. 			function checkTime(timeNum) {
  2321. 				if (timeNum < 10) return "0" + timeNum;
  2322. 				return timeNum;
  2323. 			}
  2324.  
  2325. 			/**
  2326. 			 * 时间制修改 24小时制转12小时制
  2327. 			 * @param {number} hourNum 小时
  2328. 			 * @returns
  2329. 			 */
  2330. 			function timeSystemChange(hourNum) {
  2331. 				return hourNum > 12 ? hourNum - 12 : hourNum;
  2332. 			}
  2333.  
  2334. 			let timeRegexp = {
  2335. 				yyyy: time.getFullYear(),
  2336. 				/* 年 */
  2337. 				MM: checkTime(time.getMonth() + 1),
  2338. 				/* 月 */
  2339. 				dd: checkTime(time.getDate()),
  2340. 				/* 日 */
  2341. 				HH: checkTime(time.getHours()),
  2342. 				/* 时 (24小时制) */
  2343. 				hh: checkTime(timeSystemChange(time.getHours())),
  2344. 				/* 时 (12小时制) */
  2345. 				mm: checkTime(time.getMinutes()),
  2346. 				/* 分 */
  2347. 				ss: checkTime(time.getSeconds()),
  2348. 				/* 秒 */
  2349. 			};
  2350. 			Object.keys(timeRegexp).forEach(function (key) {
  2351. 				let replaecRegexp = new RegExp(key, "g");
  2352. 				// @ts-ignore
  2353. 				formatType = formatType.replace(replaecRegexp, timeRegexp[key]);
  2354. 			});
  2355. 			return formatType;
  2356. 		},
  2357. 		/**
  2358. 		 * 格式化byte为KB、MB、GB、TB、PB、EB、ZB、YB、BB、NB、DB
  2359. 		 * @param {number|string} byteSize 字节
  2360. 		 * @param {boolean} [addType=true]
  2361. 		 * + true (默认) 添加单位
  2362. 		 * + false 不添加单位
  2363. 		 * @returns {string|number}
  2364. 		 * + {string} 当addType为true时，且保留小数点末尾2位
  2365. 		 * + {number} 当addType为false时，且保留小数点末尾2位
  2366. 		 * @example
  2367. 		 * Utils.formatByteToSize("812304");
  2368. 		 * > '793.27KB'
  2369. 		 * @example
  2370. 		 * Utils.formatByteToSize("812304",false);
  2371. 		 * > 793.27
  2372. 		 **/
  2373. 		formatByteToSize: function (byteSize, addType = true) {
  2374. 			// @ts-ignore
  2375. 			byteSize = parseInt(byteSize);
  2376. 			if (isNaN(byteSize)) {
  2377. 				throw new Error("Utils.formatByteToSize 参数 byteSize 格式不正确");
  2378. 			}
  2379. 			let result = 0;
  2380. 			let resultType = "KB";
  2381. 			let sizeData = {};
  2382. 			sizeData.B = 1;
  2383. 			sizeData.KB = 1024;
  2384. 			sizeData.MB = sizeData.KB * sizeData.KB;
  2385. 			sizeData.GB = sizeData.MB * sizeData.KB;
  2386. 			sizeData.TB = sizeData.GB * sizeData.KB;
  2387. 			sizeData.PB = sizeData.TB * sizeData.KB;
  2388. 			sizeData.EB = sizeData.PB * sizeData.KB;
  2389. 			sizeData.ZB = sizeData.EB * sizeData.KB;
  2390. 			sizeData.YB = sizeData.ZB * sizeData.KB;
  2391. 			sizeData.BB = sizeData.YB * sizeData.KB;
  2392. 			sizeData.NB = sizeData.BB * sizeData.KB;
  2393. 			sizeData.DB = sizeData.NB * sizeData.KB;
  2394. 			for (let key in sizeData) {
  2395. 				// @ts-ignore
  2396. 				result = byteSize / sizeData[key];
  2397. 				resultType = key;
  2398. 				if (sizeData.KB >= result) {
  2399. 					break;
  2400. 				}
  2401. 			}
  2402. 			// @ts-ignore
  2403. 			result = result.toFixed(2);
  2404. 			// @ts-ignore
  2405. 			result = addType ? result + resultType.toString() : parseFloat(result);
  2406. 			return result;
  2407. 		},
  2408. 		/**
  2409. 		 * 判断元素是否已显示或已连接
  2410. 		 * @param {HTMLElement} element
  2411. 		 * @returns {boolean}
  2412. 		 */
  2413. 		isShow(element) {
  2414. 			return Boolean(element.getClientRects().length);
  2415. 		},
  2416. 		/**
  2417. 		 * 用于显示元素并获取它的高度宽度等其它属性
  2418. 		 * @param {HTMLElement} element
  2419. 		 * @returns {{recovery: ()=>void}} - 恢复
  2420. 		 */
  2421. 		showElement(element) {
  2422. 			let oldStyleAttribute = element.getAttribute("style");
  2423. 			element.setAttribute(
  2424. 				"style",
  2425. 				"visibility: !important;display:block !important;"
  2426. 			);
  2427. 			return {
  2428. 				recovery() {
  2429. 					if (oldStyleAttribute) {
  2430. 						element.setAttribute("style", oldStyleAttribute);
  2431. 					} else {
  2432. 						element.removeAttribute("style");
  2433. 					}
  2434. 				},
  2435. 			};
  2436. 		},
  2437. 		/**
  2438. 		 * 获取元素上的Float格式的属性px
  2439. 		 * @param {HTMLElement|CSSStyleDeclaration} element
  2440. 		 * @param {string} styleName style名
  2441. 		 * @return {number}
  2442. 		 */
  2443. 		getStyleValue(element, styleName) {
  2444. 			let view = null;
  2445. 			let styles = null;
  2446. 			if (element instanceof CSSStyleDeclaration) {
  2447. 				/* 直接就获取了style属性 */
  2448. 				styles = element;
  2449. 			} else {
  2450. 				view = element.ownerDocument.defaultView;
  2451. 				if (!view || !view.opener) {
  2452. 					view = window;
  2453. 				}
  2454. 				styles = view.getComputedStyle(element);
  2455. 			}
  2456. 			// @ts-ignore
  2457. 			let value = parseFloat(styles[styleName]);
  2458. 			if (isNaN(value)) {
  2459. 				return 0;
  2460. 			} else {
  2461. 				return value;
  2462. 			}
  2463. 		},
  2464. 		/**
  2465. 		 * 判断是否是window，例如window、self、globalThis
  2466. 		 * @param {any} target
  2467. 		 * @returns {boolean}
  2468. 		 */
  2469. 		isWin(target) {
  2470. 			// @ts-ignore
  2471. 			if (!typeof target === "object") {
  2472. 				return false;
  2473. 			}
  2474. 			if (target instanceof Node) {
  2475. 				return false;
  2476. 			}
  2477. 			if (target === globalThis) {
  2478. 				return true;
  2479. 			}
  2480. 			if (target === window) {
  2481. 				return true;
  2482. 			}
  2483. 			if (target === self) {
  2484. 				return true;
  2485. 			}
  2486. 			if (target?.Math?.toString() !== "[object Math]") {
  2487. 				return false;
  2488. 			}
  2489. 			return true;
  2490. 		},
  2491. 		/**
  2492. 		 * 阻止默认事件触发
  2493. 		 * @param {Event} event
  2494. 		 */
  2495. 		preventEvent(event) {
  2496. 			/* 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL */
  2497. 			event?.preventDefault();
  2498. 			/* 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素 */
  2499. 			event?.stopPropagation();
  2500. 			/* 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发 */
  2501. 			event?.stopImmediatePropagation();
  2502. 		},
  2503. 	};
  2504.  
  2505. 	/**
  2506. 	 * 浮点数工具类
  2507. 	 */
  2508. 	const MathFloatUtils = {
  2509. 		/**
  2510. 		 * 判断数字是否是浮点数
  2511. 		 * @param {number} num
  2512. 		 * @returns
  2513. 		 */
  2514. 		isFloat(num) {
  2515. 			return Number(num) === num && num % 1 !== 0;
  2516. 		},
  2517. 		/**
  2518. 		 * 浮点数加法
  2519. 		 * @param {number} number1
  2520. 		 * @param {number} number2
  2521. 		 */
  2522. 		add(number1, number2) {
  2523. 			let number1length, number2length, powValue;
  2524. 			try {
  2525. 				number1length = number1.toString().split(".")[1].length;
  2526. 			} catch (error) {
  2527. 				number1length = 0;
  2528. 			}
  2529. 			try {
  2530. 				number2length = number2.toString().split(".")[1].length;
  2531. 			} catch (error) {
  2532. 				number2length = 0;
  2533. 			}
  2534. 			powValue = Math.pow(10, Math.max(number1length, number2length));
  2535. 			return Math.round(number1 * powValue + number2 * powValue) / powValue;
  2536. 		},
  2537. 		/**
  2538. 		 * 减法
  2539. 		 * @param {number} number1
  2540. 		 * @param {number} number2
  2541. 		 * @returns
  2542. 		 */
  2543. 		sub(number1, number2) {
  2544. 			let number1length, number2length, powValue;
  2545. 			try {
  2546. 				number1length = number1.toString().split(".")[1].length;
  2547. 			} catch (error) {
  2548. 				number1length = 0;
  2549. 			}
  2550. 			try {
  2551. 				number2length = number2.toString().split(".")[1].length;
  2552. 			} catch (error) {
  2553. 				number2length = 0;
  2554. 			}
  2555. 			powValue = Math.pow(10, Math.max(number1length, number2length));
  2556. 			let fixedValue =
  2557. 				number1length >= number2length ? number1length : number2length;
  2558. 			return (
  2559. 				Math.round(number1 * powValue - number2 * powValue) / powValue
  2560. 			).toFixed(fixedValue);
  2561. 		},
  2562. 		/**
  2563. 		 * 除法
  2564. 		 * @param {number} number1
  2565. 		 * @param {number} number2
  2566. 		 */
  2567. 		division(number1, number2) {
  2568. 			let number1length,
  2569. 				number2length,
  2570. 				number1ReplaceValue,
  2571. 				number2ReplaceValue;
  2572. 			try {
  2573. 				number1length = number1.toString().split(".")[1].length;
  2574. 			} catch (error) {
  2575. 				number1length = 0;
  2576. 			}
  2577. 			try {
  2578. 				number2length = number2.toString().split(".")[1].length;
  2579. 			} catch (error) {
  2580. 				number2length = 0;
  2581. 			}
  2582. 			number1ReplaceValue = Number(number1.toString().replace(".", ""));
  2583. 			number2ReplaceValue = Number(number2.toString().replace(".", ""));
  2584. 			return (
  2585. 				(number1ReplaceValue / number2ReplaceValue) *
  2586. 				Math.pow(10, number2length - number1length)
  2587. 			);
  2588. 		},
  2589. 	};
  2590.  
  2591. 	/** 元素工具类 */
  2592. 	const PopsDOMUtils = {
  2593. 		/**
  2594. 		 * 获取animationend的在各个浏览器的兼容名
  2595. 		 */
  2596. 		getAnimationEndNameList() {
  2597. 			return [
  2598. 				"webkitAnimationEnd",
  2599. 				"mozAnimationEnd",
  2600. 				"MSAnimationEnd",
  2601. 				"oanimationend",
  2602. 				"animationend",
  2603. 			];
  2604. 		},
  2605. 		/**
  2606. 		 * 获取 transitionend 的在各个浏览器的兼容名
  2607. 		 */
  2608. 		getTransitionEndNameList() {
  2609. 			return [
  2610. 				"webkitTransitionEnd",
  2611. 				"mozTransitionEnd",
  2612. 				"MSTransitionEnd",
  2613. 				"otransitionend",
  2614. 				"transitionend",
  2615. 			];
  2616. 		},
  2617. 		/**
  2618. 		 * 绑定事件
  2619. 		 * @param {HTMLElement|string|NodeList|HTMLElement[]|Window} element 需要绑定的元素|元素数组|window
  2620. 		 * @param {import("./../DOMUtils/dist/src/DOMUtilsEvent").DOMUtils_EventType|import("./../DOMUtils/dist/src/DOMUtilsEvent").DOMUtils_EventType[]} eventType 需要监听的事件
  2621. 		 * @param {string|undefined|null} selector 子元素选择器
  2622. 		 * @param {((event: Event)=>void)|undefined} callback 绑定事件触发的回调函数
  2623. 		 * @param {boolean|AddEventListenerOptions|undefined} option
  2624. 		 * + capture 表示事件是否在捕获阶段触发。默认为false，即在冒泡阶段触发
  2625. 		 * + once 表示事件是否只触发一次。默认为false
  2626. 		 * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
  2627. 		 */
  2628. 		on(element, eventType, selector, callback, option) {
  2629. 			/**
  2630. 			 * 获取option配置
  2631. 			 * @param {any[]} args
  2632. 			 * @param {number} startIndex
  2633. 			 * @param {AddEventListenerOptions} option
  2634. 			 * @returns {AddEventListenerOptions}
  2635. 			 */
  2636. 			function getOption(args, startIndex, option) {
  2637. 				if (typeof args[startIndex] === "boolean") {
  2638. 					option.capture = args[startIndex];
  2639. 					if (typeof args[startIndex + 1] === "boolean") {
  2640. 						option.once = args[startIndex + 1];
  2641. 					}
  2642. 					if (typeof args[startIndex + 2] === "boolean") {
  2643. 						option.passive = args[startIndex + 2];
  2644. 					}
  2645. 				} else if (
  2646. 					typeof args[startIndex] === "object" &&
  2647. 					("capture" in args[startIndex] ||
  2648. 						"once" in args[startIndex] ||
  2649. 						"passive" in args[startIndex])
  2650. 				) {
  2651. 					option.capture = args[startIndex].capture;
  2652. 					option.once = args[startIndex].once;
  2653. 					option.passive = args[startIndex].passive;
  2654. 				}
  2655. 				return option;
  2656. 			}
  2657.  
  2658. 			let args = arguments;
  2659. 			if (typeof element === "string") {
  2660. 				element = document.querySelectorAll(element);
  2661. 			}
  2662. 			if (element == void 0) {
  2663. 				return;
  2664. 			}
  2665. 			/**
  2666. 			 * @type {HTMLElement[]}
  2667. 			 */
  2668. 			let elementList = [];
  2669. 			if (element instanceof NodeList || Array.isArray(element)) {
  2670. 				// @ts-ignore
  2671. 				elementList = [...element];
  2672. 			} else {
  2673. 				// @ts-ignore
  2674. 				elementList.push(element);
  2675. 			}
  2676. 			/**
  2677. 			 * @type {string[]}
  2678. 			 */
  2679. 			let eventTypeList = [];
  2680. 			if (Array.isArray(eventType)) {
  2681. 				eventTypeList = eventTypeList.concat(eventType);
  2682. 			} else if (typeof eventType === "string") {
  2683. 				eventTypeList = eventTypeList.concat(eventType.split(" "));
  2684. 			}
  2685. 			/**
  2686. 			 * @type {?string}
  2687. 			 */
  2688. 			// @ts-ignore
  2689. 			let _selector_ = selector;
  2690. 			/**
  2691. 			 * @type {(event:Event)=>{}}
  2692. 			 */
  2693. 			// @ts-ignore
  2694. 			let _callback_ = callback;
  2695. 			/**
  2696. 			 * @type {AddEventListenerOptions}
  2697. 			 */
  2698. 			let _option_ = {
  2699. 				capture: false,
  2700. 				once: false,
  2701. 				passive: false,
  2702. 			};
  2703. 			if (typeof selector === "function") {
  2704. 				/* 这是为没有selector的情况 */
  2705. 				// @ts-ignore
  2706. 				_selector_ = void 0;
  2707. 				_callback_ = selector;
  2708. 				// @ts-ignore
  2709. 				_option_ = getOption(args, 3, _option_);
  2710. 			} else {
  2711. 				/* 这是存在selector的情况 */
  2712. 				// @ts-ignore
  2713. 				_option_ = getOption(args, 4, _option_);
  2714. 			}
  2715. 			/**
  2716. 			 * 如果是once，那么删除该监听和元素上的事件和监听
  2717. 			 */
  2718. 			function checkOptionOnceToRemoveEventListener() {
  2719. 				if (_option_.once) {
  2720. 					PopsDOMUtils.off(element, eventType, selector, callback, option);
  2721. 				}
  2722. 			}
  2723. 			elementList.forEach((elementItem) => {
  2724. 				// @ts-ignore
  2725. 				let ownCallBack = function (event) {
  2726. 					let target = event.target;
  2727. 					if (_selector_) {
  2728. 						/* 存在自定义子元素选择器 */
  2729. 						let totalParent = PopsUtils.isWin(elementItem)
  2730. 							? document.documentElement
  2731. 							: elementItem;
  2732. 						if (target.matches(_selector_)) {
  2733. 							/* 当前目标可以被selector所匹配到 */
  2734. 							_callback_.call(target, event);
  2735. 							checkOptionOnceToRemoveEventListener();
  2736. 							return;
  2737. 						} else if (
  2738. 							target.closest(_selector_) &&
  2739. 							totalParent.contains(target.closest(_selector_))
  2740. 						) {
  2741. 							/* 在上层与主元素之间寻找可以被selector所匹配到的 */
  2742. 							let closestElement = target.closest(_selector_);
  2743. 							/* event的target值不能直接修改 */
  2744. 							OriginPrototype.Object.defineProperty(event, "target", {
  2745. 								get() {
  2746. 									return closestElement;
  2747. 								},
  2748. 							});
  2749. 							_callback_.call(closestElement, event);
  2750. 							checkOptionOnceToRemoveEventListener();
  2751. 							return;
  2752. 						}
  2753. 					} else {
  2754. 						_callback_.call(elementItem, event);
  2755. 						checkOptionOnceToRemoveEventListener();
  2756. 					}
  2757. 				};
  2758.  
  2759. 				/* 遍历事件名设置元素事件 */
  2760. 				eventTypeList.forEach((eventName) => {
  2761. 					elementItem.addEventListener(eventName, ownCallBack, _option_);
  2762.  
  2763. 					// @ts-ignore
  2764. 					if (_callback_ && _callback_.delegate) {
  2765. 						// @ts-ignore
  2766. 						elementItem.setAttribute("data-delegate", _selector_);
  2767. 					}
  2768. 					/* 获取对象上的事件 */
  2769. 					// @ts-ignore
  2770. 					let elementEvents = elementItem[PopsUtils.SymbolEvents] || {};
  2771. 					/* 初始化对象上的xx事件 */
  2772. 					elementEvents[eventName] = elementEvents[eventName] || [];
  2773. 					elementEvents[eventName].push({
  2774. 						selector: _selector_,
  2775. 						option: _option_,
  2776. 						callback: ownCallBack,
  2777. 						originCallBack: _callback_,
  2778. 					});
  2779. 					/* 覆盖事件 */
  2780. 					// @ts-ignore
  2781. 					elementItem[PopsUtils.SymbolEvents] = elementEvents;
  2782. 				});
  2783. 			});
  2784. 		},
  2785. 		/**
  2786. 		 * 取消绑定事件
  2787. 		 * @param {HTMLElement|string|NodeList|HTMLElement[]|Window} element 需要取消绑定的元素|元素数组
  2788. 		 * @param {import("./../DOMUtils/dist/src/DOMUtilsEvent").DOMUtils_EventType|import("./../DOMUtils/dist/src/DOMUtilsEvent").DOMUtils_EventType[]|string} eventType 需要取消监听的事件
  2789. 		 * @param {string|undefined|null} selector 子元素选择器
  2790. 		 * @param {((event: Event)=>void)|undefined} callback 通过DOMUtils.on绑定的事件函数
  2791. 		 * @param {EventListenerOptions|boolean|undefined} option
  2792. 		 * + capture 如果在添加事件监听器时指定了useCapture为true，则在移除事件监听器时也必须指定为true
  2793. 		 */
  2794. 		// @ts-ignore
  2795. 		off(element, eventType, selector, callback, option) {
  2796. 			/**
  2797. 			 * 获取option配置
  2798. 			 * @param {any[]} args
  2799. 			 * @param {number} startIndex
  2800. 			 * @param {EventListenerOptions} option
  2801. 			 * @returns {EventListenerOptions}
  2802. 			 */
  2803. 			function getOption(args, startIndex, option) {
  2804. 				if (typeof args[startIndex] === "boolean") {
  2805. 					option.capture = args[startIndex];
  2806. 				} else if (
  2807. 					typeof args[startIndex] === "object" &&
  2808. 					"capture" in args[startIndex]
  2809. 				) {
  2810. 					option.capture = args[startIndex].capture;
  2811. 				}
  2812. 				return option;
  2813. 			}
  2814.  
  2815. 			let args = arguments;
  2816. 			if (typeof element === "string") {
  2817. 				element = document.querySelectorAll(element);
  2818. 			}
  2819. 			if (element == void 0) {
  2820. 				return;
  2821. 			}
  2822. 			/**
  2823. 			 * @type {HTMLElement[]}
  2824. 			 */
  2825. 			let elementList = [];
  2826. 			if (element instanceof NodeList || Array.isArray(element)) {
  2827. 				// @ts-ignore
  2828. 				elementList = [...element];
  2829. 			} else {
  2830. 				// @ts-ignore
  2831. 				elementList.push(element);
  2832. 			}
  2833. 			/**
  2834. 			 * @type {string[]}
  2835. 			 */
  2836. 			let eventTypeList = [];
  2837. 			if (Array.isArray(eventType)) {
  2838. 				eventTypeList = eventTypeList.concat(eventType);
  2839. 			} else if (typeof eventType === "string") {
  2840. 				eventTypeList = eventTypeList.concat(eventType.split(" "));
  2841. 			}
  2842. 			/**
  2843. 			 * @type {?string}
  2844. 			 */
  2845. 			// @ts-ignore
  2846. 			let _selector_ = selector;
  2847. 			/**
  2848. 			 * @type {(event:Event)=>{}}
  2849. 			 */
  2850. 			// @ts-ignore
  2851. 			let _callback_ = callback;
  2852.  
  2853. 			/**
  2854. 			 * @type {EventListenerOptions}
  2855. 			 */
  2856. 			let _option_ = {
  2857. 				capture: false,
  2858. 			};
  2859. 			if (typeof selector === "function") {
  2860. 				/* 这是为没有selector的情况 */
  2861. 				// @ts-ignore
  2862. 				_selector_ = void 0;
  2863. 				_callback_ = selector;
  2864. 				// @ts-ignore
  2865. 				_option_ = getOption(args, 3, _option_);
  2866. 			} else {
  2867. 				// @ts-ignore
  2868. 				_option_ = getOption(args, 4, _option_);
  2869. 			}
  2870. 			elementList.forEach((elementItem) => {
  2871. 				/* 获取对象上的事件 */
  2872. 				// @ts-ignore
  2873. 				let elementEvents = elementItem[PopsUtils.SymbolEvents] || {};
  2874. 				eventTypeList.forEach((eventName) => {
  2875. 					/**
  2876. 					 * @type {import("./../DOMUtils/dist/src/DOMUtilsEvent").DOMUtilsEventListenerOptionsAttribute[]}
  2877. 					 */
  2878. 					let handlers = elementEvents[eventName] || [];
  2879. 					// @ts-ignore
  2880. 					if (typeof filter === "function") {
  2881. 						// @ts-ignore
  2882. 						handlers = handlers.filter(filter);
  2883. 					}
  2884. 					for (let index = 0; index < handlers.length; index++) {
  2885. 						let handler = handlers[index];
  2886. 						let flag = !1;
  2887. 						if (!_selector_ || handler.selector === _selector_) {
  2888. 							/* selector不为空，进行selector判断 */
  2889. 							flag = !0;
  2890. 						}
  2891. 						if (
  2892. 							!_callback_ ||
  2893. 							// @ts-ignore
  2894. 							handler.callback === _callback_ ||
  2895. 							// @ts-ignore
  2896. 							handler.originCallBack === _callback_
  2897. 						) {
  2898. 							/* callback不为空，进行callback判断 */
  2899. 							flag = !0;
  2900. 						}
  2901.  
  2902. 						if (flag) {
  2903. 							elementItem.removeEventListener(
  2904. 								eventName,
  2905. 								handler.callback,
  2906. 								_option_
  2907. 							);
  2908. 							handlers.splice(index--, 1);
  2909. 						}
  2910. 					}
  2911. 					if (handlers.length === 0) {
  2912. 						/* 如果没有任意的handler，那么删除该属性 */
  2913. 						// @ts-ignore
  2914. 						delete elementEvents[eventType];
  2915. 					}
  2916. 				});
  2917. 				// @ts-ignore
  2918. 				elementItem[PopsUtils.SymbolEvents] = elementEvents;
  2919. 			});
  2920. 		},
  2921. 		/**
  2922. 		 * 主动触发事件
  2923. 		 * @param {HTMLElement|string|NodeList|HTMLElement[]|Window} element 需要触发的元素|元素数组|window
  2924. 		 * @param {import("./../DOMUtils/dist/src/DOMUtilsEvent").DOMUtils_EventType|import("./../DOMUtils/dist/src/DOMUtilsEvent").DOMUtils_EventType[]} eventType 需要触发的事件
  2925. 		 * @param {object|undefined} details 赋予触发的Event的额外属性
  2926. 		 * @param {boolean} [useDispatchToTriggerEvent=true] 是否使用dispatchEvent来触发事件,默认true
  2927. 		 */
  2928. 		trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
  2929. 			if (typeof element === "string") {
  2930. 				// @ts-ignore
  2931. 				element = document.querySelector(element);
  2932. 			}
  2933. 			if (element == void 0) {
  2934. 				return;
  2935. 			}
  2936. 			let elementList = [];
  2937. 			if (element instanceof NodeList || Array.isArray(element)) {
  2938. 				elementList = [...element];
  2939. 			} else {
  2940. 				elementList = [element];
  2941. 			}
  2942. 			// @ts-ignore
  2943. 			let eventTypeList = [];
  2944. 			if (Array.isArray(eventType)) {
  2945. 				eventTypeList = eventType;
  2946. 			} else if (typeof eventType === "string") {
  2947. 				eventTypeList = eventType.split(" ");
  2948. 			}
  2949. 			elementList.forEach((elementItem) => {
  2950. 				/* 获取对象上的事件 */
  2951. 				// @ts-ignore
  2952. 				let events = elementItem[PopsUtils.SymbolEvents] || {};
  2953. 				// @ts-ignore
  2954. 				eventTypeList.forEach((_eventType_) => {
  2955. 					let event = new Event(_eventType_);
  2956. 					if (details) {
  2957. 						Object.keys(details).forEach((keyName) => {
  2958. 							// @ts-ignore
  2959. 							event[keyName] = details[keyName];
  2960. 						});
  2961. 					}
  2962. 					if (useDispatchToTriggerEvent == false && _eventType_ in events) {
  2963. 						// @ts-ignore
  2964. 						events[_eventType_].forEach((eventsItem) => {
  2965. 							eventsItem.callback(event);
  2966. 						});
  2967. 					} else {
  2968. 						// @ts-ignore
  2969. 						elementItem.dispatchEvent(event);
  2970. 					}
  2971. 				});
  2972. 			});
  2973. 		},
  2974. 		/**
  2975. 		 * 实现jQuery中的$().offset();
  2976. 		 * @param {HTMLElement} element
  2977. 		 * @returns
  2978. 		 */
  2979. 		offset(element) {
  2980. 			let rect = element.getBoundingClientRect();
  2981. 			let win = element.ownerDocument.defaultView;
  2982. 			return {
  2983. 				// @ts-ignore
  2984. 				top: parseFloat(rect.top + win.pageYOffset),
  2985. 				// @ts-ignore
  2986. 				bottom: parseFloat(rect.bottom + win + pageYOffset),
  2987. 				// @ts-ignore
  2988. 				left: parseFloat(rect.left + win.pageXOffset),
  2989. 				// @ts-ignore
  2990. 				right: parseFloat(rect.right + win.pageXOffset),
  2991. 				width: rect.width,
  2992. 				height: rect.height,
  2993. 			};
  2994. 		},
  2995. 		/**
  2996. 		 * 获取元素的宽度
  2997. 		 * @param {HTMLElement} element - 要获取宽度的元素
  2998. 		 * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
  2999. 		 * @returns {number} - 元素的宽度，单位为像素
  3000. 		 */
  3001. 		width(element, isShow = false) {
  3002. 			if (PopsUtils.isWin(element)) {
  3003. 				return window.document.documentElement.clientWidth;
  3004. 			}
  3005. 			if (typeof element === "string") {
  3006. 				// @ts-ignore
  3007. 				element = document.querySelector(element);
  3008. 			}
  3009. 			if (element == void 0) {
  3010. 				// @ts-ignore
  3011. 				return;
  3012. 			}
  3013. 			if (element.nodeType === 9) {
  3014. 				/* 文档节点 */
  3015. 				return Math.max(
  3016. 					// @ts-ignore
  3017. 					element.body.scrollWidth,
  3018. 					// @ts-ignore
  3019. 					element.documentElement.scrollWidth,
  3020. 					// @ts-ignore
  3021. 					element.body.offsetWidth,
  3022. 					// @ts-ignore
  3023. 					element.documentElement.offsetWidth,
  3024. 					// @ts-ignore
  3025. 					element.documentElement.clientWidth
  3026. 				);
  3027. 			}
  3028. 			if (isShow || PopsUtils.isShow(element)) {
  3029. 				/* 已显示 */
  3030. 				/* 不从style中获取对应的宽度，因为可能使用了class定义了width !important */
  3031.  
  3032. 				/* 如果element.style.width为空  则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width */
  3033. 				// @ts-ignore
  3034. 				if (parseFloat(PopsUtils.getStyleValue(element, "width")) > 0) {
  3035. 					// @ts-ignore
  3036. 					return parseFloat(PopsUtils.getStyleValue(element, "width"));
  3037. 				}
  3038.  
  3039. 				/* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetWidth来进行计算 */
  3040. 				if (element.offsetWidth > 0) {
  3041. 					let borderLeftWidth = PopsUtils.getStyleValue(
  3042. 						element,
  3043. 						"borderLeftWidth"
  3044. 					);
  3045. 					let borderRightWidth = PopsUtils.getStyleValue(
  3046. 						element,
  3047. 						"borderRightWidth"
  3048. 					);
  3049. 					let paddingLeft = PopsUtils.getStyleValue(element, "paddingLeft");
  3050. 					let paddingRight = PopsUtils.getStyleValue(element, "paddingRight");
  3051. 					let backHeight =
  3052. 						// @ts-ignore
  3053. 						parseFloat(element.offsetWidth) -
  3054. 						// @ts-ignore
  3055. 						parseFloat(borderLeftWidth) -
  3056. 						// @ts-ignore
  3057. 						parseFloat(borderRightWidth) -
  3058. 						// @ts-ignore
  3059. 						parseFloat(paddingLeft) -
  3060. 						// @ts-ignore
  3061. 						parseFloat(paddingRight);
  3062. 					// @ts-ignore
  3063. 					return parseFloat(backHeight);
  3064. 				}
  3065. 				return 0;
  3066. 			} else {
  3067. 				/* 未显示 */
  3068. 				let { recovery } = PopsUtils.showElement(element);
  3069. 				let width = PopsDOMUtils.width(element, true);
  3070. 				recovery();
  3071. 				return width;
  3072. 			}
  3073. 		},
  3074. 		/**
  3075. 		 * 获取元素的高度
  3076. 		 * @param {HTMLElement} element - 要获取高度的元素
  3077. 		 * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
  3078. 		 * @returns {number} - 元素的高度，单位为像素
  3079. 		 */
  3080. 		height(element, isShow = false) {
  3081. 			if (PopsUtils.isWin(element)) {
  3082. 				return window.document.documentElement.clientHeight;
  3083. 			}
  3084. 			if (typeof element === "string") {
  3085. 				// @ts-ignore
  3086. 				element = document.querySelector(element);
  3087. 			}
  3088. 			if (element == void 0) {
  3089. 				// @ts-ignore
  3090. 				return;
  3091. 			}
  3092. 			if (element.nodeType === 9) {
  3093. 				/* 文档节点 */
  3094. 				return Math.max(
  3095. 					// @ts-ignore
  3096. 					element.body.scrollHeight,
  3097. 					// @ts-ignore
  3098. 					element.documentElement.scrollHeight,
  3099. 					// @ts-ignore
  3100. 					element.body.offsetHeight,
  3101. 					// @ts-ignore
  3102. 					element.documentElement.offsetHeight,
  3103. 					// @ts-ignore
  3104. 					element.documentElement.clientHeight
  3105. 				);
  3106. 			}
  3107. 			if (isShow || PopsUtils.isShow(element)) {
  3108. 				/* 已显示 */
  3109. 				/* 从style中获取对应的高度，因为可能使用了class定义了width !important */
  3110. 				/* 如果element.style.height为空  则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height */
  3111. 				// @ts-ignore
  3112. 				if (parseFloat(PopsUtils.getStyleValue(element, "height")) > 0) {
  3113. 					// @ts-ignore
  3114. 					return parseFloat(PopsUtils.getStyleValue(element, "height"));
  3115. 				}
  3116.  
  3117. 				/* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetHeight来进行计算 */
  3118. 				if (element.offsetHeight > 0) {
  3119. 					let borderTopWidth = PopsUtils.getStyleValue(
  3120. 						element,
  3121. 						"borderTopWidth"
  3122. 					);
  3123. 					let borderBottomWidth = PopsUtils.getStyleValue(
  3124. 						element,
  3125. 						"borderBottomWidth"
  3126. 					);
  3127. 					let paddingTop = PopsUtils.getStyleValue(element, "paddingTop");
  3128. 					let paddingBottom = PopsUtils.getStyleValue(element, "paddingBottom");
  3129. 					let backHeight =
  3130. 						// @ts-ignore
  3131. 						parseFloat(element.offsetHeight) -
  3132. 						// @ts-ignore
  3133. 						parseFloat(borderTopWidth) -
  3134. 						// @ts-ignore
  3135. 						parseFloat(borderBottomWidth) -
  3136. 						// @ts-ignore
  3137. 						parseFloat(paddingTop) -
  3138. 						// @ts-ignore
  3139. 						parseFloat(paddingBottom);
  3140. 					// @ts-ignore
  3141. 					return parseFloat(backHeight);
  3142. 				}
  3143. 				return 0;
  3144. 			} else {
  3145. 				/* 未显示 */
  3146. 				let { recovery } = PopsUtils.showElement(element);
  3147. 				let height = PopsDOMUtils.height(element, true);
  3148. 				recovery();
  3149. 				return height;
  3150. 			}
  3151. 		},
  3152. 		/**
  3153. 		 * 获取元素的外部宽度（包括边框和外边距）
  3154. 		 * @param {HTMLElement} element - 要获取外部宽度的元素
  3155. 		 * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
  3156. 		 * @returns {number} - 元素的外部宽度，单位为像素
  3157. 		 */
  3158. 		outerWidth(element, isShow = false) {
  3159. 			if (PopsUtils.isWin(element)) {
  3160. 				return window.innerWidth;
  3161. 			}
  3162. 			if (typeof element === "string") {
  3163. 				// @ts-ignore
  3164. 				element = document.querySelector(element);
  3165. 			}
  3166. 			if (element == void 0) {
  3167. 				// @ts-ignore
  3168. 				return;
  3169. 			}
  3170. 			if (isShow || PopsUtils.isShow(element)) {
  3171. 				let style = getComputedStyle(element, null);
  3172. 				let marginLeft = PopsUtils.getStyleValue(style, "marginLeft");
  3173. 				let marginRight = PopsUtils.getStyleValue(style, "marginRight");
  3174. 				return element.offsetWidth + marginLeft + marginRight;
  3175. 			} else {
  3176. 				let { recovery } = PopsUtils.showElement(element);
  3177. 				let outerWidth = PopsDOMUtils.outerWidth(element, true);
  3178. 				recovery();
  3179. 				return outerWidth;
  3180. 			}
  3181. 		},
  3182. 		/**
  3183. 		 * 获取元素的外部高度（包括边框和外边距）
  3184. 		 * @param {HTMLElement} element - 要获取外部高度的元素
  3185. 		 * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
  3186. 		 * @returns {number} - 元素的外部高度，单位为像素
  3187. 		 */
  3188. 		outerHeight(element, isShow = false) {
  3189. 			if (PopsUtils.isWin(element)) {
  3190. 				return window.innerHeight;
  3191. 			}
  3192. 			if (typeof element === "string") {
  3193. 				// @ts-ignore
  3194. 				element = document.querySelector(element);
  3195. 			}
  3196. 			if (element == void 0) {
  3197. 				// @ts-ignore
  3198. 				return;
  3199. 			}
  3200. 			if (isShow || PopsUtils.isShow(element)) {
  3201. 				let style = getComputedStyle(element, null);
  3202. 				let marginTop = PopsUtils.getStyleValue(style, "marginTop");
  3203. 				let marginBottom = PopsUtils.getStyleValue(style, "marginBottom");
  3204. 				return element.offsetHeight + marginTop + marginBottom;
  3205. 			} else {
  3206. 				let { recovery } = PopsUtils.showElement(element);
  3207. 				let outerHeight = PopsDOMUtils.outerHeight(element, true);
  3208. 				recovery();
  3209. 				return outerHeight;
  3210. 			}
  3211. 		},
  3212. 		/**
  3213. 		 * 添加className
  3214. 		 * @param {HTMLElement} element 目标元素
  3215. 		 * @param {string} className className属性
  3216. 		 */
  3217. 		addClassName(element, className) {
  3218. 			if (typeof className !== "string") {
  3219. 				return;
  3220. 			}
  3221. 			if (className.trim() === "") {
  3222. 				return;
  3223. 			}
  3224. 			element.classList.add(className);
  3225. 		},
  3226. 		/**
  3227. 		 * 删除className
  3228. 		 * @param {HTMLElement} element 目标元素
  3229. 		 * @param {string} className className属性
  3230. 		 */
  3231. 		removeClassName(element, className) {
  3232. 			if (typeof className !== "string") {
  3233. 				return;
  3234. 			}
  3235. 			if (className.trim() === "") {
  3236. 				return;
  3237. 			}
  3238. 			element.classList.remove(className);
  3239. 		},
  3240. 		/**
  3241. 		 * 判断元素是否包含某个className
  3242. 		 * @param {HTMLElement} element 目标元素
  3243. 		 * @param {string} className className属性
  3244. 		 */
  3245. 		containsClassName(element, className) {
  3246. 			if (typeof className !== "string") {
  3247. 				return;
  3248. 			}
  3249. 			if (className.trim() === "") {
  3250. 				return;
  3251. 			}
  3252. 			return element.classList.contains(className);
  3253. 		},
  3254. 		/**
  3255. 		 * 获取或设置元素的样式属性值
  3256. 		 * @param {HTMLElement|string} element 目标元素
  3257. 		 * @param {CSSStyleDeclaration|string} property 样式属性名或包含多个属性名和属性值的对象
  3258. 		 * @param {any} [value] 样式属性值（可选）
  3259. 		 * @returns 如果传入了value，则返回undefined；否则返回样式属性值
  3260. 		 **/
  3261. 		css(element, property, value) {
  3262. 			/**
  3263. 			 * 把纯数字没有px的加上
  3264. 			 */
  3265. 			// @ts-ignore
  3266. 			function handlePixe(propertyName, propertyValue) {
  3267. 				let allowAddPixe = [
  3268. 					"width",
  3269. 					"height",
  3270. 					"top",
  3271. 					"left",
  3272. 					"right",
  3273. 					"bottom",
  3274. 					"font-size",
  3275. 				];
  3276. 				if (typeof propertyValue === "number") {
  3277. 					propertyValue = propertyValue.toString();
  3278. 				}
  3279. 				if (
  3280. 					typeof propertyValue === "string" &&
  3281. 					allowAddPixe.includes(propertyName) &&
  3282. 					propertyValue.match(/[0-9]$/gi)
  3283. 				) {
  3284. 					propertyValue = propertyValue + "px";
  3285. 				}
  3286. 				return propertyValue;
  3287. 			}
  3288. 			if (typeof element === "string") {
  3289. 				// @ts-ignore
  3290. 				element = document.querySelector(element);
  3291. 			}
  3292. 			if (element == void 0) {
  3293. 				// @ts-ignore
  3294. 				return;
  3295. 			}
  3296. 			if (typeof property === "string") {
  3297. 				if (value === void 0) {
  3298. 					// @ts-ignore
  3299. 					return getComputedStyle(element).getPropertyValue(property);
  3300. 				} else {
  3301. 					if (value === "string" && value.includes("!important")) {
  3302. 						// @ts-ignore
  3303. 						element.style.setProperty(property, value, "important");
  3304. 					} else {
  3305. 						value = handlePixe(property, value);
  3306. 						// @ts-ignore
  3307. 						element.style.setProperty(property, value);
  3308. 					}
  3309. 				}
  3310. 			} else if (typeof property === "object") {
  3311. 				for (let prop in property) {
  3312. 					if (
  3313. 						typeof property[prop] === "string" &&
  3314. 						property[prop].includes("!important")
  3315. 					) {
  3316. 						// @ts-ignore
  3317. 						element.style.setProperty(prop, property[prop], "important");
  3318. 					} else {
  3319. 						property[prop] = handlePixe(prop, property[prop]);
  3320. 						// @ts-ignore
  3321. 						element.style.setProperty(prop, property[prop]);
  3322. 					}
  3323. 				}
  3324. 			}
  3325. 		},
  3326. 		/**
  3327. 		 * 创建元素
  3328. 		 * @param {keyof HTMLElementTagNameMap} tagName 元素类型
  3329. 		 * @param {HTMLElement|undefined} property 元素属性，对已有元素上的属性或者自定义的属性赋值
  3330. 		 * @param {object|undefined} attributes 元素自定义属性，通过setAttribute赋值
  3331. 		 * @returns {HTMLElement}
  3332. 		 */
  3333. 		createElement(tagName, property, attributes) {
  3334. 			let tempElement = document.createElement(tagName);
  3335. 			if (typeof property === "string") {
  3336. 				tempElement.innerHTML = property;
  3337. 				return tempElement;
  3338. 			}
  3339. 			if (property == void 0) {
  3340. 				// @ts-ignore
  3341. 				property = {};
  3342. 			}
  3343. 			if (attributes == void 0) {
  3344. 				attributes = {};
  3345. 			}
  3346. 			// @ts-ignore
  3347. 			Object.keys(property).forEach((key) => {
  3348. 				// @ts-ignore
  3349. 				let value = property[key];
  3350. 				// @ts-ignore
  3351. 				tempElement[key] = value;
  3352. 			});
  3353. 			Object.keys(attributes).forEach((key) => {
  3354. 				// @ts-ignore
  3355. 				let value = attributes[key];
  3356. 				if (typeof value === "object") {
  3357. 					/* object转字符串 */
  3358. 					value = JSON.stringify(value);
  3359. 				} else if (typeof value === "function") {
  3360. 					/* function转字符串 */
  3361. 					value = value.toString();
  3362. 				}
  3363. 				tempElement.setAttribute(key, value);
  3364. 			});
  3365. 			return tempElement;
  3366. 		},
  3367. 	};
  3368.  
  3369. 	/** 弹窗 */
  3370. 	const pops = {};
  3371.  
  3372. 	/** 配置 */
  3373. 	pops.config = {
  3374. 		/** 版本号 */
  3375. 		version: "2024.6.18",
  3376. 		cssText: {
  3377. 			/** 主CSS */
  3378. 			index: `@charset "utf-8";
  3379. 			* {
  3380. 				-webkit-box-sizing: border-box;
  3381. 				box-sizing: border-box;
  3382. 				margin: 0;
  3383. 				padding: 0;
  3384. 				-webkit-tap-highlight-color: transparent;
  3385. 				/* 代替::-webkit-scrollbar */
  3386. 				scrollbar-width: thin;
  3387. 			}
  3388. 			.pops{
  3389. 				--pops-bg-opacity: 1;
  3390. 				--pops-bd-opacity: 1;
  3391. 				--pops-font-size: 16px;
  3392. 			}
  3393. 			.pops-mask{
  3394. 				--pops-mask-bg-opacity: 0.4;
  3395. 			}
  3396. 			.pops {
  3397. 				background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  3398. 				border-radius: 4px;
  3399. 				border: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));
  3400. 				font-size: var(--pops-font-size);
  3401. 				box-shadow: 0 0 12px rgba(0,0,0,.12);
  3402. 				box-sizing: border-box;
  3403. 				overflow: hidden;
  3404. 				transition: all .35s
  3405. 			}
  3406. 			.pops-anim{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;}
  3407. 			.pops-anim[anim=""]{top:unset;right:unset;bottom:unset;left:unset;width:unset;height:unset;transition:none;}
  3408. 			/* 底部图标动画和样式 */
  3409. 			.pops i.pops-bottom-icon[is-loading="true"]{animation: rotating 2s linear infinite;}
  3410. 			.pops i.pops-bottom-icon{height:1em;width:1em;line-height:1em;display:inline-flex;justify-content:center;align-items:center;position:relative;fill:currentColor;color:inherit;font-size:inherit}
  3411. 			
  3412. 			/* 遮罩层样式 */
  3413. 			.pops-mask{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;border-radius:0;background-color:rgba(0,0,0,var(--pops-mask-bg-opacity));box-shadow:none;transition:none;}
  3414. 			
  3415. 			
  3416. 			.pops-header-controls button.pops-header-control[type][data-header]{
  3417. 				float: right;
  3418. 				margin: 0 0;
  3419. 				outline: 0;
  3420. 				border: 0;
  3421. 				border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
  3422. 				background-color: transparent;
  3423. 				color: #888;
  3424. 				cursor: pointer;
  3425. 			}
  3426. 			.pops-header-controls button.pops-header-control[type=max],
  3427. 			.pops-header-controls button.pops-header-control[type=mise],
  3428. 			.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));background-color:transparent;color:rgb(136, 136, 136);cursor:pointer;transition:all .3s ease-in-out;}
  3429. 			button.pops-header-control i{color:rgb(144, 147, 153);font-size:inherit;display:inline-flex;justify-content:center;align-items:center;position:relative;fill:currentColor}
  3430. 			button.pops-header-control svg{height:1.25em;width:1.25em}
  3431. 			button.pops-header-control{right:15px;padding:0;border:none;outline:0;background:0 0;cursor:pointer;position:unset;line-height:1.15;}
  3432. 			button.pops-header-control i:hover{color:rgb(64, 158, 255)}
  3433. 			.pops-header-controls[data-margin] button.pops-header-control{margin:0 6px}
  3434. 			.pops[type-value] .pops-header-controls{display: flex;}
  3435. 			`,
  3436. 			/** 九宫格位置CSS */
  3437. 			ninePalaceGridPosition: `
  3438. 			.pops[position=top_left]{position:fixed;top:0;left:0;}
  3439. 			.pops[position=top]{position:fixed;top:0;left:50%;transform:translateX(-50%);}
  3440. 			.pops[position=top_right]{position:fixed;top:0;right:0;}
  3441. 			.pops[position=center_left]{position:fixed;top:50%;left:0;transform:translateY(-50%);}
  3442. 			.pops[position=center]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);}
  3443. 			.pops[position=center_right]{position:fixed;top:50%;right:0;transform:translateY(-50%);}
  3444. 			.pops[position=bottom_left]{position:fixed;bottom:0;left:0;}
  3445. 			.pops[position=bottom]{position:fixed;bottom:0;left:50%;transform:translate(-50%,0);}
  3446. 			.pops[position=bottom_right]{position:fixed;right:0;bottom:0;}
  3447. 			
  3448. 			`,
  3449. 			/** 滚动条CSS */
  3450. 			scrollbar: `
  3451. 			/* firefox上暂不支持::-webkit-scrollbar */
  3452. 			.pops ::-webkit-scrollbar{
  3453. 				width:6px;
  3454. 				height:0;
  3455. 			}
  3456.  
  3457. 			.pops ::-webkit-scrollbar-track{
  3458. 				width:0;
  3459. 			}
  3460. 			.pops ::-webkit-scrollbar-thumb:hover{
  3461. 				background: rgb(178, 178, 178, var(--pops-bg-opacity));
  3462. 			}
  3463. 			.pops ::-webkit-scrollbar-thumb{
  3464. 				min-height: 28px;
  3465. 				border-radius: 2em;
  3466. 				background: rgb(204, 204, 204, var(--pops-bg-opacity));
  3467. 				background-clip: padding-box;
  3468. 			}
  3469. 			`,
  3470. 			/** 按钮CSS */
  3471. 			button: `
  3472. 			.pops {
  3473. 				--button-font-size: 14px;
  3474. 				--button-height: 32px;
  3475. 				--button-color: rgb(51, 51, 51);
  3476. 				--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
  3477. 				--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
  3478. 				--button-margin-top: 0px;
  3479. 				--button-margin-bottom: 0px;
  3480. 				--button-margin-left: 5px;
  3481. 				--button-margin-right: 5px;
  3482. 				--button-padding-top: 6px;
  3483. 				--button-padding-bottom: 6px;
  3484. 				--button-padding-left: 12px;
  3485. 				--button-padding-right: 12px;
  3486. 				--button-radius: 4px;
  3487. 			
  3488. 				--container-title-height: 55px;
  3489. 				--container-bottom-btn-height: 55px;
  3490. 			}
  3491. 			.pops[data-bottom-btn="false"]{
  3492. 				--container-bottom-btn-height: 0px;
  3493. 			}
  3494. 			.pops button {
  3495. 				white-space: nowrap;
  3496. 				float: right;
  3497. 				display: inline-block;
  3498. 				margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);
  3499. 				padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
  3500. 				outline: 0;
  3501. 			}
  3502. 			.pops button {
  3503. 				border-radius: var(--button-radius);
  3504. 				box-shadow: none;
  3505. 				font-weight: 400;
  3506. 				font-size: var(--button-font-size);
  3507. 				cursor: pointer;
  3508. 				transition: all .3s ease-in-out;
  3509. 			}
  3510. 			.pops button {
  3511. 				display: flex;
  3512. 				align-items: center;
  3513. 				height: var(--button-height);
  3514. 				line-height: 1;
  3515. 				box-sizing: border-box;
  3516. 				user-select: none;
  3517. 				-webkit-user-select: none;
  3518. 				-moz-user-select: none;
  3519. 				-ms-user-select: none;
  3520. 				border: 1px solid var(--button-bd-color);
  3521. 			}
  3522. 			.pops button {
  3523. 				color: var(--button-color);
  3524. 				border-color: var(--button-bd-color);
  3525. 				background-color: var(--button-bg-color);
  3526. 			}
  3527. 			.pops button:active{
  3528. 				color: var(--button-color);
  3529. 				border-color: var(--button-bd-color);
  3530. 				background-color: var(--button-bg-color);
  3531. 				outline: 0;
  3532. 			}
  3533. 			.pops button:hover{
  3534. 				color: var(--button-color);
  3535. 				border-color: var(--button-bd-color);
  3536. 				background-color: var(--button-bg-color);
  3537. 			}
  3538. 			.pops button:focus-visible{
  3539. 				color: var(--button-color);
  3540. 				border-color: var(--button-bd-color);
  3541. 				background-color: var(--button-bg-color);
  3542. 			}
  3543. 			.pops button:disabled {
  3544. 				cursor: not-allowed;
  3545. 				color: var(--button-color);
  3546. 				border-color: var(--button-bd-color);
  3547. 				background-color: var(--button-bg-color);
  3548. 			}
  3549. 			.pops button.pops-button-large {
  3550. 				--button-height: 32px;
  3551. 				--button-padding-top: 12px;
  3552. 				--button-padding-bottom: 12px;
  3553. 				--button-padding-left: 19px;
  3554. 				--button-padding-right: 19px;
  3555. 				--button-font-size: 14px;
  3556. 				--button-border-radius: 4px;
  3557. 			}
  3558. 			
  3559. 			.pops button.pops-button-small {
  3560. 				--button-height: 24px;
  3561. 				--button-padding-top: 5px;
  3562. 				--button-padding-bottom: 5px;
  3563. 				--button-padding-left: 11px;
  3564. 				--button-padding-right: 11px;
  3565. 				--button-font-size: 12px;
  3566. 				--button-border-radius: 4px;
  3567. 			}
  3568. 			.pops-panel-button-no-icon .pops-panel-button_inner i{
  3569. 				display: none;
  3570. 			}
  3571. 			.pops-panel-button-right-icon{
  3572. 				
  3573. 			}
  3574. 			.pops-panel-button-right-icon .pops-panel-button_inner{
  3575. 				flex-direction: row-reverse;
  3576. 			}
  3577. 			.pops-panel-button-right-icon .pops-panel-button_inner i{
  3578. 			
  3579. 			}
  3580. 			.pops-panel-button .pops-panel-button_inner i:has(svg),
  3581. 			.pops-panel-button-right-icon .pops-panel-button-text{
  3582. 				margin-right: 6px;
  3583. 			}
  3584. 			
  3585. 				
  3586. 			.pops button[type=default]{--button-color:#333333;--button-bd-color:#dcdfe6;--button-bg-color:#ffffff;}
  3587. 			.pops button[type=default]:active{--button-color:#409eff;--button-bd-color:#409eff;--button-bg-color:#ecf5ff;}
  3588. 			.pops button[type=default]:hover{--button-color:#409eff;--button-bd-color:#c6e2ff;--button-bg-color:#ecf5ff;}
  3589. 			.pops button[type=default]:focus-visible{outline:2px solid #a0cfff;outline-offset:1px;}
  3590. 			.pops button[type=default]:disabled{--button-color:#a8abb2;--button-bd-color:#fff;--button-bg-color:#e4e7ed;}
  3591. 			
  3592. 			.pops button[type=primary]{--button-color:#ffffff;--button-bd-color:#409eff;--button-bg-color:#409eff;}
  3593. 			.pops button[type=primary]:active{--button-color:#ffffff;--button-bd-color:#337ecc;--button-bg-color:#337ecc;}
  3594. 			.pops button[type=primary]:hover{--button-color:#ffffff;--button-bd-color:#79bbff;--button-bg-color:#79bbff;}
  3595. 			.pops button[type=primary]:focus-visible{outline:2px solid #a0cfff;outline-offset:1px;}
  3596. 			.pops button[type=primary]:disabled{--button-color:#ffffff;--button-bd-color:#a0cfff;--button-bg-color:#a0cfff;}
  3597. 			
  3598. 			.pops button[type=success]{--button-color:#ffffff;--button-bd-color:#4cae4c;--button-bg-color:#5cb85c;}
  3599. 			.pops button[type=success]:active{--button-color:#ffffff;--button-bd-color:#529b2e;--button-bg-color:#529b2e;}
  3600. 			.pops button[type=success]:hover{--button-color:#ffffff;--button-bd-color:#95d475;--button-bg-color:#95d475;}
  3601. 			.pops button[type=success]:focus-visible{outline:2px solid #b3e19d;outline-offset:1px;}
  3602. 			.pops button[type=success]:disabled{--button-color:#ffffff;--button-bd-color:#b3e19d;--button-bg-color:#b3e19d;}
  3603. 			
  3604. 			.pops button[type=info]{--button-color:#ffffff;--button-bd-color:#909399;--button-bg-color:#909399;}
  3605. 			.pops button[type=info]:active{--button-color:#ffffff;--button-bd-color:#73767a;--button-bg-color:#73767a;}
  3606. 			.pops button[type=info]:hover{--button-color:#ffffff;--button-bd-color:#b1b3b8;--button-bg-color:#b1b3b8;}
  3607. 			.pops button[type=info]:focus-visible{outline:2px solid #c8c9cc;outline-offset:1px;}
  3608. 			.pops button[type=info]:disabled{--button-color:#ffffff;--button-bd-color:#c8c9cc;--button-bg-color:#c8c9cc;}
  3609. 			
  3610. 			.pops button[type=warning]{--button-color:#ffffff;--button-bd-color:#e6a23c;--button-bg-color:#e6a23c;}
  3611. 			.pops button[type=warning]:active{--button-color:#ffffff;--button-bd-color:#b88230;--button-bg-color:#b88230;}
  3612. 			.pops button[type=warning]:hover{--button-color:#ffffff;--button-bd-color:#eebe77;--button-bg-color:#eebe77;}
  3613. 			.pops button[type=warning]:focus-visible{outline:2px solid #f3d19e;outline-offset:1px;}
  3614. 			.pops button[type=warning]:disabled{--button-color:#ffffff;--button-bd-color:#f3d19e;--button-bg-color:#f3d19e;}
  3615. 			
  3616. 			.pops button[type=danger]{--button-color:#ffffff;--button-bd-color:#f56c6c;--button-bg-color:#f56c6c;}
  3617. 			.pops button[type=danger]:active{--button-color:#ffffff;--button-bd-color:#c45656;--button-bg-color:#c45656;}
  3618. 			.pops button[type=danger]:hover{--button-color:#ffffff;--button-bd-color:#f89898;--button-bg-color:#f89898;}
  3619. 			.pops button[type=danger]:focus-visible{outline:2px solid #fab6b6;outline-offset:1px;}
  3620. 			.pops button[type=danger]:disabled{--button-color:#ffffff;--button-bd-color:#fab6b6;--button-bg-color:#fab6b6;}
  3621. 			
  3622. 			.pops button[type=xiaomi-primary]{--button-color:#ffffff;--button-bd-color:#ff5c00;--button-bg-color:#ff5c00;}
  3623. 			.pops button[type=xiaomi-primary]:active{--button-color:#ffffff;--button-bd-color:#da4f00;--button-bg-color:#da4f00;}
  3624. 			.pops button[type=xiaomi-primary]:hover{--button-color:#ffffff;--button-bd-color:#ff7e29;--button-bg-color:#ff7e29;}
  3625. 			.pops button[type=xiaomi-primary]:focus-visible{outline:2px solid #fab6b6;outline-offset:1px;}
  3626. 			.pops button[type=xiaomi-primary]:disabled{--button-color:#ffffff;--button-bd-color:#fad5b6;--button-bg-color:#fad5b6;}
  3627. 			
  3628. 			`,
  3629. 			/** 通用的CSS */
  3630. 			common: `
  3631. 			.pops-flex-items-center{display: flex;align-items: center;}
  3632. 			.pops-flex-y-center{display: flex;justify-content: space-between;}
  3633. 			.pops-flex-x-center{display: flex;align-content: center;}
  3634. 			.pops-hide {display: none;}
  3635. 			.pops-hide-important {display: none !important;}
  3636. 			.pops-no-border{border: 0;}
  3637. 			.pops-no-border-important{border: 0;}
  3638. 			`,
  3639. 			/** 动画 */
  3640. 			anim: `
  3641. 			@keyframes rotating{0%{transform:rotate(0)}
  3642. 			to{transform:rotate(360deg)}
  3643. 			}
  3644. 			@keyframes iframeLoadingChange_85{0%{background:linear-gradient(to right,#4995dd,#fff,rgb(202 224 246));}
  3645. 			20%{background:linear-gradient(to right,#4995dd,#ead0d0,rgb(123 185 246));}
  3646. 			40%{background:linear-gradient(to right,#4995dd,#f4b7b7,rgb(112 178 244));}
  3647. 			60%{background:linear-gradient(to right,#4995dd,#ec9393,rgb(80 163 246));}
  3648. 			80%{background:linear-gradient(to right,#4995dd,#e87f7f,rgb(25 139 253));}
  3649. 			100%{background:linear-gradient(to right,#4995dd,#ee2c2c,rgb(0 124 247));}
  3650. 			from{width:75%;}
  3651. 			to{width:100%;}
  3652. 			}
  3653. 			@keyframes iframeLoadingChange{0%{background:linear-gradient(to right,#4995dd,#fff,rgb(202 224 246));}
  3654. 			20%{background:linear-gradient(to right,#4995dd,#ead0d0,rgb(123 185 246));}
  3655. 			40%{background:linear-gradient(to right,#4995dd,#f4b7b7,rgb(112 178 244));}
  3656. 			60%{background:linear-gradient(to right,#4995dd,#ec9393,rgb(80 163 246));}
  3657. 			80%{background:linear-gradient(to right,#4995dd,#e87f7f,rgb(25 139 253));}
  3658. 			100%{background:linear-gradient(to right,#4995dd,#ee2c2c,rgb(0 124 247));}
  3659. 			from{width:0;}
  3660. 			to{width:75%;}
  3661. 			}
  3662. 			@keyframes pops-anim-wait-rotate{form{transform:rotate(0);}
  3663. 			to{transform:rotate(360deg);}
  3664. 			}
  3665. 			@keyframes pops-anim-spread{0%{opacity:0;transform:scaleX(0);}
  3666. 			100%{opacity:1;transform:scaleX(1);}
  3667. 			}
  3668. 			@keyframes pops-anim-shake{0%,100%{transform:translateX(0);}
  3669. 			10%,30%,50%,70%,90%{transform:translateX(-10px);}
  3670. 			20%,40%,60%,80%{transform:translateX(10px);}
  3671. 			}
  3672. 			@keyframes pops-anim-rolling-left{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
  3673. 			100%{opacity:1;transform:translateX(0) rotate(0);}
  3674. 			}
  3675. 			@keyframes pops-anim-rolling-right{0%{opacity:0;transform:translateX(100%) rotate(120deg);}
  3676. 			100%{opacity:1;transform:translateX(0) rotate(0);}
  3677. 			}
  3678. 			@keyframes pops-anim-slide-top{0%{opacity:0;transform:translateY(-200%);}
  3679. 			100%{opacity:1;transform:translateY(0);}
  3680. 			}
  3681. 			@keyframes pops-anim-slide-bottom{0%{opacity:0;transform:translateY(200%);}
  3682. 			100%{opacity:1;transform:translateY(0);}
  3683. 			}
  3684. 			@keyframes pops-anim-slide-left{0%{opacity:0;transform:translateX(-200%);}
  3685. 			100%{opacity:1;transform:translateX(0);}
  3686. 			}
  3687. 			@keyframes pops-anim-slide-right{0%{transform:translateX(200%);}
  3688. 			100%{opacity:1;transform:translateX(0);}
  3689. 			}
  3690. 			@keyframes pops-anim-fadein{0%{opacity:0;}
  3691. 			100%{opacity:1;}
  3692. 			}
  3693. 			@keyframes pops-anim-fadein-zoom{0%{opacity:0;transform:scale(.5);}
  3694. 			100%{opacity:1;transform:scale(1);}
  3695. 			}
  3696. 			@keyframes pops-anim-fadein-alert{0%{transform:scale(.5);}
  3697. 			45%{transform:scale(1.05);}
  3698. 			80%{transform:scale(.95);}
  3699. 			100%{transform:scale(1);}
  3700. 			}
  3701. 			@keyframes pops-anim-don{0%{opacity:0;transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);}
  3702. 			2.08333%{transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);}
  3703. 			4.16667%{transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);}
  3704. 			6.25%{transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);}
  3705. 			8.33333%{transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3706. 			10.4167%{transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);}
  3707. 			12.5%{transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);}
  3708. 			14.5833%{transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);}
  3709. 			16.6667%{transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);}
  3710. 			18.75%{transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);}
  3711. 			20.8333%{transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);}
  3712. 			22.9167%{transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);}
  3713. 			25%{transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3714. 			27.0833%{transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);}
  3715. 			29.1667%{transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);}
  3716. 			31.25%{transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);}
  3717. 			33.3333%{transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);}
  3718. 			35.4167%{transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);}
  3719. 			37.5%{transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);}
  3720. 			39.5833%{transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);}
  3721. 			41.6667%{transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3722. 			43.75%{transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);}
  3723. 			45.8333%{transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);}
  3724. 			47.9167%{transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);}
  3725. 			50%{opacity:1;transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);}
  3726. 			52.0833%{transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);}
  3727. 			54.1667%{transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);}
  3728. 			56.25%{transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);}
  3729. 			58.3333%{transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3730. 			60.4167%{transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);}
  3731. 			62.5%{transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);}
  3732. 			64.5833%{transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);}
  3733. 			66.6667%{transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);}
  3734. 			68.75%{transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);}
  3735. 			70.8333%{transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);}
  3736. 			72.9167%{transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);}
  3737. 			75%{transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3738. 			77.0833%{transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);}
  3739. 			79.1667%{transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);}
  3740. 			81.25%{transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);}
  3741. 			83.3333%{transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);}
  3742. 			85.4167%{transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);}
  3743. 			87.5%{transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);}
  3744. 			89.5833%{transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);}
  3745. 			91.6667%{transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3746. 			93.75%{transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);}
  3747. 			95.8333%{transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);}
  3748. 			97.9167%{transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);}
  3749. 			100%{opacity:1;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3750. 			}
  3751. 			@keyframes pops-anim-roll{0%{transform:perspective(1000px) rotate3d(1,0,0,90deg);}
  3752. 			100%{transform:perspective(1000px) rotate3d(1,0,0,0deg);}
  3753. 			}
  3754. 			@keyframes pops-anim-sandra{0%{opacity:0;transform:scale3d(1.1,1.1,1);}
  3755. 			100%{opacity:1;transform:scale3d(1,1,1);}
  3756. 			}
  3757. 			@keyframes pops-anim-gather{0%{opacity:0;transform:scale(5,0);}
  3758. 			100%{opacity:1;transform:scale(1,1);}
  3759. 			}
  3760. 			@keyframes pops-anim-spread-reverse{0%{opacity:1;transform:scaleX(1);}
  3761. 			100%{opacity:0;transform:scaleX(0);}
  3762. 			}
  3763. 			@keyframes pops-anim-shake-reverse{0%,100%{transform:translateX(10px);}
  3764. 			10%,30%,50%,70%,90%{transform:translateX(-10px);}
  3765. 			20%,40%,60%,80%{transform:translateX(0);}
  3766. 			}
  3767. 			@keyframes pops-anim-rolling-left-reverse{0%{opacity:1;transform:translateX(0) rotate(0);}
  3768. 			100%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
  3769. 			}
  3770. 			@keyframes pops-anim-rolling-right-reverse{0%{opacity:1;transform:translateX(0) rotate(0);}
  3771. 			100%{opacity:0;transform:translateX(100%) rotate(120deg);}
  3772. 			}
  3773. 			@keyframes pops-anim-slide-top-reverse{0%{opacity:1;transform:translateY(0);}
  3774. 			100%{opacity:0;transform:translateY(-200%);}
  3775. 			}
  3776. 			@keyframes pops-anim-slide-bottom-reverse{0%{opacity:1;transform:translateY(0);}
  3777. 			100%{opacity:0;transform:translateY(200%);}
  3778. 			}
  3779. 			@keyframes pops-anim-slide-left-reverse{0%{opacity:1;transform:translateX(0);}
  3780. 			100%{opacity:0;transform:translateX(-200%);}
  3781. 			}
  3782. 			@keyframes pops-anim-slide-right-reverse{0%{opacity:1;transform:translateX(0);}
  3783. 			100%{transform:translateX(200%);}
  3784. 			}
  3785. 			@keyframes pops-anim-fadein-reverse{0%{opacity:1;}
  3786. 			100%{opacity:0;}
  3787. 			}
  3788. 			@keyframes pops-anim-fadein-zoom-reverse{0%{opacity:1;transform:scale(1);}
  3789. 			100%{opacity:0;transform:scale(.5);}
  3790. 			}
  3791. 			@keyframes pops-anim-fadein-alert-reverse{0%{transform:scale(1);}
  3792. 			45%{transform:scale(.95);}
  3793. 			80%{transform:scale(1.05);}
  3794. 			100%{transform:scale(.5);}
  3795. 			}
  3796. 			@keyframes pops-anim-don-reverse{100%{opacity:0;transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);}
  3797. 			97.9167%{transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);}
  3798. 			95.8333%{transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);}
  3799. 			93.75%{transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);}
  3800. 			91.6667%{transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3801. 			89.5833%{transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);}
  3802. 			87.5%{transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);}
  3803. 			85.4167%{transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);}
  3804. 			83.3333%{transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);}
  3805. 			81.25%{transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);}
  3806. 			79.1667%{transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);}
  3807. 			77.0833%{transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);}
  3808. 			75%{transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3809. 			72.9167%{transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);}
  3810. 			70.8333%{transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);}
  3811. 			68.75%{transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);}
  3812. 			66.6667%{transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);}
  3813. 			64.5833%{transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);}
  3814. 			62.5%{transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);}
  3815. 			60.4167%{transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);}
  3816. 			58.3333%{transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3817. 			56.25%{transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);}
  3818. 			54.1667%{transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);}
  3819. 			52.0833%{transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);}
  3820. 			50%{opacity:1;transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);}
  3821. 			47.9167%{transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);}
  3822. 			45.8333%{transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);}
  3823. 			43.75%{transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);}
  3824. 			41.6667%{transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3825. 			39.5833%{transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);}
  3826. 			37.5%{transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);}
  3827. 			35.4167%{transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);}
  3828. 			33.3333%{transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);}
  3829. 			31.25%{transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);}
  3830. 			29.1667%{transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);}
  3831. 			27.0833%{transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);}
  3832. 			25%{transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3833. 			22.9167%{transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);}
  3834. 			20.8333%{transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);}
  3835. 			18.75%{transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);}
  3836. 			16.6667%{transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);}
  3837. 			14.5833%{transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);}
  3838. 			12.5%{transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);}
  3839. 			10.4167%{transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);}
  3840. 			8.33333%{transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
  3841. 			6.25%{transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);}
  3842. 			4.16667%{transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);}
  3843. 			2.08333%{transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);}
  3844. 			0%{opacity:1;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0type=close,1);}
  3845. 			}
  3846. 			@keyframes pops-anim-roll-reverse{0%{transform:perspective(1000px) rotate3d(1,0,0,0deg);}
  3847. 			100%{transform:perspective(1000px) rotate3d(1,0,0,90deg);}
  3848. 			}
  3849. 			@keyframes pops-anim-sandra-reverse{0%{opacity:1;transform:scale3d(1,1,1);}
  3850. 			100%{opacity:0;transform:scale3d(1.1,1.1,1);}
  3851. 			}
  3852. 			@keyframes pops-anim-gather-reverse{0%{opacity:0;transform:scale(5,0);}
  3853. 			100%{opacity:0;transform:scale(5,0);}
  3854. 			}
  3855. 		
  3856. 			@-webkit-keyframes pops-motion-fadeInTop{0%{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px);}
  3857. 			100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3858. 			}
  3859. 			@keyframes pops-motion-fadeInTop{0%{opacity:0;transform:translateY(-30px);-ms-transform:translateY(-30px);}
  3860. 			100%{opacity:1;transform:translateX(0);-ms-transform:translateX(0);}
  3861. 			}
  3862. 			@-webkit-keyframes pops-motion-fadeOutTop{0%{opacity:10;-webkit-transform:translateY(0);transform:translateY(0);}
  3863. 			100%{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px);}
  3864. 			}
  3865. 			@keyframes pops-motion-fadeOutTop{0%{opacity:1;transform:translateY(0);-ms-transform:translateY(0);}
  3866. 			100%{opacity:0;transform:translateY(-30px);-ms-transform:translateY(-30px);}
  3867. 			}
  3868. 			@-webkit-keyframes pops-motion-fadeInBottom{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
  3869. 			100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
  3870. 			}
  3871. 			@keyframes pops-motion-fadeInBottom{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);-ms-transform:translateY(20px);}
  3872. 			100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-transform:translateY(0);}
  3873. 			}
  3874. 			@-webkit-keyframes pops-motion-fadeOutBottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
  3875. 			100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
  3876. 			}
  3877. 			@keyframes pops-motion-fadeOutBottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-transform:translateY(0);}
  3878. 			100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);-ms-transform:translateY(20px);}
  3879. 			}
  3880. 			@-webkit-keyframes pops-motion-fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px);}
  3881. 			100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3882. 			}
  3883. 			@keyframes pops-motion-fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-30px);transform:translateX(-30px);-ms-transform:translateX(-30px);}
  3884. 			100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
  3885. 			}
  3886. 			@-webkit-keyframes pops-motion-fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3887. 			100%{opacity:0;-webkit-transform:translateX(-30px);transform:translateX(-30px);}
  3888. 			}
  3889. 			@keyframes pops-motion-fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
  3890. 			100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px);-ms-transform:translateX(-20px);}
  3891. 			}
  3892. 			@-webkit-keyframes pops-motion-fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);}
  3893. 			100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3894. 			}
  3895. 			@keyframes pops-motion-fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);-ms-transform:translateX(20px);}
  3896. 			100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
  3897. 			}
  3898. 			@-webkit-keyframes pops-motion-fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
  3899. 			100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);}
  3900. 			}
  3901. 			@keyframes pops-motion-fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
  3902. 			100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);-ms-transform:translateX(20px);}
  3903. 			}
  3904.  
  3905.  
  3906. 			/* 动画 */
  3907. 			.pops-anim[anim=pops-anim-spread]{animation:pops-anim-spread .3s;}
  3908. 			.pops-anim[anim=pops-anim-shake]{animation:pops-anim-shake .3s;}
  3909. 			.pops-anim[anim=pops-anim-rolling-left]{animation:pops-anim-rolling-left .3s;}
  3910. 			.pops-anim[anim=pops-anim-rolling-right]{animation:pops-anim-rolling-right .3s;}
  3911. 			.pops-anim[anim=pops-anim-slide-top]{animation:pops-anim-slide-top .3s;}
  3912. 			.pops-anim[anim=pops-anim-slide-bottom]{animation:pops-anim-slide-bottom .3s;}
  3913. 			.pops-anim[anim=pops-anim-slide-left]{animation:pops-anim-slide-left .3s;}
  3914. 			.pops-anim[anim=pops-anim-slide-right]{animation:pops-anim-slide-right .3s;}
  3915. 			.pops-anim[anim=pops-anim-fadein]{animation:pops-anim-fadein .3s;}
  3916. 			.pops-anim[anim=pops-anim-fadein-zoom]{animation:pops-anim-fadein-zoom .3s;}
  3917. 			.pops-anim[anim=pops-anim-fadein-alert]{animation:pops-anim-fadein-alert .3s;}
  3918. 			.pops-anim[anim=pops-anim-don]{animation:pops-anim-don .3s;}
  3919. 			.pops-anim[anim=pops-anim-roll]{animation:pops-anim-roll .3s;}
  3920. 			.pops-anim[anim=pops-anim-sandra]{animation:pops-anim-sandra .3s;}
  3921. 			.pops-anim[anim=pops-anim-gather]{animation:pops-anim-gather .3s;}
  3922. 			.pops-anim[anim=pops-anim-spread-reverse]{animation:pops-anim-spread-reverse .3s;}
  3923. 			.pops-anim[anim=pops-anim-shake-reverse]{animation:pops-anim-shake-reverse .3s;}
  3924. 			.pops-anim[anim=pops-anim-rolling-left-reverse]{animation:pops-anim-rolling-left-reverse .3s;}
  3925. 			.pops-anim[anim=pops-anim-rolling-right-reverse]{animation:pops-anim-rolling-right-reverse .3s;}
  3926. 			.pops-anim[anim=pops-anim-slide-top-reverse]{animation:pops-anim-slide-top-reverse .3s;}
  3927. 			.pops-anim[anim=pops-anim-slide-bottom-reverse]{animation:pops-anim-slide-bottom-reverse .3s;}
  3928. 			.pops-anim[anim=pops-anim-slide-left-reverse]{animation:pops-anim-slide-left-reverse .3s;}
  3929. 			.pops-anim[anim=pops-anim-slide-right-reverse]{animation:pops-anim-slide-right-reverse .3s;}
  3930. 			.pops-anim[anim=pops-anim-fadein-reverse]{animation:pops-anim-fadein-reverse .3s;}
  3931. 			.pops-anim[anim=pops-anim-fadein-zoom-reverse]{animation:pops-anim-fadein-zoom-reverse .3s;}
  3932. 			.pops-anim[anim=pops-anim-fadein-alert-reverse]{animation:pops-anim-fadein-alert-reverse .3s;}
  3933. 			.pops-anim[anim=pops-anim-don-reverse]{animation:pops-anim-don-reverse .3s;}
  3934. 			.pops-anim[anim=pops-anim-roll-reverse]{animation:pops-anim-roll-reverse .3s;}
  3935. 			.pops-anim[anim=pops-anim-sandra-reverse]{animation:pops-anim-sandra-reverse .3s;}
  3936. 			.pops-anim[anim=pops-anim-gather-reverse]{animation:pops-anim-gather-reverse .3s;}
  3937. 			`,
  3938. 			alertCSS: `
  3939. 			.pops[type-value] .pops-alert-title{display: flex;align-items: center;justify-content: space-between;}
  3940. 			.pops[type-value=alert] .pops-alert-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3941. 			.pops[type-value=alert] .pops-alert-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);}
  3942. 			.pops[type-value=alert] .pops-alert-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;}
  3943. 			.pops[type-value=alert] .pops-alert-content{
  3944. 			width:100%;
  3945. 			height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  3946. 			overflow: auto;
  3947. 			word-break:break-word;
  3948. 			}
  3949. 			.pops[type-value=alert] .pops-alert-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);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;}
  3950.  
  3951. 			`,
  3952. 			confirmCSS: `
  3953. 			.pops[type-value] .pops-confirm-title{display: flex;align-items: center;justify-content: space-between;}
  3954. 			.pops[type-value=confirm] .pops-confirm-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3955. 			.pops[type-value=confirm] .pops-confirm-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);}
  3956. 			.pops[type-value=confirm] .pops-confirm-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;}
  3957. 			.pops[type-value=confirm] .pops-confirm-content{
  3958. 				width:100%;
  3959. 				height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  3960. 				overflow: auto;
  3961. 				word-break:break-word;
  3962. 			}
  3963. 			.pops[type-value=confirm] .pops-confirm-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);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;}
  3964. 			
  3965. 			`,
  3966. 			promptCSS: `
  3967. 			.pops[type-value] .pops-prompt-title{display: flex;align-items: center;justify-content: space-between;}
  3968. 			.pops[type-value=prompt] .pops-prompt-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  3969. 			.pops[type-value=prompt] .pops-prompt-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);}
  3970. 			.pops[type-value=prompt] .pops-prompt-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;}
  3971. 			.pops[type-value=prompt] .pops-prompt-content{
  3972. 				width:100%;
  3973. 				height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  3974. 				overflow: auto;
  3975. 				word-break:break-word;
  3976. 			}
  3977. 			.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);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;}
  3978. 			.pops[type-value=prompt] input[pops]{padding:5px 10px;}
  3979. 			.pops[type-value=prompt] textarea[pops]{padding:5px 10px;resize:none;}
  3980. 			.pops[type-value=prompt] input[pops],.pops[type-value=prompt] textarea[pops]{width:100%;height:100%;outline:0;border:0;color:rgb(51, 51, 51);}
  3981.  
  3982. 			`,
  3983. 			loadingCSS: `
  3984. 			.pops[type-value=loading] {
  3985. 				position: absolute;
  3986. 				top: 272.5px;
  3987. 				top: 50%;
  3988. 				left: 26px;
  3989. 				left: 50%;
  3990. 				display: flex;
  3991. 				overflow: hidden;
  3992. 				padding: 10px 15px;
  3993. 				max-width: 100%;
  3994. 				max-height: 100%;
  3995. 				min-width: 0;
  3996. 				min-height: 0;
  3997. 				border: 1px solid rgba(0,0,0,.2);
  3998. 				border-radius: 5px;
  3999. 				background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4000. 				box-shadow: 0 0 5px rgb(0 0 0 / 50%);
  4001. 				vertical-align: middle;
  4002. 				transition: all .35s;
  4003. 				transform: translate(-50%,-50%);
  4004. 				user-select: none;
  4005. 				-webkit-user-select: none;
  4006. 				-moz-user-select: none;
  4007. 				-ms-user-select: none;
  4008. 				flex-direction: column;
  4009. 				align-items: center;
  4010. 				justify-content: center;
  4011. 				align-content: center;
  4012. 			}
  4013. 			.pops[type-value=loading]:before{float:left;display:inline-block;width:2em;height:2em;border:.3em solid rgba(100,149,237,.1);border-top:.3em solid rgb(100, 149, 237, var(--pops-bd-opacity));border-radius:50%;content:" ";vertical-align:middle;font-size:inherit;animation:pops-anim-wait-rotate 1.2s linear infinite;}
  4014. 			.pops[type-value=loading] .pops-loading-content{position:static;top:0;bottom:0;float:left;overflow:hidden;width:auto;font-size:inherit;line-height:2em;}
  4015. 			.pops[type-value=loading] .pops-loading-content p[pops] {
  4016. 				display: inline-block;
  4017. 				padding: 5px 0px;
  4018. 				color: rgb(51, 51, 51);
  4019. 				text-indent: 15px;
  4020. 				font-size: inherit;
  4021. 				text-align: center;
  4022. 			}
  4023. 			
  4024. 			`,
  4025. 			iframeCSS: `
  4026. 			.pops[type-value=iframe]{
  4027. 				--container-title-height: 55px;
  4028. 			}
  4029. 			.pops[type-value] .pops-iframe-title{display: flex;align-items: center;justify-content: space-between;}
  4030. 			.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));}
  4031. 			.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);}
  4032. 			.pops[type-value=iframe] .pops-iframe-content p[pops]{padding:5px 10px;color:#333;text-indent:15px;}
  4033. 			.pops[type-value=iframe] .pops-iframe-content{
  4034. 				width:100%;
  4035. 				height: calc(100% - var(--container-title-height));
  4036. 				overflow: hidden;
  4037. 				word-break:break-word;
  4038. 			}
  4039. 			.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));}
  4040. 			.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;}
  4041. 			.pops[type-value=iframe].pops[type-module=min]{top:unset!important;bottom:0;max-width:200px;max-height:53px;transform:none;}
  4042. 			.pops[type-value=iframe].pops[type-module=min] .pops-header-control[type=min]{display:none;}
  4043. 			.pops[type-value=iframe].pops[type-module=max]{top:unset!important;left:unset!important;width:100%!important;height:100%!important;transform:none;}
  4044. 			.pops[type-value=iframe] iframe[pops]{width:calc(100% - 4px);height:calc(100% - 4px);border:0;}
  4045. 			.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;}
  4046. 			`,
  4047. 			drawerCSS: `
  4048. 			.pops[type-value=drawer] {
  4049. 				position: fixed;
  4050. 				box-sizing: border-box;
  4051. 				display: flex;
  4052. 				flex-direction: column;
  4053. 				box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
  4054. 				overflow: hidden;
  4055. 				transition: all .3s;
  4056. 			}
  4057. 			.pops[type-value] .pops-drawer-title{display: flex;align-items: center;justify-content: space-between;}
  4058. 			
  4059. 			.pops[type-value=drawer][direction=top]{width: 100%;left: 0;right: 0;top: 0;}
  4060. 			.pops[type-value=drawer][direction=bottom]{width: 100%;left: 0;right: 0;bottom: 0;}
  4061. 			.pops[type-value=drawer][direction=left]{height: 100%;top: 0;bottom: 0;left: 0;}
  4062. 			.pops[type-value=drawer][direction=right]{height: 100%;top: 0;bottom: 0;right: 0;}
  4063. 			.pops-drawer-content{height: 100%;}
  4064. 			.pops[type-value="drawer"] .pops-drawer-btn{padding-top: 10px;padding-bottom: 10px;}
  4065. 			
  4066. 			`,
  4067. 			folderCSS: `
  4068. 			.pops[type-value] .pops-folder-title{display: flex;align-items: center;justify-content: space-between;}
  4069. 			.pops[type-value=folder] .pops-folder-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  4070. 			.pops[type-value=folder] .pops-folder-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);}
  4071. 			.pops[type-value=folder] .pops-folder-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;}
  4072. 			.pops[type-value=folder] .pops-folder-content{
  4073. 				width:100%;
  4074. 				height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  4075. 				overflow: auto;
  4076. 				word-break:break-word;
  4077. 			}
  4078. 			.pops[type-value=folder] .pops-folder-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);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;}
  4079. 			.pops-folder-list .cursor-p{cursor:pointer}
  4080. 			.pops-folder-list a{background:0 0;text-decoration:none;-webkit-tap-highlight-color:transparent;color:#05082c}
  4081. 			table.pops-folder-list-table__body,table.pops-folder-list-table__header{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;padding:0 20px}
  4082. 			table.pops-folder-list-table__body,table.pops-folder-list-table__header{height:100%;background:0 0;overflow:hidden;display:-webkit-box;display:-ms-flexbox;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}
  4083. 			table.pops-folder-list-table__body{height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
  4084. 			.pops-folder-list table tr{line-height:1}
  4085. 			.pops-folder-list-table__header-row{height:50px;line-height:50px;color:rgb(129, 137, 153);text-align:left;font-size:12px}
  4086. 			.pops-folder-list-table__header-row{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
  4087. 			.pops-folder-list-table__body-row{height:50px;line-height:50px;color:#03081a;font-size:12px}
  4088. 			.pops-folder-list-table__body-row:hover{background:rgb(245, 246, 247, var(--pops-bg-opacity))}
  4089. 			.pops-folder-list table th{border:0;border-bottom:1px solid rgb(247, 248, 250, var(--pops-bg-opacity))}
  4090. 			.pops-folder-list table td{border:0;border-bottom:1px solid rgb(247, 248, 250, var(--pops-bg-opacity));position:relative}
  4091. 			.pops-folder-list .list-name-text{display:inline-block;padding-left:12px;line-height:40px;max-width:176px}
  4092. 			.pops-folder-list-file-name > div{display:flex;align-items:center;}
  4093. 			
  4094. 			.pops-mobile-folder-list-file-name{display:flex;align-items:center}
  4095. 			.pops-mobile-folder-list-file-name>div {
  4096. 				display: flex;
  4097. 				flex-wrap: wrap;
  4098. 				justify-content: flex-start;
  4099. 				align-items: flex-start;
  4100. 				padding: 6px 0px;
  4101. 				flex-direction: column;
  4102. 			}
  4103. 			.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon{width:45px;height:45px}
  4104. 			.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {
  4105. 				padding-left: unset;
  4106. 				max-width: 250px;
  4107. 				overflow-x: hidden;
  4108. 				font-weight: 400;
  4109. 				line-height: unset;
  4110. 				margin-bottom: 4px;
  4111. 				white-space: normal;
  4112. 				text-overflow: unset;
  4113. 			}
  4114. 		
  4115. 			/* 修改滚动 */
  4116. 			.pops-folder-content{overflow: hidden !important}
  4117. 			.pops-folder-content .pops-folder-list{height: 100%}
  4118. 			.pops-folder-content .pops-folder-list-table__body-div{height: 100%;padding-bottom: 85px}
  4119. 			.pops-mobile-folder-content .pops-folder-list-table__body-div{height: 100%;padding-bottom: 40px}
  4120. 			.pops-folder-content table.pops-folder-list-table__body{overflow: auto}
  4121. 			.pops-mobile-folder-content .pops-folder-list-table__header-div{display: none}
  4122. 		
  4123. 			.pops-folder-list-file-name-title-text:hover{text-decoration:none;color:rgb(6, 167, 255)}
  4124. 			.pops-folder-list .text-ellip{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  4125. 			.pops-folder-list .content{color:rgb(129, 137, 153);position:relative;width:100%;text-align:left}
  4126. 			.pops-folder-list .inline-block-v-middle{display:inline-block;vertical-align:middle}
  4127. 			.pops-folder-list .flex-a-i-center{display: flex;align-items: center;}
  4128. 			.pops-folder-list .u-file-icon{display:inline-block;vertical-align:middle}
  4129. 			.pops-folder-list .u-file-icon--list{width:32px;height:32px}
  4130. 			.pops-folder-list .pops-folder-list-file-icon{line-height:1;position:relative;vertical-align:middle}
  4131. 			.pops-folder-list .pops-folder-file-list-breadcrumb-primary {
  4132. 				display: -webkit-box;
  4133. 				display: -webkit-flex;
  4134. 				display: -ms-flexbox;
  4135. 				display: flex;
  4136. 				-webkit-box-align: center;
  4137. 				-webkit-align-items: center;
  4138. 				-ms-flex-align: center;
  4139. 				align-items: center;
  4140. 				-webkit-box-orient: horizontal;
  4141. 				-webkit-box-direction: normal;
  4142. 				-webkit-flex-direction: row;
  4143. 				-ms-flex-direction: row;
  4144. 				flex-direction: row;
  4145. 				min-height: 17px;
  4146. 				flex-wrap: wrap;
  4147. 			}
  4148. 			.pops-folder-list .pops-folder-list-table__sort {
  4149. 				display: inline-flex;
  4150. 				margin-left: 4px;
  4151. 				flex-direction: column;
  4152. 			}
  4153. 			
  4154. 			.pops-folder-list .pops-folder-icon-arrow{
  4155. 				width: 10px;
  4156. 				height: 10px;
  4157. 				fill: rgb(212, 215, 222);
  4158. 			}
  4159. 			.pops-folder-list .pops-folder-icon-active{
  4160. 				fill: rgb(6, 167, 255);
  4161. 			}
  4162. 			.pops-folder-list .pops-folder-file-list-breadcrumb {
  4163. 				padding: 4px 20px;
  4164. 				-webkit-box-sizing: border-box;
  4165. 				box-sizing: border-box;
  4166. 				display: -webkit-box;
  4167. 				display: -webkit-flex;
  4168. 				display: -ms-flexbox;
  4169. 				display: flex;
  4170. 				-webkit-box-align: center;
  4171. 				-webkit-align-items: center;
  4172. 				-ms-flex-align: center;
  4173. 				align-items: center;
  4174. 				-webkit-box-orient: horizontal;
  4175. 				-webkit-box-direction: normal;
  4176. 				-webkit-flex-direction: row;
  4177. 				-ms-flex-direction: row;
  4178. 				flex-direction: row;
  4179. 				-webkit-box-pack: start;
  4180. 				-webkit-justify-content: start;
  4181. 				-ms-flex-pack: start;
  4182. 				justify-content: flex-start;
  4183. 				min-height: 35px;
  4184. 			}
  4185. 			.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles{font-size:12px;color:#333;line-height:20px;font-weight:700;display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}
  4186. 			.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a{color:rgb(153, 153, 153)}
  4187. 			.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a{font-size:14px;color:rgb(18, 22, 26)}
  4188. 			.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow{width:16px;height:16px}
  4189. 			.pops-folder-list .iconArrow{
  4190. 				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=) 55% 50%/6px 9px no-repeat;
  4191. 			}
  4192.  
  4193.  
  4194. 			`,
  4195. 			panelCSS: `
  4196. 			.pops[type-value=panel]{
  4197. 				--el-disabled-text-color: #a8abb2;
  4198. 				--el-disabled-bg-color: #f5f7fa;
  4199. 				--el-disabled-border-color: #e4e7ed;
  4200. 				--aside-bg-color: #f2f2f2;
  4201. 			}
  4202. 			.pops[type-value] .pops-panel-title{display: flex;align-items: center;justify-content: space-between;}
  4203. 			
  4204. 			.pops[type-value=panel] .pops-panel-title{width:100%;height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  4205. 			.pops[type-value=panel] .pops-panel-title p[pops]{width:100%;overflow:hidden;color:#333;text-indent:15px;text-overflow:ellipsis;white-space:nowrap;font-weight:500;line-height:var(--container-title-height);}
  4206. 			.pops[type-value=panel] .pops-panel-content{
  4207. 				width:100%;
  4208. 				height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
  4209. 				overflow: auto;
  4210. 				word-break:break-word;
  4211. 			}
  4212. 			.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);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;}
  4213. 			
  4214. 			/* ↓panel的CSS↓ */
  4215. 			aside.pops-panel-aside{overflow:auto;box-sizing:border-box;flex-shrink:0;max-width:200px;height:100%;background:var(--aside-bg-color);border-right:1px solid var(--aside-bg-color);font-size:0.9em;}
  4216. 			.pops-panel-content{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0;bottom:0!important}
  4217. 			section.pops-panel-container{width:100%;padding:10px;overflow:hidden}
  4218. 			section.pops-panel-container .pops-panel-container-header-ul{border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
  4219. 			section.pops-panel-container .pops-panel-container-header-ul li{display: flex;justify-content: flex-start !important;text-align:left;}
  4220. 			section.pops-panel-container > ul:last-child{overflow: auto;height: calc(100% - 45px);}
  4221. 			aside.pops-panel-aside ul li{margin:6px 8px;border-radius:4px;padding:6px 10px;cursor:default;display:flex;align-items:center;justify-content:flex-start}
  4222. 			aside.pops-panel-aside .pops-is-visited,aside.pops-panel-aside ul li:hover{color:rgb(64, 158, 255);background:rgba(64,158,255 ,.1)}
  4223. 			section.pops-panel-container>ul li{display:flex;justify-content:space-between;align-items:center;margin:10px 20px}
  4224. 			section.pops-panel-container li.pops-panel-forms-container-item{display:block;margin-top:20px}
  4225. 			section.pops-panel-container .pops-panel-forms-container-item ul{border-radius:6px;background:var(--aside-bg-color);margin:10px}
  4226. 			section.pops-panel-container .pops-panel-forms-container-item ul li {
  4227. 				display: flex;
  4228. 				justify-content: space-between;
  4229. 				align-items: center;
  4230. 				margin: 0 10px;
  4231. 				padding: 10px 0;
  4232. 				border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
  4233. 				text-align: left;
  4234. 			}
  4235. 			section.pops-panel-container .pops-panel-forms-container-item ul li:last-child{border:0}
  4236. 			section.pops-panel-container .pops-panel-forms-container-item>div{margin:10px;margin-left:20px;font-size:0.9em;text-align:left;}
  4237. 			/* 主文字 */
  4238. 			section.pops-panel-container .pops-panel-forms-container-item .pops-panel-item-left-text .pops-panel-item-left-main-text {
  4239. 				/* line-height: 2; */
  4240. 			}
  4241. 			/* 描述文字 */
  4242. 			section.pops-panel-container .pops-panel-forms-container-item .pops-panel-item-left-text .pops-panel-item-left-desc-text{
  4243. 				/* line-height: 1; */
  4244. 				margin-top: 6px;
  4245. 				font-size: 0.8em;
  4246. 				color: rgb(108, 108, 108);
  4247. 			}
  4248. 			/* 兼容移动端CSS */
  4249. 			.pops[type-value="panel"].pops-panel-is-mobile{
  4250. 				width: 92dvw;
  4251. 			}
  4252. 			.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container{
  4253. 				padding: 10px 0px;
  4254. 			}
  4255. 			.pops[type-value="panel"].pops-panel-is-mobile .pops-panel-content aside.pops-panel-aside{
  4256. 				width: 20%;
  4257. 			}
  4258. 			.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-forms-container-item>div{
  4259. 				margin: 5px 10px;
  4260. 				text-align: left;
  4261. 			}
  4262. 			.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-forms-container-item ul{
  4263. 				margin: 0px !important;
  4264. 			}
  4265. 			.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container>ul li{
  4266. 				margin: 5px 5px!important;
  4267. 				padding: 5px 5px !important;
  4268. 			}
  4269. 			.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container >ul > li div:nth-child(2){
  4270. 				max-width: 55%;
  4271. 				margin-left: 6px;
  4272. 				text-align: right;
  4273. 			}
  4274. 			.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-select select{
  4275. 				min-width: 88px !important;
  4276. 				width: -webkit-fill-available;
  4277. 				width: -moz-available;
  4278. 			}
  4279. 			.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-container-header-ul li{
  4280. 				font-size: 16px;
  4281. 			}
  4282. 			.pops[type-value="panel"].pops-panel-is-mobile .pops-panel-title p[pops],
  4283. 			.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container>ul li,
  4284. 			.pops[type-value="panel"].pops-panel-is-mobile aside.pops-panel-aside ul li{
  4285. 				font-size: 14px;
  4286. 			}
  4287. 			/* switch的CSS */
  4288. 			.pops-panel-switch {
  4289. 				display: inline-flex;
  4290. 				flex-direction: row-reverse;
  4291. 				align-items: center;
  4292. 				position: relative;
  4293. 				font-size: 14px;
  4294. 				line-height: 20px;
  4295. 				height: 32px;
  4296. 				vertical-align: middle
  4297. 			}
  4298. 			.pops-panel-switch input.pops-panel-switch__input {
  4299. 				position: absolute;
  4300. 				width: 0;
  4301. 				height: 0;
  4302. 				opacity: 0;
  4303. 				margin: 0
  4304. 			}
  4305. 			.pops-panel-switch:has(input.pops-panel-switch__input:disabled),
  4306. 			.pops-panel-switch[data-disabled],
  4307. 			.pops-panel-switch[data-disabled] .pops-panel-switch__core,
  4308. 			.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core{
  4309. 				cursor: not-allowed;
  4310. 				opacity: .6;
  4311. 			}
  4312. 			.pops-panel-switch span.pops-panel-switch__core {
  4313. 				display: inline-flex;
  4314. 				position: relative;
  4315. 				align-items: center;
  4316. 				min-width: 40px;
  4317. 				height: 20px;
  4318. 				border: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));
  4319. 				outline: 0;
  4320. 				border-radius: 10px;
  4321. 				box-sizing: border-box;
  4322. 				background: rgb(220, 223, 230, var(--pops-bg-opacity));
  4323. 				cursor: pointer;
  4324. 				transition: border-color .3s,background-color .3s
  4325. 			}
  4326. 			.pops-panel-switch .pops-panel-switch__action {
  4327. 				position: absolute;
  4328. 				left: 1px;
  4329. 				border-radius: 100%;
  4330. 				transition: all .3s;
  4331. 				width: 16px;
  4332. 				height: 16px;
  4333. 				background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4334. 				display: flex;
  4335. 				justify-content: center;
  4336. 				align-items: center;
  4337. 				color: rgb(220, 223, 230)
  4338. 			}
  4339. 			.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core{border-color:rgb(64, 158, 255, var(--pops-bd-opacity));background-color:rgb(64, 158, 255, var(--pops-bg-opacity))}
  4340. 			.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action{left:calc(100% - 17px);color:rgb(64, 158, 255)}
  4341. 			/* switch的CSS */
  4342. 			
  4343. 			/* slider旧的CSS */
  4344. 			section.pops-panel-container .pops-panel-slider:has(>input[type=range]){overflow:hidden;height:25px;line-height:25px;display:flex;align-items:center}
  4345. 			section.pops-panel-container .pops-panel-slider input[type=range] {
  4346. 				height: 6px;
  4347. 				background: rgb(228, 231, 237, var(--pops-bg-opacity));
  4348. 				outline: 0;
  4349. 				-webkit-appearance: none;
  4350. 				appearance: none;
  4351. 				width: 100%;
  4352. 			}
  4353. 			section.pops-panel-container .pops-panel-slider input[type=range]::-webkit-slider-thumb{
  4354. 				width: 20px;
  4355. 				height: 20px;
  4356. 				border-radius: 50%;
  4357. 				border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));
  4358. 				background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4359. 				box-shadow: 0 0 2px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2);
  4360. 				cursor: pointer;
  4361. 				-webkit-appearance: none;
  4362. 				appearance: none;
  4363. 				border-image: linear-gradient(#409eff,#409eff) 0 fill/9 25 9 0/0 0 0 100vw;
  4364. 			}
  4365. 			section.pops-panel-container .pops-panel-slider input[type=range]::-moz-range-thumb {
  4366. 				width: 20px;
  4367. 				height: 20px;
  4368. 				border-radius: 50%;
  4369. 				border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));
  4370. 				background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4371. 				box-shadow: 0 0 2px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2);
  4372. 				cursor: pointer;
  4373. 				-webkit-appearance: none;
  4374. 				appearance: none;
  4375. 			}
  4376. 			section.pops-panel-container .pops-panel-slider input[type=range]::-moz-range-progress{
  4377. 				height: 6px;
  4378. 				border-image: linear-gradient(#409eff,#409eff) 0 fill/9 25 9 0/0 0 0 100vw;
  4379. 			}
  4380. 			/* slider旧的CSS */
  4381. 			
  4382. 			/* slider的CSS */
  4383. 			.pops-slider {
  4384. 				--pops-slider-color-white: #ffffff;
  4385. 				--pops-slider-color-primary: #409eff;
  4386. 				--pops-slider-color-info: #909399;
  4387. 				--pops-slider-text-color-placeholder: #a8abb2;
  4388. 				--pops-slider-border-color-light: #e4e7ed;
  4389. 				--pops-slider-border-radius-circle: 100%;
  4390. 				--pops-slider-transition-duration-fast: 0.2s;
  4391. 			
  4392. 				--pops-slider-main-bg-color: var(--pops-slider-color-primary);
  4393. 				--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);
  4394. 				--pops-slider-stop-bg-color: var(--pops-slider-color-white);
  4395. 				--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);
  4396. 				--pops-slider-border-radius: 3px;
  4397. 				--pops-slider-height: 6px;
  4398. 				--pops-slider-button-size: 20px;
  4399. 				--pops-slider-button-wrapper-size: 36px;
  4400. 				--pops-slider-button-wrapper-offset: -15px;
  4401. 			}
  4402. 			
  4403. 			.pops-slider {
  4404. 				width: 100%;
  4405. 				height: 32px;
  4406. 				display: flex;
  4407. 				align-items: center;
  4408. 			}
  4409. 			
  4410. 			.pops-slider-width{
  4411. 				flex: 0 0 52%;
  4412. 				margin-left: 10px;
  4413. 			}
  4414. 			
  4415. 			.pops-slider__runway {
  4416. 				flex: 1;
  4417. 				height: var(--pops-slider-height);
  4418. 				background-color: var(--pops-slider-runway-bg-color);
  4419. 				border-radius: var(--pops-slider-border-radius);
  4420. 				position: relative;
  4421. 				cursor: pointer;
  4422. 			}
  4423. 			
  4424. 			.pops-slider__runway.show-input {
  4425. 				margin-right: 30px;
  4426. 				width: auto;
  4427. 			}
  4428. 			
  4429. 			.pops-slider__runway.pops-slider-is-disabled {
  4430. 				cursor: default;
  4431. 			}
  4432. 			
  4433. 			.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {
  4434. 				background-color: var(--pops-slider-disabled-color);
  4435. 			}
  4436. 			
  4437. 			.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {
  4438. 				border-color: var(--pops-slider-disabled-color);
  4439. 			}
  4440. 			
  4441. 			.pops-slider__runway.pops-slider-is-disabled
  4442. 				.pops-slider__button:hover,
  4443. 			.pops-slider__runway.pops-slider-is-disabled
  4444. 				.pops-slider__button.hover,
  4445. 			.pops-slider__runway.pops-slider-is-disabled
  4446. 				.pops-slider__button.dragging {
  4447. 				cursor: not-allowed;
  4448. 			}
  4449. 			
  4450. 			.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
  4451. 			.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
  4452. 			.pops-slider__runway.pops-slider-is-disabled
  4453. 				.pops-slider__button.dragging {
  4454. 				transform: scale(1);
  4455. 			}
  4456. 			
  4457. 			.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
  4458. 			.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
  4459. 			.pops-slider__runway.pops-slider-is-disabled
  4460. 				.pops-slider__button.dragging {
  4461. 				cursor: not-allowed;
  4462. 			}
  4463. 			
  4464. 			.pops-slider__input {
  4465. 				flex-shrink: 0;
  4466. 				width: 130px;
  4467. 			}
  4468. 			
  4469. 			.pops-slider__bar {
  4470. 				height: var(--pops-slider-height);
  4471. 				background-color: var(--pops-slider-main-bg-color);
  4472. 				border-top-left-radius: var(--pops-slider-border-radius);
  4473. 				border-bottom-left-radius: var(--pops-slider-border-radius);
  4474. 				position: absolute;
  4475. 			}
  4476. 			
  4477. 			.pops-slider__button-wrapper {
  4478. 				height: var(--pops-slider-button-wrapper-size);
  4479. 				width: var(--pops-slider-button-wrapper-size);
  4480. 				position: absolute;
  4481. 				z-index: 1;
  4482. 				top: var(--pops-slider-button-wrapper-offset);
  4483. 				transform: translate(-50%);
  4484. 				background-color: transparent;
  4485. 				text-align: center;
  4486. 				user-select: none;
  4487. 				line-height: normal;
  4488. 				outline: none;
  4489. 			}
  4490. 			
  4491. 			.pops-slider__button-wrapper:after {
  4492. 				display: inline-block;
  4493. 				content: "";
  4494. 				height: 100%;
  4495. 				vertical-align: middle;
  4496. 			}
  4497. 			
  4498. 			.pops-slider__button:hover,
  4499. 			.pops-slider__button.hover {
  4500. 				cursor: grab;
  4501. 			}
  4502. 			
  4503. 			.pops-slider__button {
  4504. 				display: inline-block;
  4505. 				width: var(--pops-slider-button-size);
  4506. 				height: var(--pops-slider-button-size);
  4507. 				vertical-align: middle;
  4508. 				border: solid 2px var(--pops-slider-main-bg-color);
  4509. 				background-color: var(--pops-slider-color-white);
  4510. 				border-radius: 50%;
  4511. 				box-sizing: border-box;
  4512. 				transition: var(--pops-slider-transition-duration-fast);
  4513. 				user-select: none;
  4514. 			}
  4515. 			
  4516. 			.pops-slider__button:hover,
  4517. 			.pops-slider__button.hover,
  4518. 			.pops-slider__button.dragging {
  4519. 				transform: scale(1.2);
  4520. 			}
  4521. 			
  4522. 			.pops-slider__button:hover,
  4523. 			.pops-slider__button.hover {
  4524. 				cursor: grab;
  4525. 			}
  4526. 			
  4527. 			.pops-slider__button.dragging {
  4528. 				cursor: grabbing;
  4529. 			}
  4530. 			
  4531. 			.pops-slider__stop {
  4532. 				position: absolute;
  4533. 				height: var(--pops-slider-height);
  4534. 				width: var(--pops-slider-height);
  4535. 				border-radius: var(--pops-slider-border-radius-circle);
  4536. 				background-color: var(--pops-slider-stop-bg-color);
  4537. 				transform: translate(-50%);
  4538. 			}
  4539. 			
  4540. 			.pops-slider__marks {
  4541. 				top: 0;
  4542. 				left: 12px;
  4543. 				width: 18px;
  4544. 				height: 100%;
  4545. 			}
  4546. 			
  4547. 			.pops-slider__marks-text {
  4548. 				position: absolute;
  4549. 				transform: translate(-50%);
  4550. 				font-size: 14px;
  4551. 				color: var(--pops-slider-color-info);
  4552. 				margin-top: 15px;
  4553. 				white-space: pre;
  4554. 			}
  4555. 			
  4556. 			.pops-slider.is-vertical {
  4557. 				position: relative;
  4558. 				display: inline-flex;
  4559. 				width: auto;
  4560. 				height: 100%;
  4561. 				flex: 0;
  4562. 			}
  4563. 			
  4564. 			.pops-slider.is-vertical .pops-slider__runway {
  4565. 				width: var(--pops-slider-height);
  4566. 				height: 100%;
  4567. 				margin: 0 16px;
  4568. 			}
  4569. 			
  4570. 			.pops-slider.is-vertical .pops-slider__bar {
  4571. 				width: var(--pops-slider-height);
  4572. 				height: auto;
  4573. 				border-radius: 0 0 3px 3px;
  4574. 			}
  4575. 			
  4576. 			.pops-slider.is-vertical .pops-slider__button-wrapper {
  4577. 				top: auto;
  4578. 				left: var(--pops-slider-button-wrapper-offset);
  4579. 				transform: translateY(50%);
  4580. 			}
  4581. 			
  4582. 			.pops-slider.is-vertical .pops-slider__stop {
  4583. 				transform: translateY(50%);
  4584. 			}
  4585. 			
  4586. 			.pops-slider.is-vertical .pops-slider__marks-text {
  4587. 				margin-top: 0;
  4588. 				left: 15px;
  4589. 				transform: translateY(50%);
  4590. 			}
  4591. 			
  4592. 			.pops-slider--large {
  4593. 				height: 40px;
  4594. 			}
  4595. 			
  4596. 			.pops-slider--small {
  4597. 				height: 24px;
  4598. 			}
  4599. 			/* slider的CSS */
  4600. 			
  4601. 			/* input的CSS */
  4602. 			.pops-panel-input{display:flex;align-items:center;border:1px solid #dcdfe6;border-radius:4px;background-color:#ffffff}
  4603. 			.pops-panel-input:hover{box-shadow:0 0 0 1px #c0c4cc inset}
  4604. 			.pops-panel-input:has(input:focus){outline:0;border:1px solid #409eff;border-radius:4px;box-shadow:none}
  4605. 			.pops-panel-input input {
  4606. 				display: inline-flex;
  4607. 				justify-content: center;
  4608. 				align-items: center;
  4609. 				line-height: 1;
  4610. 				height: 32px;
  4611. 				white-space: nowrap;
  4612. 				cursor: text;
  4613. 				text-align: center;
  4614. 				box-sizing: border-box;
  4615. 				outline: 0;
  4616. 				transition: .1s;
  4617. 				font-weight: 500;
  4618. 				user-select: none;
  4619. 				vertical-align: middle;
  4620. 				-webkit-appearance: none;
  4621. 				appearance: none;
  4622. 				background-color: transparent;
  4623. 				border: 0;
  4624. 				padding: 8px 8px;
  4625. 				font-size: 14px;
  4626. 				text-align: start;
  4627. 				width: 100%;
  4628. 				flex: 1;
  4629. 			}    
  4630. 			.pops-panel-input span.pops-panel-input__suffix {
  4631. 				display: inline-flex;
  4632. 				white-space: nowrap;
  4633. 				flex-shrink: 0;
  4634. 				flex-wrap: nowrap;
  4635. 				height: 100%;
  4636. 				text-align: center;
  4637. 				color: #a8abb2;
  4638. 				transition: all .3s;
  4639. 				pointer-events: none;
  4640. 				margin: 0 8px;
  4641. 			}    
  4642. 			.pops-panel-input span.pops-panel-input__suffix-inner{pointer-events:all;display:inline-flex;align-items:center;justify-content:center}
  4643. 			.pops-panel-input .pops-panel-icon{cursor:pointer}
  4644. 			.pops-panel-input .pops-panel-icon{height:inherit;line-height:inherit;display:flex;justify-content:center;align-items:center;transition:all .3s}
  4645. 			.pops-panel-input .pops-panel-icon svg{height:1em;width:1em}
  4646. 			
  4647. 			.pops-input-disabled{
  4648. 				background-color: var(--el-disabled-bg-color);
  4649. 				box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
  4650. 			}
  4651. 			.pops-panel-input.pops-input-disabled{
  4652. 				border: none;
  4653. 			}
  4654. 			.pops-panel-input.pops-input-disabled:hover{
  4655. 				box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
  4656. 			}
  4657. 			.pops-panel-input input:disabled,
  4658. 			.pops-panel-input input:disabled + .pops-panel-input__suffix{
  4659. 				user-select: none;
  4660. 				-webkit-user-select: none;
  4661. 				-moz-user-select: none;
  4662. 				-ms-user-select: none;
  4663. 				color: var(--el-disabled-text-color);
  4664. 				-webkit-text-fill-color: var(--el-disabled-text-color);
  4665. 				cursor: not-allowed;
  4666. 			}
  4667. 			.pops-panel-input input:disabled + .pops-panel-input__suffix{
  4668. 				display: none;
  4669. 			}
  4670. 			/* input的CSS */
  4671. 			
  4672. 			/* textarea的CSS */
  4673. 			.pops-panel-textarea textarea {
  4674. 				width: 100%;
  4675. 				vertical-align: bottom;
  4676. 				position: relative;
  4677. 				display: block;
  4678. 				resize: none;
  4679. 				padding: 5px 11px;
  4680. 				line-height: 1;
  4681. 				box-sizing: border-box;
  4682. 				font-size: inherit;
  4683. 				font-family: inherit;
  4684. 				background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4685. 				background-image: none;
  4686. 				-webkit-appearance: none;
  4687. 				appearance: none;
  4688. 				box-shadow: 0 0 0 1px #dcdfe6 inset;
  4689. 				border-radius: 0;
  4690. 				transition: box-shadow .2s cubic-bezier(.645, .045, .355, 1);
  4691. 				border: none;
  4692. 			}
  4693. 			.pops-panel-textarea textarea:hover{box-shadow:0 0 0 1px #c0c4cc inset}
  4694. 			.pops-panel-textarea-disable .pops-panel-textarea textarea:hover{box-shadow:none}
  4695. 			.pops-panel-textarea textarea:focus{outline:0;box-shadow:0 0 0 1px #409eff inset}
  4696. 			/* textarea的CSS */
  4697. 			
  4698. 			/* select的CSS */
  4699. 			.pops-panel-select select {
  4700. 				height: 32px;
  4701. 				line-height: 32px;
  4702. 				min-width: 200px;
  4703. 				border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));
  4704. 				border-radius: 5px;
  4705. 				text-align: center;
  4706. 				outline: 0;
  4707. 				background: rgb(255, 255, 255, var(--pops-bg-opacity));
  4708. 				box-shadow: none;
  4709. 			}    
  4710. 			.pops-panel-select select:hover{box-shadow:0 0 0 1px #c0c4cc inset}
  4711. 			.pops-panel-select-disable .pops-panel-select select:hover{box-shadow:none}
  4712. 			.pops-panel-select select:focus{border:1px solid rgb(64, 158, 255, var(--pops-bd-opacity));box-shadow:none}
  4713. 			/* select的CSS */
  4714. 			
  4715. 			`,
  4716. 			tooltipCSS: `
  4717. 			.pops-tip {
  4718. 				--tooltip-color: #4e4e4e;
  4719. 				--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4720. 				--tooltip-bd-radius: 2px;
  4721. 				--tooltip-font-size: 14px;
  4722. 				--tooltip-padding-top: 13px;
  4723. 				--tooltip-padding-right: 13px;
  4724. 				--tooltip-padding-bottom: 13px;
  4725. 				--tooltip-padding-left: 13px;
  4726. 			
  4727. 			
  4728. 				--tooltip-arrow--after-color: rgb(78, 78, 78);
  4729. 				--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
  4730. 				--tooltip-arrow--after-width: 12px;
  4731. 				--tooltip-arrow--after-height: 12px;
  4732. 				
  4733. 				position: absolute;
  4734. 				padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom) var(--tooltip-padding-left);
  4735. 				max-width: 400px;
  4736. 				max-height: 300px;
  4737. 				border-radius: var(--tooltip-bd-radius);
  4738. 				background-color: var(--tooltip-bg-color);
  4739. 				box-shadow: 0 1.5px 4px rgba(0,0,0,.24),0 1.5px 6px rgba(0,0,0,.12);
  4740. 				color: var(--tooltip-color);
  4741. 				font-size: var(--tooltip-font-size);
  4742. 			}
  4743. 			/* github的样式 */
  4744. 			.pops-tip.github-tooltip{
  4745. 				--tooltip-bg-opacity: 1;
  4746. 				--tooltip-color: rgb(255, 255, 255);
  4747. 				--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
  4748. 				--tooltip-bd-radius: 6px;
  4749. 				--tooltip-padding-top: 6px;
  4750. 				--tooltip-padding-right: 8px;
  4751. 				--tooltip-padding-bottom: 6px;
  4752. 				--tooltip-padding-left: 8px;
  4753. 			
  4754. 				--tooltip-arrow--after-color: rgb(255, 255, 255);
  4755. 				--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
  4756. 				--tooltip-arrow--after-width: 8px;
  4757. 				--tooltip-arrow--after-height: 8px;
  4758. 			}
  4759. 			.pops-tip .pops-tip-arrow {
  4760. 				position: absolute;
  4761. 				top: 100%;
  4762. 				left: 50%;
  4763. 				overflow: hidden;
  4764. 				width: 100%;
  4765. 				height: 12.5px;
  4766. 				transform: translateX(-50%);
  4767. 			}
  4768. 			
  4769. 			.pops-tip .pops-tip-arrow::after {
  4770. 				position: absolute;
  4771. 				top: 0;
  4772. 				left: 50%;
  4773. 				width: var(--tooltip-arrow--after-width);
  4774. 				height: var(--tooltip-arrow--after-height);
  4775. 				background: var(--tooltip-arrow--after-bg-color);
  4776. 				color: var(--tooltip-arrow--after-color);
  4777. 				box-shadow: 0 1px 7px rgba(0,0,0,.24),0 1px 7px rgba(0,0,0,.12);
  4778. 				content: "";
  4779. 				transform: translateX(-50%) translateY(-50%) rotate(45deg);
  4780. 			}
  4781. 			
  4782. 			.pops-tip .pops-tip-arrow[data-position=bottom] {
  4783. 				position: absolute;
  4784. 				top: 100%;
  4785. 				left: 50%;
  4786. 				overflow: hidden;
  4787. 				width: 100%;
  4788. 				height: 12.5px;
  4789. 				transform: translateX(-50%);
  4790. 			}
  4791. 			
  4792. 			.pops-tip .pops-tip-arrow[data-position=bottom]:after {
  4793. 				position: absolute;
  4794. 				top: 0;
  4795. 				left: 50%;
  4796. 				width: var(--tooltip-arrow--after-width);
  4797. 				height: var(--tooltip-arrow--after-height);
  4798. 				background: var(--tooltip-arrow--after-bg-color);
  4799. 				box-shadow: 0 1px 7px rgba(0,0,0,.24),0 1px 7px rgba(0,0,0,.12);
  4800. 				content: "";
  4801. 				transform: translateX(-50%) translateY(-50%) rotate(45deg);
  4802. 			}
  4803. 			
  4804. 			.pops-tip .pops-tip-arrow[data-position=left] {
  4805. 				top: 50%;
  4806. 				left: -12.5px;
  4807. 				width: 12.5px;
  4808. 				height: 50px;
  4809. 				transform: translateY(-50%);
  4810. 			}
  4811. 			
  4812. 			.pops-tip .pops-tip-arrow[data-position=left]:after {
  4813. 				position: absolute;
  4814. 				top: 50%;
  4815. 				left: 100%;
  4816. 				content: "";
  4817. 			}
  4818. 			
  4819. 			.pops-tip .pops-tip-arrow[data-position=right] {
  4820. 				top: 50%;
  4821. 				right: -12.5px;
  4822. 				left: auto;
  4823. 				width: 12.5px;
  4824. 				height: 50px;
  4825. 				transform: translateY(-50%);
  4826. 			}
  4827. 			
  4828. 			.pops-tip .pops-tip-arrow[data-position=right]:after {
  4829. 				position: absolute;
  4830. 				top: 50%;
  4831. 				left: 0;
  4832. 				content: "";
  4833. 			}
  4834. 			
  4835. 			.pops-tip .pops-tip-arrow[data-position=top] {
  4836. 				top: -12.5px;
  4837. 				left: 50%;
  4838. 				transform: translateX(-50%);
  4839. 			}
  4840. 			
  4841. 			.pops-tip .pops-tip-arrow[data-position=top]:after {
  4842. 				position: absolute;
  4843. 				top: 100%;
  4844. 				left: 50%;
  4845. 				content: "";
  4846. 			}
  4847. 			
  4848. 			.pops-tip[data-motion]{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
  4849. 			.pops-tip[data-motion=fadeOutRight]{-webkit-animation-name:pops-motion-fadeOutRight;animation-name:pops-motion-fadeOutRight;}
  4850. 			.pops-tip[data-motion=fadeInTop]{-webkit-animation-name:pops-motion-fadeInTop;animation-name:pops-motion-fadeInTop;animation-timing-function:cubic-bezier(.49,.49,.13,1.3);}
  4851. 			.pops-tip[data-motion=fadeOutTop]{-webkit-animation-name:pops-motion-fadeOutTop;animation-name:pops-motion-fadeOutTop;animation-timing-function:cubic-bezier(.32,.37,.06,.87);}
  4852. 			.pops-tip[data-motion=fadeInBottom]{-webkit-animation-name:pops-motion-fadeInBottom;animation-name:pops-motion-fadeInBottom;}
  4853. 			.pops-tip[data-motion=fadeOutBottom]{-webkit-animation-name:pops-motion-fadeOutBottom;animation-name:pops-motion-fadeOutBottom;}
  4854. 			.pops-tip[data-motion=fadeInLeft]{-webkit-animation-name:pops-motion-fadeInLeft;animation-name:pops-motion-fadeInLeft;}
  4855. 			.pops-tip[data-motion=fadeOutLeft]{-webkit-animation-name:pops-motion-fadeOutLeft;animation-name:pops-motion-fadeOutLeft;}
  4856. 			.pops-tip[data-motion=fadeInRight]{-webkit-animation-name:pops-motion-fadeInRight;animation-name:pops-motion-fadeInRight;}
  4857. 			
  4858. 			`,
  4859. 		},
  4860. 		/** icon图标的svg代码 */
  4861. 		iconSVG: {
  4862. 			min: `
  4863. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4864. 				<path fill="currentColor" d="M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z"></path>
  4865. 			</svg>`,
  4866. 			mise: `
  4867. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4868. 				<path
  4869. 				fill="currentColor"
  4870. 				d="M885.333333 85.333333H330.410667a53.333333 53.333333 0 0 0-53.333334 53.333334v106.666666H138.666667A53.333333 53.333333 0 0 0 85.333333 298.666667v586.666666a53.333333 53.333333 0 0 0 53.333334 53.333334H725.333333a53.333333 53.333333 0 0 0 53.333334-53.333334V746.154667h106.666666c29.44 0 53.333333-23.893333 53.333334-53.333334V138.666667A53.333333 53.333333 0 0 0 885.333333 85.333333zM725.333333 692.821333v192.512H138.666667V298.666667H725.333333v394.154666z m157.866667 0H778.666667V298.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H330.410667v-106.666666h554.922666l-2.133333 554.154666z"></path>
  4871. 			</svg>`,
  4872. 			max: `
  4873. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4874. 				<path
  4875. 				fill="currentColor"
  4876. 				d="m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z"></path>
  4877. 			</svg>`,
  4878. 			close: `
  4879. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4880. 				<path
  4881. 				fill="currentColor"
  4882. 				d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
  4883. 			</svg>`,
  4884. 			edit: `
  4885. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4886. 				<path
  4887. 				fill="currentColor"
  4888. 				d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path>
  4889. 				<path
  4890. 				fill="currentColor"
  4891. 				d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path>
  4892. 			</svg>`,
  4893. 			share: `
  4894. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4895. 				<path
  4896. 				fill="currentColor"
  4897. 				d="m679.872 348.8-301.76 188.608a127.808 127.808 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z"></path>
  4898. 			</svg>`,
  4899. 			delete: `
  4900. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4901. 				<path
  4902. 				fill="currentColor"
  4903. 				d="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"></path>
  4904. 			</svg>
  4905. 			`,
  4906. 			search: `
  4907. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4908. 				<path
  4909. 				fill="currentColor"
  4910. 				d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path>
  4911. 			</svg>`,
  4912. 			upload: `
  4913. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4914. 				<path
  4915. 				fill="currentColor"
  4916. 				d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"></path>
  4917. 			</svg>`,
  4918. 			loading: `
  4919. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4920. 				<path
  4921. 				fill="currentColor"
  4922. 				d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path>
  4923. 			</svg>`,
  4924. 			next: `
  4925. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4926. 				<path
  4927. 				fill="currentColor"
  4928. 				d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
  4929. 			</svg>`,
  4930. 			prev: `
  4931. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4932. 				<path
  4933. 				fill="currentColor"
  4934. 				d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path>
  4935. 			</svg>`,
  4936. 			eleme: `
  4937. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4938. 				<path
  4939. 				fill="currentColor"
  4940. 				d="M300.032 188.8c174.72-113.28 408-63.36 522.24 109.44 5.76 10.56 11.52 20.16 17.28 30.72v.96a22.4 22.4 0 0 1-7.68 26.88l-352.32 228.48c-9.6 6.72-22.08 3.84-28.8-5.76l-18.24-27.84a54.336 54.336 0 0 1 16.32-74.88l225.6-146.88c9.6-6.72 12.48-19.2 5.76-28.8-.96-1.92-1.92-3.84-3.84-4.8a267.84 267.84 0 0 0-315.84-17.28c-123.84 81.6-159.36 247.68-78.72 371.52a268.096 268.096 0 0 0 370.56 78.72 54.336 54.336 0 0 1 74.88 16.32l17.28 26.88c5.76 9.6 3.84 21.12-4.8 27.84-8.64 7.68-18.24 14.4-28.8 21.12a377.92 377.92 0 0 1-522.24-110.4c-113.28-174.72-63.36-408 111.36-522.24zm526.08 305.28a22.336 22.336 0 0 1 28.8 5.76l23.04 35.52a63.232 63.232 0 0 1-18.24 87.36l-35.52 23.04c-9.6 6.72-22.08 3.84-28.8-5.76l-46.08-71.04c-6.72-9.6-3.84-22.08 5.76-28.8l71.04-46.08z"></path>
  4941. 			</svg>`,
  4942. 			elemePlus: `
  4943. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4944. 				<path
  4945. 				d="M839.7 734.7c0 33.3-17.9 41-17.9 41S519.7 949.8 499.2 960c-10.2 5.1-20.5 5.1-30.7 0 0 0-314.9-184.3-325.1-192-5.1-5.1-10.2-12.8-12.8-20.5V368.6c0-17.9 20.5-28.2 20.5-28.2L466 158.6c12.8-5.1 25.6-5.1 38.4 0 0 0 279 161.3 309.8 179.2 17.9 7.7 28.2 25.6 25.6 46.1-.1-5-.1 317.5-.1 350.8zM714.2 371.2c-64-35.8-217.6-125.4-217.6-125.4-7.7-5.1-20.5-5.1-30.7 0L217.6 389.1s-17.9 10.2-17.9 23v297c0 5.1 5.1 12.8 7.7 17.9 7.7 5.1 256 148.5 256 148.5 7.7 5.1 17.9 5.1 25.6 0 15.4-7.7 250.9-145.9 250.9-145.9s12.8-5.1 12.8-30.7v-74.2l-276.5 169v-64c0-17.9 7.7-30.7 20.5-46.1L745 535c5.1-7.7 10.2-20.5 10.2-30.7v-66.6l-279 169v-69.1c0-15.4 5.1-30.7 17.9-38.4l220.1-128zM919 135.7c0-5.1-5.1-7.7-7.7-7.7h-58.9V66.6c0-5.1-5.1-5.1-10.2-5.1l-30.7 5.1c-5.1 0-5.1 2.6-5.1 5.1V128h-56.3c-5.1 0-5.1 5.1-7.7 5.1v38.4h69.1v64c0 5.1 5.1 5.1 10.2 5.1l30.7-5.1c5.1 0 5.1-2.6 5.1-5.1v-56.3h64l-2.5-38.4z"
  4946. 				fill="currentColor"></path>
  4947. 			</svg>`,
  4948. 			chromeFilled: `
  4949. 			<svg
  4950. 				xmlns="http://www.w3.org/2000/svg"
  4951. 				viewBox="0 0 1024 1024"
  4952. 				xml:space="preserve">
  4953. 				<path
  4954. 				d="M938.67 512.01c0-44.59-6.82-87.6-19.54-128H682.67a212.372 212.372 0 0 1 42.67 128c.06 38.71-10.45 76.7-30.42 109.87l-182.91 316.8c235.65-.01 426.66-191.02 426.66-426.67z"
  4955. 				fill="currentColor"></path>
  4956. 				<path
  4957. 				d="M576.79 401.63a127.92 127.92 0 0 0-63.56-17.6c-22.36-.22-44.39 5.43-63.89 16.38s-35.79 26.82-47.25 46.02a128.005 128.005 0 0 0-2.16 127.44l1.24 2.13a127.906 127.906 0 0 0 46.36 46.61 127.907 127.907 0 0 0 63.38 17.44c22.29.2 44.24-5.43 63.68-16.33a127.94 127.94 0 0 0 47.16-45.79v-.01l1.11-1.92a127.984 127.984 0 0 0 .29-127.46 127.957 127.957 0 0 0-46.36-46.91z"
  4958. 				fill="currentColor"></path>
  4959. 				<path
  4960. 				d="M394.45 333.96A213.336 213.336 0 0 1 512 298.67h369.58A426.503 426.503 0 0 0 512 85.34a425.598 425.598 0 0 0-171.74 35.98 425.644 425.644 0 0 0-142.62 102.22l118.14 204.63a213.397 213.397 0 0 1 78.67-94.21zM512.01 938.68H512zM414.76 701.95a213.284 213.284 0 0 1-89.54-86.81L142.48 298.6c-36.35 62.81-57.13 135.68-57.13 213.42 0 203.81 142.93 374.22 333.95 416.55h.04l118.19-204.71a213.315 213.315 0 0 1-122.77-21.91z"
  4961. 				fill="currentColor"></path>
  4962. 			</svg>`,
  4963. 			cpu: `
  4964. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4965. 				<path
  4966. 				fill="currentColor"
  4967. 				d="M320 256a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H320zm0-64h384a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V320a128 128 0 0 1 128-128z"></path>
  4968. 				<path
  4969. 				fill="currentColor"
  4970. 				d="M512 64a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm-320 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 896a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm160 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm-320 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zM64 512a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0-160a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0 320a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm896-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0 320a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32z"></path>
  4971. 			</svg>`,
  4972. 			videoPlay: `
  4973. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4974. 				<path
  4975. 				fill="currentColor"
  4976. 				d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-48-247.616L668.608 512 464 375.616v272.768zm10.624-342.656 249.472 166.336a48 48 0 0 1 0 79.872L474.624 718.272A48 48 0 0 1 400 678.336V345.6a48 48 0 0 1 74.624-39.936z"></path>
  4977. 			</svg>`,
  4978. 			videoPause: `
  4979. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4980. 				<path
  4981. 				fill="currentColor"
  4982. 				d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-96-544q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32zm192 0q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32z"></path>
  4983. 			</svg>`,
  4984. 			headset: `
  4985. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4986. 				<path
  4987. 				fill="currentColor"
  4988. 				d="M896 529.152V512a384 384 0 1 0-768 0v17.152A128 128 0 0 1 320 640v128a128 128 0 1 1-256 0V512a448 448 0 1 1 896 0v256a128 128 0 1 1-256 0V640a128 128 0 0 1 192-110.848zM896 640a64 64 0 0 0-128 0v128a64 64 0 0 0 128 0V640zm-768 0v128a64 64 0 0 0 128 0V640a64 64 0 1 0-128 0z"></path>
  4989. 			</svg>`,
  4990. 			monitor: `
  4991. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4992. 				<path
  4993. 				fill="currentColor"
  4994. 				d="M544 768v128h192a32 32 0 1 1 0 64H288a32 32 0 1 1 0-64h192V768H192A128 128 0 0 1 64 640V256a128 128 0 0 1 128-128h640a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H544zM192 192a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H192z"></path>
  4995. 			</svg>`,
  4996. 			documentCopy: `
  4997. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  4998. 				<path
  4999. 				fill="currentColor"
  5000. 				d="M128 320v576h576V320H128zm-32-64h640a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32zM960 96v704a32 32 0 0 1-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z"></path>
  5001. 			</svg>`,
  5002. 			picture: `
  5003. 			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  5004. 				<path
  5005. 				fill="currentColor"
  5006. 				d="M160 160v704h704V160H160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32z"></path>
  5007. 				<path
  5008. 				fill="currentColor"
  5009. 				d="M384 288q64 0 64 64t-64 64q-64 0-64-64t64-64zM185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952L185.408 876.992z"></path>
  5010. 			</svg>`,
  5011. 			circleClose: `
  5012. 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  5013. 				<path
  5014. 				fill="currentColor"
  5015. 				d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z"></path>
  5016. 				<path
  5017. 				fill="currentColor"
  5018. 				d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path>
  5019. 			</svg>`,
  5020. 			view: `
  5021. 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  5022. 				<path                        
  5023. 				fill="currentColor"
  5024. 				d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"></path>
  5025. 			</svg>`,
  5026. 			hide: `
  5027. 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  5028. 				<path
  5029. 				fill="currentColor"
  5030. 				d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"></path>
  5031. 				<path
  5032. 				fill="currentColor"
  5033. 				d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"></path>
  5034. 			</svg>`,
  5035. 			keyboard: `
  5036. 			<svg viewBox="0 0 1123 1024" xmlns="http://www.w3.org/2000/svg">
  5037. 				<path
  5038. 				d="M1014.122186 1024H109.753483A109.753483 109.753483 0 0 1 0 914.246517V392.917471a109.753483 109.753483 0 0 1 109.753483-109.753484h904.368703a109.753483 109.753483 0 0 1 109.753484 109.753484v521.329046a109.753483 109.753483 0 0 1-109.753484 109.753483zM109.753483 370.966774a21.950697 21.950697 0 0 0-21.950696 21.950697v521.329046a21.950697 21.950697 0 0 0 21.950696 21.950696h904.368703a21.950697 21.950697 0 0 0 21.950697-21.950696V392.917471a21.950697 21.950697 0 0 0-21.950697-21.950697z"></path>
  5039. 				<path
  5040. 				d="M687.056806 891.198285H307.309753a43.901393 43.901393 0 0 1 0-87.802787h379.747053a43.901393 43.901393 0 0 1 0 87.802787zM175.605573 803.395498a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM432.428725 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM690.349411 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM947.172562 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM175.605573 546.572347a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM304.017149 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM432.428725 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM690.349411 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 803.395498a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM175.605573 678.276527a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM304.017149 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM432.428725 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM948.270096 803.395498a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394z"></path>
  5041. 				<path
  5042. 				d="M881.320472 766.079314H689.251876a43.901393 43.901393 0 0 1 0-87.802787h192.068596a21.950697 21.950697 0 0 0 21.950696-21.950696v-65.85209a43.901393 43.901393 0 0 1 87.802787 0v65.85209a109.753483 109.753483 0 0 1-109.753483 109.753483zM305.114684 502.670954H175.605573a43.901393 43.901393 0 0 1 0-87.802787h129.509111a43.901393 43.901393 0 0 1 0 87.802787zM563.03537 365.4791a43.901393 43.901393 0 0 1-43.901394-43.901394v-105.363344A109.753483 109.753483 0 0 1 628.88746 106.460879h61.461951a21.950697 21.950697 0 0 0 21.950696-21.950697V43.901393a43.901393 43.901393 0 0 1 87.802787 0v40.608789a109.753483 109.753483 0 0 1-109.753483 109.753484h-61.461951a21.950697 21.950697 0 0 0-21.950697 21.950696v105.363344a43.901393 43.901393 0 0 1-43.901393 43.901394z"></path>
  5043. 			</svg>`,
  5044. 		},
  5045. 		/**
  5046. 		 * 动画名
  5047. 		 * @type {string[]}
  5048. 		 */
  5049. 		animation: [],
  5050. 		/**
  5051. 		 * 是否已初始化
  5052. 		 */
  5053. 		isInit: false,
  5054. 		/**
  5055. 		 * 存储已创建的元素
  5056. 		 */
  5057. 		layer: {
  5058. 			/**
  5059. 			 * 存储已创建的pops.alert
  5060. 			 * @type { PopsLayerCommonConfig[] }
  5061. 			 */
  5062. 			alert: [],
  5063. 			/**
  5064. 			 * 存储已创建的pops.confirm
  5065. 			 * @type { PopsLayerCommonConfig[] }
  5066. 			 */
  5067. 			confirm: [],
  5068. 			/**
  5069. 			 * 存储已创建的pops.prompt
  5070. 			 * @type { PopsLayerCommonConfig[] }
  5071. 			 */
  5072. 			prompt: [],
  5073. 			/**
  5074. 			 * 存储已创建的pops.loading
  5075. 			 * @type { PopsLayerCommonConfig[] }
  5076. 			 */
  5077. 			loading: [],
  5078. 			/**
  5079. 			 * 存储已创建的pops.iframe
  5080. 			 * @type { PopsLayerConfig[] }
  5081. 			 */
  5082. 			iframe: [],
  5083. 			/**
  5084. 			 * 存储已创建的pops.tooltip
  5085. 			 * @type { PopsLayerCommonConfig[] }
  5086. 			 */
  5087. 			tooltip: [],
  5088. 			/**
  5089. 			 * 存储已创建的pops.drawer
  5090. 			 * @type { PopsLayerCommonConfig[] }
  5091. 			 */
  5092. 			drawer: [],
  5093. 			/**
  5094. 			 * 存储已创建的pops.folder
  5095. 			 * @type { PopsLayerCommonConfig[] }
  5096. 			 */
  5097. 			folder: [],
  5098. 			/**
  5099. 			 * 存储已创建的pops.panel
  5100. 			 * @type { PopsLayerCommonConfig[] }
  5101. 			 */
  5102. 			panel: [],
  5103. 		},
  5104. 		forbiddenScroll: {
  5105. 			// @ts-ignore
  5106. 			event(event) {
  5107. 				event.preventDefault();
  5108. 				return false;
  5109. 			},
  5110. 		},
  5111. 		Utils: PopsUtils,
  5112. 		DOMUtils: PopsDOMUtils,
  5113. 	};
  5114.  
  5115. 	/**
  5116. 	 * 释放原有的pops控制权
  5117. 	 * @example
  5118. 	 * let pops = window.pops.noConflict()
  5119. 	 */
  5120. 	pops.noConflict = function () {
  5121. 		// @ts-ignore
  5122. 		if (window.pops) {
  5123. 			// @ts-ignore
  5124. 			delete window.pops;
  5125. 		}
  5126. 		if (AnotherPops) {
  5127. 			// @ts-ignore
  5128. 			window.pops = AnotherPops;
  5129. 		}
  5130. 		return pops;
  5131. 	};
  5132.  
  5133. 	/**
  5134. 	 * 初始化CSS、动画
  5135. 	 */
  5136. 	pops.init = function () {
  5137. 		if (!this.config.isInit) {
  5138. 			/* 处理获取当前所有的动画名 */
  5139. 			this.config.isInit = true;
  5140. 			let animationStyle = document.createElement("style");
  5141. 			animationStyle.innerHTML = this.config.cssText.anim;
  5142. 			(document.head || document.body || document.documentElement).appendChild(
  5143. 				animationStyle
  5144. 			);
  5145. 			// @ts-ignore
  5146. 			this.config.animation = PopsUtils.getKeyFrames(animationStyle.sheet);
  5147. 			setTimeout(() => {
  5148. 				animationStyle.remove();
  5149. 			}, 50);
  5150. 		}
  5151. 	};
  5152.  
  5153. 	/**
  5154. 	 * 通过navigator.userAgent判断是否是手机访问
  5155. 	 * @param {string} userAgent
  5156. 	 * @returns {boolean}
  5157. 	 */
  5158. 	pops.isPhone = function (userAgent = navigator.userAgent) {
  5159. 		return Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(userAgent));
  5160. 	};
  5161.  
  5162. 	const PopsHandler = {
  5163. 		/**
  5164. 		 * 创建shadow
  5165. 		 */
  5166. 		handlerShadow() {
  5167. 			let $shadowContainer = document.createElement("div");
  5168. 			$shadowContainer.className = "pops-shadow-container";
  5169. 			let $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
  5170. 			return {
  5171. 				$shadowContainer,
  5172. 				$shadowRoot,
  5173. 			};
  5174. 		},
  5175. 		/**
  5176. 		 * 处理初始化
  5177. 		 * @param {ShadowRoot} $shadowRoot
  5178. 		 * @param {string[]|string} cssText
  5179. 		 */
  5180. 		handleInit($shadowRoot, cssText) {
  5181. 			pops.init();
  5182. 			if (!arguments.length) {
  5183. 				return;
  5184. 			}
  5185. 			if (Array.isArray(cssText)) {
  5186. 				cssText.forEach((text) => {
  5187. 					this.handleInit($shadowRoot, text);
  5188. 				});
  5189. 			} else {
  5190. 				let cssStyle = document.createElement("style");
  5191. 				cssStyle.setAttribute("type", "text/css");
  5192. 				cssStyle.innerHTML = cssText;
  5193. 				$shadowRoot.appendChild(cssStyle);
  5194. 			}
  5195. 		},
  5196. 		/**
  5197. 		 * 处理遮罩层
  5198. 		 * @param {?{
  5199. 		 * type: "alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel",
  5200. 		 * guid: string,
  5201. 		 * config: PopsAlertDetails,
  5202. 		 * animElement: HTMLElement,
  5203. 		 * maskHTML: string,
  5204. 		 * }} details
  5205. 		 * @returns { {
  5206. 		 * maskElement: HTMLDivElement
  5207. 		 * } }
  5208. 		 */
  5209. 		// @ts-ignore
  5210. 		handleMask(details = {}) {
  5211. 			let result = {
  5212. 				// @ts-ignore
  5213. 				maskElement: PopsUtils.parseTextToDOM(details.maskHTML),
  5214. 			};
  5215. 			let isMaskClick = false;
  5216. 			/**
  5217. 			 * 点击其它区域的事件
  5218. 			 * @param {Event} event
  5219. 			 * @returns
  5220. 			 */
  5221. 			function clickEvent(event) {
  5222. 				event?.preventDefault();
  5223. 				event?.stopPropagation();
  5224. 				event?.stopImmediatePropagation();
  5225. 				// @ts-ignore
  5226. 				let targetLayer = pops.config.layer[details.type];
  5227. 				function originalRun() {
  5228. 					// @ts-ignore
  5229. 					if (details.config.mask.clickEvent.toClose) {
  5230. 						/* 关闭 */
  5231. 						PopsUtils.close(
  5232. 							// @ts-ignore
  5233. 							details.type,
  5234. 							targetLayer,
  5235. 							// @ts-ignore
  5236. 							details.guid,
  5237. 							// @ts-ignore
  5238. 							details.config,
  5239. 							// @ts-ignore
  5240. 							details.animElement
  5241. 						);
  5242. 						// @ts-ignore
  5243. 					} else if (details.config.mask.clickEvent.toHide) {
  5244. 						/* 隐藏 */
  5245. 						PopsUtils.hide(
  5246. 							// @ts-ignore
  5247. 							details.type,
  5248. 							targetLayer,
  5249. 							// @ts-ignore
  5250. 							details.guid,
  5251. 							// @ts-ignore
  5252. 							details.config,
  5253. 							// @ts-ignore
  5254. 							details.animElement,
  5255. 							result.maskElement
  5256. 						);
  5257. 					}
  5258. 				}
  5259. 				// @ts-ignore
  5260. 				if (details.config.mask.clickCallBack) {
  5261. 					// @ts-ignore
  5262. 					details.config.mask.clickCallBack(originalRun);
  5263. 				} else {
  5264. 					originalRun();
  5265. 				}
  5266. 				return false;
  5267. 			}
  5268. 			// @ts-ignore
  5269. 			function isAnimElement(element) {
  5270. 				return Boolean(
  5271. 					element?.localName?.toLowerCase() === "div" &&
  5272. 						element.className &&
  5273. 						element.className === "pops-anim" &&
  5274. 						element.hasAttribute("anim")
  5275. 				);
  5276. 			}
  5277. 			if (
  5278. 				// @ts-ignore
  5279. 				details.config.mask.clickEvent.toClose ||
  5280. 				// @ts-ignore
  5281. 				details.config.mask.clickEvent.toHide
  5282. 			) {
  5283. 				/* 判断按下的元素是否是pops-anim */
  5284. 				// @ts-ignore
  5285. 				PopsDOMUtils.on(
  5286. 					// @ts-ignore
  5287. 					details.animElement,
  5288. 					["touchstart", "mousedown"],
  5289. 					void 0,
  5290. 					function (event) {
  5291. 						isMaskClick = isAnimElement(event.composedPath()[0]);
  5292. 					}
  5293. 				);
  5294. 				/* 如果有动画层，在动画层上监听点击事件 */
  5295. 				// @ts-ignore
  5296. 				PopsDOMUtils.on(details.animElement, "click", void 0, function (event) {
  5297. 					if (isAnimElement(event.composedPath()[0]) && isMaskClick) {
  5298. 						return clickEvent(event);
  5299. 					}
  5300. 				});
  5301. 				/* 在遮罩层监听点击事件 */
  5302. 				/* 如果有动画层，那么该点击事件触发不了 */
  5303. 				// @ts-ignore
  5304. 				PopsDOMUtils.on(result.maskElement, "click", void 0, (event) => {
  5305. 					isMaskClick = true;
  5306. 					clickEvent(event);
  5307. 				});
  5308. 			}
  5309. 			// @ts-ignore
  5310. 			return result;
  5311. 		},
  5312. 		/**
  5313. 		 * 处理获取元素
  5314. 		 * @param {HTMLDivElement} animElement
  5315. 		 * @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel"} type
  5316. 		 */
  5317. 		handleQueryElement(animElement, type) {
  5318. 			return {
  5319. 				/**
  5320. 				 * 主元素
  5321. 				 * @type {?HTMLElement}
  5322. 				 */
  5323. 				popsElement: animElement.querySelector(".pops[type-value"),
  5324. 				/**
  5325. 				 * 确认按钮
  5326. 				 * @type {?HTMLElement}
  5327. 				 */
  5328. 				btnOkElement: animElement.querySelector(`.pops-${type}-btn-ok`),
  5329. 				/**
  5330. 				 * 取消按钮
  5331. 				 * @type {?HTMLElement}
  5332. 				 */
  5333. 				btnCancelElement: animElement.querySelector(`.pops-${type}-btn-cancel`),
  5334. 				/**
  5335. 				 * 其它按钮
  5336. 				 * @type {?HTMLElement}
  5337. 				 */
  5338. 				btnOtherElement: animElement.querySelector(`.pops-${type}-btn-other`),
  5339. 				/**
  5340. 				 * 标题元素
  5341. 				 * @type {?HTMLElement}
  5342. 				 */
  5343. 				titleElement: animElement.querySelector(`.pops-${type}-title`),
  5344. 				/**
  5345. 				 * 输入框元素
  5346. 				 * @type {?HTMLTextAreaElement|HTMLInputElement}
  5347. 				 */
  5348. 				inputElement: animElement.querySelector(
  5349. 					`.pops-${type}-content textarea[pops]`
  5350. 				)
  5351. 					? animElement.querySelector(`.pops-${type}-content textarea[pops]`)
  5352. 					: animElement.querySelector(`.pops-${type}-content input[pops]`),
  5353. 				/**
  5354. 				 * 顶部按钮控制层元素
  5355. 				 * @type {?HTMLElement}
  5356. 				 */
  5357. 				headerControlsElement: animElement.querySelector(
  5358. 					".pops-header-controls"
  5359. 				),
  5360. 				/**
  5361. 				 * iframe元素
  5362. 				 * @type {?HTMLIFrameElement}
  5363. 				 */
  5364. 				iframeElement: animElement.querySelector("iframe[pops]"),
  5365. 				/**
  5366. 				 * 加载中元素
  5367. 				 * @type {?HTMLElement}
  5368. 				 */
  5369. 				loadingElement: animElement.querySelector(".pops-loading"),
  5370. 				/**
  5371. 				 * 内容元素
  5372. 				 * @type {?HTMLElement}
  5373. 				 */
  5374. 				contentElement: animElement.querySelector(`.pops-${type}-content`),
  5375. 				/**
  5376. 				 * 内容侧边栏容器元素
  5377. 				 * @type {?HTMLElement}
  5378. 				 */
  5379. 				contentAsideElement: animElement.querySelector(
  5380. 					`.pops-${type}-content aside.pops-${type}-aside`
  5381. 				),
  5382. 				/**
  5383. 				 * 内容主要区域容器元素
  5384. 				 * @type {?HTMLElement}
  5385. 				 */
  5386. 				contentSectionContainerElement: animElement.querySelector(
  5387. 					`.pops-${type}-content section.pops-${type}-container`
  5388. 				),
  5389. 				/**
  5390. 				 * 内容加载中元素
  5391. 				 * @type {?HTMLElement}
  5392. 				 */
  5393. 				contentLoadingElement: animElement.querySelector(
  5394. 					`.pops-${type}-content-global-loading`
  5395. 				),
  5396. 				/**
  5397. 				 * 顶部缩小按钮
  5398. 				 * @type {?HTMLElement}
  5399. 				 */
  5400. 				headerMinBtnElement: animElement.querySelector(
  5401. 					".pops-header-control[type='min']"
  5402. 				),
  5403. 				/**
  5404. 				 * 顶部放大按钮
  5405. 				 * @type {?HTMLElement}
  5406. 				 */
  5407. 				headerMaxBtnElement: animElement.querySelector(
  5408. 					".pops-header-control[type='max']"
  5409. 				),
  5410. 				/**
  5411. 				 * 顶部恢复原样按钮
  5412. 				 * @type {?HTMLElement}
  5413. 				 */
  5414. 				headerMiseBtnElement: animElement.querySelector(
  5415. 					".pops-header-control[type='mise']"
  5416. 				),
  5417. 				/**
  5418. 				 * 顶部关闭按钮
  5419. 				 * @type {?HTMLElement}
  5420. 				 */
  5421. 				headerCloseBtnElement: animElement.querySelector(
  5422. 					".pops-header-control[type='close']"
  5423. 				),
  5424. 				/**
  5425. 				 * 文件夹列表元素
  5426. 				 * @type {?HTMLElement}
  5427. 				 */
  5428. 				folderListElement: animElement.querySelector(".pops-folder-list"),
  5429. 				/**
  5430. 				 * 文件夹列表顶部元素
  5431. 				 * @type {?HTMLElement}
  5432. 				 */
  5433. 				folderListHeaderElement: animElement.querySelector(
  5434. 					".pops-folder-list .pops-folder-list-table__header-div"
  5435. 				),
  5436. 				/**
  5437. 				 * 文件夹列表行元素
  5438. 				 * @type {?HTMLTableRowElement}
  5439. 				 */
  5440. 				folderListHeaderRowElement: animElement.querySelector(
  5441. 					".pops-folder-list .pops-folder-list-table__header-div .pops-folder-list-table__header-row"
  5442. 				),
  5443. 				/**
  5444. 				 * 文件夹列表tbody元素
  5445. 				 * @type {?HTMLTableElement}
  5446. 				 */
  5447. 				folderListBodyElement: animElement.querySelector(
  5448. 					".pops-folder-list .pops-folder-list-table__body-div tbody"
  5449. 				),
  5450. 				/**
  5451. 				 * 文件夹列表primary元素
  5452. 				 * @type {?HTMLElement}
  5453. 				 */
  5454. 				folderFileListBreadcrumbPrimaryElement: animElement.querySelector(
  5455. 					".pops-folder-list .pops-folder-file-list-breadcrumb-primary"
  5456. 				),
  5457. 				/**
  5458. 				 * 文件夹排序按钮-文件名
  5459. 				 */
  5460. 				folderListSortFileNameElement: animElement.querySelector(
  5461. 					'.pops-folder-list-table__sort[data-sort="fileName"]'
  5462. 				),
  5463. 				/**
  5464. 				 * 文件夹排序按钮-修改时间
  5465. 				 */
  5466. 				folderListSortLatestTimeElement: animElement.querySelector(
  5467. 					'.pops-folder-list-table__sort[data-sort="latestTime"]'
  5468. 				),
  5469. 				/**
  5470. 				 * 文件夹排序按钮-文件大小
  5471. 				 */
  5472. 				folderListSortFileSizeElement: animElement.querySelector(
  5473. 					'.pops-folder-list-table__sort[data-sort="fileSize"]'
  5474. 				),
  5475. 			};
  5476. 		},
  5477. 		/**
  5478. 		 * 获取事件配置
  5479. 		 * @param {string} guid
  5480. 		 * @param {HTMLDivElement} $shadowContainer
  5481. 		 * @param {ShadowRoot} $shadowRoot
  5482. 		 * @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel"} mode 当前弹窗类型
  5483. 		 * @param {HTMLDivElement} animElement 动画层
  5484. 		 * @param {HTMLDivElement} popsElement 主元素
  5485. 		 * @param {HTMLDivElement} maskElement 遮罩层
  5486. 		 * @param {object} config 当前配置
  5487. 		 */
  5488. 		handleEventDetails(
  5489. 			guid,
  5490. 			$shadowContainer,
  5491. 			$shadowRoot,
  5492. 			mode,
  5493. 			animElement,
  5494. 			popsElement,
  5495. 			maskElement,
  5496. 			config
  5497. 		) {
  5498. 			return {
  5499. 				$shadowContainer: $shadowContainer,
  5500. 				$shadowRoot: $shadowRoot,
  5501. 				element: animElement,
  5502. 				animElement: animElement,
  5503. 				popsElement: popsElement,
  5504. 				maskElement: maskElement,
  5505. 				type: "",
  5506. 				mode: mode,
  5507. 				guid: guid,
  5508. 				close() {
  5509. 					PopsUtils.close(
  5510. 						mode,
  5511. 						pops.config.layer[mode],
  5512. 						guid,
  5513. 						// @ts-ignore
  5514. 						config,
  5515. 						animElement
  5516. 					);
  5517. 				},
  5518. 				hide() {
  5519. 					PopsUtils.hide(
  5520. 						// @ts-ignore
  5521. 						mode,
  5522. 						pops.config.layer[mode],
  5523. 						guid,
  5524. 						config,
  5525. 						animElement,
  5526. 						maskElement
  5527. 					);
  5528. 				},
  5529. 				show() {
  5530. 					PopsUtils.show(
  5531. 						// @ts-ignore
  5532. 						mode,
  5533. 						pops.config.layer[mode],
  5534. 						guid,
  5535. 						config,
  5536. 						animElement,
  5537. 						maskElement
  5538. 					);
  5539. 				},
  5540. 			};
  5541. 		},
  5542. 		/**
  5543. 		 * 处理返回的配置，针对popsHandler.handleEventDetails
  5544. 		 * @returns { {
  5545. 		 * $shadowContainer: HTMLDivElement,
  5546. 		 * $shadowRoot: ShadowRoot,
  5547. 		 * animElement: HTMLElement,
  5548. 		 * popsElement: HTMLElement,
  5549. 		 * maskElement: HTMLElement,
  5550. 		 * close: ()=> void,
  5551. 		 * hide: ()=> void,
  5552. 		 * show: ()=> void,
  5553. 		 * } }
  5554. 		 */
  5555. 		// @ts-ignore
  5556. 		handleResultDetails(details) {
  5557. 			let _details_ = Object.assign({}, details);
  5558. 			delete _details_["type"];
  5559. 			delete _details_["function"];
  5560. 			delete _details_["type"];
  5561. 			return _details_;
  5562. 		},
  5563. 		/**
  5564. 		 * 处理点击事件
  5565. 		 * @param {HTMLElement} btnElement 按钮元素
  5566. 		 * @param {"ok"|"close"|"cancel"|"other"} type 触发事件类型
  5567. 		 * @param {object} event 事件配置，由popsHandler.handleEventDetails创建的
  5568. 		 * @param {(event:(PointerEvent|MouseEvent) & {
  5569. 		 * type: "cancel" | "close" | "ok" | "other",
  5570. 		 * })=>{}} callback 点击回调
  5571. 		 */
  5572. 		handleClickEvent(btnElement, type, event, callback) {
  5573. 			PopsDOMUtils.on(
  5574. 				btnElement,
  5575. 				"click",
  5576. 				void 0,
  5577. 				function () {
  5578. 					let _event_ = {
  5579. 						type: type,
  5580. 					};
  5581. 					_event_ = Object.assign(event, _event_);
  5582. 					// @ts-ignore
  5583. 					callback(_event_);
  5584. 				},
  5585. 				{
  5586. 					capture: true,
  5587. 				}
  5588. 			);
  5589. 		},
  5590. 		/**
  5591. 		 * 全局监听键盘事件
  5592. 		 * @param {string|number} keyName 键名|键值
  5593. 		 * @param {?string[]} otherKeyList 组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
  5594. 		 * @param {(event:Event)=> void} callback 回调函数
  5595. 		 */
  5596. 		handleKeyboardEvent(keyName, otherKeyList = [], callback) {
  5597. 			// @ts-ignore
  5598. 			let keyboardEvent = function (event) {
  5599. 				let _keyName = event.code || event.key;
  5600. 				let _keyValue = event.charCode || event.keyCode || event.which;
  5601. 				// @ts-ignore
  5602. 				if (otherKeyList.includes("ctrl") && !event.ctrlKey) {
  5603. 					return;
  5604. 				}
  5605. 				// @ts-ignore
  5606. 				if (otherKeyList.includes("alt") && !event.altKey) {
  5607. 					return;
  5608. 				}
  5609. 				// @ts-ignore
  5610. 				if (otherKeyList.includes("meta") && !event.metaKey) {
  5611. 					return;
  5612. 				}
  5613. 				// @ts-ignore
  5614. 				if (otherKeyList.includes("shift") && !event.shiftKey) {
  5615. 					return;
  5616. 				}
  5617. 				if (typeof keyName === "string" && keyName === _keyName) {
  5618. 					callback && callback(event);
  5619. 				} else if (typeof keyName === "number" && keyName === _keyValue) {
  5620. 					callback && callback(event);
  5621. 				}
  5622. 			};
  5623. 			// @ts-ignore
  5624. 			PopsDOMUtils.on(globalThis, "keydown", void 0, keyboardEvent, {
  5625. 				capture: true,
  5626. 			});
  5627. 			return {
  5628. 				removeKeyboardEvent() {
  5629. 					// @ts-ignore
  5630. 					PopsDOMUtils.off(globalThis, "keydown", void 0, keyboardEvent, {
  5631. 						capture: true,
  5632. 					});
  5633. 				},
  5634. 			};
  5635. 		},
  5636. 		/**
  5637. 		 * 处理prompt的点击事件
  5638. 		 * @param {HTMLInputElement} inputElement 输入框
  5639. 		 * @param {HTMLElement} btnElement 按钮元素
  5640. 		 * @param {"ok"|"close"} type 触发事件类型
  5641. 		 * @param {object} event 事件配置，由popsHandler.handleEventDetails创建的
  5642. 		 * @param {(event: (MouseEvent |PointerEvent) & {
  5643. 		 * type: any,
  5644. 		 * text: string,
  5645. 		 * })=>void} callback 点击回调
  5646. 		 */
  5647. 		handlePromptClickEvent(inputElement, btnElement, type, event, callback) {
  5648. 			PopsDOMUtils.on(
  5649. 				btnElement,
  5650. 				"click",
  5651. 				void 0,
  5652. 				function () {
  5653. 					let _event_ = {
  5654. 						type: type,
  5655. 						text: inputElement.value,
  5656. 					};
  5657. 					_event_ = Object.assign(event, _event_);
  5658. 					// @ts-ignore
  5659. 					callback(_event_);
  5660. 				},
  5661. 				{
  5662. 					capture: true,
  5663. 				}
  5664. 			);
  5665. 		},
  5666. 		/**
  5667. 		 * 处理config.only
  5668. 		 * @param {"alert"|"confirm"|"prompt"|"loading"|"tooltip"|"iframe"|"drawer"|"folder"|"rightClickMenu"} type 当前弹窗类型
  5669. 		 * @param {object} config 配置
  5670. 		 * @returns {object}
  5671. 		 */
  5672. 		handleOnly(type, config) {
  5673. 			// @ts-ignore
  5674. 			if (config.only) {
  5675. 				if (
  5676. 					type === "loading" ||
  5677. 					type === "tooltip" ||
  5678. 					type === "rightClickMenu"
  5679. 				) {
  5680. 					// @ts-ignore
  5681. 					PopsUtils.configRemove([pops.config.layer[type]], "", true);
  5682. 				} else {
  5683. 					PopsUtils.configRemove(
  5684. 						[
  5685. 							pops.config.layer.alert,
  5686. 							pops.config.layer.confirm,
  5687. 							pops.config.layer.prompt,
  5688. 							pops.config.layer.iframe,
  5689. 							pops.config.layer.drawer,
  5690. 							pops.config.layer.folder,
  5691. 							pops.config.layer.panel,
  5692. 						],
  5693. 						"",
  5694. 						true
  5695. 					);
  5696. 				}
  5697. 			} else {
  5698. 				// @ts-ignore
  5699. 				config.zIndex = PopsUtils.getPopsMaxZIndex(config.zIndex)["zIndex"] * 2;
  5700. 			}
  5701. 			return config;
  5702. 		},
  5703. 		/**
  5704. 		 * 处理把已创建的元素保存到内部环境中
  5705. 		 * @param {"alert"|"confirm"|"prompt"|"loading"|"tooltip"|"iframe"|"drawer"|"folder"|"panel"} type 当前弹窗类型
  5706. 		 * @param {PopsLayerCommonConfig} value
  5707. 		 */
  5708. 		handlePush(type, value) {
  5709. 			pops.config.layer[type].push(value);
  5710. 		},
  5711. 	};
  5712.  
  5713. 	const PopsElementHandler = {
  5714. 		/**
  5715. 		 * 获取遮罩层HTML
  5716. 		 * @param {string} guid
  5717. 		 * @param {number} zIndex z-index
  5718. 		 * @param {string} [style=""] style
  5719. 		 * @returns {string}
  5720. 		 */
  5721. 		getMaskHTML(guid, zIndex, style = "") {
  5722. 			zIndex = zIndex - 100;
  5723. 			return `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
  5724. 		},
  5725. 		/**
  5726. 		 * 获取动画层HTML
  5727. 		 * @param {string} guid
  5728. 		 * @param {"alert"|"confirm"|"iframe"|"loading"|"prompt"|"drawer"|"folder"|"panel"} type
  5729. 		 * @param {object} config
  5730. 		 * @param {string} html
  5731. 		 * @param {string} bottomBtnHTML
  5732. 		 */
  5733. 		getAnimHTML(guid, type, config, html = "", bottomBtnHTML = "") {
  5734. 			let popsAnimStyle = "";
  5735. 			let popsStyle = "";
  5736. 			// @ts-ignore
  5737. 			let popsPosition = config.position || "";
  5738. 			// @ts-ignore
  5739. 			if (config.zIndex != null) {
  5740. 				// @ts-ignore
  5741. 				popsAnimStyle += `z-index: ${config.zIndex};`;
  5742. 				// @ts-ignore
  5743. 				popsStyle += `z-index: ${config.zIndex};`;
  5744. 			}
  5745. 			// @ts-ignore
  5746. 			if (config.width != null) {
  5747. 				// @ts-ignore
  5748. 				popsStyle += `width: ${config.width};`;
  5749. 			}
  5750. 			// @ts-ignore
  5751. 			if (config.height != null) {
  5752. 				// @ts-ignore
  5753. 				popsStyle += `height: ${config.height};`;
  5754. 			}
  5755. 			/* 是否存在底部按钮 */
  5756. 			let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
  5757. 			return `<div 
  5758.                   class="pops-anim"
  5759.                   anim="${
  5760. 										// @ts-ignore
  5761. 										config.animation || ""
  5762. 									}"
  5763.                   style="${popsAnimStyle};"
  5764.                   data-guid="${guid}">
  5765.                 ${
  5766. 									// @ts-ignore
  5767. 									config.style != null
  5768. 										? // @ts-ignore
  5769. 										  `<style tyle="text/css">${config.style}</style>`
  5770. 										: ""
  5771. 								}
  5772.                 <div
  5773.                     class="pops ${
  5774. 											// @ts-ignore
  5775. 											config.class || ""
  5776. 										}"
  5777.                     data-bottom-btn="${hasBottomBtn}"
  5778.                     type-value="${type}"
  5779.                     style="${popsStyle}"
  5780.                     position="${popsPosition}"
  5781.                     data-guid="${guid}">
  5782.                     ${html}
  5783.                 </div>
  5784.               </div>`;
  5785. 		},
  5786. 		/**
  5787. 		 * 获取顶部按钮层HTML
  5788. 		 * @param {"alert"|"confirm"|"iframe"|"prompt"|"drawer"|"folder"|"panel"} type
  5789. 		 * @param {PopsIframeDetails} config
  5790. 		 * @returns {string}
  5791. 		 */
  5792. 		getHeaderBtnHTML(type, config) {
  5793. 			if (!config.btn) {
  5794. 				return "";
  5795. 			}
  5796. 			// @ts-ignore
  5797. 			if (type !== "iframe" && !config.btn?.close?.enable) {
  5798. 				return "";
  5799. 			}
  5800. 			let resultHTML = "";
  5801. 			// @ts-ignore
  5802. 			// @ts-ignore
  5803. 			let btnStyle = "";
  5804. 			let closeHTML = "";
  5805. 			if (type === "iframe" && config.topRightButton?.trim() !== "") {
  5806. 				/* iframe的 */
  5807. 				let topRightButtonHTML = "";
  5808. 				config.topRightButton.split("|").forEach((item) => {
  5809. 					item = item.toLowerCase();
  5810. 					topRightButtonHTML += `
  5811.           <button class="pops-header-control" type="${item}">
  5812.             <i class="pops-icon">${
  5813. 							// @ts-ignore
  5814. 							pops.config.iconSVG[item]
  5815. 						}</i>
  5816.           </button>`;
  5817. 				});
  5818. 				resultHTML = `
  5819.         <div class="pops-header-controls" data-margin>
  5820.             ${topRightButtonHTML}
  5821.           </div>`;
  5822. 			} else {
  5823. 				// @ts-ignore
  5824. 				if (config.btn?.close?.enable) {
  5825. 					closeHTML = `
  5826.           <div class="pops-header-controls">
  5827.             <button class="pops-header-control" type="close" data-header>
  5828.               <i class="pops-icon">${pops.config.iconSVG["close"]}</i>
  5829.             </button>
  5830.           </div>`;
  5831. 				}
  5832. 				resultHTML = closeHTML;
  5833. 			}
  5834.  
  5835. 			return resultHTML;
  5836. 		},
  5837. 		/**
  5838. 		 * 获取底部按钮层HTML
  5839. 		 * @param {"alert"|"confirm"|"prompt"|"drawer"|"folder"} type
  5840. 		 * @param {Required<PopsConfirmDetails>|Required<PopsAlertDetails>|Required<PopsPromptDetails>|Required<PopsDrawerDetails>} config
  5841. 		 * @returns {string}
  5842. 		 */
  5843. 		getBottomBtnHTML(type, config) {
  5844. 			if (!config.btn) {
  5845. 				return "";
  5846. 			}
  5847. 			if (
  5848. 				!(
  5849. 					config.btn?.ok?.enable ||
  5850. 					// @ts-ignore
  5851. 					config.btn?.cancel?.enable ||
  5852. 					// @ts-ignore
  5853. 					config.btn?.other?.enable
  5854. 				)
  5855. 			) {
  5856. 				return "";
  5857. 			}
  5858. 			let btnStyle = "";
  5859. 			let resultHTML = "";
  5860. 			let okHTML = "";
  5861. 			let cancelHTML = "";
  5862. 			let ohterHTML = "";
  5863.  
  5864. 			if (config.btn.position) {
  5865. 				btnStyle += `justify-content: ${config.btn.position};`;
  5866. 			}
  5867. 			// @ts-ignore
  5868. 			if (config.btn.reverse) {
  5869. 				btnStyle += "flex-direction: row-reverse;";
  5870. 			}
  5871. 			if (config.btn?.ok?.enable) {
  5872. 				/* 处理确定按钮的尺寸问题 */
  5873. 				let okButtonSizeClassName = "";
  5874. 				if (config.btn.ok.size === "large") {
  5875. 					okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
  5876. 				} else if (config.btn.ok.size === "small") {
  5877. 					okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
  5878. 				}
  5879. 				let okIconHTML = "";
  5880. 				// @ts-ignore
  5881. 				if (config.btn.ok.icon !== "") {
  5882. 					okIconHTML = `
  5883.           <i class="pops-bottom-icon" is-loading="${
  5884. 						config.btn.ok.iconIsLoading
  5885. 					}">
  5886.             ${
  5887. 							// @ts-ignore
  5888. 							config.btn.ok.icon in pops.config.iconSVG
  5889. 								? // @ts-ignore
  5890. 								  pops.config.iconSVG[config.btn.ok.icon]
  5891. 								: config.btn.ok.icon
  5892. 						}
  5893.           </i>`;
  5894. 				}
  5895. 				okHTML = `
  5896.         <button 
  5897.                 class="pops-${type}-btn-ok ${okButtonSizeClassName}"
  5898.                 type="${config.btn.ok.type}"
  5899.                 data-icon="${config.btn.ok.icon}"
  5900.                 data-rightIcon="${config.btn.ok.rightIcon}"
  5901.         >
  5902.           ${okIconHTML}
  5903.           <span>${config.btn.ok.text}</span>
  5904.         </button>`;
  5905. 			}
  5906. 			// @ts-ignore
  5907. 			if (config.btn?.cancel?.enable) {
  5908. 				/* 处理取消按钮的尺寸问题 */
  5909. 				let cancelButtonSizeClassName = "";
  5910. 				// @ts-ignore
  5911. 				if (config.btn.cancel.size === "large") {
  5912. 					// @ts-ignore
  5913. 					cancelButtonSizeClassName = "pops-button-" + config.btn.cancel.size;
  5914. 					// @ts-ignore
  5915. 				} else if (config.btn.cancel.size === "small") {
  5916. 					// @ts-ignore
  5917. 					cancelButtonSizeClassName = "pops-button-" + config.btn.cancel.size;
  5918. 				}
  5919. 				let cancelIconHTML = "";
  5920. 				// @ts-ignore
  5921. 				if (config.btn.cancel.icon !== "") {
  5922. 					cancelIconHTML = `
  5923.           <i class="pops-bottom-icon" is-loading="${
  5924. 						// @ts-ignore
  5925. 						config.btn.cancel.iconIsLoading
  5926. 					}">
  5927.           ${
  5928. 						// @ts-ignore
  5929. 						config.btn.cancel.icon in pops.config.iconSVG
  5930. 							? // @ts-ignore
  5931. 							  pops.config.iconSVG[config.btn.cancel.icon]
  5932. 							: // @ts-ignore
  5933. 							  config.btn.cancel.icon
  5934. 					}
  5935.           </i>`;
  5936. 				}
  5937. 				cancelHTML = `
  5938.         <button
  5939.                 class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
  5940.                 type="${
  5941. 									// @ts-ignore
  5942. 									config.btn.cancel.type
  5943. 								}"
  5944.                 data-icon="${
  5945. 									// @ts-ignore
  5946. 									config.btn.cancel.icon
  5947. 								}"
  5948.                 data-rightIcon="${
  5949. 									// @ts-ignore
  5950. 									config.btn.cancel.rightIcon
  5951. 								}"
  5952.         >
  5953.           ${cancelIconHTML}
  5954.           <span>${
  5955. 						// @ts-ignore
  5956. 						config.btn.cancel.text
  5957. 					}</span>
  5958.         </button>`;
  5959. 			}
  5960. 			// @ts-ignore
  5961. 			if (config.btn?.other?.enable) {
  5962. 				/* 处理其它按钮的尺寸问题 */
  5963. 				let otherButtonSizeClassName = "";
  5964. 				// @ts-ignore
  5965. 				if (config.btn.other.size === "large") {
  5966. 					// @ts-ignore
  5967. 					otherButtonSizeClassName = "pops-button-" + config.btn.other.size;
  5968. 					// @ts-ignore
  5969. 				} else if (config.btn.other.size === "small") {
  5970. 					// @ts-ignore
  5971. 					otherButtonSizeClassName = "pops-button-" + config.btn.other.size;
  5972. 				}
  5973. 				let otherIconHTML = "";
  5974. 				// @ts-ignore
  5975. 				if (config.btn.other.icon !== "") {
  5976. 					otherIconHTML = `
  5977.           <i class="pops-bottom-icon" is-loading="${
  5978. 						// @ts-ignore
  5979. 						config.btn.other.iconIsLoading
  5980. 					}">
  5981.           ${
  5982. 						// @ts-ignore
  5983. 						config.btn.other.icon in pops.config.iconSVG
  5984. 							? // @ts-ignore
  5985. 							  pops.config.iconSVG[config.btn.other.icon]
  5986. 							: // @ts-ignore
  5987. 							  config.btn.other.icon
  5988. 					}
  5989.           </i>`;
  5990. 				}
  5991. 				ohterHTML = `
  5992.         <button
  5993.                 class="pops-${type}-btn-other ${otherButtonSizeClassName}"
  5994.                 type="${
  5995. 									// @ts-ignore
  5996. 									config.btn.other.type
  5997. 								}"
  5998.                 data-icon="${
  5999. 									// @ts-ignore
  6000. 									config.btn.other.icon
  6001. 								}"
  6002.                 data-rightIcon="${
  6003. 									// @ts-ignore
  6004. 									config.btn.other.rightIcon
  6005. 								}"
  6006.         >
  6007.           ${otherIconHTML}
  6008.           <span>${
  6009. 						// @ts-ignore
  6010. 						config.btn.other.text
  6011. 					}</span>
  6012.         </button>`;
  6013. 			}
  6014. 			// @ts-ignore
  6015. 			if (config.btn.merge) {
  6016. 				resultHTML = `
  6017.         <div class="pops-${type}-btn" style="${btnStyle}">
  6018.           ${ohterHTML}
  6019.           <div 
  6020.               class="pops-${type}-btn-merge"
  6021.               style="display: flex;
  6022.                     flex-direction: ${
  6023. 											// @ts-ignore
  6024. 											config.btn.mergeReverse ? "row-reverse" : "row"
  6025. 										};
  6026.           ">
  6027.             ${okHTML}
  6028.             ${cancelHTML}
  6029.           </div>
  6030.         </div>
  6031.         `;
  6032. 			} else {
  6033. 				resultHTML = `
  6034.         <div class="pops-${type}-btn" style="${btnStyle}">
  6035.           ${okHTML}
  6036.           ${cancelHTML}
  6037.           ${ohterHTML}
  6038.         </div>
  6039.         `;
  6040. 			}
  6041. 			return resultHTML;
  6042. 		},
  6043. 		/**
  6044. 		 * 获取标题style
  6045. 		 * @param {"alert"|"confirm"|"prompt"|"drawer"|"folder"|"panel"} type
  6046. 		 * @param {PopsAlertDetails|PopsConfirmDetails|PopsPromptDetails|PopsDrawerDetails} config
  6047. 		 */
  6048. 		// @ts-ignore
  6049. 		// @ts-ignore
  6050. 		getHeaderStyle(type, config) {
  6051. 			return {
  6052. 				// @ts-ignore
  6053. 				headerStyle: config?.title?.html ? config?.title?.style || "" : "",
  6054. 				// @ts-ignore
  6055. 				headerPStyle: config?.title?.html ? "" : config?.title?.style || "",
  6056. 			};
  6057. 		},
  6058. 		/**
  6059. 		 * 获取内容style
  6060. 		 * @param {"alert"|"confirm"|"prompt"|"drawer"} type
  6061. 		 * @param {PopsAlertDetails|PopsConfirmDetails|PopsPromptDetails|PopsDrawerDetails} config
  6062. 		 */
  6063. 		// @ts-ignore
  6064. 		// @ts-ignore
  6065. 		getContentStyle(type, config) {
  6066. 			return {
  6067. 				// @ts-ignore
  6068. 				contentStyle: config?.content?.html ? config?.content?.style || "" : "",
  6069. 				// @ts-ignore
  6070. 				contentPStyle: config?.content?.html
  6071. 					? ""
  6072. 					: config?.content?.style || "",
  6073. 			};
  6074. 		},
  6075. 		/**
  6076. 		 * 将html转换成元素
  6077. 		 * @param {string} html
  6078. 		 * @returns {HTMLElement}
  6079. 		 */
  6080. 		parseElement(html) {
  6081. 			return PopsUtils.parseTextToDOM(html);
  6082. 		},
  6083. 	};
  6084.  
  6085. 	/**
  6086. 	 * 普通信息框
  6087. 	 * @param { PopsAlertDetails } details 配置
  6088. 	 */
  6089. 	pops.alert = function (details) {
  6090. 		// @ts-ignore
  6091. 		// @ts-ignore
  6092. 		let that = this;
  6093. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  6094. 		PopsHandler.handleInit($shadowRoot, [
  6095. 			pops.config.cssText.index,
  6096. 			pops.config.cssText.ninePalaceGridPosition,
  6097. 			pops.config.cssText.scrollbar,
  6098. 			pops.config.cssText.button,
  6099. 			pops.config.cssText.anim,
  6100. 			pops.config.cssText.common,
  6101. 			pops.config.cssText.alertCSS,
  6102. 		]);
  6103. 		/**
  6104. 		 * @type {Required<PopsAlertDetails>}
  6105. 		 */
  6106. 		let config = {
  6107. 			title: {
  6108. 				text: "默认标题",
  6109. 				position: "left",
  6110. 				html: false,
  6111. 				style: "",
  6112. 			},
  6113. 			content: {
  6114. 				text: "默认内容",
  6115. 				html: false,
  6116. 				style: "",
  6117. 			},
  6118. 			btn: {
  6119. 				position: "flex-end",
  6120. 				ok: {
  6121. 					// @ts-ignore
  6122. 					size: "",
  6123. 					enable: true,
  6124. 					// @ts-ignore
  6125. 					icon: "",
  6126. 					rightIcon: false,
  6127. 					iconIsLoading: false,
  6128. 					text: "确定",
  6129. 					type: "primary",
  6130. 					callback: function (event) {
  6131. 						event.close();
  6132. 					},
  6133. 				},
  6134. 				close: {
  6135. 					enable: true,
  6136. 					callback: function (event) {
  6137. 						event.close();
  6138. 					},
  6139. 				},
  6140. 			},
  6141. 			class: "",
  6142. 			only: false,
  6143. 			width: "350px",
  6144. 			height: "200px",
  6145. 			position: "center",
  6146. 			animation: "pops-anim-fadein-zoom",
  6147. 			zIndex: 10000,
  6148. 			mask: {
  6149. 				enable: false,
  6150. 				clickEvent: {
  6151. 					toClose: false,
  6152. 					toHide: false,
  6153. 				},
  6154. 				// @ts-ignore
  6155. 				clickCallBack: null,
  6156. 			},
  6157. 			drag: false,
  6158. 			dragLimit: true,
  6159. 			dragExtraDistance: 3,
  6160. 			dragMoveCallBack() {},
  6161. 			dragEndCallBack() {},
  6162. 			forbiddenScroll: false,
  6163. 			// @ts-ignore
  6164. 			style: void 0,
  6165. 			beforeAppendToPageCallBack() {},
  6166. 		};
  6167. 		config = PopsUtils.assignJSON(config, details);
  6168. 		let guid = PopsUtils.getRandomGUID();
  6169. 		const PopsType = "alert";
  6170. 		// @ts-ignore
  6171. 		config = PopsHandler.handleOnly(PopsType, config);
  6172.  
  6173. 		// @ts-ignore
  6174. 		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  6175. 		// @ts-ignore
  6176. 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  6177. 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  6178. 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  6179. 			PopsType,
  6180. 			config
  6181. 		);
  6182. 		let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
  6183. 			PopsType,
  6184. 			config
  6185. 		);
  6186. 		let animHTML = PopsElementHandler.getAnimHTML(
  6187. 			guid,
  6188. 			PopsType,
  6189. 			config,
  6190. 			`
  6191.       <div 
  6192.           class="pops-alert-title"
  6193.           style="text-align: ${config.title.position};
  6194.           ${headerStyle}">
  6195.           ${
  6196. 						config.title.html
  6197. 							? config.title.text
  6198. 							: `<p pops style="${headerPStyle}">${config.title.text}</p>`
  6199. 					}
  6200.           ${headerBtnHTML}
  6201.       </div>
  6202.       <div class="pops-alert-content" style="${contentStyle}">
  6203.           ${
  6204. 						config.content.html
  6205. 							? config.content.text
  6206. 							: `<p pops style="${contentPStyle}">${config.content.text}</p>`
  6207. 					}
  6208.       </div>
  6209.       ${bottomBtnHTML}`,
  6210. 			bottomBtnHTML
  6211. 		);
  6212. 		/**
  6213. 		 * 弹窗的主元素，包括动画层
  6214. 		 */
  6215. 		let animElement = PopsElementHandler.parseElement(animHTML);
  6216.  
  6217. 		let {
  6218. 			popsElement,
  6219. 			headerCloseBtnElement: btnCloseElement,
  6220. 			btnOkElement,
  6221. 			titleElement,
  6222. 			// @ts-ignore
  6223. 		} = PopsHandler.handleQueryElement(animElement, PopsType);
  6224. 		/**
  6225. 		 * 遮罩层元素
  6226. 		 * @type {?HTMLDivElement}
  6227. 		 */
  6228. 		let maskElement = null;
  6229. 		/**
  6230. 		 * 已创建的元素列表
  6231. 		 * @type {HTMLElement[]}
  6232. 		 */
  6233. 		let elementList = [animElement];
  6234.  
  6235. 		/* 遮罩层元素 */
  6236. 		// @ts-ignore
  6237. 		if (config.mask.enable) {
  6238. 			let _handleMask_ = PopsHandler.handleMask({
  6239. 				type: PopsType,
  6240. 				guid: guid,
  6241. 				config: config,
  6242. 				animElement: animElement,
  6243. 				maskHTML: maskHTML,
  6244. 			});
  6245. 			maskElement = _handleMask_.maskElement;
  6246. 			elementList.push(maskElement);
  6247. 		}
  6248. 		/* 处理返回的配置 */
  6249. 		let eventDetails = PopsHandler.handleEventDetails(
  6250. 			guid,
  6251. 			$shadowContainer,
  6252. 			$shadowRoot,
  6253. 			PopsType,
  6254. 			// @ts-ignore
  6255. 			animElement,
  6256. 			popsElement,
  6257. 			maskElement,
  6258. 			config
  6259. 		);
  6260. 		/* 为顶部右边的关闭按钮添加点击事件 */
  6261. 		PopsHandler.handleClickEvent(
  6262. 			// @ts-ignore
  6263. 			btnCloseElement,
  6264. 			"close",
  6265. 			eventDetails,
  6266. 			// @ts-ignore
  6267. 			config.btn.close.callback
  6268. 		);
  6269. 		/* 为底部ok按钮添加点击事件 */
  6270. 		PopsHandler.handleClickEvent(
  6271. 			// @ts-ignore
  6272. 			btnOkElement,
  6273. 			"ok",
  6274. 			eventDetails,
  6275. 			// @ts-ignore
  6276. 			config.btn.ok.callback
  6277. 		);
  6278.  
  6279. 		/* 创建到页面中 */
  6280. 		// @ts-ignore
  6281. 		PopsUtils.appendChild($shadowRoot, elementList);
  6282. 		if (typeof config.beforeAppendToPageCallBack === "function") {
  6283. 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  6284. 		}
  6285. 		// @ts-ignore
  6286. 		PopsUtils.appendChild($shadowContainer);
  6287. 		if (maskElement != null) {
  6288. 			animElement.after(maskElement);
  6289. 		}
  6290. 		/* 保存 */
  6291. 		PopsHandler.handlePush(PopsType, {
  6292. 			guid: guid,
  6293. 			// @ts-ignore
  6294. 			animElement: animElement,
  6295. 			// @ts-ignore
  6296. 			popsElement: popsElement,
  6297. 			// @ts-ignore
  6298. 			maskElement: maskElement,
  6299. 			$shadowContainer: $shadowContainer,
  6300. 			$shadowRoot: $shadowRoot,
  6301. 		});
  6302. 		/* 拖拽 */
  6303. 		if (config.drag) {
  6304. 			// @ts-ignore
  6305. 			PopsUtils.drag(popsElement, {
  6306. 				dragElement: titleElement,
  6307. 				limit: config.dragLimit,
  6308. 				extraDistance: config.dragExtraDistance,
  6309. 				moveCallBack: config.dragMoveCallBack,
  6310. 				endCallBack: config.dragEndCallBack,
  6311. 			});
  6312. 		}
  6313.  
  6314. 		return PopsHandler.handleResultDetails(eventDetails);
  6315. 	};
  6316.  
  6317. 	/**
  6318. 	 * 询问框
  6319. 	 * @param {PopsConfirmDetails} details
  6320. 	 */
  6321. 	pops.confirm = function (details) {
  6322. 		// @ts-ignore
  6323. 		// @ts-ignore
  6324. 		let that = this;
  6325. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  6326. 		PopsHandler.handleInit($shadowRoot, [
  6327. 			pops.config.cssText.index,
  6328. 			pops.config.cssText.ninePalaceGridPosition,
  6329. 			pops.config.cssText.scrollbar,
  6330. 			pops.config.cssText.button,
  6331. 			pops.config.cssText.anim,
  6332. 			pops.config.cssText.common,
  6333. 			pops.config.cssText.confirmCSS,
  6334. 		]);
  6335. 		/**
  6336. 		 * @type {Required<PopsConfirmDetails>}
  6337. 		 */
  6338. 		let config = {
  6339. 			title: {
  6340. 				text: "默认标题",
  6341. 				position: "left",
  6342. 				html: false,
  6343. 				style: "",
  6344. 			},
  6345. 			content: {
  6346. 				text: "默认内容",
  6347. 				html: false,
  6348. 				style: "",
  6349. 			},
  6350. 			btn: {
  6351. 				merge: false,
  6352. 				mergeReverse: false,
  6353. 				reverse: false,
  6354. 				position: "flex-end",
  6355. 				ok: {
  6356. 					enable: true,
  6357. 					// @ts-ignore
  6358. 					size: "",
  6359. 					// @ts-ignore
  6360. 					icon: "",
  6361. 					rightIcon: false,
  6362. 					iconIsLoading: false,
  6363. 					text: "确定",
  6364. 					type: "primary",
  6365. 					callback(event) {
  6366. 						event.close();
  6367. 					},
  6368. 				},
  6369. 				cancel: {
  6370. 					enable: true,
  6371. 					// @ts-ignore
  6372. 					size: "",
  6373. 					// @ts-ignore
  6374. 					icon: "",
  6375. 					rightIcon: false,
  6376. 					iconIsLoading: false,
  6377. 					text: "关闭",
  6378. 					type: "default",
  6379. 					callback(event) {
  6380. 						event.close();
  6381. 					},
  6382. 				},
  6383. 				other: {
  6384. 					enable: false,
  6385. 					// @ts-ignore
  6386. 					size: "",
  6387. 					// @ts-ignore
  6388. 					icon: "",
  6389. 					rightIcon: false,
  6390. 					iconIsLoading: false,
  6391. 					text: "其它按钮",
  6392. 					type: "default",
  6393. 					callback(event) {
  6394. 						event.close();
  6395. 					},
  6396. 				},
  6397. 				close: {
  6398. 					enable: true,
  6399. 					callback(event) {
  6400. 						event.close();
  6401. 					},
  6402. 				},
  6403. 			},
  6404. 			class: "",
  6405. 			only: false,
  6406. 			width: "350px",
  6407. 			height: "200px",
  6408. 			position: "center",
  6409. 			animation: "pops-anim-fadein-zoom",
  6410. 			zIndex: 10000,
  6411. 			mask: {
  6412. 				enable: false,
  6413. 				clickEvent: {
  6414. 					toClose: false,
  6415. 					toHide: false,
  6416. 				},
  6417. 				// @ts-ignore
  6418. 				clickCallBack: null,
  6419. 			},
  6420. 			drag: false,
  6421. 			dragLimit: true,
  6422. 			dragExtraDistance: 3,
  6423. 			dragMoveCallBack() {},
  6424. 			dragEndCallBack() {},
  6425. 			forbiddenScroll: false,
  6426. 			// @ts-ignore
  6427. 			style: void 0,
  6428. 			beforeAppendToPageCallBack() {},
  6429. 		};
  6430. 		config = PopsUtils.assignJSON(config, details);
  6431. 		let guid = PopsUtils.getRandomGUID();
  6432. 		const PopsType = "confirm";
  6433. 		// @ts-ignore
  6434. 		config = PopsHandler.handleOnly(PopsType, config);
  6435. 		// @ts-ignore
  6436. 		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  6437. 		// @ts-ignore
  6438. 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  6439. 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  6440. 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  6441. 			PopsType,
  6442. 			config
  6443. 		);
  6444. 		let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
  6445. 			PopsType,
  6446. 			config
  6447. 		);
  6448. 		let animHTML = PopsElementHandler.getAnimHTML(
  6449. 			guid,
  6450. 			PopsType,
  6451. 			config,
  6452. 			`
  6453.     <div class="pops-confirm-title" style="text-align: ${
  6454. 			config.title.position
  6455. 		};${headerStyle}">
  6456. 					${
  6457. 						config.title.html
  6458. 							? config.title.text
  6459. 							: `<p pops style="${headerPStyle}">${config.title.text}</p>`
  6460. 					}
  6461.           ${headerBtnHTML}
  6462. 				</div>
  6463. 				<div class="pops-confirm-content" style="${contentStyle}">
  6464.         ${
  6465. 					config.content.html
  6466. 						? config.content.text
  6467. 						: `<p pops style="${contentPStyle}">${config.content.text}</p>`
  6468. 				}
  6469.           
  6470. 				</div>
  6471. 				${bottomBtnHTML}
  6472.     `,
  6473. 			bottomBtnHTML
  6474. 		);
  6475. 		/**
  6476. 		 * 弹窗的主元素，包括动画层
  6477. 		 */
  6478. 		let animElement = PopsElementHandler.parseElement(animHTML);
  6479. 		let {
  6480. 			popsElement,
  6481. 			titleElement,
  6482. 			headerCloseBtnElement: btnCloseElement,
  6483. 			btnOkElement,
  6484. 			btnCancelElement,
  6485. 			btnOtherElement,
  6486. 			// @ts-ignore
  6487. 		} = PopsHandler.handleQueryElement(animElement, PopsType);
  6488. 		/**
  6489. 		 * 遮罩层元素
  6490. 		 * @type {?HTMLDivElement}
  6491. 		 */
  6492. 		let maskElement = null;
  6493. 		/**
  6494. 		 * 已创建的元素列表
  6495. 		 * @type {HTMLElement[]}
  6496. 		 */
  6497. 		let elementList = [animElement];
  6498. 		// @ts-ignore
  6499. 		if (config.mask.enable) {
  6500. 			let _handleMask_ = PopsHandler.handleMask({
  6501. 				type: PopsType,
  6502. 				guid: guid,
  6503. 				config: config,
  6504. 				animElement: animElement,
  6505. 				maskHTML: maskHTML,
  6506. 			});
  6507. 			maskElement = _handleMask_.maskElement;
  6508. 			elementList.push(maskElement);
  6509. 		}
  6510. 		let eventDetails = PopsHandler.handleEventDetails(
  6511. 			guid,
  6512. 			$shadowContainer,
  6513. 			$shadowRoot,
  6514. 			PopsType,
  6515. 			// @ts-ignore
  6516. 			animElement,
  6517. 			popsElement,
  6518. 			maskElement,
  6519. 			config
  6520. 		);
  6521. 		PopsHandler.handleClickEvent(
  6522. 			// @ts-ignore
  6523. 			btnCloseElement,
  6524. 			"close",
  6525. 			eventDetails,
  6526. 			// @ts-ignore
  6527. 			config.btn.close.callback
  6528. 		);
  6529. 		PopsHandler.handleClickEvent(
  6530. 			// @ts-ignore
  6531. 			btnOkElement,
  6532. 			"ok",
  6533. 			eventDetails,
  6534. 			// @ts-ignore
  6535. 			config.btn.ok.callback
  6536. 		);
  6537. 		PopsHandler.handleClickEvent(
  6538. 			// @ts-ignore
  6539. 			btnCancelElement,
  6540. 			"cancel",
  6541. 			eventDetails,
  6542. 			// @ts-ignore
  6543. 			config.btn.cancel.callback
  6544. 		);
  6545. 		PopsHandler.handleClickEvent(
  6546. 			// @ts-ignore
  6547. 			btnOtherElement,
  6548. 			"other",
  6549. 			eventDetails,
  6550. 			// @ts-ignore
  6551. 			config.btn.other.callback
  6552. 		);
  6553.  
  6554. 		/* 创建到页面中 */
  6555. 		// @ts-ignore
  6556. 		PopsUtils.appendChild($shadowRoot, elementList);
  6557. 		if (typeof config.beforeAppendToPageCallBack === "function") {
  6558. 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  6559. 		}
  6560. 		// @ts-ignore
  6561. 		PopsUtils.appendChild($shadowContainer);
  6562. 		if (maskElement != null) {
  6563. 			animElement.after(maskElement);
  6564. 		}
  6565. 		PopsHandler.handlePush(PopsType, {
  6566. 			guid: guid,
  6567. 			// @ts-ignore
  6568. 			animElement: animElement,
  6569. 			// @ts-ignore
  6570. 			popsElement: popsElement,
  6571. 			// @ts-ignore
  6572. 			maskElement: maskElement,
  6573. 			$shadowContainer: $shadowContainer,
  6574. 			$shadowRoot: $shadowRoot,
  6575. 		});
  6576. 		/* 拖拽 */
  6577. 		if (config.drag) {
  6578. 			0;
  6579. 			// @ts-ignore
  6580. 			PopsUtils.drag(popsElement, {
  6581. 				dragElement: titleElement,
  6582. 				limit: config.dragLimit,
  6583. 				extraDistance: config.dragExtraDistance,
  6584. 				moveCallBack: config.dragMoveCallBack,
  6585. 				endCallBack: config.dragEndCallBack,
  6586. 			});
  6587. 		}
  6588. 		return PopsHandler.handleResultDetails(eventDetails);
  6589. 	};
  6590.  
  6591. 	/**
  6592. 	 * 输入框
  6593. 	 * @param {PopsPromptDetails} details
  6594. 	 */
  6595. 	pops.prompt = function (details) {
  6596. 		// @ts-ignore
  6597. 		// @ts-ignore
  6598. 		let that = this;
  6599. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  6600. 		PopsHandler.handleInit($shadowRoot, [
  6601. 			pops.config.cssText.index,
  6602. 			pops.config.cssText.ninePalaceGridPosition,
  6603. 			pops.config.cssText.scrollbar,
  6604. 			pops.config.cssText.button,
  6605. 			pops.config.cssText.anim,
  6606. 			pops.config.cssText.common,
  6607. 			pops.config.cssText.promptCSS,
  6608. 		]);
  6609. 		/**
  6610. 		 * @type {Required<PopsPromptDetails>}
  6611. 		 */
  6612. 		let config = {
  6613. 			title: {
  6614. 				text: "默认标题",
  6615. 				position: "left",
  6616. 				html: false,
  6617. 				style: "",
  6618. 			},
  6619. 			content: {
  6620. 				text: "",
  6621. 				password: false,
  6622. 				row: false,
  6623. 				focus: true,
  6624. 				placeholder: "默认提示",
  6625. 				style: "",
  6626. 			},
  6627. 			btn: {
  6628. 				merge: false,
  6629. 				mergeReverse: false,
  6630. 				reverse: false,
  6631. 				position: "flex-end",
  6632. 				ok: {
  6633. 					enable: true,
  6634. 					// @ts-ignore
  6635. 					size: "",
  6636. 					// @ts-ignore
  6637. 					icon: "",
  6638. 					rightIcon: false,
  6639. 					iconIsLoading: false,
  6640. 					text: "确定",
  6641. 					type: "success",
  6642. 					callback(event) {
  6643. 						console.log(event);
  6644. 						event.close();
  6645. 					},
  6646. 				},
  6647. 				cancel: {
  6648. 					enable: true,
  6649. 					// @ts-ignore
  6650. 					size: "",
  6651. 					// @ts-ignore
  6652. 					icon: "",
  6653. 					rightIcon: false,
  6654. 					iconIsLoading: false,
  6655. 					text: "关闭",
  6656. 					type: "default",
  6657. 					callback(event) {
  6658. 						console.log(event);
  6659. 						event.close();
  6660. 					},
  6661. 				},
  6662. 				other: {
  6663. 					enable: false,
  6664. 					// @ts-ignore
  6665. 					size: "",
  6666. 					// @ts-ignore
  6667. 					icon: "",
  6668. 					rightIcon: false,
  6669. 					iconIsLoading: false,
  6670. 					text: "其它按钮",
  6671. 					type: "default",
  6672. 					callback(event) {
  6673. 						console.log(event);
  6674. 						event.close();
  6675. 					},
  6676. 				},
  6677. 				close: {
  6678. 					enable: true,
  6679. 					callback(event) {
  6680. 						console.log(event);
  6681. 						event.close();
  6682. 					},
  6683. 				},
  6684. 			},
  6685. 			class: "",
  6686. 			only: false,
  6687. 			width: "350px",
  6688. 			height: "200px",
  6689. 			position: "center",
  6690. 			animation: "pops-anim-fadein-zoom",
  6691. 			zIndex: 10000,
  6692. 			mask: {
  6693. 				enable: false,
  6694. 				clickEvent: {
  6695. 					toClose: false,
  6696. 					toHide: false,
  6697. 				},
  6698. 				// @ts-ignore
  6699. 				clickCallBack: null,
  6700. 			},
  6701. 			drag: false,
  6702. 			dragLimit: true,
  6703. 			dragExtraDistance: 3,
  6704. 			dragMoveCallBack() {},
  6705. 			dragEndCallBack() {},
  6706. 			forbiddenScroll: false,
  6707. 			// @ts-ignore
  6708. 			style: void 0,
  6709. 			beforeAppendToPageCallBack() {},
  6710. 		};
  6711. 		config = PopsUtils.assignJSON(config, details);
  6712. 		let guid = PopsUtils.getRandomGUID();
  6713. 		const PopsType = "prompt";
  6714. 		// @ts-ignore
  6715. 		config = PopsHandler.handleOnly(PopsType, config);
  6716. 		// @ts-ignore
  6717. 		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  6718. 		// @ts-ignore
  6719. 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  6720. 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  6721. 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  6722. 			PopsType,
  6723. 			config
  6724. 		);
  6725. 		let { contentPStyle } = PopsElementHandler.getContentStyle(
  6726. 			PopsType,
  6727. 			config
  6728. 		);
  6729. 		let animHTML = PopsElementHandler.getAnimHTML(
  6730. 			guid,
  6731. 			PopsType,
  6732. 			config,
  6733. 			`
  6734.     <div class="pops-prompt-title" style="text-align: ${
  6735. 			config.title.position
  6736. 		};${headerStyle}">
  6737.       ${
  6738. 				config.title.html
  6739. 					? config.title.text
  6740. 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
  6741. 			}
  6742.       ${headerBtnHTML}
  6743.     </div>
  6744.     <div class="pops-prompt-content" style="${contentPStyle}">
  6745.     ${
  6746. 			config.content.row
  6747. 				? '<textarea pops="" placeholder="' +
  6748. 				  config.content.placeholder +
  6749. 				  '"></textarea>'
  6750. 				: '<input pops="" placeholder="' +
  6751. 				  config.content.placeholder +
  6752. 				  '" type="' +
  6753. 				  (config.content.password ? "password" : "text") +
  6754. 				  '">'
  6755. 		}
  6756.     </div>
  6757.    ${bottomBtnHTML}
  6758.     `,
  6759. 			bottomBtnHTML
  6760. 		);
  6761. 		/**
  6762. 		 * 弹窗的主元素，包括动画层
  6763. 		 * @type {HTMLDivElement}
  6764. 		 */
  6765. 		// @ts-ignore
  6766. 		let animElement = PopsElementHandler.parseElement(animHTML);
  6767.  
  6768. 		let {
  6769. 			popsElement,
  6770. 			inputElement,
  6771. 			headerCloseBtnElement: btnCloseElement,
  6772. 			btnOkElement,
  6773. 			btnCancelElement,
  6774. 			btnOtherElement,
  6775. 			titleElement,
  6776. 		} = PopsHandler.handleQueryElement(animElement, PopsType);
  6777. 		/**
  6778. 		 * 遮罩层元素
  6779. 		 * @type {?HTMLDivElement}
  6780. 		 */
  6781. 		let maskElement = null;
  6782.  
  6783. 		/**
  6784. 		 * 已创建的元素列表
  6785. 		 * @type {HTMLElement[]}
  6786. 		 */
  6787. 		let elementList = [animElement];
  6788. 		// @ts-ignore
  6789. 		if (config.mask.enable) {
  6790. 			let _handleMask_ = PopsHandler.handleMask({
  6791. 				type: PopsType,
  6792. 				guid: guid,
  6793. 				config: config,
  6794. 				animElement: animElement,
  6795. 				maskHTML: maskHTML,
  6796. 			});
  6797. 			maskElement = _handleMask_.maskElement;
  6798. 			elementList.push(maskElement);
  6799. 		}
  6800. 		let eventDetails = PopsHandler.handleEventDetails(
  6801. 			guid,
  6802. 			$shadowContainer,
  6803. 			$shadowRoot,
  6804. 			PopsType,
  6805. 			animElement,
  6806. 			// @ts-ignore
  6807. 			popsElement,
  6808. 			maskElement,
  6809. 			config
  6810. 		);
  6811. 		/* 输入框赋值初始值 */
  6812. 		// @ts-ignore
  6813. 		inputElement.value = config.content.text;
  6814. 		PopsHandler.handlePromptClickEvent(
  6815. 			// @ts-ignore
  6816. 			inputElement,
  6817. 			btnCloseElement,
  6818. 			"close",
  6819. 			eventDetails,
  6820. 			// @ts-ignore
  6821. 			config.btn.close.callback
  6822. 		);
  6823.  
  6824. 		PopsHandler.handlePromptClickEvent(
  6825. 			// @ts-ignore
  6826. 			inputElement,
  6827. 			btnOkElement,
  6828. 			"ok",
  6829. 			eventDetails,
  6830. 			// @ts-ignore
  6831. 			config.btn.ok.callback
  6832. 		);
  6833. 		PopsHandler.handlePromptClickEvent(
  6834. 			// @ts-ignore
  6835. 			inputElement,
  6836. 			btnCancelElement,
  6837. 			"cancel",
  6838. 			eventDetails,
  6839. 			// @ts-ignore
  6840. 			config.btn.cancel.callback
  6841. 		);
  6842.  
  6843. 		PopsHandler.handlePromptClickEvent(
  6844. 			// @ts-ignore
  6845. 			inputElement,
  6846. 			btnOtherElement,
  6847. 			"other",
  6848. 			eventDetails,
  6849. 			// @ts-ignore
  6850. 			config.btn.other.callback
  6851. 		);
  6852. 		/* 创建到页面中 */
  6853. 		// @ts-ignore
  6854. 		PopsUtils.appendChild($shadowRoot, elementList);
  6855. 		if (typeof config.beforeAppendToPageCallBack === "function") {
  6856. 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  6857. 		}
  6858. 		// @ts-ignore
  6859. 		PopsUtils.appendChild($shadowContainer);
  6860. 		if (maskElement != null) {
  6861. 			animElement.after(maskElement);
  6862. 		}
  6863. 		PopsHandler.handlePush(PopsType, {
  6864. 			guid: guid,
  6865. 			animElement: animElement,
  6866. 			// @ts-ignore
  6867. 			popsElement: popsElement,
  6868. 			// @ts-ignore
  6869. 			maskElement: maskElement,
  6870. 			$shadowContainer: $shadowContainer,
  6871. 			$shadowRoot: $shadowRoot,
  6872. 		});
  6873. 		/* 拖拽 */
  6874. 		if (config.drag) {
  6875. 			// @ts-ignore
  6876. 			PopsUtils.drag(popsElement, {
  6877. 				dragElement: titleElement,
  6878. 				limit: config.dragLimit,
  6879. 				extraDistance: config.dragExtraDistance,
  6880. 				moveCallBack: config.dragMoveCallBack,
  6881. 				endCallBack: config.dragEndCallBack,
  6882. 			});
  6883. 		}
  6884. 		/* 设置自动获取焦点 */
  6885. 		if (config.content.focus) {
  6886. 			inputElement?.focus();
  6887. 		}
  6888.  
  6889. 		return PopsHandler.handleResultDetails(eventDetails);
  6890. 	};
  6891.  
  6892. 	/**
  6893. 	 * 加载层
  6894. 	 * @param {PopsLoadingDetails} details
  6895. 	 */
  6896. 	pops.loading = function (details) {
  6897. 		// @ts-ignore
  6898. 		// @ts-ignore
  6899. 		let that = this;
  6900. 		// @ts-ignore
  6901. 		PopsHandler.handleInit();
  6902. 		/**
  6903. 		 * @type {Required<PopsLoadingDetails>}
  6904. 		 */
  6905. 		let config = {
  6906. 			parent: document.body,
  6907. 			content: {
  6908. 				text: "加载中...",
  6909. 				icon: "loading",
  6910. 				style: "",
  6911. 			},
  6912. 			class: "",
  6913. 			only: false,
  6914. 			zIndex: 10000,
  6915. 			mask: {
  6916. 				enable: false,
  6917. 				clickEvent: {
  6918. 					toClose: false,
  6919. 					toHide: false,
  6920. 				},
  6921. 				// @ts-ignore
  6922. 				clickCallBack: null,
  6923. 			},
  6924. 			animation: "pops-anim-fadein-zoom",
  6925. 			forbiddenScroll: false,
  6926. 			// @ts-ignore
  6927. 			style: void 0,
  6928. 			addIndexCSS: true,
  6929. 		};
  6930. 		config = PopsUtils.assignJSON(config, details);
  6931. 		let guid = PopsUtils.getRandomGUID();
  6932. 		const PopsType = "loading";
  6933. 		// @ts-ignore
  6934. 		config = PopsHandler.handleOnly(PopsType, config);
  6935. 		// @ts-ignore
  6936. 		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  6937. 		// @ts-ignore
  6938. 		let { contentPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
  6939. 		let animHTML = PopsElementHandler.getAnimHTML(
  6940. 			guid,
  6941. 			PopsType,
  6942. 			config,
  6943. 			`
  6944.     <div class="pops-loading-content">
  6945.     ${
  6946. 			config.addIndexCSS
  6947. 				? `
  6948.         <style type="text/css" data-model-name="index">${pops.config.cssText.index}</style>
  6949.         <style type="text/css" data-model-name="anim">${pops.config.cssText.anim}</style>
  6950.         <style type="text/css" data-model-name="common">${pops.config.cssText.common}</style>
  6951.         `
  6952. 				: ""
  6953. 		}
  6954.       <style type="text/css" data-model-name="loadingCSS">${
  6955. 				pops.config.cssText.loadingCSS
  6956. 			}</style>
  6957.       ${
  6958. 				config.style != null
  6959. 					? `<style type="text/css">${config.style}</style>`
  6960. 					: ""
  6961. 			}
  6962.       <p pops style="${contentPStyle}">${config.content.text}</p>
  6963.     </div>
  6964.     `,
  6965. 			""
  6966. 		);
  6967.  
  6968. 		/**
  6969. 		 * 弹窗的主元素，包括动画层
  6970. 		 * @type {HTMLDivElement}
  6971. 		 */
  6972. 		// @ts-ignore
  6973. 		let animElement = PopsElementHandler.parseElement(animHTML);
  6974.  
  6975. 		let { popsElement } = PopsHandler.handleQueryElement(animElement, PopsType);
  6976. 		/**
  6977. 		 * 遮罩层元素
  6978. 		 * @type {?HTMLDivElement}
  6979. 		 */
  6980. 		let maskElement = null;
  6981. 		/**
  6982. 		 * 已创建的元素列表
  6983. 		 * @type {HTMLElement[]}
  6984. 		 */
  6985. 		let elementList = [animElement];
  6986. 		// @ts-ignore
  6987. 		if (config.mask.enable) {
  6988. 			let _handleMask_ = PopsHandler.handleMask({
  6989. 				type: PopsType,
  6990. 				guid: guid,
  6991. 				// @ts-ignore
  6992. 				config: config,
  6993. 				animElement: animElement,
  6994. 				maskHTML: maskHTML,
  6995. 			});
  6996. 			maskElement = _handleMask_.maskElement;
  6997. 			elementList.push(maskElement);
  6998. 		}
  6999. 		let eventDetails = PopsHandler.handleEventDetails(
  7000. 			guid,
  7001. 			// @ts-ignore
  7002. 			void 0,
  7003. 			void 0,
  7004. 			PopsType,
  7005. 			animElement,
  7006. 			popsElement,
  7007. 			maskElement,
  7008. 			config
  7009. 		);
  7010. 		PopsUtils.appendChild(config.parent, elementList);
  7011. 		if (maskElement != null) {
  7012. 			animElement.after(maskElement);
  7013. 		}
  7014. 		PopsHandler.handlePush(PopsType, {
  7015. 			guid: guid,
  7016. 			animElement: animElement,
  7017. 			// @ts-ignore
  7018. 			popsElement: popsElement,
  7019. 			// @ts-ignore
  7020. 			maskElement: maskElement,
  7021. 		});
  7022.  
  7023. 		return PopsHandler.handleResultDetails(eventDetails);
  7024. 	};
  7025.  
  7026. 	/**
  7027. 	 * iframe层
  7028. 	 * @param {PopsIframeDetails} details
  7029. 	 */
  7030. 	pops.iframe = function (details) {
  7031. 		let that = this;
  7032. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  7033. 		PopsHandler.handleInit($shadowRoot, [
  7034. 			pops.config.cssText.index,
  7035. 			pops.config.cssText.ninePalaceGridPosition,
  7036. 			pops.config.cssText.scrollbar,
  7037. 			pops.config.cssText.anim,
  7038. 			pops.config.cssText.common,
  7039. 			pops.config.cssText.iframeCSS,
  7040. 		]);
  7041. 		/**
  7042. 		 * @type {Required<PopsIframeDetails>}
  7043. 		 */
  7044. 		let config = {
  7045. 			title: {
  7046. 				position: "center",
  7047. 				text: "",
  7048. 				html: false,
  7049. 				style: "",
  7050. 			},
  7051. 			loading: {
  7052. 				enable: true,
  7053. 				icon: true,
  7054. 				text: "",
  7055. 				// @ts-ignore
  7056. 				style: "",
  7057. 			},
  7058. 			class: "",
  7059. 			url: window.location.href,
  7060. 			only: false,
  7061. 			zIndex: 10000,
  7062. 			mask: {
  7063. 				enable: false,
  7064. 				clickEvent: {
  7065. 					toClose: false,
  7066. 					toHide: false,
  7067. 				},
  7068. 				// @ts-ignore
  7069. 				clickCallBack: null,
  7070. 			},
  7071. 			animation: "pops-anim-fadein-zoom",
  7072. 			position: "center",
  7073. 			drag: false,
  7074. 			dragLimit: true,
  7075. 			dragExtraDistance: 3,
  7076. 			dragMoveCallBack() {},
  7077. 			dragEndCallBack() {},
  7078. 			width: "300px",
  7079. 			height: "250px",
  7080. 			topRightButton: "min|max|mise|close",
  7081. 			sandbox: false,
  7082. 			forbiddenScroll: false,
  7083. 			loadEndCallBack() {},
  7084. 			btn: {
  7085. 				min: {
  7086. 					callback() {},
  7087. 				},
  7088. 				max: {
  7089. 					callback() {},
  7090. 				},
  7091. 				mise: {
  7092. 					callback() {},
  7093. 				},
  7094. 				close: {
  7095. 					callback() {},
  7096. 				},
  7097. 			},
  7098. 			// @ts-ignore
  7099. 			style: void 0,
  7100. 			beforeAppendToPageCallBack() {},
  7101. 		};
  7102. 		config = PopsUtils.assignJSON(config, details);
  7103. 		if (config.url == null) {
  7104. 			throw "config.url不能为空";
  7105. 		}
  7106. 		let guid = PopsUtils.getRandomGUID();
  7107. 		const PopsType = "iframe";
  7108. 		// @ts-ignore
  7109. 		config = PopsHandler.handleOnly(PopsType, config);
  7110. 		let maskExtraStyle =
  7111. 			// @ts-ignore
  7112. 			config.animation != null && config.animation != ""
  7113. 				? "position:absolute;"
  7114. 				: "";
  7115. 		let maskHTML = PopsElementHandler.getMaskHTML(
  7116. 			guid,
  7117. 			// @ts-ignore
  7118. 			config.zIndex,
  7119. 			maskExtraStyle
  7120. 		);
  7121. 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  7122. 		let iframeLoadingHTML = '<div class="pops-loading"></div>';
  7123. 		let titleText =
  7124. 			// @ts-ignore
  7125. 			config.title.text.trim() !== "" ? config.title.text : config.url;
  7126. 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  7127. 			// @ts-ignore
  7128. 			PopsType,
  7129. 			config
  7130. 		);
  7131. 		let animHTML = PopsElementHandler.getAnimHTML(
  7132. 			guid,
  7133. 			PopsType,
  7134. 			config,
  7135. 			`
  7136.       <div 
  7137.           class="pops-iframe-title"
  7138.           style="text-align: ${config.title.position};${headerStyle}"
  7139.       >
  7140.         ${
  7141. 					config.title.html
  7142. 						? titleText
  7143. 						: `<p pops style="${headerPStyle}">${titleText}</p>`
  7144. 				}
  7145.         ${headerBtnHTML}
  7146.       </div>
  7147. 				<div class="pops-iframe-content">
  7148.           <div class="pops-iframe-content-global-loading"></div>
  7149.           <iframe
  7150.                 src="${config.url}"
  7151.                 pops
  7152.                 ${
  7153. 									config.sandbox
  7154. 										? "sandbox='allow-forms allow-same-origin allow-scripts'"
  7155. 										: ""
  7156. 								}>
  7157.           </iframe>
  7158.         </div>
  7159.         ${config.loading.enable ? iframeLoadingHTML : ""}
  7160.     `,
  7161. 			""
  7162. 		);
  7163. 		/**
  7164. 		 * 弹窗的主元素，包括动画层
  7165. 		 * @type {HTMLDivElement}
  7166. 		 */
  7167. 		// @ts-ignore
  7168. 		let animElement = PopsElementHandler.parseElement(animHTML);
  7169. 		let {
  7170. 			popsElement,
  7171. 			headerCloseBtnElement,
  7172. 			headerControlsElement,
  7173. 			titleElement,
  7174. 			iframeElement,
  7175. 			loadingElement,
  7176. 			contentLoadingElement,
  7177. 			headerMinBtnElement,
  7178. 			headerMaxBtnElement,
  7179. 			headerMiseBtnElement,
  7180. 		} = PopsHandler.handleQueryElement(animElement, PopsType);
  7181. 		/**
  7182. 		 * 遮罩层元素
  7183. 		 * @type {?HTMLDivElement}
  7184. 		 */
  7185. 		let maskElement = null;
  7186. 		/**
  7187. 		 * 已创建的元素列表
  7188. 		 * @type {HTMLElement[]}
  7189. 		 */
  7190. 		let elementList = [animElement];
  7191. 		// @ts-ignore
  7192. 		if (config.mask.enable) {
  7193. 			let _handleMask_ = PopsHandler.handleMask({
  7194. 				type: PopsType,
  7195. 				guid: guid,
  7196. 				// @ts-ignore
  7197. 				config: config,
  7198. 				animElement: animElement,
  7199. 				maskHTML: maskHTML,
  7200. 			});
  7201. 			maskElement = _handleMask_.maskElement;
  7202. 			elementList.push(maskElement);
  7203. 		}
  7204.  
  7205. 		let eventDetails = PopsHandler.handleEventDetails(
  7206. 			guid,
  7207. 			$shadowContainer,
  7208. 			$shadowRoot,
  7209. 			PopsType,
  7210. 			animElement,
  7211. 			// @ts-ignore
  7212. 			popsElement,
  7213. 			maskElement,
  7214. 			config
  7215. 		);
  7216. 		// @ts-ignore
  7217. 		eventDetails["iframeElement"] = iframeElement;
  7218. 		// @ts-ignore
  7219. 		PopsDOMUtils.on(
  7220. 			animElement,
  7221. 			PopsDOMUtils.getAnimationEndNameList(),
  7222. 			void 0,
  7223. 			function () {
  7224. 				/* 动画加载完毕 */
  7225. 				animElement.style.width = "0%";
  7226. 				animElement.style.height = "0%";
  7227. 			}
  7228. 		);
  7229.  
  7230. 		// @ts-ignore
  7231. 		PopsDOMUtils.on(iframeElement, "load", void 0, function () {
  7232. 			/* iframe加载中... */
  7233. 			loadingElement?.remove();
  7234. 			// @ts-ignore
  7235. 			contentLoadingElement.style.animation =
  7236. 				"iframeLoadingChange_85 0.3s forwards";
  7237. 			// @ts-ignore
  7238. 			PopsDOMUtils.on(
  7239. 				contentLoadingElement,
  7240. 				PopsDOMUtils.getAnimationEndNameList(),
  7241. 				void 0,
  7242. 				function () {
  7243. 					/* 动画加载完毕就移除 */
  7244. 					// @ts-ignore
  7245. 					contentLoadingElement.remove();
  7246. 				}
  7247. 			);
  7248. 			// @ts-ignore
  7249. 			if (config.title.text.trim() === "" && iframeElement.contentDocument) {
  7250. 				/* 同域名下的才可以获取网页标题 */
  7251. 				// @ts-ignore
  7252. 				titleElement.querySelector("p").innerText =
  7253. 					// @ts-ignore
  7254. 					iframeElement.contentDocument.title;
  7255. 			}
  7256. 			// @ts-ignore
  7257. 			config.loadEndCallBack(eventDetails);
  7258. 		});
  7259. 		/* 创建到页面中 */
  7260. 		// @ts-ignore
  7261. 		PopsUtils.appendChild($shadowRoot, elementList);
  7262. 		if (typeof config.beforeAppendToPageCallBack === "function") {
  7263. 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  7264. 		}
  7265. 		// @ts-ignore
  7266. 		PopsUtils.appendChild($shadowContainer);
  7267. 		if (maskElement != null) {
  7268. 			animElement.after(maskElement);
  7269. 		}
  7270. 		/* 拖拽 */
  7271. 		if (config.drag) {
  7272. 			// @ts-ignore
  7273. 			PopsUtils.drag(popsElement, {
  7274. 				dragElement: titleElement,
  7275. 				limit: config.dragLimit,
  7276. 				extraDistance: config.dragExtraDistance,
  7277. 				moveCallBack: config.dragMoveCallBack,
  7278. 				endCallBack: config.dragEndCallBack,
  7279. 			});
  7280. 		}
  7281. 		let normalLeft = "";
  7282. 		/* 最小化按钮点击事件 */
  7283.  
  7284. 		PopsDOMUtils.on(
  7285. 			// @ts-ignore
  7286. 			headerMinBtnElement,
  7287. 			"click",
  7288. 			void 0,
  7289. 			(event) => {
  7290. 				/**
  7291. 				 * 所有最小化的iframe数组
  7292. 				 * @type { HTMLElement[] }
  7293. 				 */
  7294. 				let allMinElementList = [];
  7295.  
  7296. 				pops.config.layer.iframe.forEach((item) => {
  7297. 					if (
  7298. 						item.animElement != animElement &&
  7299. 						item.popsElement.getAttribute("type-module") === "min"
  7300. 					) {
  7301. 						allMinElementList.push(item.popsElement);
  7302. 					}
  7303. 				});
  7304. 				let maxLeftValue = allMinElementList.length
  7305. 					? allMinElementList.length * 205
  7306. 					: 0;
  7307. 				// @ts-ignore
  7308. 				popsElement.style.transitionDuration = "";
  7309. 				// @ts-ignore
  7310. 				normalLeft = popsElement.style.left;
  7311. 				// @ts-ignore
  7312. 				popsElement.style.left = maxLeftValue + "px";
  7313. 				// @ts-ignore
  7314. 				popsElement.setAttribute("type-module", "min");
  7315. 				// @ts-ignore
  7316. 				animElement
  7317. 					.querySelector(".pops-header-controls")
  7318. 					.setAttribute("type", "max");
  7319. 				// @ts-ignore
  7320. 				config.btn.min.callback(event);
  7321. 			},
  7322. 			{
  7323. 				capture: true,
  7324. 			}
  7325. 		);
  7326. 		/* 最大化按钮点击事件 */
  7327. 		PopsDOMUtils.on(
  7328. 			// @ts-ignore
  7329. 			headerMaxBtnElement,
  7330. 			"click",
  7331. 			void 0,
  7332. 			(event) => {
  7333. 				// @ts-ignore
  7334. 				popsElement.style.transitionDuration = "";
  7335. 				// @ts-ignore
  7336. 				normalLeft = popsElement.style.left;
  7337. 				// @ts-ignore
  7338. 				popsElement.removeAttribute("type-module");
  7339. 				// @ts-ignore
  7340. 				popsElement.setAttribute("type-module", "max");
  7341. 				// @ts-ignore
  7342. 				headerControlsElement.setAttribute("type", "max");
  7343. 				// @ts-ignore
  7344. 				headerMaxBtnElement.style.setProperty("display", "none");
  7345. 				// @ts-ignore
  7346. 				headerMiseBtnElement.style.setProperty("display", "");
  7347. 				// @ts-ignore
  7348. 				config.btn.max.callback(event);
  7349. 			},
  7350. 			{
  7351. 				capture: true,
  7352. 			}
  7353. 		);
  7354. 		/* 先隐藏窗口化按钮 */
  7355. 		headerMiseBtnElement?.style?.setProperty("display", "none");
  7356. 		/* 窗口化按钮点击事件 */
  7357. 		PopsDOMUtils.on(
  7358. 			// @ts-ignore
  7359. 			headerMiseBtnElement,
  7360. 			"click",
  7361. 			void 0,
  7362. 			(event) => {
  7363. 				// @ts-ignore
  7364. 				popsElement.style.transitionDuration = "";
  7365. 				// @ts-ignore
  7366. 				popsElement.style.left = normalLeft;
  7367. 				// @ts-ignore
  7368. 				headerControlsElement.removeAttribute("type");
  7369. 				// @ts-ignore
  7370. 				popsElement.removeAttribute("type-module");
  7371. 				/**
  7372. 				 * 所有最小化的iframe数组
  7373. 				 * @type { HTMLElement[] }
  7374. 				 */
  7375. 				let allMinElementList = [];
  7376. 				pops.config.layer.iframe.forEach((item) => {
  7377. 					if (
  7378. 						item.animElement != animElement &&
  7379. 						// @ts-ignore
  7380. 						popsElement.getAttribute("type-module") === "min"
  7381. 					) {
  7382. 						allMinElementList.push(item.popsElement);
  7383. 					}
  7384. 				});
  7385. 				allMinElementList.sort(
  7386. 					PopsUtils.sortElementListByProperty(
  7387. 						(obj) => {
  7388. 							return parseInt(getComputedStyle(obj).left);
  7389. 						},
  7390. 						(obj) => {
  7391. 							return parseInt(getComputedStyle(obj).left);
  7392. 						},
  7393. 						false
  7394. 					)
  7395. 				);
  7396. 				allMinElementList.forEach((item, index) => {
  7397. 					item.style.left = index * 205 + "px";
  7398. 				});
  7399. 				// @ts-ignore
  7400. 				headerMiseBtnElement.style.setProperty("display", "none");
  7401. 				// @ts-ignore
  7402. 				headerMaxBtnElement.style.setProperty("display", "");
  7403. 				// @ts-ignore
  7404. 				config.btn.mise.callback(event);
  7405. 			},
  7406. 			{
  7407. 				capture: true,
  7408. 			}
  7409. 		);
  7410. 		/* 关闭按钮点击事件 */
  7411. 		PopsDOMUtils.on(
  7412. 			// @ts-ignore
  7413. 			headerCloseBtnElement,
  7414. 			"click",
  7415. 			void 0,
  7416. 			(event) => {
  7417. 				PopsUtils.configRemove([that.config.layer.iframe], guid, false);
  7418. 				setTimeout(() => {
  7419. 					// @ts-ignore
  7420. 					let allIsMinElementList = [];
  7421. 					pops.config.layer.iframe.forEach((item) => {
  7422. 						if (
  7423. 							item.animElement != animElement &&
  7424. 							// @ts-ignore
  7425. 							popsElement.getAttribute("type-module") === "min"
  7426. 						) {
  7427. 							allIsMinElementList.push(item.popsElement);
  7428. 						}
  7429. 					});
  7430. 					// @ts-ignore
  7431. 					allIsMinElementList.sort(
  7432. 						PopsUtils.sortElementListByProperty(
  7433. 							(obj) => {
  7434. 								return parseInt(getComputedStyle(obj).left);
  7435. 							},
  7436. 							(obj) => {
  7437. 								return parseInt(getComputedStyle(obj).left);
  7438. 							},
  7439. 							false
  7440. 						)
  7441. 					);
  7442. 					// @ts-ignore
  7443. 					allIsMinElementList.forEach((item, index) => {
  7444. 						item.style.left = index * 205 + "px";
  7445. 					});
  7446. 				}, 1000 * 0.3);
  7447. 				// @ts-ignore
  7448. 				config.btn.close.callback(event);
  7449. 			},
  7450. 			{
  7451. 				capture: true,
  7452. 			}
  7453. 		);
  7454.  
  7455. 		PopsHandler.handlePush(PopsType, {
  7456. 			guid: guid,
  7457. 			animElement: animElement,
  7458. 			// @ts-ignore
  7459. 			popsElement: popsElement,
  7460. 			// @ts-ignore
  7461. 			maskElement: maskElement,
  7462. 			$shadowContainer: $shadowContainer,
  7463. 			$shadowRoot: $shadowRoot,
  7464. 		});
  7465.  
  7466. 		let result = PopsHandler.handleResultDetails(eventDetails);
  7467. 		return result;
  7468. 	};
  7469.  
  7470. 	/**
  7471. 	 * 提示框
  7472. 	 * @param {PopsToolTipDetails} details
  7473. 	 */
  7474. 	pops.tooltip = function (details) {
  7475. 		// @ts-ignore
  7476. 		// @ts-ignore
  7477. 		let that = this;
  7478. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  7479. 		PopsHandler.handleInit($shadowRoot, [
  7480. 			pops.config.cssText.index,
  7481. 			pops.config.cssText.anim,
  7482. 			pops.config.cssText.common,
  7483. 			pops.config.cssText.tooltipCSS,
  7484. 		]);
  7485. 		/**
  7486. 		 * @type {Required<PopsToolTipDetails>}
  7487. 		 */
  7488. 		let config = {
  7489. 			// @ts-ignore
  7490. 			target: null,
  7491. 			content: "默认文字",
  7492. 			// @ts-ignore
  7493. 			position: "top",
  7494. 			className: "",
  7495. 			alwaysShow: false,
  7496. 			triggerShowEventName: "mouseenter touchstart",
  7497. 			triggerCloseEventName: "mouseleave touchend",
  7498. 			zIndex: 10000,
  7499. 			only: false,
  7500. 			eventOption: {
  7501. 				passive: false,
  7502. 				capture: true,
  7503. 				once: false,
  7504. 			},
  7505. 			showBeforeCallBack() {},
  7506. 			showAfterCallBack() {},
  7507. 			closeBeforeCallBack() {},
  7508. 			closeAfterCallBack() {},
  7509. 			arrowDistance: 12.5,
  7510. 			otherDistance: 0,
  7511. 			// @ts-ignore
  7512. 			style: void 0,
  7513. 			beforeAppendToPageCallBack() {},
  7514. 		};
  7515. 		config = PopsUtils.assignJSON(config, details);
  7516. 		if (!(config.target instanceof HTMLElement)) {
  7517. 			throw "config.target 必须是HTMLElement类型";
  7518. 		}
  7519. 		let guid = PopsUtils.getRandomGUID();
  7520. 		const PopsType = "tooltip";
  7521. 		// @ts-ignore
  7522. 		config = PopsHandler.handleOnly(PopsType, config);
  7523. 		function getContent() {
  7524. 			return typeof config.content === "function"
  7525. 				? // @ts-ignore
  7526. 				  config.content()
  7527. 				: config.content;
  7528. 		}
  7529. 		/**
  7530. 		 * 获取悬浮提示的元素信息
  7531. 		 */
  7532. 		function getToolTipElementInfo() {
  7533. 			let _toolTipHTML_ = `<div class="pops-tip"></div>`;
  7534. 			let _toolTipElement_ = PopsUtils.parseTextToDOM(_toolTipHTML_);
  7535. 			if (
  7536. 				typeof config.className === "string" &&
  7537. 				config.className.trim() !== ""
  7538. 			) {
  7539. 				PopsDOMUtils.addClassName(_toolTipElement_, config.className);
  7540. 			}
  7541. 			_toolTipElement_.setAttribute("data-guid", guid);
  7542. 			// @ts-ignore
  7543. 			_toolTipElement_.style.zIndex = config.zIndex;
  7544. 			_toolTipElement_.innerHTML = `
  7545.       <div style="text-align: center;">${getContent()}</div>
  7546.       `;
  7547. 			/* 箭头元素 */
  7548. 			let _toolTipArrowHTML_ = '<div class="pops-tip-arrow"></div>';
  7549. 			let _toolTipArrowNode_ = PopsUtils.parseTextToDOM(_toolTipArrowHTML_);
  7550. 			_toolTipElement_.appendChild(_toolTipArrowNode_);
  7551. 			if (config.style != null) {
  7552. 				/* 添加自定义style */
  7553. 				let cssNode = document.createElement("style");
  7554. 				cssNode.setAttribute("type", "text/css");
  7555. 				cssNode.innerHTML = config.style;
  7556. 				_toolTipElement_.appendChild(cssNode);
  7557. 			}
  7558. 			return {
  7559. 				toolTipElement: _toolTipElement_,
  7560. 				toolTipArrowElement: _toolTipArrowNode_,
  7561. 				toolTipHTML: _toolTipHTML_,
  7562. 				toolTipArrowHTML: _toolTipArrowHTML_,
  7563. 			};
  7564. 		}
  7565. 		// @ts-ignore
  7566. 		config.position = config.position.toLowerCase();
  7567. 		let { toolTipElement } = getToolTipElementInfo();
  7568.  
  7569. 		/**
  7570. 		 * 设置 提示框的位置
  7571. 		 * @param {object} positionDetails
  7572. 		 */
  7573. 		function setToolTipPosition(positionDetails) {
  7574. 			// @ts-ignore
  7575. 			let positionDetail = positionDetails[config.position.toUpperCase()];
  7576. 			if (positionDetail) {
  7577. 				toolTipElement.style.left = positionDetail.left + "px";
  7578. 				toolTipElement.style.top = positionDetail.top + "px";
  7579. 				toolTipElement.setAttribute("data-motion", positionDetail.motion);
  7580. 				// @ts-ignore
  7581. 				toolTipElement
  7582. 					.querySelector(".pops-tip-arrow")
  7583. 					.setAttribute("data-position", positionDetail.arrow);
  7584. 			} else {
  7585. 				console.error("不存在该位置", config.position);
  7586. 			}
  7587. 		}
  7588.  
  7589. 		/**
  7590. 		 * 获取 提示框的位置
  7591. 		 * @param {HTMLElement} targetElement 目标元素
  7592. 		 * @param {number} arrowDistance 箭头和目标元素的距离
  7593. 		 * @param {number} otherDistance 其它位置的偏移
  7594. 		 */
  7595. 		function getToolTipPosition(targetElement, arrowDistance, otherDistance) {
  7596. 			let targetElement_width = PopsDOMUtils.offset(targetElement).width;
  7597. 			let targetElement_height = PopsDOMUtils.offset(targetElement).height;
  7598. 			let targetElement_top = PopsDOMUtils.offset(targetElement).top;
  7599. 			// @ts-ignore
  7600. 			// @ts-ignore
  7601. 			let targetElement_bottom = PopsDOMUtils.offset(targetElement).bottom;
  7602. 			let targetElement_left = PopsDOMUtils.offset(targetElement).left;
  7603. 			// @ts-ignore
  7604. 			// @ts-ignore
  7605. 			let targetElement_right = PopsDOMUtils.offset(targetElement).right;
  7606.  
  7607. 			let toolTipElement_width = PopsDOMUtils.outerWidth(toolTipElement);
  7608. 			let toolTipElement_height = PopsDOMUtils.outerHeight(toolTipElement);
  7609. 			/* 目标元素的x轴的中间位置 */
  7610. 			let targetElement_X_center_pos =
  7611. 				targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
  7612. 			/* 目标元素的Y轴的中间位置 */
  7613. 			let targetElement_Y_center_pos =
  7614. 				targetElement_top +
  7615. 				targetElement_height / 2 -
  7616. 				toolTipElement_height / 2;
  7617. 			return {
  7618. 				TOP: {
  7619. 					left: targetElement_X_center_pos - otherDistance,
  7620. 					top: targetElement_top - toolTipElement_height - arrowDistance,
  7621. 					arrow: "bottom",
  7622. 					motion: "fadeInTop",
  7623. 				},
  7624. 				RIGHT: {
  7625. 					left: targetElement_left + targetElement_width + arrowDistance,
  7626. 					top: targetElement_Y_center_pos + otherDistance,
  7627. 					arrow: "left",
  7628. 					motion: "fadeInRight",
  7629. 				},
  7630. 				BOTTOM: {
  7631. 					left: targetElement_X_center_pos - otherDistance,
  7632. 					top: targetElement_top + targetElement_height + arrowDistance,
  7633. 					arrow: "top",
  7634. 					motion: "fadeInBottom",
  7635. 				},
  7636. 				LEFT: {
  7637. 					left: targetElement_left - toolTipElement_width - arrowDistance,
  7638. 					top: targetElement_Y_center_pos + otherDistance,
  7639. 					arrow: "right",
  7640. 					motion: "fadeInLeft",
  7641. 				},
  7642. 			};
  7643. 		}
  7644. 		/**
  7645. 		 * 显示提示框
  7646. 		 */
  7647. 		function showToolTipNode() {
  7648. 			if (typeof config.showBeforeCallBack === "function") {
  7649. 				let result = config.showBeforeCallBack();
  7650. 				if (typeof result === "boolean" && !result) {
  7651. 					return;
  7652. 				}
  7653. 			}
  7654. 			// @ts-ignore
  7655. 			if (!PopsUtils.contains($shadowRoot, toolTipElement)) {
  7656. 				// @ts-ignore
  7657. 				PopsUtils.appendChild($shadowRoot, toolTipElement);
  7658. 			}
  7659. 			// @ts-ignore
  7660. 			if (!PopsUtils.contains($shadowContainer)) {
  7661. 				if (typeof config.beforeAppendToPageCallBack === "function") {
  7662. 					config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  7663. 				}
  7664. 				// @ts-ignore
  7665. 				PopsUtils.appendChild($shadowContainer);
  7666. 			}
  7667. 			setToolTipPosition(
  7668. 				getToolTipPosition(
  7669. 					config.target,
  7670. 					config.arrowDistance,
  7671. 					config.otherDistance
  7672. 				)
  7673. 			);
  7674. 			if (typeof config.showAfterCallBack === "function") {
  7675. 				config.showAfterCallBack(toolTipElement);
  7676. 			}
  7677. 		}
  7678. 		/**
  7679. 		 * 关闭提示框
  7680. 		 */
  7681. 		function closeToolTipNode() {
  7682. 			if (typeof config.closeBeforeCallBack === "function") {
  7683. 				let result = config.closeBeforeCallBack(toolTipElement);
  7684. 				if (typeof result === "boolean" && !result) {
  7685. 					return;
  7686. 				}
  7687. 			}
  7688. 			toolTipElement.setAttribute(
  7689. 				"data-motion",
  7690. 				// @ts-ignore
  7691. 				toolTipElement.getAttribute("data-motion").replace("fadeIn", "fadeOut")
  7692. 			);
  7693. 			if (typeof config.closeAfterCallBack === "function") {
  7694. 				config.closeAfterCallBack(toolTipElement);
  7695. 			}
  7696. 		}
  7697. 		/**
  7698. 		 * 绑定 显示事件
  7699. 		 */
  7700. 		function onShowEvent() {
  7701. 			PopsDOMUtils.on(
  7702. 				config.target,
  7703. 				// @ts-ignore
  7704. 				config.triggerShowEventName,
  7705. 				null,
  7706. 				showToolTipNode,
  7707. 				config.eventOption
  7708. 			);
  7709. 		}
  7710. 		/**
  7711. 		 * 绑定 关闭事件
  7712. 		 */
  7713. 		function onCloseEvent() {
  7714. 			PopsDOMUtils.on(
  7715. 				config.target,
  7716. 				// @ts-ignore
  7717. 				config.triggerCloseEventName,
  7718. 				null,
  7719. 				closeToolTipNode,
  7720. 				config.eventOption
  7721. 			);
  7722. 		}
  7723. 		/**
  7724. 		 * 取消绑定 显示事件
  7725. 		 */
  7726. 		function offShowEvent() {
  7727. 			PopsDOMUtils.off(
  7728. 				config.target,
  7729. 				// @ts-ignore
  7730. 				null,
  7731. 				config.triggerShowEventName,
  7732. 				showToolTipNode,
  7733. 				{
  7734. 					capture: true,
  7735. 				}
  7736. 			);
  7737. 		}
  7738. 		/**
  7739. 		 * 取消绑定 关闭事件
  7740. 		 */
  7741. 		function offCloseEvent() {
  7742. 			PopsDOMUtils.off(
  7743. 				config.target,
  7744. 				// @ts-ignore
  7745. 				null,
  7746. 				config.triggerCloseEventName,
  7747. 				closeToolTipNode,
  7748. 				{
  7749. 					capture: true,
  7750. 				}
  7751. 			);
  7752. 		}
  7753.  
  7754. 		/**
  7755. 		 * 即使存在动画属性，但是当前设置的动画Out结束后移除元素
  7756. 		 */
  7757. 		function endEvent() {
  7758. 			// @ts-ignore
  7759. 			if (toolTipElement.getAttribute("data-motion").includes("In")) {
  7760. 				return;
  7761. 			}
  7762. 			toolTipElement.remove();
  7763. 		}
  7764. 		if (config.alwaysShow) {
  7765. 			/* 总是显示 */
  7766. 			showToolTipNode();
  7767. 			return {
  7768. 				guid: guid,
  7769. 				config: config,
  7770. 				toolTipNode: toolTipElement,
  7771. 				show: showToolTipNode,
  7772. 				close() {
  7773. 					PopsDOMUtils.on(
  7774. 						toolTipElement,
  7775. 						// @ts-ignore
  7776. 						PopsDOMUtils.getAnimationEndNameList(),
  7777. 						null,
  7778. 						endEvent,
  7779. 						config.eventOption
  7780. 					);
  7781. 					closeToolTipNode();
  7782. 				},
  7783. 				off: null,
  7784. 				on: null,
  7785. 			};
  7786. 		} else {
  7787. 			/* 事件触发才显示 */
  7788.  
  7789. 			/**
  7790. 			 * 进入动画
  7791. 			 */
  7792. 			PopsDOMUtils.on(
  7793. 				toolTipElement,
  7794. 				// @ts-ignore
  7795. 				"mouseenter touchstart",
  7796. 				void 0,
  7797. 				function () {
  7798. 					// @ts-ignore
  7799. 					if (parseInt(getComputedStyle(this)) > 0.5) {
  7800. 						// @ts-ignore
  7801. 						this.style.animationPlayState = "paused";
  7802. 					}
  7803. 				},
  7804. 				config.eventOption
  7805. 			);
  7806. 			/**
  7807. 			 * 退出动画
  7808. 			 */
  7809. 			PopsDOMUtils.on(
  7810. 				toolTipElement,
  7811. 				// @ts-ignore
  7812. 				"mouseleave touchend",
  7813. 				void 0,
  7814. 				function () {
  7815. 					// @ts-ignore
  7816. 					this.style.animationPlayState = "running";
  7817. 				},
  7818. 				config.eventOption
  7819. 			);
  7820. 			PopsDOMUtils.on(
  7821. 				toolTipElement,
  7822. 				// @ts-ignore
  7823. 				PopsDOMUtils.getAnimationEndNameList(),
  7824. 				null,
  7825. 				endEvent,
  7826. 				config.eventOption
  7827. 			);
  7828.  
  7829. 			onShowEvent();
  7830. 			onCloseEvent();
  7831. 			return {
  7832. 				guid: guid,
  7833. 				$shadowContainer: $shadowContainer,
  7834. 				$shadowRoot: $shadowRoot,
  7835. 				config: config,
  7836. 				toolTipNode: toolTipElement,
  7837. 				show: showToolTipNode,
  7838. 				close: closeToolTipNode,
  7839. 				off() {
  7840. 					offShowEvent();
  7841. 					offCloseEvent();
  7842. 				},
  7843. 				on() {
  7844. 					onShowEvent();
  7845. 					onCloseEvent();
  7846. 				},
  7847. 			};
  7848. 		}
  7849. 	};
  7850.  
  7851. 	/**
  7852. 	 * 抽屉
  7853. 	 * @param {PopsDrawerDetails} details
  7854. 	 */
  7855. 	pops.drawer = function (details) {
  7856. 		// @ts-ignore
  7857. 		// @ts-ignore
  7858. 		let that = this;
  7859. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  7860. 		PopsHandler.handleInit($shadowRoot, [
  7861. 			pops.config.cssText.index,
  7862. 			pops.config.cssText.ninePalaceGridPosition,
  7863. 			pops.config.cssText.scrollbar,
  7864. 			pops.config.cssText.button,
  7865. 			pops.config.cssText.anim,
  7866. 			pops.config.cssText.common,
  7867. 			pops.config.cssText.drawerCSS,
  7868. 		]);
  7869. 		/**
  7870. 		 * @type {Required<PopsDrawerDetails>}
  7871. 		 */
  7872. 		let config = {
  7873. 			title: {
  7874. 				enable: true,
  7875. 				// @ts-ignore
  7876. 				position: "center",
  7877. 				text: "默认标题",
  7878. 				html: false,
  7879. 				style: "height: 60px;line-height: 60px;",
  7880. 			},
  7881. 			content: {
  7882. 				text: "默认内容",
  7883. 				html: false,
  7884. 				style: "overflow: auto;padding: 0px 10px;",
  7885. 			},
  7886. 			btn: {
  7887. 				position: "flex-end",
  7888. 				ok: {
  7889. 					enable: true,
  7890. 					// @ts-ignore
  7891. 					size: "",
  7892. 					// @ts-ignore
  7893. 					icon: "",
  7894. 					rightIcon: false,
  7895. 					iconIsLoading: false,
  7896. 					text: "确定",
  7897. 					type: "primary",
  7898. 					callback(event) {
  7899. 						event.close();
  7900. 					},
  7901. 				},
  7902. 				cancel: {
  7903. 					enable: true,
  7904. 					// @ts-ignore
  7905. 					size: "",
  7906. 					// @ts-ignore
  7907. 					icon: "",
  7908. 					rightIcon: false,
  7909. 					iconIsLoading: false,
  7910. 					text: "关闭",
  7911. 					type: "default",
  7912. 					callback(event) {
  7913. 						event.close();
  7914. 					},
  7915. 				},
  7916. 				other: {
  7917. 					enable: false,
  7918. 					// @ts-ignore
  7919. 					size: "",
  7920. 					// @ts-ignore
  7921. 					icon: "",
  7922. 					rightIcon: false,
  7923. 					iconIsLoading: false,
  7924. 					text: "其它按钮",
  7925. 					type: "default",
  7926. 					callback(event) {
  7927. 						event.close();
  7928. 					},
  7929. 				},
  7930. 				close: {
  7931. 					enable: true,
  7932. 					callback(event) {
  7933. 						event.close();
  7934. 					},
  7935. 				},
  7936. 			},
  7937. 			mask: {
  7938. 				enable: true,
  7939. 				clickEvent: {
  7940. 					toClose: true,
  7941. 					toHide: false,
  7942. 				},
  7943. 				// @ts-ignore
  7944. 				clickCallBack: null,
  7945. 			},
  7946. 			class: "",
  7947. 			zIndex: 10000,
  7948. 			only: false,
  7949. 			direction: "right",
  7950. 			size: "30%",
  7951. 			lockScroll: false,
  7952. 			closeOnPressEscape: true,
  7953. 			openDelay: 0,
  7954. 			closeDelay: 0,
  7955. 			borderRadius: 0,
  7956. 			// @ts-ignore
  7957. 			style: void 0,
  7958. 			beforeAppendToPageCallBack() {},
  7959. 		};
  7960. 		config = PopsUtils.assignJSON(config, details);
  7961. 		let guid = PopsUtils.getRandomGUID();
  7962. 		const PopsType = "drawer";
  7963. 		// @ts-ignore
  7964. 		config = PopsHandler.handleOnly(PopsType, config);
  7965. 		// @ts-ignore
  7966. 		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  7967. 		// @ts-ignore
  7968. 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  7969. 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  7970. 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  7971. 			PopsType,
  7972. 			config
  7973. 		);
  7974. 		let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
  7975. 			PopsType,
  7976. 			config
  7977. 		);
  7978. 		let animHTML = PopsElementHandler.getAnimHTML(
  7979. 			guid,
  7980. 			PopsType,
  7981. 			config,
  7982. 			`
  7983.       ${
  7984. 				config.title.enable
  7985. 					? `
  7986.       <div class="pops-${PopsType}-title" style="${headerStyle}">
  7987.           ${
  7988. 						// @ts-ignore
  7989. 						config.title.html
  7990. 							? // @ts-ignore
  7991. 							  config.title.text
  7992. 							: `<p 
  7993.                     pops
  7994.                     style="
  7995.                           width: 100%;
  7996.                           text-align: ${
  7997. 														// @ts-ignore
  7998. 														config.title.position
  7999. 													};
  8000.                           ${headerPStyle}">${
  8001. 									// @ts-ignore
  8002. 									config.title.text
  8003. 							  }</p>`
  8004. 					}
  8005.           ${headerBtnHTML}
  8006.       </div>
  8007.       `
  8008. 					: ""
  8009. 			}
  8010.       
  8011.       <div class="pops-${PopsType}-content" style="${contentStyle}">
  8012.           ${
  8013. 						config.content.html
  8014. 							? config.content.text
  8015. 							: `<p pops style="${contentPStyle}">${config.content.text}</p>`
  8016. 					}
  8017.       </div>
  8018.  
  8019.       ${bottomBtnHTML}
  8020.       `,
  8021. 			bottomBtnHTML
  8022. 		);
  8023. 		/**
  8024. 		 * 弹窗的主元素，包括动画层
  8025. 		 */
  8026. 		let animElement = PopsElementHandler.parseElement(animHTML);
  8027. 		let {
  8028. 			popsElement,
  8029. 			headerCloseBtnElement,
  8030. 			btnCancelElement,
  8031. 			btnOkElement,
  8032. 			btnOtherElement,
  8033. 			// @ts-ignore
  8034. 		} = PopsHandler.handleQueryElement(animElement, PopsType);
  8035. 		/**
  8036. 		 * 遮罩层元素
  8037. 		 * @type {?HTMLDivElement}
  8038. 		 */
  8039. 		let maskElement = null;
  8040. 		/**
  8041. 		 * 已创建的元素列表
  8042. 		 * @type {HTMLElement[]}
  8043. 		 */
  8044. 		let elementList = [animElement];
  8045. 		// @ts-ignore
  8046. 		if (config.mask.enable) {
  8047. 			let _handleMask_ = PopsHandler.handleMask({
  8048. 				type: PopsType,
  8049. 				guid: guid,
  8050. 				// @ts-ignore
  8051. 				config: config,
  8052. 				animElement: animElement,
  8053. 				maskHTML: maskHTML,
  8054. 			});
  8055. 			maskElement = _handleMask_.maskElement;
  8056. 			elementList.push(maskElement);
  8057. 		}
  8058. 		let eventDetails = PopsHandler.handleEventDetails(
  8059. 			guid,
  8060. 			$shadowContainer,
  8061. 			$shadowRoot,
  8062. 			PopsType,
  8063. 			// @ts-ignore
  8064. 			animElement,
  8065. 			popsElement,
  8066. 			maskElement,
  8067. 			config
  8068. 		);
  8069. 		/* 处理方向 */
  8070. 		// @ts-ignore
  8071. 		popsElement.setAttribute("direction", config.direction);
  8072.  
  8073. 		/* 处理border-radius */
  8074. 		/* 处理动画前的宽高 */
  8075. 		if (config.direction === "top") {
  8076. 			// @ts-ignore
  8077. 			popsElement.style.setProperty("height", 0);
  8078. 			// @ts-ignore
  8079. 			popsElement.style.setProperty(
  8080. 				"border-radius",
  8081. 				`0px 0px ${config.borderRadius}px ${config.borderRadius}px`
  8082. 			);
  8083. 		} else if (config.direction === "bottom") {
  8084. 			// @ts-ignore
  8085. 			popsElement.style.setProperty("height", 0);
  8086. 			// @ts-ignore
  8087. 			popsElement.style.setProperty(
  8088. 				"border-radius",
  8089. 				`${config.borderRadius}px ${config.borderRadius}px 0px 0px`
  8090. 			);
  8091. 		} else if (config.direction === "left") {
  8092. 			// @ts-ignore
  8093. 			popsElement.style.setProperty("width", 0);
  8094. 			// @ts-ignore
  8095. 			popsElement.style.setProperty(
  8096. 				"border-radius",
  8097. 				`0px ${config.borderRadius}px 0px ${config.borderRadius}px`
  8098. 			);
  8099. 		} else if (config.direction === "right") {
  8100. 			// @ts-ignore
  8101. 			popsElement.style.setProperty("width", 0);
  8102. 			// @ts-ignore
  8103. 			popsElement.style.setProperty(
  8104. 				"border-radius",
  8105. 				`${config.borderRadius}px 0px ${config.borderRadius}px 0px`
  8106. 			);
  8107. 		}
  8108.  
  8109. 		/* 按下Esc键触发关闭 */
  8110. 		if (config.closeOnPressEscape) {
  8111. 			PopsHandler.handleKeyboardEvent("Escape", [], function () {
  8112. 				eventDetails.close();
  8113. 			});
  8114. 		}
  8115. 		/* 待处理的点击事件列表 */
  8116. 		let needHandleClickEventList = [
  8117. 			{ close: headerCloseBtnElement },
  8118. 			{ cancel: btnCancelElement },
  8119. 			{ ok: btnOkElement },
  8120. 			{ other: btnOtherElement },
  8121. 		];
  8122. 		needHandleClickEventList.forEach((item) => {
  8123. 			let btnName = Object.keys(item)[0];
  8124. 			PopsHandler.handleClickEvent(
  8125. 				// @ts-ignore
  8126. 				item[btnName],
  8127. 				// @ts-ignore
  8128. 				btnName,
  8129. 				eventDetails,
  8130. 				function (_eventDetails_) {
  8131. 					// @ts-ignore
  8132. 					if (typeof config.btn[btnName].callback === "function") {
  8133. 						// @ts-ignore
  8134. 						config.btn[btnName].callback(_eventDetails_);
  8135. 					}
  8136. 				}
  8137. 			);
  8138. 		});
  8139.  
  8140. 		/* 先隐藏，然后根据config.openDelay来显示 */
  8141. 		elementList.forEach((element) => {
  8142. 			element.style.setProperty("display", "none");
  8143. 			if (["top"].includes(config.direction)) {
  8144. 				// @ts-ignore
  8145. 				popsElement.style.setProperty("height", config.size);
  8146. 				// @ts-ignore
  8147. 				popsElement.style.setProperty("transform", "translateY(-100%)");
  8148. 			} else if (["bottom"].includes(config.direction)) {
  8149. 				// @ts-ignore
  8150. 				popsElement.style.setProperty("height", config.size);
  8151. 				// @ts-ignore
  8152. 				popsElement.style.setProperty("transform", "translateY(100%)");
  8153. 			} else if (["left"].includes(config.direction)) {
  8154. 				// @ts-ignore
  8155. 				popsElement.style.setProperty("width", config.size);
  8156. 				// @ts-ignore
  8157. 				popsElement.style.setProperty("transform", "translateX(-100%)");
  8158. 			} else if (["right"].includes(config.direction)) {
  8159. 				// @ts-ignore
  8160. 				popsElement.style.setProperty("width", config.size);
  8161. 				// @ts-ignore
  8162. 				popsElement.style.setProperty("transform", "translateX(100%)");
  8163. 			}
  8164. 			element.style.setProperty("display", "");
  8165. 		});
  8166. 		/* 创建到页面中 */
  8167. 		// @ts-ignore
  8168. 		PopsUtils.appendChild($shadowRoot, elementList);
  8169. 		if (typeof config.beforeAppendToPageCallBack === "function") {
  8170. 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  8171. 		}
  8172. 		// @ts-ignore
  8173. 		PopsUtils.appendChild($shadowContainer);
  8174. 		setTimeout(() => {
  8175. 			setTimeout(() => {
  8176. 				// @ts-ignore
  8177. 				popsElement.style.setProperty("transform", "");
  8178. 			}, config.openDelay);
  8179. 		}, 50);
  8180.  
  8181. 		if (maskElement != null) {
  8182. 			animElement.after(maskElement);
  8183. 		}
  8184.  
  8185. 		PopsHandler.handlePush(PopsType, {
  8186. 			guid: guid,
  8187. 			// @ts-ignore
  8188. 			animElement: animElement,
  8189. 			// @ts-ignore
  8190. 			popsElement: popsElement,
  8191. 			// @ts-ignore
  8192. 			maskElement: maskElement,
  8193. 			$shadowContainer: $shadowContainer,
  8194. 			$shadowRoot: $shadowRoot,
  8195. 		});
  8196. 		return PopsHandler.handleResultDetails(eventDetails);
  8197. 	};
  8198.  
  8199. 	/**
  8200. 	 * 文件夹
  8201. 	 * @param {PopsFolderDetails} details
  8202. 	 */
  8203. 	pops.folder = function (details) {
  8204. 		// @ts-ignore
  8205. 		// @ts-ignore
  8206. 		let that = this;
  8207. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  8208. 		PopsHandler.handleInit($shadowRoot, [
  8209. 			pops.config.cssText.index,
  8210. 			pops.config.cssText.ninePalaceGridPosition,
  8211. 			pops.config.cssText.scrollbar,
  8212. 			pops.config.cssText.button,
  8213. 			pops.config.cssText.anim,
  8214. 			pops.config.cssText.common,
  8215. 			pops.config.cssText.folderCSS,
  8216. 		]);
  8217. 		/**
  8218. 		 * @type {Required<PopsFolderDetails>}
  8219. 		 */
  8220. 		let config = {
  8221. 			title: {
  8222. 				text: "pops.Folder",
  8223. 				position: "center",
  8224. 				html: false,
  8225. 				style: "",
  8226. 			},
  8227. 			sort: {
  8228. 				name: "latestTime",
  8229. 				isDesc: false,
  8230. 				// @ts-ignore
  8231. 				callback() {},
  8232. 			},
  8233. 			folder: [
  8234. 				{
  8235. 					fileName: "测试文件夹",
  8236. 					fileSize: 0,
  8237. 					fileType: "",
  8238. 					createTime: 0,
  8239. 					latestTime: 0,
  8240. 					isFolder: true,
  8241. 					index: 0,
  8242. 					// @ts-ignore
  8243. 					clickEvent() {
  8244. 						return [
  8245. 							{
  8246. 								fileName: "内部-测试文件.zip",
  8247. 								fileSize: 1025000,
  8248. 								fileType: "zip",
  8249. 								createTime: 1702038410440,
  8250. 								latestTime: 1702039602126,
  8251. 								isFolder: false,
  8252. 								index: 1,
  8253. 								clickEvent() {
  8254. 									console.log("下载文件：", this.fileName);
  8255. 									return "https://update.gf.qytechs.cn/scripts/456485/pops.js";
  8256. 								},
  8257. 							},
  8258. 						];
  8259. 					},
  8260. 				},
  8261. 				{
  8262. 					fileName: "测试文件.apk",
  8263. 					fileSize: 30125682,
  8264. 					fileType: "apk",
  8265. 					createTime: 1702036410440,
  8266. 					latestTime: 1702039410440,
  8267. 					isFolder: false,
  8268. 					index: 1,
  8269. 					// @ts-ignore
  8270. 					clickEvent() {
  8271. 						console.log("下载文件：", this.fileName);
  8272. 						return "https://update.gf.qytechs.cn/scripts/456485/pops.js";
  8273. 					},
  8274. 				},
  8275. 			],
  8276. 			btn: {
  8277. 				merge: false,
  8278. 				mergeReverse: false,
  8279. 				reverse: false,
  8280. 				position: "flex-end",
  8281. 				ok: {
  8282. 					enable: true,
  8283. 					// @ts-ignore
  8284. 					size: "",
  8285. 					// @ts-ignore
  8286. 					icon: "",
  8287. 					rightIcon: false,
  8288. 					iconIsLoading: false,
  8289. 					text: "确定",
  8290. 					type: "primary",
  8291. 					callback(event) {
  8292. 						event.close();
  8293. 					},
  8294. 				},
  8295. 				cancel: {
  8296. 					enable: true,
  8297. 					// @ts-ignore
  8298. 					size: "",
  8299. 					// @ts-ignore
  8300. 					icon: "",
  8301. 					rightIcon: false,
  8302. 					iconIsLoading: false,
  8303. 					text: "关闭",
  8304. 					type: "default",
  8305. 					callback(event) {
  8306. 						event.close();
  8307. 					},
  8308. 				},
  8309. 				other: {
  8310. 					enable: false,
  8311. 					// @ts-ignore
  8312. 					size: "",
  8313. 					// @ts-ignore
  8314. 					icon: "",
  8315. 					rightIcon: false,
  8316. 					iconIsLoading: false,
  8317. 					text: "其它按钮",
  8318. 					type: "default",
  8319. 					callback(event) {
  8320. 						event.close();
  8321. 					},
  8322. 				},
  8323. 				close: {
  8324. 					enable: true,
  8325. 					callback(event) {
  8326. 						event.close();
  8327. 					},
  8328. 				},
  8329. 			},
  8330. 			class: "",
  8331. 			only: false,
  8332. 			width: "500px",
  8333. 			height: "400px",
  8334. 			position: "center",
  8335. 			animation: "pops-anim-fadein-zoom",
  8336. 			zIndex: 10000,
  8337. 			mask: {
  8338. 				enable: false,
  8339. 				clickEvent: {
  8340. 					toClose: false,
  8341. 					toHide: false,
  8342. 				},
  8343. 				// @ts-ignore
  8344. 				clickCallBack: null,
  8345. 			},
  8346. 			drag: false,
  8347. 			dragLimit: true,
  8348. 			dragExtraDistance: 3,
  8349. 			dragMoveCallBack() {},
  8350. 			dragEndCallBack() {},
  8351. 			forbiddenScroll: false,
  8352. 			// @ts-ignore
  8353. 			style: void 0,
  8354. 			beforeAppendToPageCallBack() {},
  8355. 		};
  8356. 		/**
  8357. 		 * 图标
  8358. 		 */
  8359. 		const Folder_ICON = {
  8360. 			folder:
  8361. 				"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABRUExURUxpcf++Hv/ZU//OPv/DL/+9Gv/BI/+4Bf+4Ef/XcP/LOP/TSf/RRP/WTv/JM/+3Ef+9Ff/bhf+5BP/DJf+yDv/imv/kqv/bXP/w0v/fd//calQXUgwAAAAKdFJOUwB///8d3L9enl8sr20gAAACN0lEQVRYw+2Y65abIBRGE1EzVbyNSW18/wctHA6XYw4q9Ee7Vt2AgOHbcVyTOMztdnFxcXFMWf7gKHN190VRKDpFC0iNqB5ZvqpXzJRxHoF7hrAa9/hK9j2oYIA2QA/UqXeyNg5QDBrshhHbUH8xxO+uT7sOJ/tU5a4wh0eK8KmKHTxd28Bfo16pqphep5l6I+R/p8xr668kVghVceH8M5EZYnGhnBKRceGqmaZXPPw2xbO+1xU+8axwe8NfzkIV7xVZdF0AVhi+rWdxIfgmwloE6CkrDCPwJbYUeFgK61icxFcNKyxIxE+WgnllQ0y4+HffzZ8WZtJlCDtz+CzqaaFaVGiWBNEOZZ15zihsT2CFnXk4QStsLohTU3FC+Af8I8JWV1fa1jy8u+hnOUy2vnd5SkeGrJBfHZwDbxe87pfxQvejmMZZYxxdYSoyVyixSvtXFLJ7hWq5xCRNSTozczzHCj8T54kI5d8QCtvZAodDIa7DgRkJaII2hBfaJC7EOE7D076XuIoVBu8oN3kpBLVt4YXBVaUSFSbS5Akb00znSoPn9KCJCN0am7SnGhganC4kKhR2MV0vvEn4M7bFhM3GIZqtgfiPr9BdSAYnrnCX3rQeB/2xsKcHouiBBhpO+phQL9CdjmKqsRkXpkMz57dmfTY1v3k8is26zvN2A6yIbKVqm/tMjFBMp5jpxrWKbsB1dJw/AsC3Lt/YEaK7x1t5r7aLj3ned/fRj1TK3H9wXFxc/F/8BgM0jBZ4nc19AAAAAElFTkSuQmCC",
  8362. 			zip: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAFQUExURUxpcYHaOWDM+pryU4TbPXLU/XHT/X3Y/nrZpIffP/+gI4La/+9QTvhycXjQL4fbQvBUUoXaQHrSMf+cJPl2dfBXVf+KMDu99IveRv+ZJf+NLv+PLIncRPdvbV7L+VnJ+P/u5HDS/P+DD1PG93fV/U3D9kTB9WfP+2vR/GLN+nvSM86bL33UNf/69f/+/XzTNP+vVf/iyf/06sOCRsGhYP2Jh/t8e4TVPX3QNat7jnzCMfxfXXrUMP/UqJPoTX/cM/aDLOVjKP/jw/9yC/98HP+GLP/Ec2C63f+iQ4TjNvOiasmpZLuTpfaQgfjEu4HGOPKGeHDC4s2YXU+02/Ozn/B0J+1oYHvSNGnM9P/r291KSNGeZIHGObeOn5zzVM6PHkS978mNUt+EO/GadPOgbZzyVJvyVNG6g66AksCer4LGOc7Mp/eWh/SZVu6adP6VKOSF/TkAAAAKdFJOUwDf39+Af5/9MKAONWYwAAADB0lEQVRYw+3Y+U/TYBjAcUDYIahlA3bCimM3Y64MERWdeExFOhDoxkTnDuTm///R9+jx9MjbtcT4S78sIVnCh+c9mjDGxry8vLz+TwGffxp2/Ql0vYJbJuXzE76AvTc1rc9//gx0vqxg+XwON+XY8+8+BO22NayQKxQKSzZiwMj5D/TgQZtORjASe9U+QKHQfplAilEuhfIxQT/g6P4bwEZbGS1FS08wQR1GzpOCYfSFX7XGEtDSJPaEQCPH2cagwmEwpdfSmQwbXIEaOlAMhsNkRvQ9jEANy9CYoA7Dt6PdqIVBtUY6rdOy2SwbVLEcvR5G8DCjWkSzA3VPAbkcJlCHZbORCBPUY+h+pKzArKZF7MAcvLf4PDUwRsDfikU1O9DwFKDzPKzFYjGMkW8yGIExQbpO9SlAB0BANQxGDDFBdbS0ctdMYMQReHn5Te0n6aIPwf7WBWoLdsEEN57PoR6RFnGSVIdgfV6J47gZHPdqVBBzG6IobutCb+w5B+dkcE5Ys0iQZJBzPOENAsvG1oQ910u+EcplvroDqvLlsrDveEJlyXvox8Xbz6BbEf2KfdcTIlA4On4KOj4SNJBzAQpmUHAxobrkE4E3gyf7YECHE1qAPAWd7+EiAXleHMI/RYYiz5/c41AQaO4+YNXKq7oHpe2dqqmd7XnXhyJJg8Hd8CtoeDcYSDPuwflOp/NOF3qjwzm42Oc/SN/ler3eer8O6q+b6jHBszfRaDSZTD7BzaI2m6UEqPTyxWqrUiwWQ6HQY9zrt1+Y4B8ZTDLASoV4o4G/EJiMat7s5un9QDKhDBLSPGGl4mTJeA+T8pLphFeleCIeTyTwK04mJJvofg9PS3GQMqGjPdSfsjVYdA82jSA6lJa7CWdNEy6QCVedLPnMYg8XQHTJFecTwottAJ3dwwcWSzaBrRY8lHEmGJQvtjbhlQWomzDI/vAIn5TRlmzzkXnSvIcfQWZw0u4D86Rhyc3uB1CXgOCUbT206uA4PJRm9z2oKz/LFBwPjvAvAi8vL69/0l8fxm2XCv5p+gAAAABJRU5ErkJggg==",
  8363. 			mp4: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABXUExURUxpcZKU/5eZ/4SG/5CS/5eb/6Sm/4WG/5uc/6eq/4uM/4iJ/6Ci/5ye/6eo/6Ol/46P/5mb/5eY/5GS//39/5SV//X1/6Ol/+3u/+Li/3Z498/Q/7u8/zCK/WcAAAAKdFJOUwB7Pf+fHN2gn59fp7PNAAACSElEQVRYw+3Ya3OjIBQG4FqamnDzTkT9/79zOQdUzG0PJjP7YX2DeAR5EtKZTu3X15EjR46Q851dnuY7nTtd9Kv8nlK9X60/Kl60/qh4wjUFNjx8XSznIlHMClgICadC+2PWYShFvFwpSRAvBSl0MYDyVpB7xfOyLXmVrl2h99cQPw49VTzLV7lGNVF8DW5CExNAeSaCSsHdyi9SUPi2Ds2h/KY4K+epbZANpYoKmRHBGy6qbt7qnAzKaZzU86SDtje91Z8Ddd+2renHIh6sEsFKVS64stKmhRg7rRi2yrM0MEoAW2Osrh4kFaxnEPd9/SiI+94N1jW0qu5icN13Xfl7iCBqPlsQ9y3nObyJCNYr2G9Bt28VzRPBroYWQGNMiy+Dlel116WBP24BrOlcGgC9NaNWdjjV4T0/NHAJgnF6O/Fo/l2wt6Nm4i2w6OOMExtYmQ42Tdd00BxoV85O9TCI0k26hDckgc2acgXtKIeB8WabvaCFL89xZfMuKG1vgZsa2O2dRwbdUng1vBut48bK7dZ9ezgOrC/diQSWUdg0jrhb4a3bJIOCVYrDD6N8HCLol0PP2QC7fexxTgN5yctF4Mxz8wE953gDdHQwSiDQmK9Lr3IamJCcAObPl4u9oBAL4EohRESGC+FrGoiOX+E/lYD4y3kg0CRQJOSfggwbFksZZhg2GKOAGQscrFrE+RrachaC8hfsN7uLCJ24myE9BuQb52HmGcqO3fPtc2jXB3RiTuNy+hPpKcv/mmzHfzOOHDny/+YPi6+BG+WQsHsAAAAASUVORK5CYII=",
  8364. 			apk: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABXUExURUxpcXnGVmm8P2q8QHzIV4bNYXXDTWu8P3nFUYfNY26/RIPLXoDJWobNYXHASH3HVnXDTXnFUfT/7onPZej/2/v/+Ov+4cDypVmtLqvjjt38y57afsvyti89dh4AAAAKdFJOUwAQ3/8n3Xugn58KiJgCAAACeElEQVRYw+2Y2ZajIBBAuxuTtIhsKgTx/79zisUlaZ0pPPM048WwBa6FkpyYj4+Li4sLNNW9PqQq133W3e+4lSqr24GpPWms08S23ZhCmnvatsxYtZE4/a229BQZ78nxk27TXWKsWwwFRhA2ITXz3FBp1maxsc6OLF1Usb6cocBYNynAnKcs55tm22CNdYPl9vmXhUhj3bA8PpaMLdUNqc1qZIQggRRUi42lPIvmEzDMZazZBiHYOy9dd4TwezPXj1Pzqgxd7dpVlwnVNAzjS0SiM4N2a893mVC6MF2BsvO+64QQzTgMfadKhSIdQvFJD9p3duyNMf3khB0G44gSLCWcUKxwBhEZM2S0Af/E5TqgVKiI18MrRnKV3mRnhNy/+QbdbQIsF3oTFmr0vGJY8sjUGaGCBEcPht65UIDK2+C3UuUhaKFKSUmngen5tCE07Z+kh7bxMp9RKZRQLYg+CgmZQqk94SaUli8jyoTSx/lmsrHUvR1TqU4KuY3zddKtFVjzOSEd9S7G8UJhDEBKAp+4Hg7Itpg+C6WSKKEMgE8Se4CnaYAsEAbo8wDC5yGFQndAd1II13AfR08JOYlfg3BTTCzD3UktRwqFHJLk/DjCcBE5Wgi6BLH7xtHHuxKG4IRACJKTdhr3sISmM0r+QAgffIaS1u3uwlnIC4WckP1tuPhKhRDjHquvdMlrSdcmncvQgRLCDEpTtr6SNjX5klGkEM+/IyTxmF/bKlkLghbGrZE2SPLFFs1dZLuXMMJ71m1m0vkMdOmI71KC+QVbkQJQjyoPvA+zYnig/8L6vpDPUhUyxgfuSSr9ifH4I/cT/2ZcXFz8v/wC1sx9JR+88xQAAAAASUVORK5CYII=",
  8365. 			gif: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcf+ubP+eUP+iWP+xcP+nX/+lXf+SO/uPSv+dUP6kX/+XRP+VQP+SO/+jWf+oYf+hVf///f+mXf+tav+ubf+rZ/+eUP+wcP+pZP/s3P+aSf/z6P/48v/UsvqFOf+6hP/jzf/Hmv/cwS4F5mYAAAALdFJOUwDdez2foByg/p/2onNSOQAAAh5JREFUWMPtmNuSoyAQQGeMUaZUxBveRfP/H7lc1VRJptF92Kr1INqtcKqNSSrk6+vm5uYGzMPzrTzcdYFff+I7cPV91/VfNZr6ykNb6WwMypW6tOBk9EoALka/KMtCTCr05OKi0S9AwI02YXXW+KwqMVluMqw4SimjtUGNzwoK0HgobC4Yn42iat6DanfKnPZdhCAersK0KcfXWOtYbPtrTeNBhGnapCt1n2VZX6cWnjDhjjETjNeFudrhWQpfeS7PqJ5vI0DCXJLKPVmkcMH5MQ5CBaGvIRtehIhkGVp2VmgqwgixhSEkciYeDz4jxDkWyD1F0zQhKrJZ3zzG+jKPQMLNJiAd6ogImHw1+1UngQh/8DHqefMS9/ycFhJVIC+ROAvJnrodRn7ARBfIS+TJirOwEp88JsTGx0skF4Tyfd3nZCtQ+c8KG3OXW4FZ1lJHIeUQ1dVXQzY0vMDBbLJEKjsFCxX1oOmHPe02wlHYDsewk0LWW5jPCfPZJuyZm7BTbWmtzHoMTNgpcPuBUg+CCSkfSTv2wTdXskKoUFGMdhhyqlASTcjOlLgLu3iyk0QOwjDqePsFfgeiA4VqykefCUK40KZ457wwuiaMBZFokc7EQTUTiigGCWMH/m1hAhR624TETFSh7Em8Np5DfsE+EgdAy4BQD473M9+SNYPcMV/fImh9CLiWCkKYL4SvSAMv/BXvxL8ZNzc3/y9/ADVfok94AIhIAAAAAElFTkSuQmCC",
  8366. 			txt: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUxpcTOL+DSL+DqO+Veb/mKl/kmX+zWL+U6a+2ao/0aW+0CS+kyZ/GCk/mWn/1yi/lef/VGc/Pr9/+jz/2+s+46//b3a/4O3/AJIojgAAAAKdFJOUwDf//8d3U+en52O09RGAAACF0lEQVRYw+2Y63ajIBCAW8ZqHC5KrZv3f9MFhpuJTQfrjz1n/SDIbT4npw2pfXu7uLi4YNOP39O367rRvOKja/V9GHOqcTTmVGNnzLlGl6A2WvvWxGsqJo9ajKMuGP0dDcbxSWTShKlGfOOoebCNRTidYxynDXrb1dUU0ziGEF3ZdHHoza14xocMXzJyhLdpmme/e6ag2XeobqYCnBRvs98fm32meId56nnCErk+czfVhlub0CyfOyzaHhTa9XOX9aDQqnU/w7uyjULrcC3i+ocI4iUOVkQ7+8IVeptXWgUgMXD3xjv1UYCyCa6QUAiC0E64fMUBYBTOrUJnROmBryCEMEAsCbYKrSIkCSXS0LYLla8U6K4KSYi+H5ZsWmcJY1ohmpos3OLWmoSF9JajX9m8ckyIRfjIrzM8KERfq5J/yridZwrDx0HF6suOMF24QoXJGijCR/gZboB/TZgDYyd9lqU8mqGPlGQMJR8OfiDjZNjDEQ5S0hlDZ4ushWkqwxSWJCgezOKYIMsw7Ri4wi0g3HfBKuF55bBQTNod1WcKw9kv6yShTQgUQA6A6IsjAEmFJ4RXOF24W+gBcIUxAaiapChi/zolw5rfC+GYUKTqG1G11Vxo2Bn6AJLk8NiPC6JBKOjXLv0ZEruwN2AJe8GCnKzHgEGw4STonm/fub535rNUx8xx4D+RdsPP9Af+m3FxcfH/8hcLt2QJ3T9wuwAAAABJRU5ErkJggg==",
  8367. 			exe: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAB4UExURUxpcVq2/kOv/0uw/163/1Cz/0+x/zGp/zad+0Ku/165/Tms/zWq/zKp/1i1/1W1/1K0/0Wv/0Cu/06y//7//0qx/1q2/1y3/1+3/j6p/vf7/y+o/9zu/+r2/yqM9xCa/4LK/8De/3ay/p7P/n3B/rLW/12n+xyf/0XRgzgAAAALdFJOUwDdez2eoByg/Z+vFPUOhAAAAoZJREFUWMPtmOt2mzAMgNuEBDquhhgwgWwMQt//DSfJ3BJIJ3P6a+MLviDkDxE4OaVvbzs7OztsjgfrJUdz3flH/hXvZ1Pfe55/q9HK8iyDluOW4xz3cHcYzIxnMqSZNi3BuJHxALIsTXHLsB+nuOlzmRktbUl71RIKGhitNA3gMxEM3TgxM1rog2UB0vcoopAezIxWwIRrPM0XhX17jJgZT+ETwWwSPBzgGRfCL7C4wojSI91FEfVDJBo2hPNLcYqeCKmFs71pcuAJw0cbkCRREq1wMq4wQVnQNkAbJtuESYKWiAbUtXVVENU9p1iiT4NzrjChRQnNmqK4DBSNDuoj0NjCkbScdGgsUzlXmgplWl4eKcpkZjQVSnHv6yuqapjdhZycLKGUkI+bFK22VOW9ae79xRe5NkInWcIPSOxR5IC7292ArqYqi1qNCfKDIxyzRV7pp8W53RxstX56oMRNQqEaEpTdzVGAc+tKCjRqNLIuWYpBWOsCwScAMOoSaxIKdoWCkEI4dYm06JNkbClQO32KFAZCIWLnN9GBUOoSOwq0TjzkGAnxGhFHxU8B/RUYC2PlEGpcrobIxgpjpYmfI1OAJ4zjWOCaWN+UBTUdxyyeMB5wq8sqlTummAn9V0Jvs7BYpfS3CstqlQ1CRdnX9tcqraFQwcNB98T7/LnKp0cJ+PywhG7s9vjXVXxXp0DHE7qT0lXuK+gIR2g/ydSjV01zZSR8Xdoc26jCbxN6rut5HuZTR/s0eH03xVlCz4B/Q3hYWefDxxua7/s6CAPnL9ijv8DzX8F6DbB9Npwrhvdb5wq5V4bPYb5Lne3lrwKcYDG1+W+k54P9Vw4b/puxs7Pz//IHkvGjBU3hWj4AAAAASUVORK5CYII=",
  8368. 			qm: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA2UExURUxpcdbc4MzO1dTZ3dTZ3s/T2c/T083Q1tXb4NDX287R19HV2+zv8PX29/3+/uPn6b3CzcTI0ZN/xtQAAAAKdFJOUwD////dexCfoCcDaycKAAACJElEQVRYw+2Y4XaDIAyFF2gnEizy/i87SJCCa13i9m9eLAQlHxfsOdZ+fFy6dOmSWPPdvdM063GfDo500yLnG8CfEh3AnxLnQ5bVE+810XYAu4dqiK7m2wH8C4+OKbahcsSfVnQeHTSLjLLNsW0boCE6u5nYbNrNFwe1a6VEVzM3hrUjic5Qc/uUOnyqslsHhosyoutYe/Zek9rhT5oVQNzl4qv4Lgbi92QsIY5UJwRiPUoO5gpiFmDDtsbpHCIXCMsjawnAE2AzjEIgki2kFMRIOEJGLDjEOpPM4UQZvOIiaLxMBKxnGSoEjgqPTmF38QQQHoOgu2RlQDcC4wiMv3XowwgMfrg86YDl+5dvCR/lnjyWJUQ4DczfPxaRngpwDhiZ9UpwCrgcCFRATyUeAaNXOfQFGN7jwkI3O48SAb2n6cNChY7abJ1cW08SLrnIUvZGCT2yVLQKL3aYZcKhvMIhD03xiBeTHugPiNHqgWaFGN6UCKtRA31a6UkSC4BrDsrTZU3KPSzzm7QafjjFWtcJIK3J6IA8PBNJaatrf914xsiBI3KnZGiAkTrcllMcmJfiLREDeXbDKYbrSqDQdD3xXa5J1HLsa98/O164h93Kvke7Uzrguy3spASafwK8a4CSX7BzGZj6rLSL66c0oleVyfRJyYyInipacX6hvzVbae8ymX4G6bvUPA0rTa+WTv5kb1L8J8b0o+4n/s24dOnS/9UX8vFAaEzio+4AAAAASUVORK5CYII=",
  8369. 			php: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcTbUrDrbszvetTXYrDnasjXQqTPIojfTrDvftTTMpjPKpDnZsTPIozXOqDjXrzHGoTbRqjfUre7/++T++Pf//SfCmxm3j1fXt7Hx4UvNrNL78XHfw8T26o3o0eeFKfsAAAAKdFJOUwA9//8c3Xign5/8SMcgAAADDklEQVRYw+2Y65qjIAyGp9ppRxBERcTj/V/mJsHTtN3dMNt/66dAEsjbgE/7jPPxcerUqVNsXW7Zb3WJx12z9E/6vMbyPtP0rcQsTd9KvKbpe4k3SkneR8wWVrL0yb8SM2QkQYGZYEsITnckMUteKX2KsImvgS/EJT4B86XtXhwx2xD5kp3nCwVHaHTnbOJXsuWv2Utd+WOJ+RcLmJOSpREw30T01U7yCx9Y0H0g+W6YIZRsYRxvfODGK/KiQHtqGjsePwU/MmMCi+84GArfgEZ0izBHHecQvzAFQaGyMBTFDDzbV2iuYWhcYBEgB1Ww42Yw1fdoDHDR3I00JhaAs1ndOCCUUS2lzLa2HgNj3TT1OIKLxIruiAorFPQz1GU9muEIx+CHeRxYQFwaUih/dmCVeISTMx1EBl9t4gKD/FAjz6AJoHp2znV1U0/+Z0A/1XXdOaex1hrYvRBtT8H8J8AcUyflBO64A3sQZSmJaOdIYInXDAzbtxIdPVCxYJoWnjQ86hhgCXkgKsoYNEsPkHo0OGN6/KAZglg5E4gSdIRTT/CRqhXEhmJt1+uwKgYYTmvqwdahWr3zXDxQOyDCF2NKwEHK7IhnkdeqMhqIRD9Za6cKjhC/cnCE/cIzOgqo6SrFQhz1DP0gZElG4C1rmEAQVKiR2A1dLzos1AmtyQWepjUgFlBvAqLyvYONWjhC9HuvWiTrCOB9X66la9vWjMCzHurSBlwndTRQaIFVQJPGGUFHqJBD7r4BLbhbFmsGkiUeYbdsFPxwhTV3ToVrfQKToZlxGqbRoRlmwhTNsYFbCsg4P3rY6pNgngWUa4IMjZ6MO0TlNssDEoS6BaLgl1qtrkTRiEt4wJAm9pKUXIuSa30xFUqp5IPEY0CqEOIB1Yo8cNSjFRZxgUrReuzRRlfto5ShgVjALU+9lDyabCBXHOBtW20eLBOaMSaM4HL+gr1gmtlBmG82NjrrHFys14A7MgizGQepbQpuzo7xBfw74lnrNPdd6no3LN35b6TX2/2vuv3gvxmnTp36f/ULf0R1znQ7804AAAAASUVORK5CYII=",
  8370. 			pdf: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABUUExURUxpcf9zfP9ldv98gP92fP9+gf9we/9md/9yfP9/gv9/gf93fv90ff9od/9ref9ve/9ldv/x8f/q6v/8/PlYaP/g4f6lq/63vP2Ejv6Um/7Iy//S1LO+3cAAAAAKdFJOUwA93/8c3Xugn58XiwqYAAACVklEQVRYw+2Y23KjMAxAmzolxXc7tYHw//+5kmxI2tBWMDx0ZjkhMr6dkWoeSl5eDg4ODticmvZbTut151b+xNt5re9Nyl2NrZS7Gs9S7mts5M7GVu5sJKH4KhDbjS1shu2CKA36yj2ZaZ5vbGdNbT9zH+MaW8GFaeQLmcYF4XAbu37J2HKFiparyReu12ta+oOKEztDVXwKP+mKdKV3H8a7ZkWGqmxWihIEoVLT+FyA4tTc4g68VI39LHyGI3yva0WVKl1KzroOimkOvu8rhJNWmY6Eg17IcL0QcFRzkGovofZYc/C7ZahNBuHNbs+wpHKPrscH2yqt4YIBbGlOc4WPYK8rp/w4WhexhPoJem6SeJ7YKMRTDteQdxN2odDvIXRwpRBSjhD6rUJXL/xoPUBynRohjkL0Geh1nWILYblzk/cWQhx0DymGFDFCvqSDFSyhc64YCzKisBvDA1HqsoAvLBmil44khk/EXNesEhIiF1eMMaVaMWa8UahyimRLacy98xmdwM3ZTcKhbE+pG9xHIY+QaOf9JmFGW4hpIJU31npsMZgtJZMP60MJ2GDIGl/cbo3QAs5aUeqNqfe2DtVgax86bCFQE0wZ6lvSERzhpW6hE0np5r198sysEBqL5wm+D/sDlxUZep+73MMJ7CQs5/mLjys0pqSIj4uh8mdM7dTIE8KmCZLXW1MnHma5Qj4sofnrwmZhn3+I0Ph5gvMf7Am2ELjX0z21ZKozJUDDeg24eDaciuH99pXre2W+S52ZOV74b6Tn5vIrzYZfMw4ODv5f/gEm33Cvx+zPHgAAAABJRU5ErkJggg==",
  8371. 			Null: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA2UExURUxpcdbc4MzO1dTZ3dTZ3s/T2c/T083Q1tXb4NDX287R19HV2+zv8PX29/3+/uPn6b3CzcTI0ZN/xtQAAAAKdFJOUwD////dexCfoCcDaycKAAACJElEQVRYw+2Y4XaDIAyFF2gnEizy/i87SJCCa13i9m9eLAQlHxfsOdZ+fFy6dOmSWPPdvdM063GfDo500yLnG8CfEh3AnxLnQ5bVE+810XYAu4dqiK7m2wH8C4+OKbahcsSfVnQeHTSLjLLNsW0boCE6u5nYbNrNFwe1a6VEVzM3hrUjic5Qc/uUOnyqslsHhosyoutYe/Zek9rhT5oVQNzl4qv4Lgbi92QsIY5UJwRiPUoO5gpiFmDDtsbpHCIXCMsjawnAE2AzjEIgki2kFMRIOEJGLDjEOpPM4UQZvOIiaLxMBKxnGSoEjgqPTmF38QQQHoOgu2RlQDcC4wiMv3XowwgMfrg86YDl+5dvCR/lnjyWJUQ4DczfPxaRngpwDhiZ9UpwCrgcCFRATyUeAaNXOfQFGN7jwkI3O48SAb2n6cNChY7abJ1cW08SLrnIUvZGCT2yVLQKL3aYZcKhvMIhD03xiBeTHugPiNHqgWaFGN6UCKtRA31a6UkSC4BrDsrTZU3KPSzzm7QafjjFWtcJIK3J6IA8PBNJaatrf914xsiBI3KnZGiAkTrcllMcmJfiLREDeXbDKYbrSqDQdD3xXa5J1HLsa98/O164h93Kvke7Uzrguy3spASafwK8a4CSX7BzGZj6rLSL66c0oleVyfRJyYyInipacX6hvzVbae8ymX4G6bvUPA0rTa+WTv5kb1L8J8b0o+4n/s24dOnS/9UX8vFAaEzio+4AAAAASUVORK5CYII=",
  8372. 			ipa: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABUUExURUxpcUOv/zar/1K0/1Cz/0+x/1q2/jGp/0Ku/163/zGp/1a1/zus/1q2/02y/0ew/0Gu//f8/164/+/4/+f1/9fu/yek/73j/6TY/xad/43O/3nG/21bnhoAAAAKdFJOUwB7//+gJ92gn59E+c9oAAACbUlEQVRYw+2Y27aqIBRAd5iVsLiICKT//5+Hi5hmdcD2wxnjOIPF4jZdPXX5+Tk4ODjIpj41b6l3+Br5iUupsr5I+avGVB99GvcaayqpI4ioz2MWJnGl0HiiNCpfIuNeibFZ6OQ6ysdqgbGhWeQbvZDQGMjCQOYlUmZsCHFXSIoTNEWvjXu5xjNZQVOgC3Hkskv4ict+YfXa2GQJq4r4lkI1z+UoSUhj9w+p84QrSEqGvpeLaeC0QzhBTdca8bx63i+0bavGvULmG1sNUrXKIu7SxU6ZcLoV7jM2qN5ixKJwkrJMIVtRxWG0g9Z8teQpEKZbZLB2kAzf9WiNsXL9uOIKiVVd23bKDLZ3icss+UpovMWTxlYZUii8hZPcvRgfZs+MkYKFPR/YLUfI3VkP41RtfL3Ugk/brmcKw3F3YdwU2A0a0q7nnC0MmI1QUeBLbkVC4YTzKzZViS+EYLpnFOd7hOK9UO4QCi6CUsCgNkYreNp2TeQJEzCqFyWKJdlC7hvwPji6h1d1hkSVr7O0QoGNCjqlQvdDp/phT4WTcOyjxvuS+hshCKM2GATlQogd9FTign7UMD0NMoUw4S4gbZ+MvdUo7PltgDxhOu3QyARj7/Gj4RoWFFXoC0GaGacydhhsSEgoML2FYiEAvovRjuzuAPdBxe8YSiu8wpPRox0hWfvyhWgOgLHWGDnc6JLZFbJrltDfjneQv4fiEJdR3ExZlhB9BFazXxCif0aIF/ExxmQKOE94SofxQxrTqWMHig3lfIOt8Qb0dpr1U+WKs8l5xw7I9UHmb6n6+qv1xT8xrn/ltOffjIODg/+WP3HMcIG4JOLbAAAAAElFTkSuQmCC",
  8373. 			doc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUxpcTSL+DmO+VSd/k6Y/Vmg/kOT+jSL+UeW+1uh/1ig/k6a/T6R+l2i/0SU+0mX/Oz1//n8/y6G99fp/3ex/J7I/77b/4u9/gFOo+kAAAAKdFJOUwD///8n3Xugn58WcbRuAAACn0lEQVRYw+2Ya3ekIAyGCzozHQFRUPz//3RzQaSXbYPtOfthfccoCcljEM9pZ15eLl26dEms/v78q/oTvKf7SrdWZH9z7leJT+d+ldhTzQCfooH9oUw0Ee8D1qPyZXBsOxDdFuJzkKiBKAM2EIVAObEGdtlqv0SkRAB2XTfgQSMao5M/FKHpmxDYvdHO2G9S69YE/FD+5i5szxMdfq1eBDSYasiMYY8DJkcPuwuAr12uxNO2LgaHGWCM29Yhe3g7yZpfTa41xq/THJ3BNunUGZ8gMnAAs15FQBbUjHGe57W4IDfN87T44suAXUZ6WwFZCwDnZSx+S4cA1AeQnwEBp2X054DjAVxiXPclzyeAno4d6I2DwbT5/Rky0IuBnnjeH8AVrrC7PgPtniED+l0Z6D1txTwn7w8gp5wEJuLh+1KA/jRwWv2GFGwymR8CFQEH7DMmRG0ZOLYCucAyEFFx0REvWwGOcuAIgnw4qwgrRdCUVNhgMEFgQiBO4yEGkqyielB0IahEw5mBWSeBcQ1KB7fjfw5MXlmrw5rdRf8QGJegrbVqTNltBtrRVsC4agU+tLjECkhJIiA0A+koBqYBGsSI4kUD0I6cJAVSOjw12ljcEcJDi0PKQBKkSDvkfAJGeAU138PSy5iBvIYmIO1rTAu8MiUwJogYVVIkwMcBVAb+jFKDOQCL3lZ3BOyjCQhLROkKSBHVDNRQSqb28gyliOIImQioK0ExC2E5oqp5GZBrbVX3PmJ3p7nD7/TPgEpXD0oVU8XN00oGpEqsUQc5UxWb2k0EVG/F2Ix4LwnwXld+AtF1WPIfbK8aJPqq8pDzJCsG4YICV4S9NByUUFwt/C7VP7AgUBGcw0cmTQZhf/wjxuNb3c/8mnHp0qX/Vn8A5AVWOPvxckoAAAAASUVORK5CYII=",
  8374. 			xls: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcYXMX2m8Pmm8P3zJWYbNYXvGVGu9QHrGU4jOZITMX4fOY4HKW3fET3LBSm+/RnrGU37IV2u9QWm7P22+Q+r94PP/7dv2zfv/+GGyNlmsLsfrtaTZiLPhm5TQdN9r514AAAAKdFJOUwB/e98c3T2gn5+4KvYSAAACu0lEQVRYw+2Y63qjIBCGmzRtqhwV1Arq/V/mDgMeYtLtkM2/9ROBGWZe0aB96NvboUOHDpH1eSp+1Gc+7lKwv+njksv7YOylxIKxlxIvjL2WeGIvJhYlY1BYiRU0ZahZcqYjh1ggJCqmL8bcCVejE4tyL/awSybeA38QlXgL5PsuzyYWMYmvhfNECS3nWDCGRiw4T0lr2bjwLCOSnyjAL56hz2wg2yNuHadM4NA0vpyNCs6pa7ot8osIrGI6a76/Wx96FVZ8Asc3OmIAEVghDw7WQX47Qq8KNo+212ihjwSsFsmxjcQo1oHZdpNYIzKBVnokDmiVvgV1Q/88UPQCic0EhvZN5Cn9DDAmyb5Kt1lV8Is3TTc4k3iaDNRah/DQaOngwYWJMZgg8MYeblhrHIOWDFxl3QREmKMeuq4bVS8TLooIrDZE44bw7FpvpnGYeYvyZ6iF6cdAbCbn3J6XCxSR6JDYTb2RuzEaUKQMEbLgkH2a45A8cw0tDXgjAMve+kTc6wmgECOsPhGJ7BXA8D43ggdi05X/DsTvQ8Nc6fFN4c8AJRyhBOEXsPXKwAJHYnimOChzZihThmRxUVe9hAWORB8vJCOXBJSAk1E8vMiN186KhTjKTQAFeMVwgVn43HzpDFgKliMShwQTdOCsMgC6CXkr0as1IhMoPHxhht4kgnXKw1+9wa4R1yygMnoYJ9cvM6qdHMfB1PnAhDAufGHU5gpgoiP6FA2oIFBFGUi30UQIOmqFXaXIwK2supW1N5584C8iAu+mdW+kmga04caCQpqdLWXTwDwaeiSgzRAVWGNZzrVb12tTk4E1CKuUbdGyyZWGoijAc30nu1xhrzNl8/0o0dSPRdoGXGuTVMezNvVibioQ5Y5hf/u+JPygefiduJe6XA1JV/qO9HK+/qrzE//NOHTo0P+rP7x4jQVHYv00AAAAAElFTkSuQmCC",
  8375. 			ppt: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAByUExURUxpcf+ubP+iWP+SO/+nX/+lXfyPQv+SO/+dUP+xcP+ua/+VQP+jWf+XRP+cS/+eT/+UPf+ZSP+gVP+qZf+saP+SOv+mXv+wcP+ta/+ubf+oYv/79//x5f/m0vmEO//MpP/Sr/+9i//Zu/7Dl/ufY/2zfqeIp1YAAAALdFJOUwDdPXugHPygn596VuVMqAAAAl1JREFUWMPtmOtyqjAQgNuqUBQSEi9cDHJR3v8Vzy5JJHi03dAz0x+HD3LZTfIZ6tCZ+Pa2sLCwQOZjG73kw1+3ibKveN/4+t6z7J8a7f6Kp7bC27gp7mTFC7yM28nS/OfGKC9y0OSIafJi6A1FJ3IPY5SToBuj/JAfDkMxNSzHzpDN9e1jXB+IUI1/CfemjJGfcb0HDvbe23rvZGxMM673dCKqsJwsK+916SYQyn+KdemQVec7qmqy8oGtr7A5T6kfhGsP4QlLd/7aSBKeRuJueFSNUmi8nspxfJ6wuWn6Gv+gleM7neYI1fViucIeVTtLGOv5slMg5FITXGCLqo6dCTRhfIoRqLVQ2lA0Sqkujk0MGZLQrEZAqKwQ4ChspDOBIvyMR2QzEUr4plXNnQmfnkI+FbYQVf0coTRlFGZt22KgOm78UlKFckQL4VuulaHqA2dczhFWICwro6uuAfuJkDXVIJSNfvu69jLZIFnIXWHLZXKrkf52Cbi/kHOORmg4q2FbLePMvnwJw5HhA3GcU4UWK+QiQATjD/gKhRW+4idCePCZQjaihQK7nLnYyFeYjMKnPjZnh90TIfMSCsG0QrDk2lVdD5EQOoE9HDYTBE2IizRJ33RNkYgJzOkTdzgKg6zNggeh8BSGxqWF8HYEj5bkXtGEiUsa7IYWDM8IvYXf8GvCHZLglZgIG33ZLvZ2JOHOg98Vpvc2HQOHNKUJV6kHK8rh+8m64ysh6RgQpsdjaq7hhmK6OmeGIU95YjjfBkciAfEstQlpvpB+It2swm9Zzfg1Y2Fh4f/lD1FNqKcd3wCLAAAAAElFTkSuQmCC",
  8376. 			png: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcf+ubP+eUP+iWP+xcP+nX/+lXf+SO/uPSv+dUP6kX/+XRP+VQP+SO/+jWf+oYf+hVf///f+mXf+tav+ubf+rZ/+eUP+wcP+pZP/s3P+aSf/z6P/48v/UsvqFOf+6hP/jzf/Hmv/cwS4F5mYAAAALdFJOUwDdez2foByg/p/2onNSOQAAAh5JREFUWMPtmNuSoyAQQGeMUaZUxBveRfP/H7lc1VRJptF92Kr1INqtcKqNSSrk6+vm5uYGzMPzrTzcdYFff+I7cPV91/VfNZr6ykNb6WwMypW6tOBk9EoALka/KMtCTCr05OKi0S9AwI02YXXW+KwqMVluMqw4SimjtUGNzwoK0HgobC4Yn42iat6DanfKnPZdhCAersK0KcfXWOtYbPtrTeNBhGnapCt1n2VZX6cWnjDhjjETjNeFudrhWQpfeS7PqJ5vI0DCXJLKPVmkcMH5MQ5CBaGvIRtehIhkGVp2VmgqwgixhSEkciYeDz4jxDkWyD1F0zQhKrJZ3zzG+jKPQMLNJiAd6ogImHw1+1UngQh/8DHqefMS9/ycFhJVIC+ROAvJnrodRn7ARBfIS+TJirOwEp88JsTGx0skF4Tyfd3nZCtQ+c8KG3OXW4FZ1lJHIeUQ1dVXQzY0vMDBbLJEKjsFCxX1oOmHPe02wlHYDsewk0LWW5jPCfPZJuyZm7BTbWmtzHoMTNgpcPuBUg+CCSkfSTv2wTdXskKoUFGMdhhyqlASTcjOlLgLu3iyk0QOwjDqePsFfgeiA4VqykefCUK40KZ457wwuiaMBZFokc7EQTUTiigGCWMH/m1hAhR624TETFSh7Em8Np5DfsE+EgdAy4BQD473M9+SNYPcMV/fImh9CLiWCkKYL4SvSAMv/BXvxL8ZNzc3/y9/ADVfok94AIhIAAAAAElFTkSuQmCC",
  8377. 			html: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcTbUrDrbszvetTXYrDnasjXQqTPIojfTrDvftTTMpjPKpDnZsTPIozXOqDjXrzHGoTbRqjfUre7/++T++Pf//SfCmxm3j1fXt7Hx4UvNrNL78XHfw8T26o3o0eeFKfsAAAAKdFJOUwA9//8c3Xign5/8SMcgAAADDklEQVRYw+2Y65qjIAyGp9ppRxBERcTj/V/mJsHTtN3dMNt/66dAEsjbgE/7jPPxcerUqVNsXW7Zb3WJx12z9E/6vMbyPtP0rcQsTd9KvKbpe4k3SkneR8wWVrL0yb8SM2QkQYGZYEsITnckMUteKX2KsImvgS/EJT4B86XtXhwx2xD5kp3nCwVHaHTnbOJXsuWv2Utd+WOJ+RcLmJOSpREw30T01U7yCx9Y0H0g+W6YIZRsYRxvfODGK/KiQHtqGjsePwU/MmMCi+84GArfgEZ0izBHHecQvzAFQaGyMBTFDDzbV2iuYWhcYBEgB1Ww42Yw1fdoDHDR3I00JhaAs1ndOCCUUS2lzLa2HgNj3TT1OIKLxIruiAorFPQz1GU9muEIx+CHeRxYQFwaUih/dmCVeISTMx1EBl9t4gKD/FAjz6AJoHp2znV1U0/+Z0A/1XXdOaex1hrYvRBtT8H8J8AcUyflBO64A3sQZSmJaOdIYInXDAzbtxIdPVCxYJoWnjQ86hhgCXkgKsoYNEsPkHo0OGN6/KAZglg5E4gSdIRTT/CRqhXEhmJt1+uwKgYYTmvqwdahWr3zXDxQOyDCF2NKwEHK7IhnkdeqMhqIRD9Za6cKjhC/cnCE/cIzOgqo6SrFQhz1DP0gZElG4C1rmEAQVKiR2A1dLzos1AmtyQWepjUgFlBvAqLyvYONWjhC9HuvWiTrCOB9X66la9vWjMCzHurSBlwndTRQaIFVQJPGGUFHqJBD7r4BLbhbFmsGkiUeYbdsFPxwhTV3ToVrfQKToZlxGqbRoRlmwhTNsYFbCsg4P3rY6pNgngWUa4IMjZ6MO0TlNssDEoS6BaLgl1qtrkTRiEt4wJAm9pKUXIuSa30xFUqp5IPEY0CqEOIB1Yo8cNSjFRZxgUrReuzRRlfto5ShgVjALU+9lDyabCBXHOBtW20eLBOaMSaM4HL+gr1gmtlBmG82NjrrHFys14A7MgizGQepbQpuzo7xBfw74lnrNPdd6no3LN35b6TX2/2vuv3gvxmnTp36f/ULf0R1znQ7804AAAAASUVORK5CYII=",
  8378. 			js: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcUOv/0uw/zar/0+x/0Gj/Fq2/jOp/0ew/123/zKp/1S0/zqs/1Gz/123/02y/1i2/kWv/0mx/0Ct/1y1/vb7/1i2//7//zel+zOe+e32/9zt/5nN/ieV9oDG/avZ/83m/77h/2S6/HhIljsAAAAKdFJOUwB7Pf8c+92gn59dd850AAAC8klEQVRYw+3Yi3KjIBQG4CbGpgaMNyQIiJf3f8g9B8Rqp9mCszO7M5u/Kgj6iRrb2Le3V1555ZXgnE/Z05zjuUt2/13eL7He+/0+457zlpk/i1jRjo/ZCQC2Hx6LH+MF92EOhIJt9LtviRJPFsMgY0vPr2aUmDmFlY5i68q2ZBFiVpYcf3jpwjnDFoZ15mZsChczRKxkC86Xlc+4erCY+T34TvENnPuxh4rZdiR8M0BeLlfCwcFiRqxGcOJYJxB3AEJ4STiuEuzhYWJGvqYkz5IdA58FDnQ+AOb5bOY8/948BYAfFoEJZ6gWWraK5S5kaffLkHP+yPepxsejHep9I1nKj3iwThWAOi3y7xIIbnYuPOiHCH0Fzm6jIBC2LZZ9IJUHi2JpsYsocJeqW8Fv8g+AtQcrEOuDYF3Xbl8oNmBtJiXlONxtb23nILDepfEgmdr2AdVWGduBxz0Cpp1qARTVAFwrJSwVX3vjwapZwEI+HnLSelKtNHFgZYNYBROCLYB3BLu+F2YYWGW7YItgsK58PJjjpTRCdL0QYu2NGOFXMJ3wGqrBFEI0fwIUbJT2Jkv96R0AGw/SjuhR2Q+OjgWbBqHakAZCEZRaNKLrajPgMOUM/bBFEw5CcngqNJQilwAaATTckG6GS9kOjU8QaLekGh2dixnPWDHBBk0o3GRzEBRGoQgBTw6dgAdPDXda2D8INBqE09Mo2siRdWKQ9smDRw/GSw+MsOv0KG3UxPoOnmV7i/GzqLsVvAaPkMJTxvQ0juOgU/AoHGBSSqpxgseFokgDwSsFjuIt7fsUvlqmPXo0gWduNsbMokcPN4FFGOgCJ927oOcPsa65xIA0ARIjbsnSkMDvBZHQo+AC7ISdFgwmid8xwfqmZjtcxdWDwGQNXebniQR/zl8Eb3Za8rV2s/MtEDwlN4hdLFkbkm2LXQn5Bnu+hQbIoNeAa7B4CzljeL9NQ7008F3qEjjGa/gb6eV0/TGnA//NeOWVV/7f/AJAsosfySCrjgAAAABJRU5ErkJggg==",
  8379. 			css: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABaUExURUxpcXvGVGm8P3zGVXzJWYbNYXbDTWu8QHnFUofNZITMX3zHVXTCS22+Q3jEUIHKW4jOZGq9QHDAR////mi6PvP97pbRd/v++tXwx+b33afbjV2vMrznpsnquGjfsnAAAAAKdFJOUwA936wc3Xign58XA1ZcAAACuUlEQVRYw+2Y2XbjIAyGm540qc1qAl7j93/NkQTEdJsKtxdzzvg3iSVAH8JRFufp6dChQ4fYOl2aL3Wqx50b+ze9nGt5L9b+KrGx9leJZ4ppv2C11KqIlxTUUnib6akn2TXEBigY3RKtJdncgRb1VBCb9o0Ikq0Hvob4Dvil2EQukE18CzSfmlXEJoaaTDCtMYmFZ2Oo0SCP2BiTgrZWdNGjjUjTsIEP2TvIRrsv7KRTJbDtpwCaKEkb7b4EXhjA1zJgHG63YYiQfhrQG8vxVz5QECMAYRrv5Oj7OAEx9MUEJlCkJhA49cJLjJZe9BMChcnju4DjsihtBEgtC1wCAAph4sEDik0EVJpsYGqVgVk1QJOBMjkgHYFGxGbErgzl5uufZPgZUBJQ7wbqeYC6ewcc5t1AM0PdDfcMBI5coRCn2USPD9QUYMcAvGmW6FC8lj0uEcYWHc0F6igxwwW8DasjJ/ZJhynewpzmaDYQAbhh3LEuRHuGrHWaVJOh1PcplNmgMOsw3p2szRCB3vf4oq7ybYLD2HuvdwC18wvUIZRNAaSyWbyrBErasZaKCttFj9agwu6kTBeFCZQQgA2qJAJpAVQEYoeMs1hAuSkCNz8Ciwk7gMOofgi8FvHx83DrUONtV4auBIbZJldYKsPe1QJdIjpn4TtkCGHUDnvGEPCzwbo0DBOunC3jRJJ0ag30VrPo2onex6tym3jAjHPOt+sEWuMS0bY+DspaIEotvp/n2SDDeQFmr5a9GZL8QurQ7qLtdwEfQcqDusJWJY8LVBClElahMj06xRALqB5y6jtVAtU/Duw+I3TpGQ9oHOAF5r6TSo8PHYrzC/bUcQVI1m3AFSd7FpKzY7i/fQaaj0Sf0dsCNOLpeGbeS52vnY/K52R3yeji6cq/Iz1frt/qsuPfjEOHDv2/+gP0toi4gXoofgAAAABJRU5ErkJggg==",
  8380. 			epub: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcXXDTXvGVGm8P33HVnzJWYbNYWm7PYjOZXPBSmu8QG6/RXPBSoHKW4TMX37IV3nFUYbNYonOZOv+4fX/7/z/+1utMK3gkuL412O1OFOpJ7ripNf4xXK6TKHWhX88Tv4AAAAKdFJOUwB7Pd+gHN2gn59lNj8pAAACeklEQVRYw+3Y2XaqMBQG4GK10gxCgDII8v6P2T0kMhR7dujl4QcMCcm3Ni7tkr69HTly5Ig4pyR9mVM8d0mL3/JxifU+Xkhup5jyQudmkpuNuEjx4ii0fHlWUIt7lJiwsZVpOEZMnSQRYnpzsGH8WmyphxdcGJaL6U0WsSgFxeIStOtTGy2eeZGddmu9gq21tNMcmXi21i+adtsMQ8MdOm5M2lQMrtKUVVU2GxdO+8Cm/IJsickukL1N8SwEM9wzS2cZeVXlRT9uuZGBmfey7OmVfU9Nk3HoKhwiMFuEvaaum4XoEw8G736ve7rr8W8gfF64PqXqrsX3sv8TSF4Lns5zPWKF7ZjvAHPcYZt5jFft2Bm+RpsYpCBRVegpxqEz1p3BSzQHDhFI2JPg+3162LGjYy4CRKKt8AuM9c086BRDC+8kJwI0AxDVsPYMeNAZIsBPD/ZYYfsAIh/beX34l6c30aDOeyxrKHyB8/rKPtPxYP3AGksQDbxrw8J71FGggS033T2IpstHu/Du+OHBaZ+yClei6+7wVf7pQWSgMQYPTWJZloPt6g48N0CnJY9n5EYEhsn5JN40jJBXes+TQjBkEp33qD7ttXhwLi69kFhwJm568eAkbnpScL5IPcXJ09EVatq4CSJ5ylvabyKQpkKoEC/Cb5vg8bjhCTJQMxeCd62KQqG3jhA0k0ivCr973gvXTAz4I6qr6436ZOBVb4lqi9P6KgSV5vXzVz8YXvlEDoZlrE2KmholrVC9iN4Yk4AJLdW0XqvQeO454HXJL9iTiojoMeAq9yR3DM+371LvXfgsdRHWeJU/kV6S6z+T7PhvxpEjR/7ffAMGOojXQYbbiwAAAABJRU5ErkJggg==",
  8381. 			psd: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcUOv/0uw/zer/123/0+x/1q2/jOp/zSm+Uew/zKp/zys/1O0/1e1/0Ku/0+z/1q2/0mx//7//164/vf8/9vw/+r2/yie86HX/sno/7Dd/5TR/W6//H/H/Eyv911ykpAAAAAKdFJOUwB7Pf+fHN2g/p8jQekrAAACx0lEQVRYw+2Y7WKrIAyG12JXJn4xEQG193+ZJwnYOdedE7r9O74qBQyPARNb+/Jy6NChQ2ydT8W3OufjLkX/N71ecnmvff+rxC/+dT8jXnB8162sLhK7T/As4glgHR1xT0Vs0iW6PGKxYXxo35FBJGC9B37p4BOLdXhd42e9QdaxXecRi5opLpEN5BITsKL9oao8YkGoqkpIrJAIRY2azuFR8IB31bvPXQuY5zzgA8hOJwbwbTWevY3yof+GV3Hm/NZG29ab9yhjrOsq6E57C2Ub9zcWMEoP7x8yvqPOalOicoANAu0AsuCqce0j5QJNmPt+cQMQ7fwzoI7AaURNdueizgRq3CJQKiXl6GH2Xn/QyIAN1BqsdQS6BmvSAXDQO6ERF6hX4BSrAYGNnp3HqJw1eYhlDlCRh1TtcA2DmixFJkTl3ct8IE65whC3S49YSzG0PAt8H1wIAaPGeFxI46cJmiY8DYS0M4YyZZawkGaGIJpDmJs8YANbAqZk9ouUOPFwgyAapWySEQvYRBHQrI+bUSoKb+unVkoVTXTDA9LFCWiG4JxbejnKppG0mHiTa4JpKHM9TKk3Iq+RcvKDoRvUJptngBJFU1RyvM3BU14/AxQEVI1aByNxHG/OYtb8ALiqcq5SAlYTgW0+UO2BkHjWzbqZTPRQsYEwS4Xzi0BFY2Gb4R5jFGEawlMNjOAcDxgFgWzspO6S0xC/tYwNcJsQp9Q1B7h4COgNEHLOD9YO3kUeigO8rgB5629SbYljvSzLfBtH8QxQYJBsgfhdEKP8zssCAlEKsQViD4V5arGBQgmBKEGVeNBwkZpCxS4hWECRoWyg+m3gb3lYRvPyXpapsjlRZnlYpm2tf7pEmcqSBzyVDyUe9nJ+wZ73gx+jolivAdeSLc6M4f1WcnmS+S51Yfp45b+RXk7Xf+r0xL8Zhw4d+n/1B13vfAhtdKi2AAAAAElFTkSuQmCC",
  8382. 			dwg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABaUExURUxpcXvGVIbNYXvHVHzJWYbNYXbDTWu9QHrGU4jOZHLBSW+/RYDJWmy+QoXMYHzHVYjOZHfET2m7P4LLXf3/+/T+7u3+5MXrsaXbiVyuMZjUeNb2xOP81bPjmuZ7vy0AAAAKdFJOUwA9z1wc33ign591Bg7OAAACdUlEQVRYw+2Yi3KjIBRAm51UI4gKxMei+f/f3PsQNU3SXtzOdGfWo0W4wBGFau3b28HBwYGYU1a85JSuOxfNZ/w6p/rem895TzQWTfOtxjP1qWCDtJoLK1WyMcM+VUUu1pJ3ls6nSDEW1UpTvSLBWFRf0iQZXwn93jFuhd7fK/2SJhgL9Hh0ecp5P4tn3xzwYmPhX0En2SL7nXkirEIPNA/xspAIL9Cw9CUmsV85dG3bBcjNgSUjeVJcykeG9nrtAmX9/MNJtk9Yk7B5cqbLvymsdwjr2LOmBIVtU3OMQ9xGJIQOQHSFGzBegR5zoV4Qj7DeQiumbVGIx26gEXICpAvr4bqlHe5r04WWhB1BQvsdwo5uX4/GvxCGgejBMv4mJpwZjoY0IY7C9nSZNB+jI1DY8tXfsJGVCi3Rt8tUjBoDelrn5mbBJxVi29qqG60XXDLtqFjYXudQd1N8VqEQUUNPTNA/jhCyE0cHRUNMEiq+cbiwV2E3cFTvGKHjqQ34bB0Jespy1NlkIQwR0aG7I2iOJwmVje1BG6atbwpQxbUqZYRq3ej9NIJ1GjGHwk21SKgiFndL7xQU0jvFLlWERJhHE3ehuQnTNI2WZmOxUQuhcDsK44xzJCx5vdyRJFzRYQShf6xQ+U8J9VOh3inU4NMAaTULccWUmopUrRQ3kAkfqQJgn1TsFBpaO+77hHp+xOwXmo9DhNVoOLipMlKh0dibd8waLq7HWDBGJDQJ/IgwM3zHIm5JlpQ33CV/wZ6wj1t7UT4KaLY5R4noMyB3EXN32BRiRHLF8H2rnRAt/JY65zJfLv8iPWf5l2Q7/ptxcHDw//IHYWiLelDcDu8AAAAASUVORK5CYII=",
  8383. 		};
  8384. 		/* 办公几件套 */
  8385. 		// @ts-ignore
  8386. 		Folder_ICON.docx = Folder_ICON.doc;
  8387. 		// @ts-ignore
  8388. 		Folder_ICON.rtf = Folder_ICON.doc;
  8389. 		// @ts-ignore
  8390. 		Folder_ICON.xlsx = Folder_ICON.xls;
  8391. 		// @ts-ignore
  8392. 		Folder_ICON.pptx = Folder_ICON.ppt;
  8393.  
  8394. 		// @ts-ignore
  8395. 		Folder_ICON.dmg = Folder_ICON.ipa;
  8396.  
  8397. 		// @ts-ignore
  8398. 		Folder_ICON.json = Folder_ICON.js;
  8399.  
  8400. 		/* 压缩包 */
  8401. 		let zipIconList = [
  8402. 			"rar",
  8403. 			"7z",
  8404. 			"arj",
  8405. 			"bz2",
  8406. 			"cab",
  8407. 			"iso",
  8408. 			"jar",
  8409. 			"lz",
  8410. 			"lzh",
  8411. 			"tar",
  8412. 			"uue",
  8413. 			"xz",
  8414. 			"z",
  8415. 			"zipx",
  8416. 			"zst",
  8417. 			"001",
  8418. 		];
  8419.  
  8420. 		/* 图片 */
  8421. 		let imageIconList = ["jpg", "jpeg", "ico", "webp"];
  8422.  
  8423. 		/* 代码语言 */
  8424. 		let codeLanguageIconList = [
  8425. 			"htm",
  8426. 			"py",
  8427. 			"vue",
  8428. 			"bat",
  8429. 			"sh",
  8430. 			"vbs",
  8431. 			"java",
  8432. 			"kt",
  8433. 		];
  8434.  
  8435. 		/* Android安装包 */
  8436. 		let androidIconList = ["apk", "apkm", "xapk"];
  8437.  
  8438. 		zipIconList.forEach((keyName) => {
  8439. 			// @ts-ignore
  8440. 			Folder_ICON[keyName] = Folder_ICON.zip;
  8441. 		});
  8442. 		imageIconList.forEach((keyName) => {
  8443. 			// @ts-ignore
  8444. 			Folder_ICON[keyName] = Folder_ICON.png;
  8445. 		});
  8446. 		codeLanguageIconList.forEach((keyName) => {
  8447. 			// @ts-ignore
  8448. 			Folder_ICON[keyName] = Folder_ICON.html;
  8449. 		});
  8450. 		androidIconList.forEach((keyName) => {
  8451. 			// @ts-ignore
  8452. 			Folder_ICON[keyName] = Folder_ICON.apk;
  8453. 		});
  8454.  
  8455. 		config = PopsUtils.assignJSON(config, details);
  8456. 		if (details?.folder) {
  8457. 			config.folder = details.folder;
  8458. 		}
  8459. 		let guid = PopsUtils.getRandomGUID();
  8460. 		const PopsType = "folder";
  8461. 		// @ts-ignore
  8462. 		config = PopsHandler.handleOnly(PopsType, config);
  8463. 		// @ts-ignore
  8464. 		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  8465. 		// @ts-ignore
  8466. 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  8467. 		// @ts-ignore
  8468. 		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
  8469. 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  8470. 			PopsType,
  8471. 			// @ts-ignore
  8472. 			config
  8473. 		);
  8474. 		let animHTML = PopsElementHandler.getAnimHTML(
  8475. 			guid,
  8476. 			PopsType,
  8477. 			config,
  8478. 			`
  8479.     <div class="pops-folder-title" style="text-align: ${
  8480. 			config.title.position
  8481. 		};${headerStyle}">
  8482. 					${
  8483. 						config.title.html
  8484. 							? config.title.text
  8485. 							: `<p pops style="${headerPStyle}">${config.title.text}</p>`
  8486. 					}
  8487.           ${headerBtnHTML}
  8488. 				</div>
  8489. 				<div class="pops-folder-content ${
  8490. 					pops.isPhone() ? "pops-mobile-folder-content" : ""
  8491. 				}">
  8492.           <div class="pops-folder-list">
  8493.             <div class="pops-folder-file-list-breadcrumb">
  8494.               <div class="pops-folder-file-list-breadcrumb-primary">
  8495.                 <span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
  8496.                   <a>全部文件</a>
  8497.                 </span>
  8498.               </div>
  8499.             </div>
  8500.             <div class="pops-folder-list-table__header-div">
  8501.               <table class="pops-folder-list-table__header">
  8502.                 <colgroup>
  8503.                   <!-- <col width="8%"> --!>
  8504.                   <col width="52%">
  8505.                   <col width="24%">
  8506.                   <col width="16%">
  8507.                 </colgroup>
  8508.                 <thead>
  8509.                   <tr class="pops-folder-list-table__header-row">
  8510.                     <th class="pops-folder-list-table__header-th cursor-p">
  8511.                       <div class="text-ellip content flex-a-i-center">
  8512.                         <span>文件名</span>
  8513.                         <div class="pops-folder-list-table__sort" data-sort="fileName">
  8514.                           <div class="pops-folder-icon-arrow">
  8515.                             <svg
  8516.                               viewBox="0 0 1024 1024"
  8517.                               xmlns="http://www.w3.org/2000/svg">
  8518.                               <path
  8519.                                 d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
  8520.                                 class="pops-folder-icon-arrow-up"></path>
  8521.                               <path
  8522.                                 d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
  8523.                                 class="pops-folder-icon-arrow-down"></path>
  8524.                             </svg>
  8525.                           </div>
  8526.                         </div>
  8527.                       </div>
  8528.                     </th>
  8529.                     <th class="pops-folder-list-table__header-th cursor-p">
  8530.                       <div class="text-ellip content flex-a-i-center">
  8531.                         <span>修改时间</span>
  8532.                         <div class="pops-folder-list-table__sort" data-sort="latestTime">
  8533.                           <div class="pops-folder-icon-arrow">
  8534.                             <svg
  8535.                               viewBox="0 0 1024 1024"
  8536.                               xmlns="http://www.w3.org/2000/svg">
  8537.                               <path
  8538.                                 d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
  8539.                                 class="pops-folder-icon-arrow-up"></path>
  8540.                               <path
  8541.                                 d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
  8542.                                 class="pops-folder-icon-arrow-down"></path>
  8543.                             </svg>
  8544.                           </div>
  8545.                         </div>
  8546.                       </div>
  8547.                     </th>
  8548.                     <th class="pops-folder-list-table__header-th cursor-p">
  8549.                       <div class="text-ellip content flex-a-i-center">
  8550.                         <span>大小</span>
  8551.                         <div class="pops-folder-list-table__sort" data-sort="fileSize">
  8552.                           <div class="pops-folder-icon-arrow">
  8553.                             <svg
  8554.                               viewBox="0 0 1024 1024"
  8555.                               xmlns="http://www.w3.org/2000/svg">
  8556.                               <path
  8557.                                 d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
  8558.                                 class="pops-folder-icon-arrow-up"></path>
  8559.                               <path
  8560.                                 d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
  8561.                                 class="pops-folder-icon-arrow-down"></path>
  8562.                             </svg>
  8563.                           </div>
  8564.                         </div>
  8565.                       </div>
  8566.                     </th>
  8567.                   </tr>
  8568.                 </thead>
  8569.               </table>
  8570.             </div>
  8571.             <div class="pops-folder-list-table__body-div">
  8572.               <table class="pops-folder-list-table__body">
  8573.                 <colgroup>
  8574.                   <!-- <col width="8%"> --!>
  8575.                   ${
  8576. 										pops.isPhone()
  8577. 											? `<col width="100%">`
  8578. 											: `
  8579.                       <col width="52%">
  8580.                       <col width="24%">
  8581.                       <col width="16%">`
  8582. 									}
  8583.                   
  8584.                 </colgroup>
  8585.                 <tbody>
  8586.                   
  8587.                 </tbody>
  8588.               </table>
  8589.             </div>
  8590.           </div>
  8591. 				</div>
  8592. 				${bottomBtnHTML}
  8593.     `,
  8594. 			bottomBtnHTML
  8595. 		);
  8596. 		/**
  8597. 		 * 弹窗的主元素，包括动画层
  8598. 		 */
  8599. 		let animElement = PopsElementHandler.parseElement(animHTML);
  8600. 		let {
  8601. 			popsElement,
  8602. 			titleElement,
  8603. 			contentElement,
  8604. 			// @ts-ignore
  8605. 			// @ts-ignore
  8606. 			folderListElement,
  8607. 			// @ts-ignore
  8608. 			// @ts-ignore
  8609. 			folderListHeaderElement,
  8610. 			// @ts-ignore
  8611. 			// @ts-ignore
  8612. 			folderListHeaderRowElement,
  8613. 			folderListBodyElement,
  8614. 			folderFileListBreadcrumbPrimaryElement,
  8615. 			headerCloseBtnElement: btnCloseElement,
  8616. 			btnOkElement,
  8617. 			btnCancelElement,
  8618. 			btnOtherElement,
  8619. 			folderListSortFileNameElement,
  8620. 			folderListSortLatestTimeElement,
  8621. 			folderListSortFileSizeElement,
  8622. 			// @ts-ignore
  8623. 		} = PopsHandler.handleQueryElement(animElement, PopsType);
  8624. 		/**
  8625. 		 * 遮罩层元素
  8626. 		 * @type {?HTMLDivElement}
  8627. 		 */
  8628. 		let maskElement = null;
  8629. 		/**
  8630. 		 * 已创建的元素列表
  8631. 		 * @type {HTMLElement[]}
  8632. 		 */
  8633. 		let elementList = [animElement];
  8634. 		// @ts-ignore
  8635. 		if (config.mask.enable) {
  8636. 			let _handleMask_ = PopsHandler.handleMask({
  8637. 				type: PopsType,
  8638. 				guid: guid,
  8639. 				// @ts-ignore
  8640. 				config: config,
  8641. 				animElement: animElement,
  8642. 				maskHTML: maskHTML,
  8643. 			});
  8644. 			maskElement = _handleMask_.maskElement;
  8645. 			elementList.push(maskElement);
  8646. 		}
  8647. 		/* 事件 */
  8648. 		let eventDetails = PopsHandler.handleEventDetails(
  8649. 			guid,
  8650. 			$shadowContainer,
  8651. 			$shadowRoot,
  8652. 			PopsType,
  8653. 			// @ts-ignore
  8654. 			animElement,
  8655. 			popsElement,
  8656. 			maskElement,
  8657. 			config
  8658. 		);
  8659. 		PopsHandler.handleClickEvent(
  8660. 			// @ts-ignore
  8661. 			btnCloseElement,
  8662. 			"close",
  8663. 			eventDetails,
  8664. 			// @ts-ignore
  8665. 			config.btn.close.callback
  8666. 		);
  8667. 		PopsHandler.handleClickEvent(
  8668. 			// @ts-ignore
  8669. 			btnOkElement,
  8670. 			"ok",
  8671. 			eventDetails,
  8672. 			// @ts-ignore
  8673. 			config.btn.ok.callback
  8674. 		);
  8675. 		PopsHandler.handleClickEvent(
  8676. 			// @ts-ignore
  8677. 			btnCancelElement,
  8678. 			"cancel",
  8679. 			eventDetails,
  8680. 			// @ts-ignore
  8681. 			config.btn.cancel.callback
  8682. 		);
  8683. 		PopsHandler.handleClickEvent(
  8684. 			// @ts-ignore
  8685. 			btnOtherElement,
  8686. 			"other",
  8687. 			eventDetails,
  8688. 			// @ts-ignore
  8689. 			config.btn.other.callback
  8690. 		);
  8691. 		/* 创建到页面中 */
  8692. 		// @ts-ignore
  8693. 		PopsUtils.appendChild($shadowRoot, elementList);
  8694. 		if (typeof config.beforeAppendToPageCallBack === "function") {
  8695. 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  8696. 		}
  8697. 		// @ts-ignore
  8698. 		PopsUtils.appendChild($shadowContainer);
  8699. 		if (maskElement != null) {
  8700. 			animElement.after(maskElement);
  8701. 		}
  8702. 		/* 添加文件信息 */
  8703. 		config.folder.sort();
  8704. 		/**
  8705. 		 * 创建文件夹元素
  8706. 		 * @param {string} fileName
  8707. 		 * @param {string} [fileSize="-"]
  8708. 		 * @param {string} [latestTime="-"]
  8709. 		 */
  8710. 		function createFolderRowElement(
  8711. 			fileName,
  8712. 			latestTime = "-",
  8713. 			fileSize = "-"
  8714. 		) {
  8715. 			let origin_fileName = fileName;
  8716. 			let origin_latestTime = latestTime;
  8717. 			let origin_fileSize = fileSize;
  8718. 			// @ts-ignore
  8719. 			let folderELement = PopsDOMUtils.createElement("tr");
  8720. 			// @ts-ignore
  8721. 			let fileNameElement = PopsDOMUtils.createElement("td");
  8722. 			// @ts-ignore
  8723. 			let fileTimeElement = PopsDOMUtils.createElement("td");
  8724. 			// @ts-ignore
  8725. 			let fileFormatSize = PopsDOMUtils.createElement("td");
  8726. 			let fileType = "";
  8727. 			let fileIcon = Folder_ICON.folder;
  8728. 			if (arguments.length === 1) {
  8729. 				/* 文件夹 */
  8730. 				latestTime = "";
  8731. 				fileSize = "";
  8732. 			} else {
  8733. 				/* 文件 */
  8734. 				fileIcon = "";
  8735. 				if (typeof latestTime === "number") {
  8736. 					latestTime = PopsUtils.formatTime(latestTime);
  8737. 				}
  8738. 				if (typeof fileSize === "number") {
  8739. 					// @ts-ignore
  8740. 					fileSize = PopsUtils.formatByteToSize(fileSize);
  8741. 				}
  8742. 				for (let keyName in Folder_ICON) {
  8743. 					if (fileName.toLowerCase().endsWith("." + keyName)) {
  8744. 						fileType = keyName;
  8745. 						// @ts-ignore
  8746. 						fileIcon = Folder_ICON[keyName];
  8747. 						break;
  8748. 					}
  8749. 				}
  8750. 				if (!Boolean(fileIcon)) {
  8751. 					fileType = "Null";
  8752. 					fileIcon = Folder_ICON.Null;
  8753. 				}
  8754. 			}
  8755. 			folderELement.className = "pops-folder-list-table__body-row";
  8756. 			fileNameElement.className = "pops-folder-list-table__body-td";
  8757. 			fileTimeElement.className = "pops-folder-list-table__body-td";
  8758. 			fileFormatSize.className = "pops-folder-list-table__body-td";
  8759. 			fileNameElement.innerHTML = `
  8760.         <div class="pops-folder-list-file-name cursor-p">
  8761.           <div>
  8762.             <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
  8763.             <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
  8764.               ${fileName}
  8765.             </a>
  8766.           </div>
  8767.         </div>
  8768.         `;
  8769. 			fileTimeElement.innerHTML = `
  8770.         <div class="pops-folder-list__time">
  8771.           <span>${latestTime}</span>
  8772.         </div>
  8773.         `;
  8774. 			fileFormatSize.innerHTML = `
  8775.         <div class="pops-folder-list-format-size">
  8776.           <span>${fileSize}</span>
  8777.         </div>
  8778.         `;
  8779. 			/* 存储原来的值 */
  8780. 			let __value__ = {
  8781. 				fileName: origin_fileName,
  8782. 				latestTime: origin_latestTime,
  8783. 				fileSize: origin_fileSize,
  8784. 			};
  8785. 			// @ts-ignore
  8786. 			fileNameElement["__value__"] = __value__;
  8787. 			// @ts-ignore
  8788. 			fileTimeElement["__value__"] = __value__;
  8789. 			// @ts-ignore
  8790. 			fileFormatSize["__value__"] = __value__;
  8791. 			// @ts-ignore
  8792. 			folderELement["__value__"] = __value__;
  8793. 			folderELement.appendChild(fileNameElement);
  8794. 			folderELement.appendChild(fileTimeElement);
  8795. 			folderELement.appendChild(fileFormatSize);
  8796. 			return {
  8797. 				folderELement,
  8798. 				fileNameElement,
  8799. 				fileTimeElement,
  8800. 				fileFormatSize,
  8801. 			};
  8802. 		}
  8803. 		/**
  8804. 		 * 创建移动端文件夹元素
  8805. 		 * @param {string} fileName
  8806. 		 */
  8807. 		function createMobileFolderRowElement(
  8808. 			fileName,
  8809. 			latestTime = "-",
  8810. 			fileSize = "-"
  8811. 		) {
  8812. 			let origin_fileName = fileName;
  8813. 			let origin_latestTime = latestTime;
  8814. 			let origin_fileSize = fileSize;
  8815. 			// @ts-ignore
  8816. 			let folderELement = PopsDOMUtils.createElement("tr");
  8817. 			// @ts-ignore
  8818. 			let fileNameElement = PopsDOMUtils.createElement("td");
  8819. 			let fileType = "";
  8820. 			let fileIcon = Folder_ICON.folder;
  8821. 			if (arguments.length === 1) {
  8822. 				/* 文件夹 */
  8823. 				latestTime = "";
  8824. 				fileSize = "";
  8825. 			} else {
  8826. 				/* 文件 */
  8827. 				fileIcon = "";
  8828. 				if (typeof latestTime === "number") {
  8829. 					latestTime = PopsUtils.formatTime(latestTime);
  8830. 				}
  8831. 				if (typeof fileSize === "number") {
  8832. 					// @ts-ignore
  8833. 					fileSize = PopsUtils.formatByteToSize(fileSize);
  8834. 				}
  8835. 				for (let keyName in Folder_ICON) {
  8836. 					if (fileName.toLowerCase().endsWith("." + keyName)) {
  8837. 						fileType = keyName;
  8838. 						// @ts-ignore
  8839. 						fileIcon = Folder_ICON[keyName];
  8840. 						break;
  8841. 					}
  8842. 				}
  8843. 				if (!Boolean(fileIcon)) {
  8844. 					fileType = "Null";
  8845. 					fileIcon = Folder_ICON.Null;
  8846. 				}
  8847. 			}
  8848. 			folderELement.className = "pops-folder-list-table__body-row";
  8849. 			fileNameElement.className = "pops-folder-list-table__body-td";
  8850. 			fileNameElement.innerHTML = `
  8851.           <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
  8852.             <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
  8853.             <div>
  8854.               <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
  8855.                 ${fileName}
  8856.               </a>
  8857.               <span>${latestTime} ${fileSize}</span>
  8858.             </div>
  8859.           </div>
  8860.           `;
  8861. 			/* 存储原来的值 */
  8862. 			let __value__ = {
  8863. 				fileName: origin_fileName,
  8864. 				latestTime: origin_latestTime,
  8865. 				fileSize: origin_fileSize,
  8866. 			};
  8867. 			// @ts-ignore
  8868. 			fileNameElement["__value__"] = __value__;
  8869. 			// @ts-ignore
  8870. 			folderELement["__value__"] = __value__;
  8871. 			folderELement.appendChild(fileNameElement);
  8872. 			return {
  8873. 				folderELement,
  8874. 				fileNameElement,
  8875. 			};
  8876. 		}
  8877. 		/**
  8878. 		 * 清空每行的元素
  8879. 		 */
  8880. 		function clearFolerRow() {
  8881. 			// @ts-ignore
  8882. 			folderListBodyElement.innerHTML = "";
  8883. 		}
  8884. 		function getArrowIconElement() {
  8885. 			// @ts-ignore
  8886. 			let iconArrowElement = PopsDOMUtils.createElement("div", {
  8887. 				className: "iconArrow",
  8888. 			});
  8889. 			return iconArrowElement;
  8890. 		}
  8891. 		/**
  8892. 		 * 添加顶部导航
  8893. 		 * @param {string} name
  8894. 		 * @param {PopsFolderDataConfig} _config_
  8895. 		 * @returns
  8896. 		 */
  8897. 		function getBreadcrumbAllFilesElement(name, _config_) {
  8898. 			let spanElement = PopsDOMUtils.createElement(
  8899. 				"span",
  8900. 				{
  8901. 					className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
  8902. 					innerHTML: `<a>${name}</a>`,
  8903. 					// @ts-ignore
  8904. 					_config_: _config_,
  8905. 				},
  8906. 				{
  8907. 					title: "name",
  8908. 				}
  8909. 			);
  8910. 			return spanElement;
  8911. 		}
  8912. 		/**
  8913. 		 * 顶部导航的点击事件
  8914. 		 * @param {Event} event
  8915. 		 * @param {boolean} isTop 是否是全部文件按钮
  8916. 		 * @param {PopsFolderDataConfig} _config_ 配置
  8917. 		 */
  8918. 		// @ts-ignore
  8919. 		// @ts-ignore
  8920. 		function breadcrumbAllFilesElementClickEvent(event, isTop, _config_) {
  8921. 			clearFolerRow();
  8922. 			/* 获取当前的导航元素 */
  8923. 			// @ts-ignore
  8924. 			let currentBreadcrumb = event.target.closest(
  8925. 				"span.pops-folder-file-list-breadcrumb-allFiles"
  8926. 			);
  8927. 			if (currentBreadcrumb) {
  8928. 				while (currentBreadcrumb.nextElementSibling) {
  8929. 					currentBreadcrumb.nextElementSibling.remove();
  8930. 				}
  8931. 			} else {
  8932. 				console.error("获取导航按钮失败");
  8933. 			}
  8934. 			let loadingMask = pops.loading({
  8935. 				// @ts-ignore
  8936. 				parent: contentElement,
  8937. 				// @ts-ignore
  8938. 				content: {
  8939. 					text: "获取文件列表中...",
  8940. 				},
  8941. 				mask: {
  8942. 					enable: true,
  8943. 					clickEvent: {
  8944. 						toClose: false,
  8945. 						toHide: false,
  8946. 					},
  8947. 				},
  8948. 				addIndexCSS: false,
  8949. 			});
  8950. 			// @ts-ignore
  8951. 			addFolderElement(_config_);
  8952. 			loadingMask.close();
  8953. 		}
  8954. 		/**
  8955. 		 * 刷新文件列表界面信息
  8956. 		 * @param {Event} event
  8957. 		 * @param {PopsFolderDataConfig} _config_
  8958. 		 */
  8959. 		async function refreshFolderInfoClickEvent(event, _config_) {
  8960. 			clearFolerRow();
  8961. 			let loadingMask = pops.loading({
  8962. 				// @ts-ignore
  8963. 				parent: contentElement,
  8964. 				// @ts-ignore
  8965. 				content: {
  8966. 					text: "获取文件列表中...",
  8967. 				},
  8968. 				// @ts-ignore
  8969. 				mask: {
  8970. 					enable: true,
  8971. 				},
  8972. 				addIndexCSS: false,
  8973. 			});
  8974. 			if (typeof _config_.clickEvent === "function") {
  8975. 				// @ts-ignore
  8976. 				let childConfig = await _config_.clickEvent(event, _config_);
  8977. 				/* 添加顶部导航的箭头 */
  8978. 				// @ts-ignore
  8979. 				folderFileListBreadcrumbPrimaryElement.appendChild(
  8980. 					getArrowIconElement()
  8981. 				);
  8982. 				/* 获取顶部导航 */
  8983. 				let breadcrumbAllFilesElement = getBreadcrumbAllFilesElement(
  8984. 					_config_["fileName"],
  8985. 					// @ts-ignore
  8986. 					childConfig
  8987. 				);
  8988. 				// @ts-ignore
  8989. 				folderFileListBreadcrumbPrimaryElement.appendChild(
  8990. 					breadcrumbAllFilesElement
  8991. 				);
  8992. 				/* 设置顶部导航点击事件 */
  8993. 				// @ts-ignore
  8994. 				PopsDOMUtils.on(
  8995. 					breadcrumbAllFilesElement,
  8996. 					"click",
  8997. 					void 0,
  8998. 					function (event) {
  8999. 						// @ts-ignore
  9000. 						breadcrumbAllFilesElementClickEvent(event, false, childConfig);
  9001. 					}
  9002. 				);
  9003. 				// @ts-ignore
  9004. 				addFolderElement(childConfig);
  9005. 			}
  9006. 			loadingMask.close();
  9007. 		}
  9008. 		/**
  9009. 		 * 设置文件点击事件
  9010. 		 * @param {HTMLElement} targetElement
  9011. 		 * @param {PopsFolderDataConfig} _config_
  9012. 		 */
  9013. 		function setFileClickEvent(targetElement, _config_) {
  9014. 			// @ts-ignore
  9015. 			PopsDOMUtils.on(targetElement, "click", void 0, async function (event) {
  9016. 				event?.preventDefault();
  9017. 				event?.stopPropagation();
  9018. 				event?.stopImmediatePropagation();
  9019. 				let linkElement = targetElement.querySelector("a");
  9020. 				if (typeof _config_.clickEvent === "function") {
  9021. 					// @ts-ignore
  9022. 					let downloadInfo = await _config_.clickEvent(event, _config_);
  9023. 					if (
  9024. 						typeof downloadInfo === "object" &&
  9025. 						// @ts-ignore
  9026. 						typeof downloadInfo.url === "string" &&
  9027. 						// @ts-ignore
  9028. 						downloadInfo.url.trim() !== ""
  9029. 					) {
  9030. 						// @ts-ignore
  9031. 						linkElement.setAttribute("href", downloadInfo.url);
  9032. 						// @ts-ignore
  9033. 						linkElement.setAttribute("target", "_blank");
  9034. 						// @ts-ignore
  9035. 						if (downloadInfo.autoDownload) {
  9036. 							// @ts-ignore
  9037. 							if (downloadInfo.mode == null || downloadInfo.mode === "") {
  9038. 								/* 未设置mode的话默认为aBlank */
  9039. 								// @ts-ignore
  9040. 								downloadInfo.mode = "aBlank";
  9041. 							}
  9042. 							// @ts-ignore
  9043. 							if (downloadInfo.mode === "a" || downloadInfo.mode === "aBlank") {
  9044. 								/* a标签下载 */
  9045. 								let downloadLinkElement = document.createElement("a");
  9046. 								// @ts-ignore
  9047. 								if (downloadInfo.mode === "aBlank") {
  9048. 									downloadLinkElement.setAttribute("target", "_blank");
  9049. 								}
  9050. 								// @ts-ignore
  9051. 								downloadLinkElement.href = downloadInfo.url;
  9052. 								downloadLinkElement.click();
  9053. 							} else if (
  9054. 								// @ts-ignore
  9055. 								downloadInfo.mode === "open" ||
  9056. 								// @ts-ignore
  9057. 								downloadInfo.mode === "openBlank"
  9058. 							) {
  9059. 								/* window.open下载 */
  9060. 								// @ts-ignore
  9061. 								if (downloadInfo.mode === "openBlank") {
  9062. 									// @ts-ignore
  9063. 									globalThis.open(downloadInfo.url, "_blank");
  9064. 								} else {
  9065. 									// @ts-ignore
  9066. 									globalThis.open(downloadInfo.url);
  9067. 								}
  9068. 								// @ts-ignore
  9069. 							} else if (downloadInfo.mode === "iframe") {
  9070. 								/* iframe下载 */
  9071. 								let downloadIframeLinkElement =
  9072. 									document.createElement("iframe");
  9073. 								// @ts-ignore
  9074. 								downloadIframeLinkElement.src = downloadInfo.url;
  9075. 								downloadIframeLinkElement.onload = function () {
  9076. 									setTimeout(() => {
  9077. 										downloadIframeLinkElement.remove();
  9078. 									}, 1000);
  9079. 								};
  9080. 								$shadowRoot.appendChild(downloadIframeLinkElement);
  9081. 								setTimeout(() => {
  9082. 									downloadIframeLinkElement.remove();
  9083. 								}, 3 * 60 * 1000);
  9084. 							} else {
  9085. 								console.error("未知的下载模式", downloadInfo);
  9086. 							}
  9087. 						}
  9088. 					}
  9089. 				}
  9090. 			});
  9091. 		}
  9092. 		/**
  9093. 		 * 对配置进行排序
  9094. 		 * @param {PopsFolderDataConfig[]} _config_
  9095. 		 * @param {"fileName"|"fileSize"|"latestTime"} sortName 比较的属性，默认fileName
  9096. 		 * @param {boolean} isDesc 是否降序，默认false（升序）
  9097. 		 */
  9098. 		function sortFolderConfig(_config_, sortName = "fileName", isDesc = false) {
  9099. 			_config_.sort((a, b) => {
  9100. 				let beforeVal = a[sortName];
  9101. 				let afterVal = b[sortName];
  9102. 				if (sortName === "fileName") {
  9103. 					/* 文件名，进行字符串转换 */
  9104. 					beforeVal = beforeVal.toString();
  9105. 					afterVal = afterVal.toString();
  9106. 				} else if (sortName === "fileSize") {
  9107. 					/* 文件大小，进行Float转换 */
  9108. 					// @ts-ignore
  9109. 					beforeVal = parseFloat(beforeVal);
  9110. 					// @ts-ignore
  9111. 					afterVal = parseFloat(afterVal);
  9112. 				} else if (sortName === "latestTime") {
  9113. 					/* 文件时间 */
  9114. 					beforeVal = new Date(beforeVal).getTime();
  9115. 					afterVal = new Date(afterVal).getTime();
  9116. 				}
  9117. 				if (typeof beforeVal === "string" && typeof afterVal === "string") {
  9118. 					let compareVal = beforeVal.localeCompare(afterVal);
  9119. 					if (isDesc) {
  9120. 						/* 降序 */
  9121. 						if (compareVal > 0) {
  9122. 							compareVal = -1;
  9123. 						} else if (compareVal < 0) {
  9124. 							compareVal = 1;
  9125. 						}
  9126. 					}
  9127. 					return compareVal;
  9128. 				} else {
  9129. 					if (beforeVal > afterVal) {
  9130. 						if (isDesc) {
  9131. 							/* 降序 */
  9132. 							return -1;
  9133. 						} else {
  9134. 							return 1;
  9135. 						}
  9136. 					} else if (beforeVal < afterVal) {
  9137. 						if (isDesc) {
  9138. 							/* 降序 */
  9139. 							return 1;
  9140. 						} else {
  9141. 							return -1;
  9142. 						}
  9143. 					} else {
  9144. 						return 0;
  9145. 					}
  9146. 				}
  9147. 			});
  9148. 			return _config_;
  9149. 		}
  9150. 		/**
  9151. 		 * 添加元素
  9152. 		 * @param {PopsFolderDataConfig[]} _config_
  9153. 		 */
  9154. 		function addFolderElement(_config_) {
  9155. 			sortFolderConfig(_config_, config.sort.name, config.sort.isDesc);
  9156. 			_config_.forEach((item) => {
  9157. 				if (item["isFolder"]) {
  9158. 					let { folderELement, fileNameElement } = pops.isPhone()
  9159. 						? createMobileFolderRowElement(item["fileName"])
  9160. 						: createFolderRowElement(item["fileName"]);
  9161. 					// @ts-ignore
  9162. 					PopsDOMUtils.on(fileNameElement, "click", void 0, function (event) {
  9163. 						refreshFolderInfoClickEvent(event, item);
  9164. 					});
  9165. 					// @ts-ignore
  9166. 					folderListBodyElement.appendChild(folderELement);
  9167. 				} else {
  9168. 					let { folderELement, fileNameElement } = pops.isPhone()
  9169. 						? createMobileFolderRowElement(
  9170. 								item["fileName"],
  9171. 								// @ts-ignore
  9172. 								item["latestTime"],
  9173. 								item["fileSize"]
  9174. 						  )
  9175. 						: createFolderRowElement(
  9176. 								item["fileName"],
  9177. 								// @ts-ignore
  9178. 								item["latestTime"],
  9179. 								item["fileSize"]
  9180. 						  );
  9181. 					setFileClickEvent(fileNameElement, item);
  9182. 					// @ts-ignore
  9183. 					folderListBodyElement.appendChild(folderELement);
  9184. 				}
  9185. 			});
  9186. 		}
  9187. 		addFolderElement(config.folder);
  9188. 		/* 将数据存到全部文件的属性_config_中 */
  9189. 		// @ts-ignore
  9190. 		let allFilesElement = folderFileListBreadcrumbPrimaryElement.querySelector(
  9191. 			".pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child"
  9192. 		);
  9193. 		// @ts-ignore
  9194. 		allFilesElement._config_ = config.folder;
  9195. 		/* 设置点击顶部的全部文件事件 */
  9196. 		// @ts-ignore
  9197. 		PopsDOMUtils.on(allFilesElement, "click", void 0, function (event) {
  9198. 			// @ts-ignore
  9199. 			breadcrumbAllFilesElementClickEvent(event, true, config.folder);
  9200. 		});
  9201.  
  9202. 		/* 移除所有的当前排序的arrow */
  9203. 		function removeAllArrowActive() {
  9204. 			[
  9205. 				// @ts-ignore
  9206. 				...folderListSortFileNameElement.querySelectorAll(
  9207. 					".pops-folder-icon-active"
  9208. 				),
  9209. 				// @ts-ignore
  9210. 				...folderListSortLatestTimeElement.querySelectorAll(
  9211. 					".pops-folder-icon-active"
  9212. 				),
  9213. 				// @ts-ignore
  9214. 				...folderListSortFileSizeElement.querySelectorAll(
  9215. 					".pops-folder-icon-active"
  9216. 				),
  9217. 			].forEach((ele) => ele.classList.remove("pops-folder-icon-active"));
  9218. 		}
  9219. 		/* 设置当前的排序的arrow */
  9220. 		// @ts-ignore
  9221. 		function changeArrowActive(arrowUp, arrowDown, isDesc) {
  9222. 			removeAllArrowActive();
  9223. 			if (isDesc) {
  9224. 				arrowDown.classList.add("pops-folder-icon-active");
  9225. 			} else {
  9226. 				arrowUp.classList.add("pops-folder-icon-active");
  9227. 			}
  9228. 		}
  9229. 		/**
  9230. 		 * 排序按钮的点击事件
  9231. 		 * @param {PointerEvent} target
  9232. 		 * @param {HTMLElement} event
  9233. 		 * @param {string} sortName
  9234. 		 * @returns
  9235. 		 */
  9236. 		function arrowSortClickEvent(target, event, sortName) {
  9237. 			// @ts-ignore
  9238. 			if (!event["notChangeSortRule"]) {
  9239. 				// @ts-ignore
  9240. 				config.sort.name = sortName;
  9241. 				config.sort.isDesc = !config.sort.isDesc;
  9242. 			}
  9243. 			// @ts-ignore
  9244. 			let arrowUp = target.querySelector(".pops-folder-icon-arrow-up");
  9245. 			// @ts-ignore
  9246. 			let arrowDown = target.querySelector(".pops-folder-icon-arrow-down");
  9247. 			changeArrowActive(arrowUp, arrowDown, config.sort.isDesc);
  9248. 			if (
  9249. 				typeof config.sort.callback === "function" &&
  9250. 				config.sort.callback(
  9251. 					// @ts-ignore
  9252. 					target,
  9253. 					event,
  9254. 					config.sort.name,
  9255. 					config.sort.isDesc
  9256. 				)
  9257. 			) {
  9258. 				return;
  9259. 			}
  9260. 			// @ts-ignore
  9261. 			let childrenList = [];
  9262. 			// @ts-ignore
  9263. 			Array.from(folderListBodyElement.children).forEach((trElement) => {
  9264. 				// @ts-ignore
  9265. 				let __value__ = trElement["__value__"];
  9266. 				__value__["target"] = trElement;
  9267. 				childrenList.push(__value__);
  9268. 			});
  9269. 			let sortedConfigList = sortFolderConfig(
  9270. 				// @ts-ignore
  9271. 				childrenList,
  9272. 				config.sort.name,
  9273. 				config.sort.isDesc
  9274. 			);
  9275. 			sortedConfigList.forEach((item) => {
  9276. 				// @ts-ignore
  9277. 				folderListBodyElement.appendChild(item.target);
  9278. 			});
  9279. 		}
  9280. 		/* 设置当前排序的图标按钮 */
  9281. 		PopsDOMUtils.on(
  9282. 			// @ts-ignore
  9283. 			folderListSortFileNameElement.closest("th"),
  9284. 			"click",
  9285. 			void 0,
  9286. 			function (event) {
  9287. 				// @ts-ignore
  9288. 				arrowSortClickEvent(folderListSortFileNameElement, event, "fileName");
  9289. 			},
  9290. 			{
  9291. 				capture: true,
  9292. 			}
  9293. 		);
  9294. 		PopsDOMUtils.on(
  9295. 			// @ts-ignore
  9296. 			folderListSortLatestTimeElement.closest("th"),
  9297. 			"click",
  9298. 			void 0,
  9299. 			function (event) {
  9300. 				arrowSortClickEvent(
  9301. 					// @ts-ignore
  9302. 					folderListSortLatestTimeElement,
  9303. 					event,
  9304. 					"latestTime"
  9305. 				);
  9306. 			},
  9307. 			{
  9308. 				capture: true,
  9309. 			}
  9310. 		);
  9311. 		PopsDOMUtils.on(
  9312. 			// @ts-ignore
  9313. 			folderListSortFileSizeElement.closest("th"),
  9314. 			"click",
  9315. 			void 0,
  9316. 			function (event) {
  9317. 				// @ts-ignore
  9318. 				arrowSortClickEvent(folderListSortFileSizeElement, event, "fileSize");
  9319. 			},
  9320. 			{
  9321. 				capture: true,
  9322. 			}
  9323. 		);
  9324. 		/* 设置默认触发的arrow */
  9325. 		if (config.sort.name === "fileName") {
  9326. 			// @ts-ignore
  9327. 			PopsDOMUtils.trigger(folderListSortFileNameElement, "click", {
  9328. 				notChangeSortRule: true,
  9329. 			});
  9330. 		} else if (config.sort.name === "latestTime") {
  9331. 			// @ts-ignore
  9332. 			PopsDOMUtils.trigger(folderListSortLatestTimeElement, "click", {
  9333. 				notChangeSortRule: true,
  9334. 			});
  9335. 		} else if (config.sort.name === "fileSize") {
  9336. 			// @ts-ignore
  9337. 			PopsDOMUtils.trigger(folderListSortFileSizeElement, "click", {
  9338. 				notChangeSortRule: true,
  9339. 			});
  9340. 		}
  9341. 		/* 拖拽 */
  9342. 		if (config.drag) {
  9343. 			// @ts-ignore
  9344. 			PopsUtils.drag(popsElement, {
  9345. 				dragElement: titleElement,
  9346. 				limit: config.dragLimit,
  9347. 				extraDistance: config.dragExtraDistance,
  9348. 				moveCallBack: config.dragMoveCallBack,
  9349. 				endCallBack: config.dragEndCallBack,
  9350. 			});
  9351. 		}
  9352. 		PopsHandler.handlePush(PopsType, {
  9353. 			guid: guid,
  9354. 			// @ts-ignore
  9355. 			animElement: animElement,
  9356. 			// @ts-ignore
  9357. 			popsElement: popsElement,
  9358. 			// @ts-ignore
  9359. 			maskElement: maskElement,
  9360. 			$shadowContainer: $shadowContainer,
  9361. 			$shadowRoot: $shadowRoot,
  9362. 		});
  9363. 		return PopsHandler.handleResultDetails(eventDetails);
  9364. 	};
  9365.  
  9366. 	/**
  9367. 	 * 配置面板
  9368. 	 * @param { PopsPanelDetails } details 配置
  9369. 	 */
  9370. 	pops.panel = function (details) {
  9371. 		// @ts-ignore
  9372. 		// @ts-ignore
  9373. 		let that = this;
  9374. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  9375. 		PopsHandler.handleInit($shadowRoot, [
  9376. 			pops.config.cssText.index,
  9377. 			pops.config.cssText.ninePalaceGridPosition,
  9378. 			pops.config.cssText.scrollbar,
  9379. 			pops.config.cssText.button,
  9380. 			pops.config.cssText.anim,
  9381. 			pops.config.cssText.common,
  9382. 			pops.config.cssText.panelCSS,
  9383. 		]);
  9384. 		/**
  9385. 		 * @type {Required<PopsPanelDetails>}
  9386. 		 */
  9387. 		let config = {
  9388. 			title: {
  9389. 				text: "默认标题",
  9390. 				position: "center",
  9391. 				html: false,
  9392. 				style: "",
  9393. 			},
  9394. 			content: [
  9395. 				{
  9396. 					id: "whitesev-panel-config-1",
  9397. 					title: "菜单配置1",
  9398. 					headerTitle: "菜单配置1",
  9399. 					isDefault: true,
  9400. 					attributes: [
  9401. 						{
  9402. 							"data-test": "test",
  9403. 							"data-test-2": "test2",
  9404. 						},
  9405. 					],
  9406. 					forms: [
  9407. 						{
  9408. 							className: "forms-1",
  9409. 							text: "区域设置",
  9410. 							type: "forms",
  9411. 							attributes: [],
  9412. 							forms: [
  9413. 								{
  9414. 									className: "panel-switch",
  9415. 									text: "switch",
  9416. 									type: "switch",
  9417. 									attributes: [],
  9418. 									getValue() {
  9419. 										return true;
  9420. 									},
  9421. 									// @ts-ignore
  9422. 									// @ts-ignore
  9423. 									callback(event, value) {
  9424. 										console.log("按钮开启状态：", value);
  9425. 									},
  9426. 								},
  9427. 								// @ts-ignore
  9428. 								{
  9429. 									className: "panel-slider",
  9430. 									text: "slider",
  9431. 									type: "slider",
  9432. 									attributes: [],
  9433. 									getValue() {
  9434. 										return 50;
  9435. 									},
  9436. 									// @ts-ignore
  9437. 									// @ts-ignore
  9438. 									callback(event, value) {
  9439. 										console.log("滑块当前数值：", value);
  9440. 									},
  9441. 									min: 1,
  9442. 									max: 100,
  9443. 								},
  9444. 								{
  9445. 									className: "panel-button",
  9446. 									text: "button",
  9447. 									type: "button",
  9448. 									attributes: [],
  9449. 									buttonIcon: "eleme",
  9450. 									buttonIconIsLoading: true,
  9451. 									buttonType: "warning",
  9452. 									buttonText: "warning按钮",
  9453. 									callback(event) {
  9454. 										console.log("点击按钮", event);
  9455. 									},
  9456. 								},
  9457. 								{
  9458. 									className: "panel-button",
  9459. 									text: "button",
  9460. 									type: "button",
  9461. 									attributes: [],
  9462. 									buttonIcon: "chromeFilled",
  9463. 									buttonIconIsLoading: true,
  9464. 									buttonType: "danger",
  9465. 									buttonText: "danger按钮",
  9466. 									callback(event) {
  9467. 										console.log("点击按钮", event);
  9468. 									},
  9469. 								},
  9470. 								{
  9471. 									className: "panel-button",
  9472. 									text: "button",
  9473. 									type: "button",
  9474. 									attributes: [],
  9475. 									buttonIcon: "upload",
  9476. 									buttonIconIsLoading: false,
  9477. 									buttonType: "info",
  9478. 									buttonText: "info按钮",
  9479. 									callback(event) {
  9480. 										console.log("点击按钮", event);
  9481. 									},
  9482. 								},
  9483. 							],
  9484. 						},
  9485. 					],
  9486. 				},
  9487. 				{
  9488. 					id: "whitesev-panel-config-2",
  9489. 					title: "菜单配置2",
  9490. 					headerTitle: "菜单配置2",
  9491. 					isDefault: false,
  9492. 					attributes: [
  9493. 						{
  9494. 							"data-value": "value",
  9495. 							"data-value-2": "value2",
  9496. 						},
  9497. 					],
  9498. 					forms: [
  9499. 						{
  9500. 							className: "panel-input",
  9501. 							text: "input",
  9502. 							type: "input",
  9503. 							attributes: [],
  9504. 							// @ts-ignore
  9505. 							getValue() {
  9506. 								return 50;
  9507. 							},
  9508. 							// @ts-ignore
  9509. 							// @ts-ignore
  9510. 							callback(event, value) {
  9511. 								console.log("输入框内容改变：", value);
  9512. 							},
  9513. 							placeholder: "请输入内容",
  9514. 						},
  9515. 						{
  9516. 							className: "panel-input-password",
  9517. 							text: "input-password",
  9518. 							type: "input",
  9519. 							attributes: [],
  9520. 							getValue() {
  9521. 								return "123456";
  9522. 							},
  9523. 							// @ts-ignore
  9524. 							// @ts-ignore
  9525. 							callback(event, value) {
  9526. 								console.log("密码输入框内容改变：", value);
  9527. 							},
  9528. 							isPassword: true,
  9529. 							placeholder: "请输入密码",
  9530. 						},
  9531. 						{
  9532. 							className: "panel-textarea",
  9533. 							text: "textarea",
  9534. 							type: "textarea",
  9535. 							attributes: [],
  9536. 							// @ts-ignore
  9537. 							getValue() {
  9538. 								return 50;
  9539. 							},
  9540. 							// @ts-ignore
  9541. 							// @ts-ignore
  9542. 							callback(event, value) {
  9543. 								console.log("textarea输入框内容改变：", value);
  9544. 							},
  9545. 							placeholder: "请输入内容",
  9546. 						},
  9547. 						{
  9548. 							className: "panel-select",
  9549. 							text: "select",
  9550. 							type: "select",
  9551. 							attributes: [],
  9552. 							getValue() {
  9553. 								return 50;
  9554. 							},
  9555. 							// @ts-ignore
  9556. 							// @ts-ignore
  9557. 							callback(event, isSelectedValue, isSelectedText) {
  9558. 								console.log(
  9559. 									`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`
  9560. 								);
  9561. 							},
  9562. 							data: [
  9563. 								{
  9564. 									value: "all",
  9565. 									text: "所有",
  9566. 								},
  9567. 								{
  9568. 									value: "text",
  9569. 									text: "文本",
  9570. 									// @ts-ignore
  9571. 									selected: true,
  9572. 								},
  9573. 								{
  9574. 									value: "html",
  9575. 									text: "超文本",
  9576. 								},
  9577. 							],
  9578. 						},
  9579. 					],
  9580. 				},
  9581. 			],
  9582. 			btn: {
  9583. 				close: {
  9584. 					enable: true,
  9585. 					callback(event) {
  9586. 						event.close();
  9587. 					},
  9588. 				},
  9589. 			},
  9590. 			mask: {
  9591. 				enable: false,
  9592. 				clickEvent: {
  9593. 					toClose: false,
  9594. 					toHide: false,
  9595. 				},
  9596. 				// @ts-ignore
  9597. 				clickCallBack: null,
  9598. 			},
  9599. 			class: "",
  9600. 			mobileClassName: "pops-panel-is-mobile",
  9601. 			isMobile: false,
  9602. 			only: false,
  9603. 			width: "700px",
  9604. 			height: "500px",
  9605. 			position: "center",
  9606. 			animation: "pops-anim-fadein-zoom",
  9607. 			zIndex: 10000,
  9608. 			drag: false,
  9609. 			dragLimit: true,
  9610. 			dragExtraDistance: 3,
  9611. 			dragMoveCallBack() {},
  9612. 			dragEndCallBack() {},
  9613. 			forbiddenScroll: false,
  9614. 			// @ts-ignore
  9615. 			style: void 0,
  9616. 			beforeAppendToPageCallBack() {},
  9617. 		};
  9618. 		config = PopsUtils.assignJSON(config, details);
  9619. 		if (details && Array.isArray(details.content)) {
  9620. 			config.content = details.content;
  9621. 		}
  9622. 		let guid = PopsUtils.getRandomGUID();
  9623. 		const PopsType = "panel";
  9624. 		// @ts-ignore
  9625. 		config = PopsHandler.handleOnly(PopsType, config);
  9626. 		// @ts-ignore
  9627. 		let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
  9628. 		// @ts-ignore
  9629. 		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
  9630. 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
  9631. 			PopsType,
  9632. 			// @ts-ignore
  9633. 			config
  9634. 		);
  9635.  
  9636. 		let animHTML = PopsElementHandler.getAnimHTML(
  9637. 			guid,
  9638. 			PopsType,
  9639. 			config,
  9640. 			`
  9641.       <div 
  9642.           class="pops-${PopsType}-title"
  9643.           style="text-align: ${config.title.position};
  9644.           ${headerStyle}">
  9645.           ${
  9646. 						config.title.html
  9647. 							? config.title.text
  9648. 							: `<p pops style="${headerPStyle}">${config.title.text}</p>`
  9649. 					}
  9650.           ${headerBtnHTML}
  9651.       </div>
  9652.       <div class="pops-${PopsType}-content">
  9653.           <aside class="pops-${PopsType}-aside">
  9654.             <ul></ul>
  9655.           </aside>
  9656.           <section class="pops-${PopsType}-container">
  9657.             <ul class="pops-panel-container-header-ul"></ul>
  9658.             <ul></ul>
  9659.           </section>
  9660.       </div>
  9661.       `,
  9662. 			""
  9663. 		);
  9664. 		/**
  9665. 		 * 弹窗的主元素，包括动画层
  9666. 		 */
  9667. 		let animElement = PopsElementHandler.parseElement(animHTML);
  9668. 		/* 结构元素 */
  9669. 		let {
  9670. 			popsElement,
  9671. 			headerCloseBtnElement: btnCloseElement,
  9672. 			titleElement,
  9673. 			// @ts-ignore
  9674. 			// @ts-ignore
  9675. 			contentElement,
  9676. 			contentAsideElement,
  9677. 			contentSectionContainerElement,
  9678. 			// @ts-ignore
  9679. 		} = PopsHandler.handleQueryElement(animElement, PopsType);
  9680. 		if (config.isMobile || pops.isPhone()) {
  9681. 			// @ts-ignore
  9682. 			PopsDOMUtils.addClassName(popsElement, config.mobileClassName);
  9683. 		}
  9684. 		/**
  9685. 		 * 遮罩层元素
  9686. 		 * @type {?HTMLDivElement}
  9687. 		 */
  9688. 		let maskElement = null;
  9689. 		/**
  9690. 		 * 已创建的元素列表
  9691. 		 * @type {HTMLElement[]}
  9692. 		 */
  9693. 		let elementList = [animElement];
  9694.  
  9695. 		/* 遮罩层元素 */
  9696. 		// @ts-ignore
  9697. 		if (config.mask.enable) {
  9698. 			let _handleMask_ = PopsHandler.handleMask({
  9699. 				type: PopsType,
  9700. 				guid: guid,
  9701. 				// @ts-ignore
  9702. 				config: config,
  9703. 				animElement: animElement,
  9704. 				maskHTML: maskHTML,
  9705. 			});
  9706. 			maskElement = _handleMask_.maskElement;
  9707. 			elementList.push(maskElement);
  9708. 		}
  9709.  
  9710. 		/* 处理返回的配置 */
  9711. 		let eventDetails = PopsHandler.handleEventDetails(
  9712. 			guid,
  9713. 			$shadowContainer,
  9714. 			$shadowRoot,
  9715. 			PopsType,
  9716. 			// @ts-ignore
  9717. 			animElement,
  9718. 			popsElement,
  9719. 			maskElement,
  9720. 			config
  9721. 		);
  9722. 		/* 为顶部右边的关闭按钮添加点击事件 */
  9723. 		PopsHandler.handleClickEvent(
  9724. 			// @ts-ignore
  9725. 			btnCloseElement,
  9726. 			"close",
  9727. 			eventDetails,
  9728. 			// @ts-ignore
  9729. 			config.btn.close.callback
  9730. 		);
  9731.  
  9732. 		/* 创建到页面中 */
  9733. 		// @ts-ignore
  9734. 		PopsUtils.appendChild($shadowRoot, elementList);
  9735. 		if (typeof config.beforeAppendToPageCallBack === "function") {
  9736. 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  9737. 		}
  9738. 		// @ts-ignore
  9739. 		PopsUtils.appendChild($shadowContainer);
  9740. 		/* 追加遮罩层元素 */
  9741. 		if (maskElement != null) {
  9742. 			animElement.after(maskElement);
  9743. 		}
  9744.  
  9745. 		/**
  9746. 		 * 处理内部配置
  9747. 		 */
  9748. 		const HandleContetDetails = {
  9749. 			/**
  9750. 			 * @type {HTMLUListElement}
  9751. 			 */
  9752. 			// @ts-ignore
  9753. 			asideULElement: null,
  9754. 			/**
  9755. 			 * @type {HTMLUListElement}
  9756. 			 */
  9757. 			// @ts-ignore
  9758. 			sectionContainerHeaderULElement: null,
  9759. 			/**
  9760. 			 * @type {HTMLUListElement}
  9761. 			 */
  9762. 			// @ts-ignore
  9763. 			sectionContainerULElement: null,
  9764. 			init() {
  9765. 				// @ts-ignore
  9766. 				this.asideULElement = contentAsideElement.querySelector("ul");
  9767. 				this.sectionContainerHeaderULElement =
  9768. 					// @ts-ignore
  9769. 					contentSectionContainerElement.querySelectorAll("ul")[0];
  9770. 				this.sectionContainerULElement =
  9771. 					// @ts-ignore
  9772. 					contentSectionContainerElement.querySelectorAll("ul")[1];
  9773. 				/**
  9774. 				 * 默认点击的左侧容器
  9775. 				 * @type {HTMLLIElement}
  9776. 				 */
  9777. 				// @ts-ignore
  9778. 				let asideDefaultItemElement = null;
  9779. 				let isScrollToDefaultView = false;
  9780. 				config.content.forEach((asideItem) => {
  9781. 					let asideLiElement = this.getAsideItem(asideItem);
  9782. 					this.setAsideItemClickEvent(asideLiElement, asideItem);
  9783. 					this.asideULElement.appendChild(asideLiElement);
  9784. 					if (asideDefaultItemElement == null) {
  9785. 						let flag = false;
  9786. 						if (typeof asideItem.isDefault === "function") {
  9787. 							flag = Boolean(asideItem.isDefault());
  9788. 						} else {
  9789. 							flag = Boolean(asideItem.isDefault);
  9790. 						}
  9791. 						if (flag) {
  9792. 							asideDefaultItemElement = asideLiElement;
  9793. 							isScrollToDefaultView = Boolean(asideItem.scrollToDefaultView);
  9794. 						}
  9795. 					}
  9796. 				});
  9797.  
  9798. 				/* 点击左侧列表 */
  9799. 				if (
  9800. 					asideDefaultItemElement == null &&
  9801. 					this.asideULElement.children.length
  9802. 				) {
  9803. 					/* 默认第一个 */
  9804. 					// @ts-ignore
  9805. 					asideDefaultItemElement = this.asideULElement.children[0];
  9806. 				}
  9807. 				if (asideDefaultItemElement) {
  9808. 					/* 点击选择的那一项 */
  9809. 					asideDefaultItemElement.click();
  9810. 					if (isScrollToDefaultView) {
  9811. 						asideDefaultItemElement?.scrollIntoView();
  9812. 					}
  9813. 				} else {
  9814. 					console.error("左侧容器没有项");
  9815. 				}
  9816. 			},
  9817. 			/**
  9818. 			 * 清空container容器的元素
  9819. 			 */
  9820. 			clearContainer() {
  9821. 				this.sectionContainerHeaderULElement.innerHTML = "";
  9822. 				this.sectionContainerULElement.innerHTML = "";
  9823. 			},
  9824. 			/**
  9825. 			 * 清空左侧容器已访问记录
  9826. 			 */
  9827. 			clearAsideItemIsVisited() {
  9828. 				// @ts-ignore
  9829. 				contentAsideElement
  9830. 					.querySelectorAll(".pops-is-visited")
  9831. 					.forEach((element) => {
  9832. 						// @ts-ignore
  9833. 						PopsDOMUtils.removeClassName(element, "pops-is-visited");
  9834. 					});
  9835. 			},
  9836. 			/**
  9837. 			 * 设置左侧容器已访问记录
  9838. 			 * @param {HTMLElement} element
  9839. 			 */
  9840. 			setAsideItemIsVisited(element) {
  9841. 				PopsDOMUtils.addClassName(element, "pops-is-visited");
  9842. 			},
  9843. 			/**
  9844. 			 * 为元素添加自定义属性
  9845. 			 * @param {HTMLElement} element
  9846. 			 * @param {object | object[]} attributes
  9847. 			 */
  9848. 			addElementAttributes(element, attributes) {
  9849. 				if (attributes == null) {
  9850. 					return;
  9851. 				}
  9852. 				if (Array.isArray(attributes)) {
  9853. 					attributes.forEach((attrObject) => {
  9854. 						this.addElementAttributes(element, attrObject);
  9855. 					});
  9856. 				} else {
  9857. 					Object.keys(attributes).forEach((attributeName) => {
  9858. 						// @ts-ignore
  9859. 						element.setAttribute(attributeName, attributes[attributeName]);
  9860. 					});
  9861. 				}
  9862. 			},
  9863. 			/**
  9864. 			 * 为元素设置(自定义)属性
  9865. 			 * @param {HTMLElement} element
  9866. 			 * @param {?HTMLElement} props
  9867. 			 */
  9868. 			setElementProps(element, props) {
  9869. 				if (props == null) {
  9870. 					return;
  9871. 				}
  9872. 				Object.keys(props).forEach((propName) => {
  9873. 					// @ts-ignore
  9874. 					element[propName] = props[propName];
  9875. 				});
  9876. 			},
  9877. 			/**
  9878. 			 * 获取左侧容器元素<li>
  9879. 			 * @param { PopsPanelContentConfig } asideConfig
  9880. 			 * @returns
  9881. 			 */
  9882. 			getAsideItem(asideConfig) {
  9883. 				let liElement = document.createElement("li");
  9884. 				liElement.id = asideConfig.id;
  9885. 				// @ts-ignore
  9886. 				liElement.__forms__ = asideConfig.forms;
  9887. 				liElement.innerHTML = asideConfig.title;
  9888. 				// @ts-ignore
  9889. 				this.addElementAttributes(liElement, asideConfig.attributes);
  9890. 				// @ts-ignore
  9891. 				this.setElementProps(liElement, asideConfig.props);
  9892. 				return liElement;
  9893. 			},
  9894. 			/**
  9895. 			 * 获取中间容器的元素<li>
  9896. 			 * type ==> switch
  9897. 			 * @param {PopsPanelSwitchDetails} formConfig
  9898. 			 * @returns
  9899. 			 */
  9900. 			getSectionContainerItem_switch(formConfig) {
  9901. 				// @ts-ignore
  9902. 				// @ts-ignore
  9903. 				function setSwitchChecked(
  9904. 					// @ts-ignore
  9905. 					switchElement,
  9906. 					// @ts-ignore
  9907. 					switchInputElement,
  9908. 					checked = false
  9909. 				) {
  9910. 					switchInputElement.checked = Boolean(checked);
  9911. 					if (checked) {
  9912. 						PopsDOMUtils.addClassName(
  9913. 							switchElement,
  9914. 							"pops-panel-switch-is-checked"
  9915. 						);
  9916. 					} else {
  9917. 						PopsDOMUtils.removeClassName(
  9918. 							switchElement,
  9919. 							"pops-panel-switch-is-checked"
  9920. 						);
  9921. 					}
  9922. 				}
  9923. 				let liElement = document.createElement("li");
  9924. 				// @ts-ignore
  9925. 				liElement.__formConfig__ = formConfig;
  9926. 				if (formConfig.className) {
  9927. 					liElement.className = formConfig.className;
  9928. 				}
  9929. 				// @ts-ignore
  9930. 				this.addElementAttributes(liElement, formConfig.attributes);
  9931. 				// @ts-ignore
  9932. 				this.setElementProps(liElement, formConfig.props);
  9933. 				/* 左边底部的描述的文字 */
  9934. 				let leftDescriptionText = "";
  9935. 				if (Boolean(formConfig.description)) {
  9936. 					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  9937. 				}
  9938. 				liElement.innerHTML = `
  9939.         <div class="pops-panel-item-left-text">
  9940.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  9941.           ${leftDescriptionText}
  9942.         </div>
  9943.         <div class="pops-panel-switch">
  9944.           <input class="pops-panel-switch__input" type="checkbox">
  9945.           <span class="pops-panel-switch__core">
  9946.             <div class="pops-panel-switch__action">
  9947.             </div>
  9948.           </span>
  9949.         </div>
  9950.         `;
  9951. 				const PopsPanelSwitch = {
  9952. 					[Symbol.toStringTag]: "PopsPanelSwitch",
  9953. 					$data: {
  9954. 						value: Boolean(formConfig.getValue()),
  9955. 					},
  9956. 					$ele: {
  9957. 						/**
  9958. 						 * @type {HTMLDivElement}
  9959. 						 */
  9960. 						// @ts-ignore
  9961. 						switch: liElement.querySelector(".pops-panel-switch"),
  9962. 						/**
  9963. 						 * @type {HTMLInputElement}
  9964. 						 */
  9965. 						// @ts-ignore
  9966. 						input: liElement.querySelector(".pops-panel-switch__input"),
  9967. 						/**
  9968. 						 * @type {HTMLSpanElement}
  9969. 						 */
  9970. 						// @ts-ignore
  9971. 						core: liElement.querySelector(".pops-panel-switch__core"),
  9972. 					},
  9973. 					init() {
  9974. 						this.setStatus(this.$data.value);
  9975. 						if (formConfig.disabled) {
  9976. 							this.disable();
  9977. 						}
  9978. 						this.setClickEvent();
  9979. 					},
  9980. 					setClickEvent() {
  9981. 						let that = this;
  9982. 						// @ts-ignore
  9983. 						PopsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
  9984. 							if (
  9985. 								that.$ele.input.disabled ||
  9986. 								that.$ele.switch.hasAttribute("data-disabled")
  9987. 							) {
  9988. 								return;
  9989. 							}
  9990. 							that.$data.value = that.getStatus();
  9991. 							that.setStatus(that.$data.value);
  9992. 							if (typeof formConfig.callback === "function") {
  9993. 								// @ts-ignore
  9994. 								formConfig.callback(event, that.$data.value);
  9995. 							}
  9996. 						});
  9997. 					},
  9998. 					/**
  9999. 					 * 设置状态
  10000. 					 */
  10001. 					setStatus(isChecked = false) {
  10002. 						isChecked = Boolean(isChecked);
  10003. 						this.$ele.input.checked = isChecked;
  10004. 						if (isChecked) {
  10005. 							PopsDOMUtils.addClassName(
  10006. 								this.$ele.switch,
  10007. 								"pops-panel-switch-is-checked"
  10008. 							);
  10009. 						} else {
  10010. 							PopsDOMUtils.removeClassName(
  10011. 								this.$ele.switch,
  10012. 								"pops-panel-switch-is-checked"
  10013. 							);
  10014. 						}
  10015. 					},
  10016. 					/**
  10017. 					 * 根据className来获取逆反值
  10018. 					 */
  10019. 					getStatus() {
  10020. 						let checkedValue = false;
  10021. 						if (
  10022. 							!PopsDOMUtils.containsClassName(
  10023. 								this.$ele.switch,
  10024. 								"pops-panel-switch-is-checked"
  10025. 							)
  10026. 						) {
  10027. 							checkedValue = true;
  10028. 						}
  10029. 						return checkedValue;
  10030. 					},
  10031. 					/**
  10032. 					 * 禁用复选框
  10033. 					 */
  10034. 					disable() {
  10035. 						this.$ele.input.disabled = true;
  10036. 						// @ts-ignore
  10037. 						this.$ele.switch.setAttribute("data-disabled", true);
  10038. 					},
  10039. 					/**
  10040. 					 * 启用复选框
  10041. 					 */
  10042. 					notDisable() {
  10043. 						this.$ele.input.disabled = false;
  10044. 						this.$ele.switch.removeAttribute("data-disabled");
  10045. 					},
  10046. 				};
  10047.  
  10048. 				PopsPanelSwitch.init();
  10049. 				// @ts-ignore
  10050. 				liElement["data-switch"] = PopsPanelSwitch;
  10051. 				return liElement;
  10052. 			},
  10053. 			/**
  10054. 			 * 获取中间容器的元素<li>
  10055. 			 * type ==> slider
  10056. 			 * @param {PopsPanelSliderDetails} formConfig
  10057. 			 * @returns
  10058. 			 */
  10059. 			getSectionContainerItem_slider(formConfig) {
  10060. 				let liElement = document.createElement("li");
  10061. 				// @ts-ignore
  10062. 				liElement.__formConfig__ = formConfig;
  10063. 				if (formConfig.className) {
  10064. 					liElement.className = formConfig.className;
  10065. 				}
  10066. 				// @ts-ignore
  10067. 				this.addElementAttributes(liElement, formConfig.attributes);
  10068. 				// @ts-ignore
  10069. 				this.setElementProps(liElement, formConfig.props);
  10070. 				/* 左边底部的描述的文字 */
  10071. 				let leftDescriptionText = "";
  10072. 				if (Boolean(formConfig.description)) {
  10073. 					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  10074. 				}
  10075. 				liElement.innerHTML = `
  10076.        <div class="pops-panel-item-left-text">
  10077.          <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  10078.          ${leftDescriptionText}
  10079.        </div>
  10080.        <div class="pops-panel-slider">
  10081.          <input type="range" min="${formConfig.min}" max="${formConfig.max}">
  10082.        </div>
  10083.        `;
  10084. 				/**
  10085. 				 * @type {HTMLInputElement}
  10086. 				 */
  10087. 				// @ts-ignore
  10088. 				let rangeInputElement = liElement.querySelector(
  10089. 					".pops-panel-slider input[type=range]"
  10090. 				);
  10091. 				if (formConfig.step) {
  10092. 					// @ts-ignore
  10093. 					rangeInputElement.setAttribute("step", formConfig.step);
  10094. 				}
  10095. 				// @ts-ignore
  10096. 				rangeInputElement.value = formConfig.getValue();
  10097. 				/**
  10098. 				 * 获取提示的内容
  10099. 				 * @param {number} value
  10100. 				 * @returns {string}
  10101. 				 */
  10102. 				let getToolTipContent = function (value) {
  10103. 					if (typeof formConfig.getToolTipContent === "function") {
  10104. 						return formConfig.getToolTipContent(value);
  10105. 					} else {
  10106. 						// @ts-ignore
  10107. 						return value;
  10108. 					}
  10109. 				};
  10110. 				let tooltip = pops.tooltip({
  10111. 					// @ts-ignore
  10112. 					target: rangeInputElement.parentElement,
  10113. 					// @ts-ignore
  10114. 					content: getToolTipContent(rangeInputElement.value),
  10115. 					zIndex: 1000000,
  10116. 					className: "github-tooltip",
  10117. 					// @ts-ignore
  10118. 					triggerShowEventCallBack(toolTipNode) {
  10119. 						toolTipNode.querySelector("div").innerText = getToolTipContent(
  10120. 							// @ts-ignore
  10121. 							rangeInputElement.value
  10122. 						);
  10123. 					},
  10124. 					alwaysShow: false,
  10125. 					only: false,
  10126. 					// @ts-ignore
  10127. 					position: "top",
  10128. 					arrowDistance: 10,
  10129. 				});
  10130. 				// @ts-ignore
  10131. 				PopsDOMUtils.on(
  10132. 					rangeInputElement,
  10133. 					["input", "propertychange"],
  10134. 					void 0,
  10135. 					function (event) {
  10136. 						// @ts-ignore
  10137. 						tooltip.toolTipNode.querySelector("div").innerText =
  10138. 							// @ts-ignore
  10139. 							getToolTipContent(rangeInputElement.value);
  10140. 						if (typeof formConfig.callback === "function") {
  10141. 							// @ts-ignore
  10142. 							formConfig.callback(event, event.target.value);
  10143. 						}
  10144. 					}
  10145. 				);
  10146. 				return liElement;
  10147. 			},
  10148. 			/**
  10149. 			 * 获取中间容器的元素<li>
  10150. 			 * type ==> slider
  10151. 			 * @param {PopsPanelSliderDetails} formConfig
  10152. 			 * @returns
  10153. 			 */
  10154. 			getSectionContainerItem_slider_new(formConfig) {
  10155. 				let liElement = document.createElement("li");
  10156. 				// @ts-ignore
  10157. 				liElement.__formConfig__ = formConfig;
  10158. 				if (formConfig.className) {
  10159. 					liElement.className = formConfig.className;
  10160. 				}
  10161. 				// @ts-ignore
  10162. 				this.addElementAttributes(liElement, formConfig.attributes);
  10163. 				// @ts-ignore
  10164. 				this.setElementProps(liElement, formConfig.props);
  10165. 				/* 左边底部的描述的文字 */
  10166. 				let leftDescriptionText = "";
  10167. 				if (Boolean(formConfig.description)) {
  10168. 					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  10169. 				}
  10170. 				liElement.innerHTML = `
  10171.         <div class="pops-panel-item-left-text" style="flex: 1;">
  10172.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  10173.           ${leftDescriptionText}
  10174.         </div>
  10175.         <div class="pops-slider pops-slider-width">
  10176.           <div class="pops-slider__runway">
  10177.             <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
  10178.             <div
  10179.               class="pops-slider__button-wrapper"
  10180.               style="left: 0%">
  10181.               <div class="pops-slider__button"></div>
  10182.             </div>
  10183.           </div>
  10184.         </div>
  10185.         `;
  10186. 				const PopsPanelSlider = {
  10187. 					[Symbol.toStringTag]: "PopsPanelSlider",
  10188. 					/**
  10189. 					 * 值
  10190. 					 */
  10191. 					value: formConfig.getValue(),
  10192. 					/**
  10193. 					 * 最小值
  10194. 					 */
  10195. 					min: formConfig.min,
  10196. 					/**
  10197. 					 * 最大值
  10198. 					 */
  10199. 					max: formConfig.max,
  10200. 					/**
  10201. 					 * 间隔
  10202. 					 */
  10203. 					step: formConfig.step || 1,
  10204. 					$data: {
  10205. 						/**
  10206. 						 * 是否正在移动
  10207. 						 */
  10208. 						isMove: false,
  10209. 						/**
  10210. 						 * 是否已初始化已拖拽的距离
  10211. 						 */
  10212. 						isInitDragPosition: false,
  10213. 						/**
  10214. 						 * 是否正在检测是否停止拖拽
  10215. 						 */
  10216. 						isCheckingStopDragMove: false,
  10217. 						/**
  10218. 						 * 总宽度（px）
  10219. 						 */
  10220. 						totalWidth: 0,
  10221. 						/**
  10222. 						 * 每一块的间隔（px）
  10223. 						 */
  10224. 						stepPx: 0,
  10225. 						/**
  10226. 						 * 已拖拽的距离（px）
  10227. 						 */
  10228. 						dragWidth: 0,
  10229. 						/**
  10230. 						 * 已拖拽的百分比
  10231. 						 */
  10232. 						dragPercent: 0,
  10233. 						/**
  10234. 						 * 每一次块的信息
  10235. 						 * 例如：当最小值是2，最大值是10，step为2
  10236. 						 * 那么生成[2,4,6,8,10] 共计5个
  10237. 						 * 又获取到当前滑块总长度是200px
  10238. 						 * 那么生成映射
  10239. 						 * 2 => 0px~40px
  10240. 						 * 4 => 40px~80px
  10241. 						 * 6 => 80px~120px
  10242. 						 * 8 => 120px~160px
  10243. 						 * 10 => 160px~200px
  10244. 						 * @type {Map<number,{
  10245. 						 * value: number,
  10246. 						 * px: number,
  10247. 						 * pxLeft: number,
  10248. 						 * pxRight: number,
  10249. 						 * percent: number,
  10250. 						 * }>}
  10251. 						 */
  10252. 						stepBlockMap: new Map(),
  10253. 					},
  10254. 					$ele: {
  10255. 						slider: liElement.querySelector(".pops-slider"),
  10256. 						runAway: liElement.querySelector(".pops-slider__runway"),
  10257. 						bar: liElement.querySelector(".pops-slider__bar"),
  10258. 						buttonWrapper: liElement.querySelector(
  10259. 							".pops-slider__button-wrapper"
  10260. 						),
  10261. 						button: liElement.querySelector(".pops-slider__button"),
  10262. 						/**
  10263. 						 * @type {{
  10264. 						 * guid: string,
  10265. 						 * $shadowContainer: HTMLDivElement,
  10266. 						 * $shadowRoot: ShadowRoot,
  10267. 						 * config: PopsToolTipDetails,
  10268. 						 * toolTipNode: HTMLDivElement,
  10269. 						 * show: ()=>void,
  10270. 						 * close: ()=>void,
  10271. 						 * off: ()=>void,
  10272. 						 * on: ()=>void,
  10273. 						 * }}
  10274. 						 */
  10275. 						// @ts-ignore
  10276. 						tooltip: null,
  10277. 					},
  10278. 					$interval: {
  10279. 						isCheck: false,
  10280. 					},
  10281. 					$tooltip: null,
  10282. 					init() {
  10283. 						this.initEleData();
  10284. 						this.setToolTipEvent();
  10285. 						this.setPanEvent();
  10286. 						this.setRunAwayClickEvent();
  10287. 						this.intervalInit();
  10288. 						if (formConfig.disabled) {
  10289. 							this.disableDrag();
  10290. 						}
  10291. 					},
  10292. 					/**
  10293. 					 * 10s内循环获取slider的宽度等信息
  10294. 					 * 获取到了就可以初始化left的值
  10295. 					 * @param {number} [checkStepTime=200] 每次检测的间隔时间
  10296. 					 * @param {number} [maxTime=10000] 最大的检测时间
  10297. 					 */
  10298. 					intervalInit(checkStepTime = 200, maxTime = 10000) {
  10299. 						if (this.$interval.isCheck) {
  10300. 							return;
  10301. 						}
  10302. 						this.$interval.isCheck = true;
  10303. 						let isSuccess = false;
  10304. 						let oldTotalWidth = this.$data.totalWidth;
  10305. 						// @ts-ignore
  10306. 						let timer = null;
  10307. 						let interval = setInterval(() => {
  10308. 							if (isSuccess) {
  10309. 								this.$interval.isCheck = false;
  10310. 								// @ts-ignore
  10311. 								clearTimeout(timer);
  10312. 								clearInterval(interval);
  10313. 							} else {
  10314. 								this.initTotalWidth();
  10315. 								if (this.$data.totalWidth !== 0) {
  10316. 									isSuccess = true;
  10317. 									if (this.$data.totalWidth !== oldTotalWidth) {
  10318. 										/* slider的总宽度改变了 */
  10319. 										if (MathFloatUtils.isFloat(this.step)) {
  10320. 											this.initFloatStepMap();
  10321. 										} else {
  10322. 											this.initStepMap();
  10323. 										}
  10324. 										this.initSliderPosition();
  10325. 									}
  10326. 								}
  10327. 							}
  10328. 						}, checkStepTime);
  10329. 						/* 最长检测时间是10s */
  10330. 						timer = setTimeout(() => {
  10331. 							clearInterval(interval);
  10332. 						}, maxTime);
  10333. 					},
  10334. 					/**
  10335. 					 * 把数据添加到元素上
  10336. 					 */
  10337. 					initEleData() {
  10338. 						// @ts-ignore
  10339. 						this.$ele.slider.setAttribute("data-min", this.min);
  10340. 						// @ts-ignore
  10341. 						this.$ele.slider.setAttribute("data-max", this.max);
  10342. 						// @ts-ignore
  10343. 						this.$ele.slider.setAttribute("data-value", this.value);
  10344. 						// @ts-ignore
  10345. 						this.$ele.slider.setAttribute("data-step", this.step);
  10346. 						// @ts-ignore
  10347. 						this.$ele.slider["data-min"] = this.min;
  10348. 						// @ts-ignore
  10349. 						this.$ele.slider["data-max"] = this.max;
  10350. 						// @ts-ignore
  10351. 						this.$ele.slider["data-value"] = this.value;
  10352. 						// @ts-ignore
  10353. 						this.$ele.slider["data-step"] = this.step;
  10354. 					},
  10355. 					/**
  10356. 					 * 初始化滑块的总长度的数据(px)
  10357. 					 */
  10358. 					initTotalWidth() {
  10359. 						// @ts-ignore
  10360. 						this.$data.totalWidth = PopsDOMUtils.width(this.$ele.runAway);
  10361. 					},
  10362. 					/**
  10363. 					 * 初始化每一个块的具体数据信息
  10364. 					 */
  10365. 					initStepMap() {
  10366. 						let index = 0;
  10367. 						// 计算出份数
  10368. 						let blockNums = (this.max - this.min) / this.step;
  10369. 						// 计算出每一份占据的px
  10370. 						this.$data.stepPx = this.$data.totalWidth / blockNums;
  10371. 						let widthPx = 0;
  10372. 						for (
  10373. 							let stepValue = this.min;
  10374. 							stepValue <= this.max;
  10375. 							stepValue += this.step
  10376. 						) {
  10377. 							let value = this.formatValue(stepValue);
  10378. 							let info = {};
  10379. 							if (value === this.min) {
  10380. 								/* 起始 */
  10381. 								info = {
  10382. 									value: value,
  10383. 									px: 0,
  10384. 									pxLeft: 0,
  10385. 									pxRight: this.$data.stepPx / 2,
  10386. 									percent: 0,
  10387. 								};
  10388. 							} else {
  10389. 								info = {
  10390. 									value: value,
  10391. 									px: widthPx,
  10392. 									pxLeft: widthPx - this.$data.stepPx / 2,
  10393. 									pxRight: widthPx + this.$data.stepPx / 2,
  10394. 									percent: widthPx / this.$data.totalWidth,
  10395. 								};
  10396. 								//if (value === this.max) {
  10397. 								//  info["pxLeft"] = this.$data.stepBlockMap.get(
  10398. 								//    index - 1
  10399. 								//  ).pxRight;
  10400. 								//  info["pxRight"] = this.$data.totalWidth;
  10401. 								//}
  10402. 							}
  10403. 							// @ts-ignore
  10404. 							this.$data.stepBlockMap.set(index, info);
  10405. 							index++;
  10406. 							widthPx += this.$data.stepPx;
  10407. 						}
  10408. 					},
  10409. 					/**
  10410. 					 * 初始化每一个块的具体数据信息（浮点）
  10411. 					 */
  10412. 					initFloatStepMap() {
  10413. 						let index = 0;
  10414. 						// 计算出份数
  10415. 						let blockNums = (this.max - this.min) / this.step;
  10416. 						// 计算出每一份占据的px
  10417. 						this.$data.stepPx = this.$data.totalWidth / blockNums;
  10418. 						let widthPx = 0;
  10419. 						for (
  10420. 							let stepValue = this.min;
  10421. 							stepValue <= this.max;
  10422. 							stepValue = MathFloatUtils.add(stepValue, this.step)
  10423. 						) {
  10424. 							let value = this.formatValue(stepValue);
  10425. 							let info = {};
  10426. 							if (value === this.min) {
  10427. 								/* 起始 */
  10428. 								info = {
  10429. 									value: value,
  10430. 									px: 0,
  10431. 									pxLeft: 0,
  10432. 									pxRight: this.$data.stepPx / 2,
  10433. 									percent: 0,
  10434. 								};
  10435. 							} else {
  10436. 								info = {
  10437. 									value: value,
  10438. 									px: widthPx,
  10439. 									pxLeft: widthPx - this.$data.stepPx / 2,
  10440. 									pxRight: widthPx + this.$data.stepPx / 2,
  10441. 									percent: widthPx / this.$data.totalWidth,
  10442. 								};
  10443. 								//if (value === this.max) {
  10444. 								//  info["pxLeft"] = this.$data.stepBlockMap.get(
  10445. 								//    index - 1
  10446. 								//  ).pxRight;
  10447. 								//  info["pxRight"] = this.$data.totalWidth;
  10448. 								//}
  10449. 							}
  10450. 							// @ts-ignore
  10451. 							this.$data.stepBlockMap.set(index, info);
  10452. 							index++;
  10453. 							widthPx += this.$data.stepPx;
  10454. 						}
  10455. 					},
  10456. 					/**
  10457. 					 * 初始化slider的默认起始left的百分比值
  10458. 					 */
  10459. 					initSliderPosition() {
  10460. 						/* 设置起始默认style的left值 */
  10461. 						let percent = 0;
  10462. 						for (const [
  10463. 							// @ts-ignore
  10464. 							// @ts-ignore
  10465. 							index,
  10466. 							stepBlockInfo,
  10467. 						] of this.$data.stepBlockMap.entries()) {
  10468. 							/* 判断值是否和区域内的值相等 */
  10469. 							if (stepBlockInfo.value == this.value) {
  10470. 								percent = stepBlockInfo.percent;
  10471. 								this.$data.dragWidth = stepBlockInfo.px;
  10472. 								break;
  10473. 							}
  10474. 						}
  10475. 						percent = this.formatValue(percent * 100);
  10476. 						this.setSliderPosition(percent);
  10477. 					},
  10478. 					/**
  10479. 					 * 判断数字是否是浮点数
  10480. 					 * @param {number} num
  10481. 					 * @returns
  10482. 					 */
  10483. 					isFloat(num) {
  10484. 						return Number(num) === num && num % 1 !== 0;
  10485. 					},
  10486. 					/**
  10487. 					 * 值改变的回调
  10488. 					 * @param {any} event
  10489. 					 * @param {number} value
  10490. 					 */
  10491. 					valueChangeCallBack(event, value) {
  10492. 						if (typeof formConfig.callback === "function") {
  10493. 							formConfig.callback(event, value);
  10494. 						}
  10495. 					},
  10496. 					/**
  10497. 					 * 根据拖拽距离获取滑块应该在的区间和值
  10498. 					 */
  10499. 					// @ts-ignore
  10500. 					getDragInfo(dragX) {
  10501. 						let result = this.$data.stepBlockMap.get(0);
  10502. 						for (const [
  10503. 							// @ts-ignore
  10504. 							// @ts-ignore
  10505. 							index,
  10506. 							stepBlockInfo,
  10507. 						] of this.$data.stepBlockMap.entries()) {
  10508. 							if (
  10509. 								stepBlockInfo.pxLeft <= dragX &&
  10510. 								dragX < stepBlockInfo.pxRight
  10511. 							) {
  10512. 								result = stepBlockInfo;
  10513. 								break;
  10514. 							}
  10515. 						}
  10516. 						return result;
  10517. 					},
  10518. 					/**
  10519. 					 * 获取滑块的当前脱拖拽占据的百分比
  10520. 					 * @param {number} dragWidth
  10521. 					 */
  10522. 					getSliderPositonPercent(dragWidth) {
  10523. 						return dragWidth / this.$data.totalWidth;
  10524. 					},
  10525. 					/**
  10526. 					 * 根据step格式化value
  10527. 					 * @param {number} num
  10528. 					 */
  10529. 					formatValue(num) {
  10530. 						if (MathFloatUtils.isFloat(this.step)) {
  10531. 							num = parseFloat(num.toFixed(2));
  10532. 						} else {
  10533. 							// @ts-ignore
  10534. 							num = parseInt(num);
  10535. 						}
  10536. 						return num;
  10537. 					},
  10538. 					/**
  10539. 					 * 设置滑块的位置偏移（left）
  10540. 					 * @param {number} percent 百分比
  10541. 					 */
  10542. 					setSliderPosition(percent) {
  10543. 						// @ts-ignore
  10544. 						if (parseInt(percent) === 1) {
  10545. 							percent = 1;
  10546. 						}
  10547. 						if (percent > 1) {
  10548. 							percent = percent / 100;
  10549. 						}
  10550. 						/* 滑块按钮的偏移 */
  10551. 						// @ts-ignore
  10552. 						this.$ele.buttonWrapper.style.left = `${percent * 100}%`;
  10553. 						/* 滑块进度的宽度 */
  10554. 						// @ts-ignore
  10555. 						this.$ele.bar.style.width = `${percent * 100}%`;
  10556. 					},
  10557. 					/**
  10558. 					 * 禁止拖拽
  10559. 					 */
  10560. 					disableDrag() {
  10561. 						// @ts-ignore
  10562. 						this.$ele.runAway.classList.add("pops-slider-is-disabled");
  10563. 					},
  10564. 					/**
  10565. 					 * 允许拖拽
  10566. 					 */
  10567. 					allowDrag() {
  10568. 						// @ts-ignore
  10569. 						this.$ele.runAway.classList.remove("pops-slider-is-disabled");
  10570. 					},
  10571. 					/**
  10572. 					 * 判断当前滑块是否被禁用
  10573. 					 */
  10574. 					isDisabledDrag() {
  10575. 						// @ts-ignore
  10576. 						return this.$ele.runAway.classList.contains(
  10577. 							"pops-slider-is-disabled"
  10578. 						);
  10579. 					},
  10580. 					/**
  10581. 					 * 设置进度条点击定位的事件
  10582. 					 */
  10583. 					setRunAwayClickEvent() {
  10584. 						PopsDOMUtils.on(
  10585. 							// @ts-ignore
  10586. 							this.$ele.runAway,
  10587. 							"click",
  10588. 							void 0,
  10589. 							/**
  10590. 							 *
  10591. 							 * @param {PointerEvent} event
  10592. 							 */
  10593. 							(event) => {
  10594. 								if (
  10595. 									event.target !== this.$ele.runAway &&
  10596. 									event.target !== this.$ele.bar
  10597. 								) {
  10598. 									return;
  10599. 								}
  10600. 								// @ts-ignore
  10601. 								let clickX = parseFloat(event.offsetX);
  10602. 								this.dragStartCallBack();
  10603. 								this.dragMoveCallBack(event, clickX, this.value);
  10604. 								this.dragEndCallBack(clickX);
  10605. 							},
  10606. 							{
  10607. 								capture: false,
  10608. 							}
  10609. 						);
  10610. 					},
  10611. 					/**
  10612. 					 * 拖拽开始的回调，如果返回false，禁止拖拽
  10613. 					 */
  10614. 					dragStartCallBack() {
  10615. 						if (!this.$data.isMove) {
  10616. 							if (this.isDisabledDrag()) {
  10617. 								return false;
  10618. 							}
  10619. 							this.$data.isMove = true;
  10620. 						}
  10621. 						return true;
  10622. 					},
  10623. 					/**
  10624. 					 * 拖拽中的回调
  10625. 					 * @param {MouseEvent|TouchEvent} event 事件
  10626. 					 * @param {number} dragX 当前拖拽的距离
  10627. 					 * @param {number} oldValue 旧的值
  10628. 					 */
  10629. 					dragMoveCallBack(event, dragX, oldValue) {
  10630. 						let dragPercent = 0;
  10631. 						if (dragX <= 0) {
  10632. 							dragPercent = 0;
  10633. 							this.value = this.min;
  10634. 						} else if (dragX >= this.$data.totalWidth) {
  10635. 							dragPercent = 1;
  10636. 							this.value = this.max;
  10637. 						} else {
  10638. 							const dragInfo = this.getDragInfo(dragX);
  10639. 							// @ts-ignore
  10640. 							dragPercent = dragInfo.percent;
  10641. 							// @ts-ignore
  10642. 							this.value = this.formatValue(dragInfo.value);
  10643. 						}
  10644. 						this.$data.dragPercent = dragPercent;
  10645. 						this.setSliderPosition(this.$data.dragPercent);
  10646. 						this.showToolTip();
  10647. 						if (oldValue !== this.value) {
  10648. 							this.valueChangeCallBack(event, this.value);
  10649. 						}
  10650. 					},
  10651. 					/**
  10652. 					 * 拖拽结束的回调
  10653. 					 */
  10654. 					// @ts-ignore
  10655. 					dragEndCallBack(dragX) {
  10656. 						this.$data.isMove = false;
  10657. 						if (dragX <= 0) {
  10658. 							this.$data.dragWidth = 0;
  10659. 						} else if (dragX >= this.$data.totalWidth) {
  10660. 							this.$data.dragWidth = this.$data.totalWidth;
  10661. 						} else {
  10662. 							this.$data.dragWidth = dragX;
  10663. 						}
  10664. 						this.closeToolTip();
  10665. 					},
  10666. 					/**
  10667. 					 * 设置点击拖拽事件
  10668. 					 */
  10669. 					setPanEvent() {
  10670. 						const AnyTouch = PopsUtils.AnyTouch();
  10671. 						// @ts-ignore
  10672. 						this.$tooltip = new AnyTouch(this.$ele.button, {
  10673. 							preventEvent() {
  10674. 								return false;
  10675. 							},
  10676. 						});
  10677. 						/**
  10678. 						 * 当前的拖拽的距离px
  10679. 						 * @type {number}
  10680. 						 */
  10681. 						let currentDragX = 0;
  10682. 						/* 监听拖拽 */
  10683. 						// @ts-ignore
  10684. 						this.$tooltip.on("at:move", (event) => {
  10685. 							if (!this.dragStartCallBack()) {
  10686. 								return;
  10687. 							}
  10688. 							let oldValue = this.value;
  10689. 							// @ts-ignore
  10690. 							const runAwayRect = this.$ele.runAway.getBoundingClientRect();
  10691. 							let displacementX =
  10692. 								event.x - (runAwayRect.left + globalThis.screenX);
  10693. 							if (displacementX <= 0) {
  10694. 								displacementX = 0;
  10695. 							} else if (displacementX >= runAwayRect.width) {
  10696. 								displacementX = runAwayRect.width;
  10697. 							}
  10698. 							currentDragX = displacementX;
  10699. 							/* 拖拽移动 */
  10700. 							this.dragMoveCallBack(event, currentDragX, oldValue);
  10701. 						});
  10702. 						/* 监听触点离开，处理某些情况下，拖拽松开，但是未触发pan事件，可以通过设置这个来关闭tooltip */
  10703. 						// @ts-ignore
  10704. 						// @ts-ignore
  10705. 						this.$tooltip.on("at:end", (event) => {
  10706. 							this.dragEndCallBack(currentDragX);
  10707. 						});
  10708. 					},
  10709. 					/**
  10710. 					 * 显示悬浮的
  10711. 					 */
  10712. 					showToolTip() {
  10713. 						this.$ele.tooltip.show();
  10714. 					},
  10715. 					/**
  10716. 					 * 关闭悬浮的
  10717. 					 */
  10718. 					closeToolTip() {
  10719. 						this.$ele.tooltip.close();
  10720. 					},
  10721. 					/**
  10722. 					 * 检测在1000ms内，是否停止了拖拽
  10723. 					 */
  10724. 					checkStopDragMove() {
  10725. 						if (this.$data.isCheckingStopDragMove) {
  10726. 							return;
  10727. 						}
  10728. 						this.$data.isCheckingStopDragMove = true;
  10729. 						let interval = setInterval(() => {
  10730. 							if (!this.$data.isMove) {
  10731. 								this.$data.isCheckingStopDragMove = false;
  10732. 								this.closeToolTip();
  10733. 								clearInterval(interval);
  10734. 							}
  10735. 						}, 200);
  10736. 						setTimeout(() => {
  10737. 							this.$data.isCheckingStopDragMove = false;
  10738. 							clearInterval(interval);
  10739. 						}, 2000);
  10740. 					},
  10741. 					/**
  10742. 					 * 设置拖拽按钮的悬浮事件
  10743. 					 */
  10744. 					setToolTipEvent() {
  10745. 						/**
  10746. 						 * 获取提示的内容
  10747. 						 */
  10748. 						function getToolTipContent() {
  10749. 							if (typeof formConfig.getToolTipContent === "function") {
  10750. 								return formConfig.getToolTipContent(PopsPanelSlider.value);
  10751. 							} else {
  10752. 								return PopsPanelSlider.value;
  10753. 							}
  10754. 						}
  10755. 						// @ts-ignore
  10756. 						let tooltipContent = null;
  10757. 						// @ts-ignore
  10758. 						this.$ele.tooltip = pops.tooltip({
  10759. 							// @ts-ignore
  10760. 							target: this.$ele.button,
  10761. 							// @ts-ignore
  10762. 							content: getToolTipContent,
  10763. 							zIndex: 1000000,
  10764. 							className: "github-tooltip",
  10765. 							only: false,
  10766. 							eventOption: {
  10767. 								capture: true,
  10768. 								passive: true,
  10769. 							},
  10770. 							showBeforeCallBack: () => {
  10771. 								this.intervalInit();
  10772. 							},
  10773. 							// @ts-ignore
  10774. 							// @ts-ignore
  10775. 							showAfterCallBack: (toolTipNode) => {
  10776. 								// @ts-ignore
  10777. 								tooltipContent.innerText = getToolTipContent();
  10778. 							},
  10779. 							closeBeforeCallBack: () => {
  10780. 								if (this.$data.isMove) {
  10781. 									this.checkStopDragMove();
  10782. 									return false;
  10783. 								}
  10784. 							},
  10785. 							alwaysShow: false,
  10786. 							// @ts-ignore
  10787. 							only: false,
  10788. 							// @ts-ignore
  10789. 							position: "top",
  10790. 							arrowDistance: 10,
  10791. 						});
  10792. 						tooltipContent = this.$ele.tooltip.toolTipNode.querySelector("div");
  10793. 					},
  10794. 				};
  10795. 				PopsPanelSlider.init();
  10796. 				// @ts-ignore
  10797. 				liElement["data-slider"] = PopsPanelSlider;
  10798. 				return liElement;
  10799. 			},
  10800. 			/**
  10801. 			 * 获取中间容器的元素<li>
  10802. 			 * type ==> input
  10803. 			 * @param {PopsPanelInputDetails} formConfig
  10804. 			 * @returns
  10805. 			 */
  10806. 			getSectionContainerItem_input(formConfig) {
  10807. 				let liElement = document.createElement("li");
  10808. 				// @ts-ignore
  10809. 				liElement.__formConfig__ = formConfig;
  10810. 				if (formConfig.className) {
  10811. 					liElement.className = formConfig.className;
  10812. 				}
  10813. 				// @ts-ignore
  10814. 				this.addElementAttributes(liElement, formConfig.attributes);
  10815. 				// @ts-ignore
  10816. 				this.setElementProps(liElement, formConfig.props);
  10817. 				let inputType = "text";
  10818. 				if (formConfig.isPassword) {
  10819. 					inputType = "password";
  10820. 				} else if (formConfig.isNumber) {
  10821. 					inputType = "number";
  10822. 				}
  10823. 				/* 左边底部的描述的文字 */
  10824. 				let leftDescriptionText = "";
  10825. 				if (Boolean(formConfig.description)) {
  10826. 					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  10827. 				}
  10828. 				liElement.innerHTML = `
  10829.         <div class="pops-panel-item-left-text">
  10830.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  10831.           ${leftDescriptionText}
  10832.         </div>
  10833.         <div class="pops-panel-input">
  10834.           <input type="${inputType}" placeholder="${formConfig.placeholder}">
  10835.         </div>
  10836.         `;
  10837. 				const PopsPanelInput = {
  10838. 					[Symbol.toStringTag]: "PopsPanelInput",
  10839. 					$ele: {
  10840. 						/**
  10841. 						 * @type {HTMLDivElement}
  10842. 						 */
  10843. 						// @ts-ignore
  10844. 						panelInput: liElement.querySelector(".pops-panel-input"),
  10845. 						/**
  10846. 						 * @type {HTMLInputElement}
  10847. 						 */
  10848. 						// @ts-ignore
  10849. 						input: liElement.querySelector("input"),
  10850. 						inputSpanIcon: document.createElement("span"),
  10851. 						/**
  10852. 						 * @type {HTMLSpanElement}
  10853. 						 */
  10854. 						// @ts-ignore
  10855. 						inputSpanIconInner: null,
  10856. 						/**
  10857. 						 * @type {HTMLElement}
  10858. 						 */
  10859. 						// @ts-ignore
  10860. 						icon: null,
  10861. 					},
  10862. 					$data: {
  10863. 						value: formConfig.getValue(),
  10864. 						isView: false,
  10865. 					},
  10866. 					init() {
  10867. 						this.initEle();
  10868. 						this.setInputValue(this.$data.value);
  10869. 						/* 如果是密码框，放进图标 */
  10870. 						if (formConfig.isPassword) {
  10871. 							this.setCircleIcon(pops.config.iconSVG.view);
  10872. 							this.setCircleIconClickEvent();
  10873. 						} else {
  10874. 							/* 先判断预设值是否为空，不为空添加清空图标按钮 */
  10875. 							if (this.$ele.input.value != "") {
  10876. 								this.setCircleIcon(pops.config.iconSVG.circleClose);
  10877. 								this.setCircleIconClickEvent();
  10878. 							}
  10879. 						}
  10880.  
  10881. 						this.setInputChangeEvent();
  10882. 						if (formConfig.disabled) {
  10883. 							this.disable();
  10884. 						}
  10885. 						if (typeof formConfig.handlerCallBack === "function") {
  10886. 							// @ts-ignore
  10887. 							formConfig.handlerCallBack(liElement, this.$ele.input);
  10888. 						}
  10889. 					},
  10890. 					/**
  10891. 					 * 初始化$ele的配置
  10892. 					 */
  10893. 					initEle() {
  10894. 						// @ts-ignore
  10895. 						this.$ele.input.parentElement.insertBefore(
  10896. 							this.$ele.inputSpanIcon,
  10897. 							this.$ele.input.nextSibling
  10898. 						);
  10899. 						this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
  10900. 						this.$ele.inputSpanIcon.innerHTML = `
  10901.             <span class="pops-panel-input__suffix-inner">
  10902.               <i class="pops-panel-icon"></i>
  10903.             </span>
  10904.             `;
  10905. 						// @ts-ignore
  10906. 						this.$ele.inputSpanIconInner =
  10907. 							this.$ele.inputSpanIcon.querySelector(
  10908. 								".pops-panel-input__suffix-inner"
  10909. 							);
  10910. 						// @ts-ignore
  10911. 						this.$ele.icon =
  10912. 							this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
  10913. 					},
  10914. 					/**
  10915. 					 * 禁用
  10916. 					 */
  10917. 					disable() {
  10918. 						this.$ele.input.disabled = true;
  10919. 						this.$ele.panelInput.classList.add("pops-input-disabled");
  10920. 					},
  10921. 					/**
  10922. 					 * 取消禁用
  10923. 					 */
  10924. 					notDisable() {
  10925. 						this.$ele.input.disabled = false;
  10926. 						this.$ele.panelInput.classList.remove("pops-input-disabled");
  10927. 					},
  10928. 					/**
  10929. 					 * 判断是否已被禁用
  10930. 					 */
  10931. 					isDisabled() {
  10932. 						return this.$ele.input.disabled;
  10933. 					},
  10934. 					/**
  10935. 					 * 设置输入框内容
  10936. 					 * @param {string} [value=""] 值
  10937. 					 */
  10938. 					setInputValue(value = "") {
  10939. 						this.$ele.input.value = value;
  10940. 					},
  10941. 					/**
  10942. 					 * 设置input元素的type
  10943. 					 * @param {string} [typeValue="text"] type值
  10944. 					 */
  10945. 					setInputType(typeValue = "text") {
  10946. 						this.$ele.input.setAttribute("type", typeValue);
  10947. 					},
  10948. 					/**
  10949. 					 * 删除图标按钮
  10950. 					 */
  10951. 					removeCircleIcon() {
  10952. 						this.$ele.icon.innerHTML = "";
  10953. 					},
  10954. 					/**
  10955. 					 * 添加清空图标按钮
  10956. 					 * @param {string} [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
  10957. 					 */
  10958. 					setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
  10959. 						this.$ele.icon.innerHTML = svgHTML;
  10960. 					},
  10961. 					/**
  10962. 					 * 添加图标按钮的点击事件
  10963. 					 */
  10964. 					setCircleIconClickEvent() {
  10965. 						// @ts-ignore
  10966. 						PopsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
  10967. 							if (this.isDisabled()) {
  10968. 								return;
  10969. 							}
  10970. 							/* 删除图标 */
  10971. 							this.removeCircleIcon();
  10972. 							if (formConfig.isPassword) {
  10973. 								/* 密码输入框 */
  10974. 								if (this.$data.isView) {
  10975. 									/* 当前可见 => 点击改变为隐藏 */
  10976. 									this.$data.isView = false;
  10977. 									/* 显示输入框内容，且更换图标为隐藏图标 */
  10978. 									this.setInputType("text");
  10979. 									this.setCircleIcon(pops.config.iconSVG.hide);
  10980. 								} else {
  10981. 									/* 当前不可见 => 点击改变为显示 */
  10982. 									this.$data.isView = true;
  10983. 									/* 隐藏输入框内容，且更换图标为显示图标 */
  10984. 									this.setInputType("password");
  10985. 									this.setCircleIcon(pops.config.iconSVG.view);
  10986. 								}
  10987. 							} else {
  10988. 								/* 普通输入框 */
  10989. 								/* 清空内容 */
  10990. 								this.setInputValue("");
  10991. 								/* 获取焦点 */
  10992. 								this.$ele.input.focus();
  10993. 								/* 触发内容改变事件 */
  10994. 								this.$ele.input.dispatchEvent(new Event("input"));
  10995. 							}
  10996. 						});
  10997. 					},
  10998. 					/**
  10999. 					 * 监听输入框内容改变
  11000. 					 */
  11001. 					setInputChangeEvent() {
  11002. 						// @ts-ignore
  11003. 						PopsDOMUtils.on(
  11004. 							this.$ele.input,
  11005. 							["input", "propertychange"],
  11006. 							void 0,
  11007. 							(event) => {
  11008. 								this.$data.value = this.$ele.input.value;
  11009. 								if (!formConfig.isPassword) {
  11010. 									/* 不是密码框 */
  11011. 									if (
  11012. 										this.$ele.input.value !== "" &&
  11013. 										this.$ele.icon.innerHTML === ""
  11014. 									) {
  11015. 										/* 不为空，显示清空图标 */
  11016. 										this.setCircleIcon(pops.config.iconSVG.circleClose);
  11017. 										this.setCircleIconClickEvent();
  11018. 									} else if (this.$ele.input.value === "") {
  11019. 										this.removeCircleIcon();
  11020. 									}
  11021. 								}
  11022. 								if (typeof formConfig.callback === "function") {
  11023. 									if (formConfig.isNumber) {
  11024. 										formConfig.callback(
  11025. 											// @ts-ignore
  11026. 											event,
  11027. 											this.$ele.input.value,
  11028. 											this.$ele.input.valueAsNumber
  11029. 										);
  11030. 									} else {
  11031. 										// @ts-ignore
  11032. 										formConfig.callback(event, this.$ele.input.value);
  11033. 									}
  11034. 								}
  11035. 							}
  11036. 						);
  11037. 					},
  11038. 				};
  11039. 				PopsPanelInput.init();
  11040. 				// @ts-ignore
  11041. 				liElement["data-input"] = PopsPanelInput;
  11042. 				return liElement;
  11043. 			},
  11044. 			/**
  11045. 			 * 获取中间容器的元素<li>
  11046. 			 * type ==> textarea
  11047. 			 * @param {PopsPanelTextAreaDetails} formConfig
  11048. 			 * @returns
  11049. 			 */
  11050. 			getSectionContainerItem_textarea(formConfig) {
  11051. 				let liElement = document.createElement("li");
  11052. 				// @ts-ignore
  11053. 				liElement.__formConfig__ = formConfig;
  11054. 				if (formConfig.className) {
  11055. 					liElement.className = formConfig.className;
  11056. 				}
  11057. 				// @ts-ignore
  11058. 				this.addElementAttributes(liElement, formConfig.attributes);
  11059. 				// @ts-ignore
  11060. 				this.setElementProps(liElement, formConfig.props);
  11061.  
  11062. 				/* 左边底部的描述的文字 */
  11063. 				let leftDescriptionText = "";
  11064. 				if (Boolean(formConfig.description)) {
  11065. 					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  11066. 				}
  11067. 				liElement.innerHTML = `
  11068.         <div class="pops-panel-item-left-text">
  11069.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  11070.           ${leftDescriptionText}
  11071.         </div>
  11072.         <div class="pops-panel-textarea">
  11073.           <textarea placeholder="${formConfig.placeholder ?? ""}">
  11074.           </textarea>
  11075.         </div>
  11076.         `;
  11077.  
  11078. 				const PopsPanelTextArea = {
  11079. 					[Symbol.toStringTag]: "PopsPanelTextArea",
  11080. 					$ele: {
  11081. 						/**
  11082. 						 * @type {HTMLDivElement}
  11083. 						 */
  11084. 						// @ts-ignore
  11085. 						panelTextarea: liElement.querySelector(".pops-panel-textarea"),
  11086. 						/**
  11087. 						 * @type {HTMLTextAreaElement}
  11088. 						 */
  11089. 						// @ts-ignore
  11090. 						textarea: liElement.querySelector(".pops-panel-textarea textarea"),
  11091. 					},
  11092. 					$data: {
  11093. 						value: formConfig.getValue(),
  11094. 					},
  11095. 					init() {
  11096. 						this.setValue(this.$data.value);
  11097. 						this.setChangeEvent();
  11098. 						if (formConfig.disabled) {
  11099. 							this.disable();
  11100. 						}
  11101. 					},
  11102. 					disable() {
  11103. 						// @ts-ignore
  11104. 						this.$ele.textarea.setAttribute("disabled", true);
  11105. 						this.$ele.panelTextarea.classList.add(
  11106. 							"pops-panel-textarea-disable"
  11107. 						);
  11108. 					},
  11109. 					notDisable() {
  11110. 						// @ts-ignore
  11111. 						this.$ele.textarea.removeAttribute("disabled", true);
  11112. 						this.$ele.panelTextarea.classList.remove(
  11113. 							"pops-panel-textarea-disable"
  11114. 						);
  11115. 					},
  11116. 					isDisabled() {
  11117. 						return (
  11118. 							this.$ele.textarea.hasAttribute("disabled") ||
  11119. 							// @ts-ignore
  11120. 							this.$ele.panelTextarea.classList.hasAttribute(
  11121. 								"pops-panel-textarea-disable"
  11122. 							)
  11123. 						);
  11124. 					},
  11125. 					// @ts-ignore
  11126. 					setValue(value) {
  11127. 						this.$ele.textarea.value = value;
  11128. 					},
  11129. 					/**
  11130. 					 * 监听选择内容改变
  11131. 					 */
  11132. 					setChangeEvent() {
  11133. 						// @ts-ignore
  11134. 						PopsDOMUtils.on(
  11135. 							this.$ele.textarea,
  11136. 							["input", "propertychange"],
  11137. 							void 0,
  11138. 							(event) => {
  11139. 								// @ts-ignore
  11140. 								this.$data.value = event.target.value;
  11141. 								if (typeof formConfig.callback === "function") {
  11142. 									// @ts-ignore
  11143. 									formConfig.callback(event, event.target.value);
  11144. 								}
  11145. 							}
  11146. 						);
  11147. 					},
  11148. 				};
  11149.  
  11150. 				PopsPanelTextArea.init();
  11151. 				// @ts-ignore
  11152. 				liElement["data-textarea"] = PopsPanelTextArea;
  11153.  
  11154. 				return liElement;
  11155. 			},
  11156. 			/**
  11157. 			 * 获取中间容器的元素<li>
  11158. 			 * type ==> select
  11159. 			 * @param {PopsPanelSelectDetails<any>} formConfig
  11160. 			 * @returns
  11161. 			 */
  11162. 			getSectionContainerItem_select(formConfig) {
  11163. 				let liElement = document.createElement("li");
  11164. 				// @ts-ignore
  11165. 				liElement.__formConfig__ = formConfig;
  11166. 				if (formConfig.className) {
  11167. 					liElement.className = formConfig.className;
  11168. 				}
  11169. 				// @ts-ignore
  11170. 				this.addElementAttributes(liElement, formConfig.attributes);
  11171. 				// @ts-ignore
  11172. 				this.setElementProps(liElement, formConfig.props);
  11173. 				/* 左边底部的描述的文字 */
  11174. 				let leftDescriptionText = "";
  11175. 				if (Boolean(formConfig.description)) {
  11176. 					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  11177. 				}
  11178. 				liElement.innerHTML = `
  11179.         <div class="pops-panel-item-left-text">
  11180.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  11181.           ${leftDescriptionText}
  11182.         </div>
  11183.         <div class="pops-panel-select">
  11184.           <select>
  11185.  
  11186.           </select>
  11187.         </div>
  11188.         `;
  11189.  
  11190. 				const PopsPanelSelect = {
  11191. 					[Symbol.toStringTag]: "PopsPanelSelect",
  11192. 					$ele: {
  11193. 						/**
  11194. 						 * @type {HTMLDivElement}
  11195. 						 */
  11196. 						// @ts-ignore
  11197. 						panelSelect: liElement.querySelector(".pops-panel-select"),
  11198. 						/**
  11199. 						 * @type {HTMLSelectElement}
  11200. 						 */
  11201. 						// @ts-ignore
  11202. 						select: liElement.querySelector(".pops-panel-select select"),
  11203. 					},
  11204. 					$data: {
  11205. 						defaultValue: formConfig.getValue(),
  11206. 					},
  11207. 					init() {
  11208. 						this.initOption();
  11209. 						this.setChangeEvent();
  11210. 						this.setClickEvent();
  11211. 						if (formConfig.disabled) {
  11212. 							this.disable();
  11213. 						}
  11214. 					},
  11215. 					disable() {
  11216. 						// @ts-ignore
  11217. 						this.$ele.select.setAttribute("disabled", true);
  11218. 						this.$ele.panelSelect.classList.add("pops-panel-select-disable");
  11219. 					},
  11220. 					notDisable() {
  11221. 						// @ts-ignore
  11222. 						this.$ele.select.removeAttribute("disabled", true);
  11223. 						this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
  11224. 					},
  11225. 					isDisabled() {
  11226. 						return (
  11227. 							this.$ele.select.hasAttribute("disabled") ||
  11228. 							// @ts-ignore
  11229. 							this.$ele.panelSelect.classList.hasAttribute(
  11230. 								"pops-panel-select-disable"
  11231. 							)
  11232. 						);
  11233. 					},
  11234. 					initOption() {
  11235. 						formConfig.data.forEach((dataItem) => {
  11236. 							let optionElement = document.createElement("option");
  11237. 							// @ts-ignore
  11238. 							optionElement.__value__ = dataItem.value;
  11239. 							// @ts-ignore
  11240. 							optionElement.__disable__ = dataItem.disable;
  11241. 							if (dataItem.value === this.$data.defaultValue) {
  11242. 								// @ts-ignore
  11243. 								optionElement.setAttribute("selected", true);
  11244. 							}
  11245. 							optionElement.innerText = dataItem.text;
  11246. 							this.$ele.select.appendChild(optionElement);
  11247. 						});
  11248. 					},
  11249. 					setSelectOptionsDisableStatus() {
  11250. 						if (this.$ele.select.options && this.$ele.select.options.length) {
  11251. 							Array.from(this.$ele.select.options).forEach((optionItem) => {
  11252. 								this.setOptionDisableStatus(optionItem);
  11253. 							});
  11254. 						}
  11255. 					},
  11256. 					// @ts-ignore
  11257. 					setOptionDisableStatus(optionElement) {
  11258. 						if (typeof optionElement.__disable__ === "function") {
  11259. 							let disableStatus = optionElement.__disable__(
  11260. 								optionElement.__value__
  11261. 							);
  11262. 							if (disableStatus) {
  11263. 								optionElement.setAttribute("disabled", true);
  11264. 							} else {
  11265. 								optionElement.removeAttribute("disabled");
  11266. 							}
  11267. 						}
  11268. 					},
  11269. 					/**
  11270. 					 * 监听选择内容改变
  11271. 					 */
  11272. 					setChangeEvent() {
  11273. 						// @ts-ignore
  11274. 						PopsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
  11275. 							this.setSelectOptionsDisableStatus();
  11276. 							if (typeof formConfig.callback === "function") {
  11277. 								/**
  11278. 								 * @type {HTMLOptionElement}
  11279. 								 */
  11280. 								let isSelectedElement =
  11281. 									// @ts-ignore
  11282. 									event.target[event.target.selectedIndex];
  11283. 								// @ts-ignore
  11284. 								let isSelectedValue = isSelectedElement.__value__;
  11285. 								let isSelectedText =
  11286. 									isSelectedElement.innerText || isSelectedElement.textContent;
  11287. 								// @ts-ignore
  11288. 								formConfig.callback(event, isSelectedValue, isSelectedText);
  11289. 							}
  11290. 						});
  11291. 					},
  11292. 					/**
  11293. 					 * 监听点击事件
  11294. 					 */
  11295. 					setClickEvent() {
  11296. 						// @ts-ignore
  11297. 						PopsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
  11298. 							this.setSelectOptionsDisableStatus();
  11299. 							if (typeof formConfig.clickCallBack === "function") {
  11300. 								// @ts-ignore
  11301. 								formConfig.clickCallBack(event, this.$ele.select);
  11302. 							}
  11303. 						});
  11304. 					},
  11305. 				};
  11306.  
  11307. 				PopsPanelSelect.init();
  11308. 				// @ts-ignore
  11309. 				liElement["data-select"] = PopsPanelSelect;
  11310. 				return liElement;
  11311. 			},
  11312. 			/**
  11313. 			 * 获取中间容器的元素<li>
  11314. 			 * type ==> button
  11315. 			 * @param {PopsPanelButtonDetails} formConfig
  11316. 			 * @returns
  11317. 			 */
  11318. 			getSectionContainerItem_button(formConfig) {
  11319. 				let liElement = document.createElement("li");
  11320. 				// @ts-ignore
  11321. 				liElement.__formConfig__ = formConfig;
  11322. 				if (formConfig.className) {
  11323. 					liElement.className = formConfig.className;
  11324. 				}
  11325. 				// @ts-ignore
  11326. 				this.addElementAttributes(liElement, formConfig.attributes);
  11327. 				// @ts-ignore
  11328. 				this.setElementProps(liElement, formConfig.props);
  11329.  
  11330. 				/* 左边底部的描述的文字 */
  11331. 				let leftDescriptionText = "";
  11332. 				if (Boolean(formConfig.description)) {
  11333. 					leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
  11334. 				}
  11335. 				liElement.innerHTML = `
  11336.         <div class="pops-panel-item-left-text">
  11337.           <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
  11338.           ${leftDescriptionText}
  11339.         </div>
  11340.         <div class="pops-panel-button">
  11341.           <button class="pops-panel-button_inner">
  11342.             <i class="pops-bottom-icon"></i>
  11343.             <span class="pops-panel-button-text"></span>
  11344.           </button>
  11345.         </div>
  11346.         `;
  11347.  
  11348. 				const PopsPanelButton = {
  11349. 					[Symbol.toStringTag]: "PopsPanelButton",
  11350. 					$ele: {
  11351. 						panelButton: liElement.querySelector(".pops-panel-button"),
  11352. 						button: liElement.querySelector(
  11353. 							".pops-panel-button .pops-panel-button_inner"
  11354. 						),
  11355. 						icon: liElement.querySelector(
  11356. 							".pops-panel-button .pops-bottom-icon"
  11357. 						),
  11358. 						spanText: liElement.querySelector(
  11359. 							".pops-panel-button .pops-panel-button-text"
  11360. 						),
  11361. 					},
  11362. 					$data: {},
  11363. 					init() {
  11364. 						// @ts-ignore
  11365. 						this.$ele.panelButton.appendChild(this.$ele.button);
  11366. 						this.initButton();
  11367. 						this.setClickEvent();
  11368. 					},
  11369. 					initButton() {
  11370. 						if (
  11371. 							typeof formConfig.buttonIcon === "string" &&
  11372. 							formConfig.buttonIcon.trim() !== ""
  11373. 						) {
  11374. 							/* 存在icon图标且不为空 */
  11375. 							if (formConfig.buttonIcon in pops.config.iconSVG) {
  11376. 								this.setIconSVG(pops.config.iconSVG[formConfig.buttonIcon]);
  11377. 							} else {
  11378. 								this.setIconSVG(formConfig.buttonIcon);
  11379. 							}
  11380. 							this.showIcon();
  11381. 						} else {
  11382. 							this.hideIcon();
  11383. 						}
  11384. 						/* 按钮文字 */
  11385. 						let buttonText = formConfig.buttonText;
  11386. 						if (typeof formConfig.buttonText === "function") {
  11387. 							buttonText = formConfig.buttonText();
  11388. 						}
  11389. 						this.setButtonType(formConfig.buttonType);
  11390. 						if (formConfig.buttonIsRightIcon) {
  11391. 							this.setIconRight();
  11392. 						} else {
  11393. 							this.setIconLeft();
  11394. 						}
  11395. 						if (formConfig.disable) {
  11396. 							this.disable();
  11397. 						}
  11398. 						// @ts-ignore
  11399. 						this.setButtonText(buttonText);
  11400. 						// @ts-ignore
  11401. 						this.setIconLoadingStatus(formConfig.buttonIconIsLoading);
  11402. 					},
  11403. 					disable() {
  11404. 						// @ts-ignore
  11405. 						this.$ele.button.setAttribute("disabled", "true");
  11406. 					},
  11407. 					notDisable() {
  11408. 						// @ts-ignore
  11409. 						this.$ele.button.removeAttribute("disabled");
  11410. 					},
  11411. 					/**
  11412. 					 * 隐藏icon图标
  11413. 					 */
  11414. 					hideIcon() {
  11415. 						// @ts-ignore
  11416. 						this.$ele.panelButton.classList.add("pops-panel-button-no-icon");
  11417. 					},
  11418. 					/**
  11419. 					 * 显示icon图标
  11420. 					 */
  11421. 					showIcon() {
  11422. 						// @ts-ignore
  11423. 						this.$ele.panelButton.classList.remove("pops-panel-button-no-icon");
  11424. 					},
  11425. 					/**
  11426. 					 * 设置icon图标的svg
  11427. 					 */
  11428. 					// @ts-ignore
  11429. 					setIconSVG(svgHTML) {
  11430. 						// @ts-ignore
  11431. 						this.$ele.icon.innerHTML = svgHTML;
  11432. 					},
  11433. 					/**
  11434. 					 * 设置icon图标是否旋转
  11435. 					 * @param {boolean} status
  11436. 					 */
  11437. 					setIconLoadingStatus(status) {
  11438. 						// @ts-ignore
  11439. 						this.$ele.icon.setAttribute("is-loading", Boolean(status));
  11440. 					},
  11441. 					/**
  11442. 					 * 设置属性上是否存在icon图标
  11443. 					 */
  11444. 					// @ts-ignore
  11445. 					setHasIcon(value) {
  11446. 						// @ts-ignore
  11447. 						this.$ele.button.setAttribute("data-icon", Boolean(value));
  11448. 					},
  11449. 					/**
  11450. 					 * 设置按钮类型
  11451. 					 * @param {string} typeValue
  11452. 					 */
  11453. 					setButtonType(typeValue) {
  11454. 						// @ts-ignore
  11455. 						this.$ele.button.setAttribute("type", typeValue);
  11456. 					},
  11457. 					/**
  11458. 					 * 添加按钮的图标在右边
  11459. 					 */
  11460. 					setIconRight() {
  11461. 						// @ts-ignore
  11462. 						this.$ele.button.classList.add("pops-panel-button-right-icon");
  11463. 					},
  11464. 					/**
  11465. 					 * （默认）添加按钮的图标在左边
  11466. 					 */
  11467. 					setIconLeft() {
  11468. 						// @ts-ignore
  11469. 						this.$ele.button.classList.remove("pops-panel-button-right-icon");
  11470. 					},
  11471. 					/**
  11472. 					 * 设置按钮文本
  11473. 					 * @param {string} text
  11474. 					 */
  11475. 					setButtonText(text) {
  11476. 						// @ts-ignore
  11477. 						this.$ele.spanText.innerHTML = text;
  11478. 					},
  11479. 					setClickEvent() {
  11480. 						// @ts-ignore
  11481. 						PopsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
  11482. 							if (typeof formConfig.callback === "function") {
  11483. 								// @ts-ignore
  11484. 								formConfig.callback(event);
  11485. 							}
  11486. 						});
  11487. 					},
  11488. 				};
  11489. 				PopsPanelButton.init();
  11490. 				// @ts-ignore
  11491. 				liElement["data-button"] = PopsPanelButton;
  11492. 				return liElement;
  11493. 			},
  11494. 			/**
  11495. 			 * 获取中间容器的元素<li>
  11496. 			 * type ===> own
  11497. 			 * @param {PopsPanelOwnDetails} formConfig
  11498. 			 * @returns
  11499. 			 */
  11500. 			getSectionContainerItem_own(formConfig) {
  11501. 				let liElement = document.createElement("li");
  11502. 				// @ts-ignore
  11503. 				liElement.__formConfig__ = formConfig;
  11504. 				if (formConfig.className) {
  11505. 					liElement.className = formConfig.className;
  11506. 				}
  11507. 				liElement = formConfig.getLiElementCallBack(liElement);
  11508. 				return liElement;
  11509. 			},
  11510. 			/**
  11511. 			 * 获取中间容器的元素<li>
  11512. 			 * @param {PopsPanelFormsTotalDetails} formConfig
  11513. 			 * @returns
  11514. 			 */
  11515. 			getSectionContainerItem(formConfig) {
  11516. 				if (formConfig["type"] === "switch") {
  11517. 					return this.getSectionContainerItem_switch(formConfig);
  11518. 				} else if (formConfig["type"] === "slider") {
  11519. 					return this.getSectionContainerItem_slider_new(formConfig);
  11520. 				} else if (formConfig["type"] === "input") {
  11521. 					return this.getSectionContainerItem_input(formConfig);
  11522. 				} else if (formConfig["type"] === "textarea") {
  11523. 					return this.getSectionContainerItem_textarea(formConfig);
  11524. 				} else if (formConfig["type"] === "select") {
  11525. 					return this.getSectionContainerItem_select(formConfig);
  11526. 				} else if (formConfig["type"] === "button") {
  11527. 					return this.getSectionContainerItem_button(formConfig);
  11528. 				} else if (formConfig["type"] === "own") {
  11529. 					return this.getSectionContainerItem_own(formConfig);
  11530. 				} else {
  11531. 					console.error("尚未实现的type类型", formConfig);
  11532. 				}
  11533. 			},
  11534.  
  11535. 			/**
  11536. 			 * 为左侧容器元素添加点击事件
  11537. 			 * @param {HTMLElement} asideLiElement 左侧的容器<li>元素
  11538. 			 * @param {PopsPanelContentConfig} asideConfig 配置
  11539. 			 */
  11540. 			setAsideItemClickEvent(asideLiElement, asideConfig) {
  11541. 				let that = this;
  11542. 				/**
  11543. 				 *
  11544. 				 * @param {PopsPanelFormsTotalDetails} formConfig
  11545. 				 * @param {PopsPanelRightAsideContainerOptions} containerOptions
  11546. 				 */
  11547. 				function uListContainerAddItem(formConfig, containerOptions) {
  11548. 					let itemLiElement = that.getSectionContainerItem(formConfig);
  11549. 					if (itemLiElement) {
  11550. 						containerOptions["ulElement"].appendChild(itemLiElement);
  11551. 					}
  11552. 					if (typeof formConfig.afterAddToUListCallBack === "function") {
  11553. 						formConfig.afterAddToUListCallBack(formConfig, containerOptions);
  11554. 					}
  11555. 				}
  11556. 				// @ts-ignore
  11557. 				PopsDOMUtils.on(asideLiElement, "click", void 0, function (event) {
  11558. 					that.clearContainer();
  11559. 					that.clearAsideItemIsVisited();
  11560. 					that.setAsideItemIsVisited(asideLiElement);
  11561. 					/* 顶部标题栏，存在就设置 */
  11562. 					let headerTitleText = asideConfig.headerTitle || asideConfig.title;
  11563. 					if (
  11564. 						typeof headerTitleText === "string" &&
  11565. 						headerTitleText.trim() !== ""
  11566. 					) {
  11567. 						let containerHeaderTitleLIElement = document.createElement("li");
  11568. 						// @ts-ignore
  11569. 						containerHeaderTitleLIElement.__asideConfig__ = asideConfig;
  11570. 						containerHeaderTitleLIElement.innerHTML = headerTitleText;
  11571. 						that.sectionContainerHeaderULElement.appendChild(
  11572. 							containerHeaderTitleLIElement
  11573. 						);
  11574. 					}
  11575.  
  11576. 					/**
  11577. 					 * @type {PopsPanelContentConfig[]}
  11578. 					 */
  11579. 					// @ts-ignore
  11580. 					let __forms__ = asideLiElement.__forms__;
  11581. 					__forms__.forEach((formConfig) => {
  11582. 						// @ts-ignore
  11583. 						if (formConfig["type"] === "forms") {
  11584. 							let childForms = formConfig["forms"];
  11585. 							/* 父<li>元素 */
  11586. 							let formContainerListElement = document.createElement("li");
  11587. 							/* 子<ul>元素 */
  11588. 							let formContainerULElement = document.createElement("ul");
  11589. 							formContainerListElement.className =
  11590. 								"pops-panel-forms-container-item";
  11591. 							/* 区域头部的文字 */
  11592. 							// @ts-ignore
  11593. 							let formHeaderDivElement = PopsDOMUtils.createElement("div", {
  11594. 								className: "pops-panel-forms-container-item-header-text",
  11595. 							});
  11596. 							// @ts-ignore
  11597. 							formHeaderDivElement.innerHTML = formConfig["text"];
  11598. 							/* 加进容器内 */
  11599. 							formContainerListElement.appendChild(formHeaderDivElement);
  11600. 							// @ts-ignore
  11601. 							if (formConfig.className) {
  11602. 								PopsDOMUtils.addClassName(
  11603. 									formContainerListElement,
  11604. 									// @ts-ignore
  11605. 									formConfig.className
  11606. 								);
  11607. 							}
  11608. 							that.addElementAttributes(
  11609. 								formContainerListElement,
  11610. 								// @ts-ignore
  11611. 								formConfig.attributes
  11612. 							);
  11613. 							// @ts-ignore
  11614. 							that.setElementProps(formContainerListElement, formConfig.props);
  11615. 							childForms.forEach((childFormConfig) => {
  11616. 								// @ts-ignore
  11617. 								uListContainerAddItem(childFormConfig, {
  11618. 									ulElement: formContainerULElement,
  11619. 									sectionContainerULElement: that.sectionContainerULElement,
  11620. 									formContainerListElement: formContainerListElement,
  11621. 									formHeaderDivElement: formHeaderDivElement,
  11622. 								});
  11623. 							});
  11624. 							formContainerListElement.appendChild(formContainerULElement);
  11625. 							that.sectionContainerULElement.appendChild(
  11626. 								formContainerListElement
  11627. 							);
  11628. 						} else {
  11629. 							/* 如果成功创建，加入到中间容器中 */
  11630. 							// @ts-ignore
  11631. 							uListContainerAddItem(formConfig, {
  11632. 								ulElement: that.sectionContainerULElement,
  11633. 							});
  11634. 						}
  11635. 					});
  11636.  
  11637. 					let autoAdaptionContentHeight =
  11638. 						asideConfig.autoAdaptionContentHeight ?? true;
  11639. 					if (autoAdaptionContentHeight) {
  11640. 						/* 根据标题的高度来自适应内容高度，默认开启 */
  11641. 						/* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
  11642. 						let contentContainerOffset =
  11643. 							// @ts-ignore
  11644. 							asideConfig.contentContainerOffset ?? 0;
  11645. 						/* 获取标题的<ul>元素的高度 */
  11646. 						let sectionContainerHeaderULElementHeight = PopsDOMUtils.height(
  11647. 							that.sectionContainerHeaderULElement
  11648. 						);
  11649. 						that.sectionContainerULElement.style.setProperty(
  11650. 							"height",
  11651. 							`calc( 100% - ${
  11652. 								sectionContainerHeaderULElementHeight + contentContainerOffset
  11653. 							}px )`
  11654. 						);
  11655. 					}
  11656.  
  11657. 					if (typeof asideConfig.callback === "function") {
  11658. 						/* 执行回调 */
  11659. 						asideConfig.callback(
  11660. 							// @ts-ignore
  11661. 							event,
  11662. 							that.sectionContainerHeaderULElement,
  11663. 							that.sectionContainerULElement
  11664. 						);
  11665. 					}
  11666. 				});
  11667. 			},
  11668. 		};
  11669.  
  11670. 		HandleContetDetails.init();
  11671.  
  11672. 		PopsHandler.handlePush(PopsType, {
  11673. 			guid: guid,
  11674. 			// @ts-ignore
  11675. 			animElement: animElement,
  11676. 			// @ts-ignore
  11677. 			popsElement: popsElement,
  11678. 			// @ts-ignore
  11679. 			maskElement: maskElement,
  11680. 			$shadowContainer: $shadowContainer,
  11681. 			$shadowRoot: $shadowRoot,
  11682. 		});
  11683. 		/* 拖拽 */
  11684. 		if (config.drag) {
  11685. 			// @ts-ignore
  11686. 			PopsUtils.drag(popsElement, {
  11687. 				dragElement: titleElement,
  11688. 				limit: config.dragLimit,
  11689. 				extraDistance: config.dragExtraDistance,
  11690. 				moveCallBack: config.dragMoveCallBack,
  11691. 				endCallBack: config.dragEndCallBack,
  11692. 			});
  11693. 		}
  11694. 		return PopsHandler.handleResultDetails(eventDetails);
  11695. 	};
  11696.  
  11697. 	/**
  11698. 	 * 右键菜单
  11699. 	 * @param { PopsRightClickMenuDetails } details 配置
  11700. 	 */
  11701. 	// @ts-ignore
  11702. 	pops.rightClickMenu = function (details = {}) {
  11703. 		// @ts-ignore
  11704. 		// @ts-ignore
  11705. 		let that = this;
  11706. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  11707. 		PopsHandler.handleInit($shadowRoot, [
  11708. 			pops.config.cssText.index,
  11709. 			pops.config.cssText.anim,
  11710. 			pops.config.cssText.common,
  11711. 		]);
  11712. 		/**
  11713. 		 * @type {Required<PopsRightClickMenuDetails>}
  11714. 		 */
  11715. 		let config = {
  11716. 			target: document.documentElement,
  11717. 			// @ts-ignore
  11718. 			targetSelector: void 0,
  11719. 			data: [
  11720. 				{
  11721. 					// @ts-ignore
  11722. 					icon: pops.config.iconSVG.search,
  11723. 					iconIsLoading: false,
  11724. 					text: "搜索",
  11725. 					// @ts-ignore
  11726. 					callback(clickEvent, contextMenuEvent, liElement) {
  11727. 						console.log("点击：" + this.text, [
  11728. 							clickEvent,
  11729. 							contextMenuEvent,
  11730. 							liElement,
  11731. 						]);
  11732. 					},
  11733. 				},
  11734. 				{
  11735. 					// @ts-ignore
  11736. 					icon: pops.config.iconSVG.documentCopy,
  11737. 					iconIsLoading: false,
  11738. 					text: "复制",
  11739. 					// @ts-ignore
  11740. 					callback(clickEvent, contextMenuEvent, liElement) {
  11741. 						console.log("点击：" + this.text, [
  11742. 							clickEvent,
  11743. 							contextMenuEvent,
  11744. 							liElement,
  11745. 						]);
  11746. 					},
  11747. 				},
  11748. 				{
  11749. 					// @ts-ignore
  11750. 					icon: pops.config.iconSVG.delete,
  11751. 					text: "删除",
  11752. 					iconIsLoading: false,
  11753. 					// @ts-ignore
  11754. 					callback(clickEvent, contextMenuEvent, liElement) {
  11755. 						console.log("点击：" + this.text, [
  11756. 							clickEvent,
  11757. 							contextMenuEvent,
  11758. 							liElement,
  11759. 						]);
  11760. 					},
  11761. 				},
  11762. 				{
  11763. 					// @ts-ignore
  11764. 					icon: pops.config.iconSVG.loading,
  11765. 					iconIsLoading: true,
  11766. 					text: "加载",
  11767. 					callback(clickEvent, contextMenuEvent, liElement) {
  11768. 						console.log("点击：" + this.text, [
  11769. 							clickEvent,
  11770. 							contextMenuEvent,
  11771. 							liElement,
  11772. 						]);
  11773. 						return false;
  11774. 					},
  11775. 				},
  11776. 				{
  11777. 					// @ts-ignore
  11778. 					icon: pops.config.iconSVG.elemePlus,
  11779. 					iconIsLoading: true,
  11780. 					text: "饿了么",
  11781. 					callback(clickEvent, contextMenuEvent, liElement) {
  11782. 						console.log("点击：" + this.text, [
  11783. 							clickEvent,
  11784. 							contextMenuEvent,
  11785. 							liElement,
  11786. 						]);
  11787. 						return false;
  11788. 					},
  11789. 					item: [
  11790. 						{
  11791. 							// @ts-ignore
  11792. 							icon: "",
  11793. 							iconIsLoading: false,
  11794. 							text: "处理文件",
  11795. 							// @ts-ignore
  11796. 							callback(clickEvent, contextMenuEvent, liElement) {
  11797. 								console.log("点击：" + this.text, [
  11798. 									clickEvent,
  11799. 									contextMenuEvent,
  11800. 									liElement,
  11801. 								]);
  11802. 							},
  11803. 						},
  11804. 						{
  11805. 							// @ts-ignore
  11806. 							icon: "",
  11807. 							iconIsLoading: false,
  11808. 							text: "其它处理",
  11809. 							// @ts-ignore
  11810. 							callback(clickEvent, contextMenuEvent, liElement) {
  11811. 								console.log("点击：" + this.text, [
  11812. 									clickEvent,
  11813. 									contextMenuEvent,
  11814. 									liElement,
  11815. 								]);
  11816. 							},
  11817. 							item: [
  11818. 								{
  11819. 									// @ts-ignore
  11820. 									icon: pops.config.iconSVG.view,
  11821. 									iconIsLoading: false,
  11822. 									text: "查看",
  11823. 									// @ts-ignore
  11824. 									callback(clickEvent, contextMenuEvent, liElement) {
  11825. 										console.log("点击：" + this.text, [
  11826. 											clickEvent,
  11827. 											contextMenuEvent,
  11828. 											liElement,
  11829. 										]);
  11830. 									},
  11831. 								},
  11832. 							],
  11833. 						},
  11834. 					],
  11835. 				},
  11836. 			],
  11837. 			className: "",
  11838. 			isAnimation: true,
  11839. 			only: false,
  11840. 			zIndex: 10000,
  11841. 			preventDefault: true,
  11842. 			// @ts-ignore
  11843. 			style: void 0,
  11844. 			beforeAppendToPageCallBack() {},
  11845. 		};
  11846. 		config = PopsUtils.assignJSON(config, details);
  11847. 		if (config.target == null) {
  11848. 			throw "config.target 不能为空";
  11849. 		}
  11850. 		if (details.data) {
  11851. 			config.data = details.data;
  11852. 		}
  11853. 		let guid = PopsUtils.getRandomGUID();
  11854. 		const PopsType = "rightClickMenu";
  11855. 		// @ts-ignore
  11856. 		config = PopsHandler.handleOnly(PopsType, config);
  11857.  
  11858. 		if (config.style != null) {
  11859. 			let cssNode = document.createElement("style");
  11860. 			cssNode.setAttribute("type", "text/css");
  11861. 			cssNode.innerHTML = config.style;
  11862. 			$shadowRoot.appendChild(cssNode);
  11863. 		}
  11864.  
  11865. 		const PopsContextMenu = {
  11866. 			/**
  11867. 			 * 根元素
  11868. 			 * @type {?HTMLElement}
  11869. 			 */
  11870. 			rootElement: null,
  11871. 			/**
  11872. 			 * 全局点击检测
  11873. 			 * @param {TouchEvent|PointerEvent} event
  11874. 			 */
  11875. 			windowCheckClickEvent(event) {
  11876. 				if (!PopsContextMenu.rootElement) {
  11877. 					return;
  11878. 				}
  11879. 				// @ts-ignore
  11880. 				if (event.target.closest(`.pops-${PopsType}`)) {
  11881. 					return;
  11882. 				}
  11883. 				if (
  11884. 					// @ts-ignore
  11885. 					event.target.className &&
  11886. 					// @ts-ignore
  11887. 					event.target.className === "pops-shadow-container" &&
  11888. 					// @ts-ignore
  11889. 					event.target.shadowRoot != null
  11890. 				) {
  11891. 					return;
  11892. 				}
  11893. 				PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
  11894. 			},
  11895. 			/**
  11896. 			 * target为shadowRoot或shadowRoot内的全局点击检测
  11897. 			 * @param {TouchEvent|PointerEvent} event
  11898. 			 */
  11899. 			shadowRootCheckClickEvent(event) {
  11900. 				if (!PopsContextMenu.rootElement) {
  11901. 					return;
  11902. 				}
  11903. 				// @ts-ignore
  11904. 				if (event.target.closest(`.pops-${PopsType}`)) {
  11905. 					return;
  11906. 				}
  11907. 				PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
  11908. 			},
  11909. 			/**
  11910. 			 * 添加全局点击检测事件
  11911. 			 */
  11912. 			addWindowCheckClickListener() {
  11913. 				PopsDOMUtils.on(
  11914. 					// @ts-ignore
  11915. 					globalThis,
  11916. 					"click touchstart",
  11917. 					void 0,
  11918. 					PopsContextMenu.windowCheckClickEvent,
  11919. 					{
  11920. 						capture: true,
  11921. 					}
  11922. 				);
  11923. 				// @ts-ignore
  11924. 				const $shadowRoot = config.target.getRootNode();
  11925. 				if ($shadowRoot instanceof ShadowRoot) {
  11926. 					PopsDOMUtils.on(
  11927. 						// @ts-ignore
  11928. 						$shadowRoot,
  11929. 						"click touchstart",
  11930. 						void 0,
  11931. 						PopsContextMenu.shadowRootCheckClickEvent,
  11932. 						{
  11933. 							capture: true,
  11934. 						}
  11935. 					);
  11936. 				}
  11937. 			},
  11938. 			/**
  11939. 			 * 移除全局点击检测事件
  11940. 			 */
  11941. 			removeWindowCheckClickListener() {
  11942. 				PopsDOMUtils.off(
  11943. 					// @ts-ignore
  11944. 					globalThis,
  11945. 					"click touchstart",
  11946. 					void 0,
  11947. 					PopsContextMenu.windowCheckClickEvent,
  11948. 					{
  11949. 						capture: true,
  11950. 					}
  11951. 				);
  11952. 				// @ts-ignore
  11953. 				const $shadowRoot = config.target.getRootNode();
  11954. 				if ($shadowRoot instanceof ShadowRoot) {
  11955. 					PopsDOMUtils.off(
  11956. 						// @ts-ignore
  11957. 						$shadowRoot,
  11958. 						"click touchstart",
  11959. 						void 0,
  11960. 						PopsContextMenu.windowCheckClickEvent,
  11961. 						{
  11962. 							capture: true,
  11963. 						}
  11964. 					);
  11965. 				}
  11966. 			},
  11967. 			/**
  11968. 			 * contextmenu事件
  11969. 			 * @param {PointerEvent} event
  11970. 			 */
  11971. 			contextMenuEvent(event) {
  11972. 				if (config.preventDefault) {
  11973. 					PopsUtils.preventEvent(event);
  11974. 				}
  11975. 				if (PopsContextMenu.rootElement) {
  11976. 					PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
  11977. 				}
  11978. 				PopsContextMenu.rootElement = PopsContextMenu.showMenu(
  11979. 					event,
  11980. 					config.data
  11981. 				);
  11982. 			},
  11983. 			/**
  11984. 			 * 添加contextmenu事件
  11985. 			 * @param {HTMLElement|globalThis|Window} target 目标
  11986. 			 * @param {?string} selector 子元素选择器
  11987. 			 */
  11988. 			addContextMenuEvent(target, selector) {
  11989. 				// @ts-ignore
  11990. 				PopsDOMUtils.on(
  11991. 					target,
  11992. 					"contextmenu",
  11993. 					selector,
  11994. 					PopsContextMenu.contextMenuEvent
  11995. 				);
  11996. 			},
  11997. 			/**
  11998. 			 * 移除contextmenu事件
  11999. 			 * @param {HTMLElement|globalThis|Window} target 目标
  12000. 			 */
  12001. 			removeContextMenuEvent(target) {
  12002. 				// @ts-ignore
  12003. 				PopsDOMUtils.off(
  12004. 					target,
  12005. 					"contextmenu",
  12006. 					// @ts-ignore
  12007. 					string,
  12008. 					PopsContextMenu.contextMenuEvent
  12009. 				);
  12010. 			},
  12011. 			/**
  12012. 			 * 自动判断是否存在动画，存在动画就执行关闭动画并删除
  12013. 			 * @param {HTMLElement} element
  12014. 			 */
  12015. 			animationCloseMenu(element) {
  12016. 				/**
  12017. 				 * 动画结束触发的事件
  12018. 				 */
  12019. 				// @ts-ignore
  12020. 				// @ts-ignore
  12021. 				function transitionEndEvent(event) {
  12022. 					PopsDOMUtils.off(
  12023. 						element,
  12024. 						// @ts-ignore
  12025. 						PopsDOMUtils.getTransitionEndNameList(),
  12026. 						void 0,
  12027. 						transitionEndEvent,
  12028. 						{
  12029. 							capture: true,
  12030. 						}
  12031. 					);
  12032. 					element.remove();
  12033. 				}
  12034. 				if (element.classList.contains(`pops-${PopsType}-anim-show`)) {
  12035. 					/* 有动画 */
  12036. 					PopsDOMUtils.on(
  12037. 						element,
  12038. 						// @ts-ignore
  12039. 						PopsDOMUtils.getTransitionEndNameList(),
  12040. 						void 0,
  12041. 						transitionEndEvent,
  12042. 						{
  12043. 							capture: true,
  12044. 						}
  12045. 					);
  12046. 					element.classList.remove(`pops-${PopsType}-anim-show`);
  12047. 				} else {
  12048. 					/* 无动画 */
  12049. 					element.remove();
  12050. 				}
  12051. 			},
  12052. 			/**
  12053. 			 * 关闭所有菜单
  12054. 			 * @param {HTMLElement} rootElement
  12055. 			 */
  12056. 			closeAllMenu(rootElement) {
  12057. 				// @ts-ignore
  12058. 				if (rootElement?.__menuData__?.root) {
  12059. 					// @ts-ignore
  12060. 					rootElement = rootElement?.__menuData__?.root;
  12061. 				}
  12062. 				/**
  12063. 				 * @type {HTMLElement[]}
  12064. 				 */
  12065. 				// @ts-ignore
  12066. 				let childMenuList = rootElement.__menuData__.child;
  12067. 				childMenuList.forEach((childMenuElement) => {
  12068. 					this.animationCloseMenu(childMenuElement);
  12069. 				});
  12070. 				this.animationCloseMenu(rootElement);
  12071. 				PopsContextMenu.rootElement = null;
  12072. 			},
  12073. 			/**
  12074. 			 * 获取菜单容器
  12075. 			 * @param {number} zIndex z-index值
  12076. 			 * @param {boolean} isChildren 是否是rightClickMenu的某一项的子菜单
  12077. 			 */
  12078. 			getMenuContainerElement(zIndex, isChildren) {
  12079. 				let menuElement = PopsUtils.parseTextToDOM(`
  12080.         <div class="pops-${PopsType}" ${isChildren ? 'is-children="true"' : ""}>
  12081.           <style type="text/css" data-from="pops-${PopsType}">
  12082.           .pops-${PopsType} *{
  12083.             -webkit-box-sizing: border-box;
  12084.             box-sizing: border-box;
  12085.             margin: 0;
  12086.             padding: 0;
  12087.             -webkit-tap-highlight-color: transparent;
  12088.             scrollbar-width: thin;
  12089.           }
  12090.           .pops-${PopsType}{
  12091.             position: fixed;
  12092.             z-index: ${zIndex};
  12093.             text-align: center;
  12094.             border-radius: 3px;
  12095.             font-size: 16px;
  12096.             font-weight: 500;
  12097.             background: #fff;
  12098.             box-shadow: 0px 1px 6px 1px #cacaca;
  12099.           }
  12100.           .pops-${PopsType}-anim-grid{
  12101.             display: grid;
  12102.             transition: 0.3s;
  12103.             grid-template-rows: 0fr;
  12104.           }
  12105.           .pops-${PopsType}-anim-show{
  12106.             grid-template-rows: 1fr;
  12107.           }
  12108.           .pops-${PopsType}-is-visited{
  12109.             background: #dfdfdf;
  12110.           }
  12111.           i.pops-${PopsType}-icon {
  12112.             height: 1em;
  12113.             width: 1em;
  12114.             line-height: 1em;
  12115.             display: inline-flex;
  12116.             justify-content: center;
  12117.             align-items: center;
  12118.             position: relative;
  12119.             fill: currentColor;
  12120.             color: inherit;
  12121.             font-size: inherit;
  12122.             margin-right: 6px;
  12123.           }
  12124.           i.pops-${PopsType}-icon[is-loading="true"]{
  12125.             animation: rotating 2s linear infinite;
  12126.           }
  12127.           .pops-${PopsType} li:hover{background:#dfdfdf;cursor:pointer}
  12128.           .pops-${PopsType} ul{
  12129.             margin: 0;
  12130.             padding: 0;
  12131.             display: flex;
  12132.             flex-direction: column;
  12133.             align-items: flex-start;
  12134.             justify-content: center;
  12135.             overflow: hidden;
  12136.           }
  12137.           .pops-${PopsType} ul li {
  12138.             padding: 5px 10px;
  12139.             margin: 2.5px 5px;
  12140.             border-radius: 3px;
  12141.             display: flex;
  12142.             width: -webkit-fill-available;
  12143.             width: -moz-available;
  12144.             text-align: left;
  12145.             user-select: none;
  12146.             -webkit-user-select: none;
  12147.             -moz-user-select: none;
  12148.             -ms-user-select: none;
  12149.             align-items: center;
  12150.           }
  12151.           .pops-${PopsType} ul li:first-child{
  12152.             margin-top: 5px;
  12153.           }
  12154.           .pops-${PopsType} ul li:last-child{
  12155.             margin-bottom: 5px;
  12156.           }
  12157.           </style>
  12158.           <ul></ul>
  12159.         </div>
  12160.         `);
  12161. 				/* 添加动画 */
  12162. 				if (config.isAnimation) {
  12163. 					PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-grid`);
  12164. 				}
  12165. 				return menuElement;
  12166. 			},
  12167. 			/**
  12168. 			 * 获取left、top偏移
  12169. 			 * @param {HTMLElement} menuElement 菜单元素
  12170. 			 * @param {number} x
  12171. 			 * @param {number} y
  12172. 			 */
  12173. 			getOffset(menuElement, x, y) {
  12174. 				/* left最大偏移 */
  12175. 				let maxLeftOffset =
  12176. 					// @ts-ignore
  12177. 					PopsDOMUtils.width(globalThis) - PopsDOMUtils.width(menuElement) - 1;
  12178. 				/* top最大偏移 */
  12179. 				let maxTopOffset =
  12180. 					// @ts-ignore
  12181. 					PopsDOMUtils.height(globalThis) -
  12182. 					PopsDOMUtils.height(menuElement) -
  12183. 					8;
  12184.  
  12185. 				let currentLeftOffset = x;
  12186. 				let currentTopOffset = y;
  12187. 				/* 不允许超出left最大值 */
  12188. 				currentLeftOffset = currentLeftOffset < 0 ? 0 : currentLeftOffset;
  12189. 				currentLeftOffset =
  12190. 					currentLeftOffset < maxLeftOffset ? currentLeftOffset : maxLeftOffset;
  12191. 				/* 不允许超出top最大值 */
  12192. 				currentTopOffset = currentTopOffset < 0 ? 0 : currentTopOffset;
  12193. 				currentTopOffset =
  12194. 					currentTopOffset < maxTopOffset ? currentTopOffset : maxTopOffset;
  12195. 				return {
  12196. 					left: currentLeftOffset,
  12197. 					top: currentTopOffset,
  12198. 				};
  12199. 			},
  12200. 			/**
  12201. 			 * 显示菜单
  12202. 			 * @param {PointerEvent} menuEvent 触发的事件
  12203. 			 * @param {PopsRightClickMenuDataDetails[]} _config_
  12204. 			 */
  12205. 			showMenu(menuEvent, _config_) {
  12206. 				// @ts-ignore
  12207. 				let menuElement = this.getMenuContainerElement(config.zIndex, false);
  12208. 				// @ts-ignore
  12209. 				menuElement.__menuData__ = {
  12210. 					child: [],
  12211. 				};
  12212. 				PopsContextMenu.addMenuLiELement(
  12213. 					menuEvent,
  12214. 					menuElement,
  12215. 					// @ts-ignore
  12216. 					menuElement,
  12217. 					_config_
  12218. 				);
  12219. 				/* 先隐藏 */
  12220. 				// @ts-ignore
  12221. 				PopsDOMUtils.css(menuElement, {
  12222. 					display: "none",
  12223. 				});
  12224. 				// @ts-ignore
  12225. 				PopsUtils.appendChild($shadowRoot, menuElement);
  12226. 				/* 添加到页面 */
  12227. 				if (!document.contains($shadowContainer)) {
  12228. 					if (typeof config.beforeAppendToPageCallBack === "function") {
  12229. 						config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
  12230. 					}
  12231. 					// @ts-ignore
  12232. 					PopsUtils.appendChild($shadowContainer);
  12233. 				}
  12234. 				let { left: menuLeftOffset, top: menuTopOffset } = this.getOffset(
  12235. 					menuElement,
  12236. 					menuEvent.clientX,
  12237. 					menuEvent.clientY
  12238. 				);
  12239. 				PopsDOMUtils.css(menuElement, {
  12240. 					// @ts-ignore
  12241. 					left: menuLeftOffset,
  12242. 					// @ts-ignore
  12243. 					top: menuTopOffset,
  12244. 					display: "",
  12245. 				});
  12246. 				/* 过渡动画 */
  12247. 				if (config.isAnimation) {
  12248. 					PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
  12249. 				}
  12250. 				return menuElement;
  12251. 			},
  12252. 			/**
  12253. 			 * 显示子菜单
  12254. 			 * @param {Event} menuEvent 事件
  12255. 			 * @param {{
  12256. 			 * clientX: number,
  12257. 			 * clientY: number
  12258. 			 * }} posInfo 位置信息
  12259. 			 * @param {PopsRightClickMenuDataDetails[]} _config_
  12260. 			 * @param {?HTMLDivElement} rootElement 根菜单元素
  12261. 			 * @param {?HTMLLIElement} targetLiElement 父li项元素
  12262. 			 */
  12263. 			showClildMenu(
  12264. 				menuEvent,
  12265. 				posInfo,
  12266. 				_config_,
  12267. 				rootElement,
  12268. 				targetLiElement
  12269. 			) {
  12270. 				// @ts-ignore
  12271. 				let menuElement = this.getMenuContainerElement(config.zIndex, true);
  12272. 				// @ts-ignore
  12273. 				menuElement.__menuData__ = {
  12274. 					parent: targetLiElement,
  12275. 					root: rootElement,
  12276. 				};
  12277. 				// @ts-ignore
  12278. 				rootElement.__menuData__.child.push(menuElement);
  12279. 				PopsContextMenu.addMenuLiELement(
  12280. 					// @ts-ignore
  12281. 					menuEvent,
  12282. 					rootElement,
  12283. 					menuElement,
  12284. 					_config_
  12285. 				);
  12286. 				/* 先隐藏 */
  12287. 				// @ts-ignore
  12288. 				PopsDOMUtils.css(menuElement, {
  12289. 					display: "none",
  12290. 				});
  12291. 				/* 添加到页面 */
  12292. 				// @ts-ignore
  12293. 				PopsUtils.appendChild($shadowRoot, menuElement);
  12294. 				let { left: menuLeftOffset, top: menuTopOffset } = this.getOffset(
  12295. 					menuElement,
  12296. 					posInfo.clientX,
  12297. 					posInfo.clientY
  12298. 				);
  12299. 				PopsDOMUtils.css(menuElement, {
  12300. 					// @ts-ignore
  12301. 					left: menuLeftOffset,
  12302. 					// @ts-ignore
  12303. 					top: menuTopOffset,
  12304. 					display: "",
  12305. 				});
  12306. 				/* 过渡动画 */
  12307. 				if (config.isAnimation) {
  12308. 					PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
  12309. 				}
  12310. 				return menuElement;
  12311. 			},
  12312. 			/**
  12313. 			 * 获取菜单项的元素
  12314. 			 * @param {PointerEvent} menuEvent 事件
  12315. 			 * @param {HTMLElement} rootElement 根元素
  12316. 			 * @param {HTMLDivElement} menuElement 菜单元素
  12317. 			 * @param {PopsRightClickMenuDataDetails[]} _config_ 配置
  12318. 			 */
  12319. 			addMenuLiELement(menuEvent, rootElement, menuElement, _config_) {
  12320. 				let menuEventTarget = menuEvent.target;
  12321. 				let menuULElement = menuElement.querySelector("ul");
  12322. 				_config_.forEach((item) => {
  12323. 					/**
  12324. 					 * @type {HTMLLIElement}
  12325. 					 */
  12326. 					// @ts-ignore
  12327. 					let menuLiElement = PopsUtils.parseTextToDOM(`
  12328.           <li></li>
  12329.           `);
  12330. 					/* 判断有无图标，有就添加进去 */
  12331. 					if (typeof item.icon === "string" && item.icon.trim() !== "") {
  12332. 						let iconSVGHTML = pops.config.iconSVG[item.icon] ?? item.icon;
  12333. 						let iconElement = PopsUtils.parseTextToDOM(
  12334. 							`<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`
  12335. 						);
  12336. 						menuLiElement.appendChild(iconElement);
  12337. 					}
  12338. 					/* 插入文字 */
  12339. 					menuLiElement.insertAdjacentHTML(
  12340. 						"beforeend",
  12341. 						`<span>${item.text}</span>`
  12342. 					);
  12343. 					/* 如果存在子数据，显示 */
  12344. 					if (item.item && Array.isArray(item.item)) {
  12345. 						PopsDOMUtils.addClassName(menuLiElement, `pops-${PopsType}-item`);
  12346. 					}
  12347. 					/* 鼠标|触摸 移入事件 */
  12348. 					function liElementHoverEvent() {
  12349. 						// @ts-ignore
  12350. 						Array.from(menuULElement.children).forEach((liElement) => {
  12351. 							PopsDOMUtils.removeClassName(
  12352. 								// @ts-ignore
  12353. 								liElement,
  12354. 								`pops-${PopsType}-is-visited`
  12355. 							);
  12356. 							// @ts-ignore
  12357. 							if (!liElement.__menuData__) {
  12358. 								return;
  12359. 							}
  12360. 							// @ts-ignore
  12361. 							function removeElement(element) {
  12362. 								// @ts-ignore
  12363. 								element.querySelectorAll("ul li").forEach((ele) => {
  12364. 									if (ele?.__menuData__?.child) {
  12365. 										removeElement(ele.__menuData__.child);
  12366. 									}
  12367. 								});
  12368. 								element.remove();
  12369. 							}
  12370. 							/* 遍历根元素的上的__menuData__.child，判断 */
  12371. 							// @ts-ignore
  12372. 							removeElement(liElement.__menuData__.child);
  12373. 						});
  12374. 						/* 清理根元素上的children不存在于页面中的元素 */
  12375. 						for (
  12376. 							let index = 0;
  12377. 							// @ts-ignore
  12378. 							index < rootElement.__menuData__.child.length;
  12379. 							index++
  12380. 						) {
  12381. 							// @ts-ignore
  12382. 							let element = rootElement.__menuData__.child[index];
  12383. 							if (!$shadowRoot.contains(element)) {
  12384. 								// @ts-ignore
  12385. 								rootElement.__menuData__.child.splice(index, 1);
  12386. 								index--;
  12387. 							}
  12388. 						}
  12389. 						PopsDOMUtils.addClassName(
  12390. 							menuLiElement,
  12391. 							`pops-${PopsType}-is-visited`
  12392. 						);
  12393. 						if (!item.item) {
  12394. 							return;
  12395. 						}
  12396. 						let rect = menuLiElement.getBoundingClientRect();
  12397. 						let childMenu = PopsContextMenu.showClildMenu(
  12398. 							menuEvent,
  12399. 							{
  12400. 								clientX: rect.left + PopsDOMUtils.outerWidth(menuLiElement),
  12401. 								clientY: rect.top,
  12402. 							},
  12403. 							item.item,
  12404. 							// @ts-ignore
  12405. 							rootElement,
  12406. 							menuLiElement
  12407. 						);
  12408. 						// @ts-ignore
  12409. 						menuLiElement.__menuData__ = {
  12410. 							child: childMenu,
  12411. 						};
  12412. 					}
  12413. 					/**
  12414. 					 * 点击事件
  12415. 					 * @param {PointerEvent} clickEvent
  12416. 					 * @returns
  12417. 					 */
  12418. 					async function liElementClickEvent(clickEvent) {
  12419. 						if (typeof item.callback === "function") {
  12420. 							OriginPrototype.Object.defineProperty(menuEvent, "target", {
  12421. 								get() {
  12422. 									return menuEventTarget;
  12423. 								},
  12424. 							});
  12425. 							let callbackResult = await item.callback(
  12426. 								clickEvent,
  12427. 								menuEvent,
  12428. 								menuLiElement
  12429. 							);
  12430. 							if (
  12431. 								typeof callbackResult === "boolean" &&
  12432. 								callbackResult == false
  12433. 							) {
  12434. 								return;
  12435. 							}
  12436. 						}
  12437. 						/* 取消绑定的鼠标/触摸事件，防止关闭的时候再次触发 */
  12438. 						// @ts-ignore
  12439. 						Array.from(menuULElement.children).forEach((liEle) => {
  12440. 							// @ts-ignore
  12441. 							PopsDOMUtils.off(liEle, "mouseenter touchstart");
  12442. 						});
  12443. 						PopsContextMenu.closeAllMenu(rootElement);
  12444. 					}
  12445. 					// @ts-ignore
  12446. 					PopsDOMUtils.on(
  12447. 						menuLiElement,
  12448. 						"mouseenter touchstart",
  12449. 						void 0,
  12450. 						liElementHoverEvent
  12451. 					);
  12452. 					/* 项-点击事件 */
  12453. 					// @ts-ignore
  12454. 					PopsDOMUtils.on(menuLiElement, "click", void 0, liElementClickEvent);
  12455.  
  12456. 					// @ts-ignore
  12457. 					menuULElement.appendChild(menuLiElement);
  12458. 				});
  12459. 			},
  12460. 		};
  12461.  
  12462. 		PopsContextMenu.addContextMenuEvent(
  12463. 			config.target,
  12464. 			config.targetSelector,
  12465. 			// @ts-ignore
  12466. 			config.preventDefault
  12467. 		);
  12468. 		PopsContextMenu.addWindowCheckClickListener();
  12469.  
  12470. 		return {
  12471. 			guid: guid,
  12472. 			config: config,
  12473. 			removeWindowCheckClickListener:
  12474. 				PopsContextMenu.removeWindowCheckClickListener,
  12475. 			addWindowCheckClickListener: PopsContextMenu.addWindowCheckClickListener,
  12476. 			removeContextMenuEvent: PopsContextMenu.removeContextMenuEvent,
  12477. 			addContextMenuEvent: PopsContextMenu.addContextMenuEvent,
  12478. 		};
  12479. 	};
  12480.  
  12481. 	/**
  12482. 	 * 搜索建议悬浮窗
  12483. 	 * @param {PopsSearchSuggestionDetails} details
  12484. 	 */
  12485. 	pops.searchSuggestion = function (details) {
  12486. 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
  12487. 		PopsHandler.handleInit($shadowRoot, [
  12488. 			pops.config.cssText.index,
  12489. 			pops.config.cssText.anim,
  12490. 			pops.config.cssText.common,
  12491. 		]);
  12492. 		/** @type {Required<PopsSearchSuggestionDetails>} */
  12493. 		let config = {
  12494. 			// @ts-ignore
  12495. 			target: null,
  12496. 			// @ts-ignore
  12497. 			inputTarget: null,
  12498. 			selfDocument: document,
  12499. 			data: [
  12500. 				{
  12501. 					value: "数据1",
  12502. 					text: "数据1-html",
  12503. 				},
  12504. 				{
  12505. 					value: "数据2",
  12506. 					text: "数据2-html",
  12507. 				},
  12508. 			],
  12509. 			deleteIcon: {
  12510. 				enable: true,
  12511. 				callback(event, liElement, data) {
  12512. 					console.log("删除当前项", [event, liElement, data]);
  12513. 					liElement.remove();
  12514. 				},
  12515. 			},
  12516. 			className: "",
  12517. 			isAbsolute: true,
  12518. 			isAnimation: true,
  12519. 			width: "250px",
  12520. 			maxHeight: "300px",
  12521. 			followTargetWidth: true,
  12522. 			topDistance: 0,
  12523. 			zIndex: 10000,
  12524. 			searchingTip: "正在搜索中...",
  12525. 			toSearhNotResultHTML: '<li data-none="true">暂无其它数据</li>',
  12526. 			getItemHTML(item) {
  12527. 				return item.text ?? item;
  12528. 			},
  12529. 			async getData(value) {
  12530. 				console.log("当前输入框的值是：", value);
  12531. 				return [];
  12532. 			},
  12533. 			itemClickCallBack(event, liElement, data) {
  12534. 				console.log("item项的点击回调", [event, liElement, data]);
  12535. 				// @ts-ignore
  12536. 				this.inputTarget.value = data.value;
  12537. 			},
  12538. 			// @ts-ignore
  12539. 			style: void 0,
  12540. 		};
  12541. 		config = PopsUtils.assignJSON(config, details);
  12542. 		if (config.target == null) {
  12543. 			throw new TypeError("config.target 不能为空");
  12544. 		}
  12545. 		/* 做下兼容处理 */
  12546. 		if (config.inputTarget == null) {
  12547. 			// @ts-ignore
  12548. 			config.inputTarget = config.target;
  12549. 		}
  12550. 		if (details.data) {
  12551. 			config.data = details.data;
  12552. 		}
  12553. 		const guid = PopsUtils.getRandomGUID();
  12554. 		const PopsType = "searchSuggestion";
  12555.  
  12556. 		if (config.style != null) {
  12557. 			let cssNode = document.createElement("style");
  12558. 			cssNode.setAttribute("type", "text/css");
  12559. 			cssNode.innerHTML = config.style;
  12560. 			$shadowRoot.appendChild(cssNode);
  12561. 		}
  12562.  
  12563. 		const SearchSuggestion = {
  12564. 			/**
  12565. 			 * 当前的环境，可以是document，可以是shadowroot，默认是document
  12566. 			 */
  12567. 			selfDocument: config.selfDocument,
  12568. 			/**
  12569. 			 * 根元素
  12570. 			 * @type {HTMLElement}
  12571. 			 */
  12572. 			// @ts-ignore
  12573. 			root: null,
  12574. 			/**
  12575. 			 * ul元素
  12576. 			 * @type {HTMLUListElement}
  12577. 			 */
  12578. 			// @ts-ignore
  12579. 			hintULElement: null,
  12580. 			/**
  12581. 			 * 初始化
  12582. 			 */
  12583. 			init(parentElement = document.body || document.documentElement) {
  12584. 				this.root = this.getSearchSelectElement();
  12585. 				// @ts-ignore
  12586. 				this.hintULElement = this.root.querySelector("ul");
  12587. 				this.update(config.data);
  12588. 				this.changeHintULElementWidth();
  12589. 				this.changeHintULElementPosition();
  12590.  
  12591. 				this.hide();
  12592. 				if (config.isAnimation) {
  12593. 					this.root.classList.add(`pops-${PopsType}-animation`);
  12594. 				}
  12595. 				$shadowRoot.appendChild(this.root);
  12596. 				parentElement.appendChild($shadowContainer);
  12597. 			},
  12598. 			/**
  12599. 			 * 获取显示出搜索建议框的html
  12600. 			 */
  12601. 			getSearchSelectElement() {
  12602. 				let element = PopsDOMUtils.createElement(
  12603. 					"div",
  12604. 					// @ts-ignore
  12605. 					{
  12606. 						className: `pops pops-${PopsType}-search-suggestion`,
  12607. 						innerHTML: `
  12608.             <style>
  12609.             .pops-${PopsType}-animation{
  12610.               -moz-animation: searchSelectFalIn 0.5s 1 linear;
  12611.               -webkit-animation: searchSelectFalIn 0.5s 1 linear;
  12612.               -o-animation: searchSelectFalIn 0.5s 1 linear;
  12613.               -ms-animation: searchSelectFalIn 0.5s 1 linear;
  12614.             }
  12615.             .pops-${PopsType}-search-suggestion{
  12616.               position: ${config.isAbsolute ? "absolute" : "fixed"};
  12617.               z-index: ${config.zIndex};
  12618.               top: 0;
  12619.               bottom: 0;
  12620.               left: 0;
  12621.               right: 0;
  12622.               height: 0;
  12623.               border: initial;
  12624.               overflow: initial;
  12625.             }
  12626.             ul.pops-${PopsType}-search-suggestion-hint{
  12627.               width: 0;
  12628.               left: 0;
  12629.               max-height: ${config.maxHeight};
  12630.               overflow-x: hidden;
  12631.               overflow-y: auto;
  12632.               padding: 5px 0;
  12633.               background-color: #fff;
  12634.               box-sizing: border-box;
  12635.               border-radius: 4px;
  12636.               box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
  12637.               position: absolute;
  12638.             }
  12639.             ul.pops-${PopsType}-search-suggestion-hint li{
  12640.               padding: 7px;
  12641.               margin: 0;
  12642.               clear: both;
  12643.               color: #515a6e;
  12644.               font-size: 14px;
  12645.               list-style: none;
  12646.               cursor: pointer;
  12647.               transition: background .2s ease-in-out;
  12648.               overflow: hidden;
  12649.               text-overflow: ellipsis;
  12650.             }
  12651.             ul.pops-${PopsType}-search-suggestion-hint li[data-none]{
  12652.               text-align: center;
  12653.               font-size: 12px;
  12654.               color: #8e8e8e;
  12655.             }
  12656.             ul.pops-${PopsType}-search-suggestion-hint li:hover{
  12657.               background-color: rgba(0, 0, 0, .1);
  12658.             }            
  12659.             </style>
  12660.             <ul class="pops-${PopsType}-search-suggestion-hint">
  12661.                 ${config.toSearhNotResultHTML}
  12662.             </ul>
  12663.           `,
  12664. 					},
  12665. 					{
  12666. 						"data-guid": guid,
  12667. 						"type-value": PopsType,
  12668. 					}
  12669. 				);
  12670. 				if (config.className !== "" && config.className != null) {
  12671. 					PopsDOMUtils.addClassName(element, config.className);
  12672. 				}
  12673. 				return element;
  12674. 			},
  12675. 			/**
  12676. 			 * 获取显示出搜索建议框的每一项的html
  12677. 			 * @param {PopsSearchSuggestionData} item 当前项的值
  12678. 			 * @param {number} index 当前项的下标
  12679. 			 */
  12680. 			getSearchItemLiElement(item, index) {
  12681. 				// @ts-ignore
  12682. 				return PopsDOMUtils.createElement("li", {
  12683. 					className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
  12684. 					"data-index": index,
  12685. 					"data-value": this.getItemDataValue(item),
  12686. 					innerHTML: `
  12687.           ${config.getItemHTML(item)}
  12688.           ${
  12689. 						// @ts-ignore
  12690. 						config.deleteIcon.enable ? this.getDeleteIconHTML() : ""
  12691. 					}
  12692.           `,
  12693. 				});
  12694. 			},
  12695. 			/**
  12696. 			 * 获取data-value值
  12697. 			 * @param {PopsSearchSuggestionData} item
  12698. 			 */
  12699. 			getItemDataValue(item) {
  12700. 				return item;
  12701. 			},
  12702. 			/**
  12703. 			 * 设置搜索建议框每一项的点击事件
  12704. 			 * @param {HTMLLIElement} liElement
  12705. 			 */
  12706. 			setSearchItemClickEvent(liElement) {
  12707. 				PopsDOMUtils.on(
  12708. 					liElement,
  12709. 					"click",
  12710. 					void 0,
  12711. 					(event) => {
  12712. 						PopsUtils.preventEvent(event);
  12713. 						// @ts-ignore
  12714. 						if (event.target.closest(`.pops-${PopsType}-delete-icon`)) {
  12715. 							/* 点击的是删除按钮 */
  12716. 							// @ts-ignore
  12717. 							config.deleteIcon.callback(
  12718. 								// @ts-ignore
  12719. 								event,
  12720. 								liElement,
  12721. 								// @ts-ignore
  12722. 								liElement["data-value"]
  12723. 							);
  12724. 							if (!this.hintULElement.children.length) {
  12725. 								/* 全删完了 */
  12726. 								this.clear();
  12727. 							}
  12728. 						} else {
  12729. 							/* 点击项主体 */
  12730. 							config.itemClickCallBack(
  12731. 								// @ts-ignore
  12732. 								event,
  12733. 								liElement,
  12734. 								// @ts-ignore
  12735. 								liElement["data-value"]
  12736. 							);
  12737. 						}
  12738. 					},
  12739. 					{
  12740. 						capture: true,
  12741. 					}
  12742. 				);
  12743. 			},
  12744. 			/**
  12745. 			 * 监听输入框内容改变
  12746. 			 */
  12747. 			setInputChangeEvent() {
  12748. 				/* 是input输入框 */
  12749. 				/* 禁用输入框自动提示 */
  12750. 				// @ts-ignore
  12751. 				config.inputTarget.setAttribute("autocomplete", "off");
  12752. 				/* 内容改变事件 */
  12753. 				PopsDOMUtils.on(
  12754. 					// @ts-ignore
  12755. 					config.inputTarget,
  12756. 					"input",
  12757. 					void 0,
  12758. 					async (event) => {
  12759. 						// @ts-ignore
  12760. 						let getListResult = await config.getData(event.target.value);
  12761. 						this.update(getListResult);
  12762. 					},
  12763. 					{
  12764. 						capture: true,
  12765. 					}
  12766. 				);
  12767. 			},
  12768. 			/**
  12769. 			 * 移除输入框内容改变的监听
  12770. 			 */
  12771. 			removeInputChangeEvent() {
  12772. 				// @ts-ignore
  12773. 				PopsDOMUtils.off(config.inputTarget, "input", void 0, void 0, {
  12774. 					capture: true,
  12775. 				});
  12776. 			},
  12777. 			/**
  12778. 			 * 显示搜索建议框的事件
  12779. 			 */
  12780. 			showEvent() {
  12781. 				SearchSuggestion.changeHintULElementPosition();
  12782. 				SearchSuggestion.changeHintULElementWidth();
  12783. 				SearchSuggestion.show();
  12784. 			},
  12785. 			/**
  12786. 			 * 设置显示搜索建议框的事件
  12787. 			 */
  12788. 			setShowEvent() {
  12789. 				/* 焦点|点击事件*/
  12790. 				PopsDOMUtils.on(
  12791. 					// @ts-ignore
  12792. 					[config.target, config.inputTarget],
  12793. 					["focus", "click"],
  12794. 					void 0,
  12795. 					this.showEvent,
  12796. 					{
  12797. 						capture: true,
  12798. 					}
  12799. 				);
  12800. 			},
  12801. 			/**
  12802. 			 * 移除显示搜索建议框的事件
  12803. 			 */
  12804. 			removeShowEvent() {
  12805. 				/* 焦点|点击事件*/
  12806. 				PopsDOMUtils.off(
  12807. 					// @ts-ignore
  12808. 					[config.target, config.inputTarget],
  12809. 					["focus", "click"],
  12810. 					void 0,
  12811. 					this.showEvent,
  12812. 					{
  12813. 						capture: true,
  12814. 					}
  12815. 				);
  12816. 			},
  12817. 			/**
  12818. 			 * 隐藏搜索建议框的事件
  12819. 			 * @param {PointerEvent|MouseEvent} event
  12820. 			 */
  12821. 			hideEvent(event) {
  12822. 				if (event.target instanceof Node) {
  12823. 					if ($shadowContainer.contains(event.target)) {
  12824. 						/* 点击在shadow上的 */
  12825. 						return;
  12826. 					}
  12827. 					if (config.target.contains(event.target)) {
  12828. 						/* 点击在目标元素内 */
  12829. 						return;
  12830. 					}
  12831. 					// @ts-ignore
  12832. 					if (config.inputTarget.contains(event.target)) {
  12833. 						/* 点击在目标input内 */
  12834. 						return;
  12835. 					}
  12836. 					SearchSuggestion.hide();
  12837. 				}
  12838. 			},
  12839. 			/**
  12840. 			 * 设置隐藏搜索建议框的事件
  12841. 			 */
  12842. 			setHideEvent() {
  12843. 				/* 全局点击事件 */
  12844. 				/* 全局触摸屏点击事件 */
  12845. 				PopsDOMUtils.on(
  12846. 					// @ts-ignore
  12847. 					SearchSuggestion.selfDocument,
  12848. 					["click", "touchstart"],
  12849. 					void 0,
  12850. 					this.hideEvent,
  12851. 					{
  12852. 						capture: true,
  12853. 					}
  12854. 				);
  12855. 			},
  12856. 			/**
  12857. 			 * 移除隐藏搜索建议框的事件
  12858. 			 */
  12859. 			removeHideEvent() {
  12860. 				PopsDOMUtils.off(
  12861. 					// @ts-ignore
  12862. 					SearchSuggestion.selfDocument,
  12863. 					["click", "touchstart"],
  12864. 					void 0,
  12865. 					this.hideEvent,
  12866. 					{
  12867. 						capture: true,
  12868. 					}
  12869. 				);
  12870. 			},
  12871. 			/**
  12872. 			 * 设置所有监听
  12873. 			 */
  12874. 			setAllEvent() {
  12875. 				this.setInputChangeEvent();
  12876. 				this.setHideEvent();
  12877. 				this.setShowEvent();
  12878. 			},
  12879. 			/**
  12880. 			 * 移除所有监听
  12881. 			 */
  12882. 			removeAllEvent() {
  12883. 				this.removeInputChangeEvent();
  12884. 				this.removeHideEvent();
  12885. 				this.removeShowEvent();
  12886. 			},
  12887. 			/**
  12888. 			 * 获取删除按钮的html
  12889. 			 */
  12890. 			getDeleteIconHTML(size = 16, fill = "#bababa") {
  12891. 				return `
  12892.         <svg class="pops-${PopsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
  12893.           <path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
  12894.           <path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
  12895.         </svg>
  12896.         `;
  12897. 			},
  12898. 			/**
  12899. 			 * 设置当前正在搜索中的提示
  12900. 			 */
  12901. 			setPromptsInSearch() {
  12902. 				// @ts-ignore
  12903. 				let isSearchingElement = PopsDOMUtils.createElement("li", {
  12904. 					className: `pops-${PopsType}-search-suggestion-hint-searching-item`,
  12905. 					innerHTML: config.searchingTip,
  12906. 				});
  12907. 				SearchSuggestion.hintULElement.appendChild(isSearchingElement);
  12908. 			},
  12909. 			/**
  12910. 			 * 移除正在搜索中的提示
  12911. 			 */
  12912. 			removePromptsInSearch() {
  12913. 				SearchSuggestion.hintULElement
  12914. 					.querySelector(
  12915. 						`li.pops-${PopsType}-search-suggestion-hint-searching-item`
  12916. 					)
  12917. 					?.remove();
  12918. 			},
  12919. 			/**
  12920. 			 * 清空所有的搜索结果
  12921. 			 */
  12922. 			clearAllSearchItemLi() {
  12923. 				SearchSuggestion.hintULElement.innerHTML = "";
  12924. 			},
  12925. 			/**
  12926. 			 * 修改搜索建议框的位置(top、left)
  12927. 			 * 因为目标元素可能是动态隐藏的
  12928. 			 */
  12929. 			changeHintULElementPosition(
  12930. 				target = config.target ?? config.inputTarget
  12931. 			) {
  12932. 				let targetRect = config.isAbsolute
  12933. 					? PopsDOMUtils.offset(target)
  12934. 					: target.getBoundingClientRect();
  12935.  
  12936. 				SearchSuggestion.hintULElement.style.top =
  12937. 					// @ts-ignore
  12938. 					targetRect.height + targetRect.top + config.topDistance + "px";
  12939. 				SearchSuggestion.hintULElement.style.left = targetRect.left + "px";
  12940. 			},
  12941. 			/**
  12942. 			 * 修改搜索建议框的width
  12943. 			 * 因为目标元素可能是动态隐藏的
  12944. 			 */
  12945. 			changeHintULElementWidth(target = config.target ?? config.inputTarget) {
  12946. 				let targetRect = target.getBoundingClientRect();
  12947. 				if (config.followTargetWidth) {
  12948. 					SearchSuggestion.hintULElement.style.width = targetRect.width + "px";
  12949. 				} else {
  12950. 					// @ts-ignore
  12951. 					SearchSuggestion.hintULElement.style.width = config.width;
  12952. 				}
  12953. 			},
  12954. 			/**
  12955. 			 * 更新页面显示的搜索结果
  12956. 			 * @param {PopsSearchSuggestionData[]} data
  12957. 			 */
  12958. 			update(data = []) {
  12959. 				if (!Array.isArray(data)) {
  12960. 					throw new TypeError("传入的数据不是数组");
  12961. 				}
  12962. 				config.data = data;
  12963. 				/* 清空已有的搜索结果 */
  12964. 				if (config.data.length) {
  12965. 					this.clearAllSearchItemLi();
  12966. 					/* 添加进ul中 */
  12967. 					config.data.forEach((item, index) => {
  12968. 						let itemElement = this.getSearchItemLiElement(item, index);
  12969. 						// @ts-ignore
  12970. 						this.setSearchItemClickEvent(itemElement);
  12971. 						this.hintULElement.appendChild(itemElement);
  12972. 					});
  12973. 				} else {
  12974. 					/* 清空 */
  12975. 					this.clear();
  12976. 				}
  12977. 			},
  12978. 			/**
  12979. 			 * 清空当前的搜索结果并显示无结果
  12980. 			 */
  12981. 			clear() {
  12982. 				this.clearAllSearchItemLi();
  12983. 				this.hintULElement.appendChild(
  12984. 					// @ts-ignore
  12985. 					PopsUtils.parseTextToDOM(config.toSearhNotResultHTML)
  12986. 				);
  12987. 			},
  12988. 			/**
  12989. 			 * 隐藏搜索建议框
  12990. 			 */
  12991. 			hide() {
  12992. 				this.root.style.display = "none";
  12993. 			},
  12994. 			/**
  12995. 			 * 显示搜索建议框
  12996. 			 */
  12997. 			show() {
  12998. 				this.root.style.display = "";
  12999. 			},
  13000. 		};
  13001. 		return SearchSuggestion;
  13002. 	};
  13003. 	return pops;
  13004. });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址