Ten skrypt nie powinien być instalowany bezpośrednio. Jest to biblioteka dla innych skyptów do włączenia dyrektywą meta // @require https://update.greasyfork.org/scripts/456485/1360571/pops.js
/// <reference path="../DOMUtils/core.d.ts" />
(function (global, factory) {
/**
* 不使用define
* typeof define === "function" && define.amd
* define(factory)
*/
if (typeof exports === "object" && typeof module !== "undefined") {
/* 适用于NodeJs或typeScript */
module.exports = factory();
} else {
global = typeof globalThis !== "undefined" ? globalThis : global || self;
/* 适用于浏览器中，且this对象是window，如果this是其它，那么会在其它对象下注册对象 */
global.pops = factory(global.pops);
}
})(typeof window !== "undefined" ? window : this, function (AnotherPops) {
"use strict";
const OriginPrototype = {
Object: {
defineProperty: Object.defineProperty,
},
};
/** 工具类 */
const PopsUtils = {
/** .on绑定的事件 @type {unique symbol} */
SymbolEvents: Symbol(
"events_" +
(((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
),
assignJSON(target, source) {
/* JSON数据存在即替换 */
if (source == null) {
return target;
}
for (var target_key in target) {
if (typeof source[target_key] !== "undefined") {
if (
typeof source[target_key] === "object" &&
!(source[target_key] instanceof Node)
) {
target[target_key] = this.assignJSON(
target[target_key],
source[target_key]
);
} else {
target[target_key] = source[target_key];
}
}
}
return target;
},
/**
* 字符串转HTMLElement
* @param {string} elementString
* @returns {HTMLElement}
*/
parseTextToDOM(elementString) {
/* 去除前后的换行和空格 */
elementString = elementString
.replace(/^[\n|\s]*/g, "")
.replace(/[\n|\s]*$/g, "");
let targetElement = PopsDOMUtils.createElement("div", {
innerHTML: elementString,
});
return targetElement.firstChild;
},
/**
* 生成随机GUID
* @returns {string}
*/
getRandomGUID() {
function randomId() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return `${randomId()}${randomId()}-${randomId()}-${randomId()}-${randomId()}-${randomId()}${randomId()}${randomId()}`;
},
/**
* 判断元素/页面中是否包含该元素
* @param {HTMLElement} target （可选）
* @param {HTMLElement[]|HTMLElement} sourceList
*/
contains(target, sourceList) {
if (arguments.length === 1) {
return this.contains(
document.body || document.documentElement,
arguments[0]
);
}
if (typeof sourceList[Symbol.iterator] === "function") {
let flag = true;
for (const sourceNode of sourceList) {
if (!target.contains(sourceNode)) {
flag = false;
break;
}
}
return flag;
} else {
return this.contains(target, [sourceList]);
}
},
/**
* 元素后追加元素
* @param {HTMLElement} target （可选）
* @param {HTMLElement[]|HTMLElement} sourceList
*/
appendChild(target, sourceList) {
if (arguments.length === 1) {
this.appendChild(
document.body || document.documentElement,
arguments[0]
);
return;
}
if (typeof sourceList[Symbol.iterator] === "function") {
sourceList.forEach((item) => {
this.appendChild(target, item);
});
return;
}
target.appendChild(sourceList);
},
/**
* 删除配置中对应的对象
* @param {any[]} targets
* @param {string} guid
* @param {boolean} removeAll 是否全部删除
* @returns
*/
configRemove(targets, guid, removeAll = false) {
/**
*
* @param {PopsLayerCommonConfig} item
*/
function removeItem(item) {
item?.animElement?.remove();
item?.popsElement?.remove();
item?.maskElement?.remove();
item?.$shadowContainer?.remove();
}
targets.forEach((target) => {
target.forEach(
/**
* @param {PopsLayerCommonConfig} item
* @param {number} index
*/
(item, index) => {
if (removeAll || item["guid"] === guid) {
if (
pops.config.animation.hasOwnProperty(
item.animElement.getAttribute("anim")
)
) {
item.animElement.style.width = "100%";
item.animElement.style.height = "100%";
item.animElement.style["animation-name"] =
item.animElement.getAttribute("anim") + "-reverse";
if (
pops.config.animation.hasOwnProperty(
item.animElement.style["animation-name"]
)
) {
PopsDOMUtils.on(
item.animElement,
PopsDOMUtils.getAnimationEndNameList(),
void 0,
function () {
removeItem(item);
},
{
capture: true,
}
);
} else {
removeItem(item);
}
} else {
removeItem(item);
}
target.splice(index, 1);
}
}
);
});
return targets;
},
/**
* 隐藏
* @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"} popsType
* @param {any[]} source
* @param {string} guid
* @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
* @param {HTMLElement} animElement
* @param {HTMLElement} maskElement
*/
hide(popsType, source, guid, config, animElement, maskElement) {
let popsElement = animElement.querySelector(".pops[type-value]");
if (popsType === "drawer") {
setTimeout(() => {
maskElement.style.setProperty("display", "none");
if (["top", "bottom"].includes(config.direction)) {
popsElement.style.setProperty("height", 0);
} else if (["left", "right"].includes(config.direction)) {
popsElement.style.setProperty("width", 0);
} else {
console.error("未知direction：", config.direction);
}
}, config.closeDelay);
} else {
source.forEach((item) => {
if (item.guid === guid) {
/* 存在动画 */
item.animElement.style.width = "100%";
item.animElement.style.height = "100%";
item.animElement.style["animation-name"] =
item.animElement.getAttribute("anim") + "-reverse";
if (
pops.config.animation.hasOwnProperty(
item.animElement.style["animation-name"]
)
) {
function animationendCallBack() {
item.animElement.style.display = "none";
if (item.maskElement) {
item.maskElement.style.display = "none";
}
PopsDOMUtils.off(
item.animElement,
PopsDOMUtils.getAnimationEndNameList(),
void 0,
animationendCallBack,
{
capture: true,
}
);
}
PopsDOMUtils.on(
item.animElement,
PopsDOMUtils.getAnimationEndNameList(),
void 0,
animationendCallBack,
{
capture: true,
}
);
} else {
item.animElement.style.display = "none";
if (item.maskElement) {
item.maskElement.style.display = "none";
}
}
return;
}
});
}
},
/**
* 显示
* @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"} popsType
* @param {any[]} source
* @param {string} guid
* @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
* @param {HTMLElement} animElement
* @param {HTMLElement} maskElement
*/
show(popsType, source, guid, config, animElement, maskElement) {
let popsElement = animElement.querySelector(".pops[type-value]");
if (popsType === "drawer") {
setTimeout(() => {
maskElement.style.setProperty("display", "");
if (["top", "bottom"].includes(config.direction)) {
popsElement.style.setProperty("height", config.size);
} else if (["left", "right"].includes(config.direction)) {
popsElement.style.setProperty("width", config.size);
} else {
console.error("未知direction：", config.direction);
}
}, config.openDelay);
} else {
source.forEach((item) => {
if (item.guid === guid) {
item.animElement.style.width = "";
item.animElement.style.height = "";
item.animElement.style["animation-name"] = item.animElement
.getAttribute("anim")
.replace("-reverse", "");
if (
pops.config.animation.hasOwnProperty(
item.animElement.style["animation-name"]
)
) {
item.animElement.style.display = "";
if (item.maskElement) {
item.maskElement.style.display = "";
}
function animationendCallBack() {
PopsDOMUtils.off(
item.animElement,
PopsDOMUtils.getAnimationEndNameList(),
void 0,
animationendCallBack,
{
capture: true,
}
);
}
PopsDOMUtils.on(
item.animElement,
PopsDOMUtils.getAnimationEndNameList(),
void 0,
animationendCallBack,
{
capture: true,
}
);
} else {
item.animElement.style.display = "";
if (item.maskElement) {
item.maskElement.style.display = "";
}
}
}
return;
});
}
},
/**
* 关闭
* @param {string} popsType
* @param {any} source
* @param {string} guid
* @param {PopsAlertDetails|PopsDrawerDetails|PopsPromptDetails|PopsConfirmDetails|PopsIframeDetails|PopsLoadingDetails|PopsPanelDetails|PopsFolderDetails} config
* @param {HTMLElement} animElement
*/
close(popsType, source, guid, config, animElement) {
let popsElement = animElement.querySelector(".pops[type-value]");
/**
* 动画结束事件
*/
function transitionendEvent() {
/**
*
* @param {TransitionEvent} event
*/
function closeCallBack(event) {
if (event.propertyName !== "transform") {
return;
}
PopsDOMUtils.off(
popsElement,
PopsDOMUtils.getTransitionEndNameList(),
void 0,
closeCallBack
);
PopsUtils.configRemove([source], guid);
}
/* 监听过渡结束 */
PopsDOMUtils.on(
popsElement,
PopsDOMUtils.getTransitionEndNameList(),
void 0,
closeCallBack
);
let popsTransForm = getComputedStyle(popsElement).transform;
if (popsTransForm !== "none") {
PopsDOMUtils.trigger(
popsElement,
PopsDOMUtils.getTransitionEndNameList(),
void 0,
true
);
return;
}
if (["top"].includes(config.direction)) {
popsElement.style.setProperty("transform", "translateY(-100%)");
} else if (["bottom"].includes(config.direction)) {
popsElement.style.setProperty("transform", "translateY(100%)");
} else if (["left"].includes(config.direction)) {
popsElement.style.setProperty("transform", "translateX(-100%)");
} else if (["right"].includes(config.direction)) {
popsElement.style.setProperty("transform", "translateX(100%)");
} else {
console.error("未知direction：", config.direction);
}
}
if (popsType === "drawer") {
setTimeout(() => {
transitionendEvent();
}, config.closeDelay);
} else {
PopsUtils.configRemove([source], guid);
}
},
/**
* 获取所有弹窗中的最大的z-index
* @param {number} defaultValue
*/
getPopsMaxZIndex(defaultValue) {
let maxZIndex = 0;
let maxZIndexElement = null;
Object.keys(pops.config.layer).forEach((item) => {
pops.config.layer[item].forEach(
/**
* @param {PopsLayerCommonConfig} item2
*/
(item2) => {
let itemZIndex = parseInt(
getComputedStyle(item2["animElement"]).zIndex
);
maxZIndexElement =
itemZIndex > maxZIndex ? item2["animElement"] : maxZIndexElement;
maxZIndex = itemZIndex > maxZIndex ? itemZIndex : maxZIndex;
}
);
});
maxZIndex = maxZIndex === 0 ? defaultValue : maxZIndex;
return { zIndex: maxZIndex, animElement: maxZIndexElement };
},
/**
* 获取CSS Rule
* @param {StyleSheet} sheet
* @returns
*/
getKeyFrames(sheet) {
let result = {};
Object.keys(sheet.cssRules).forEach((key) => {
if (
sheet.cssRules[key].type === 7 &&
sheet.cssRules[key].name.startsWith("pops-anim-")
) {
result[sheet.cssRules[key].name] = sheet.cssRules[key];
}
});
return result;
},
/**
* 拖拽元素
* 说明：
* + 元素的position为absolute或者fixed
* + 会为元素的
* @param {HTMLElement} moveElement
* @param {{
* dragElement: HTMLElement,
* limit: boolean,
* extraDistance: number,
* container: Element|Window,
* moveCallBack?: (moveElement: HTMLElement,left: number,top: number) => void,
* endCallBack?: (moveElement: HTMLElement,left: number,top: number) => void,
* preventEvent?: (event: TouchEvent|PointerEvent) => boolean;
* }} options
*/
drag(moveElement, options = {}) {
options = Object.assign(
{
limit: true,
extraDistance: 3,
container: globalThis,
},
options
);
let isMove = false;
/* 点击元素，left偏移 */
let clickElementLeftOffset = 0;
/* 点击元素，top偏移 */
let clickElementTopOffset = 0;
let AnyTouch = PopsUtils.AnyTouch();
let anyTouchElement = new AnyTouch(options.dragElement, {
preventEvent(event) {
if (typeof options.preventEvent === "function") {
return options.preventEvent(event);
} else {
return false;
}
},
});
PopsDOMUtils.css(options.dragElement, {
cursor: "move",
});
/**
* 获取移动元素的transform偏移
*/
function getTransform(element) {
let transform_left = 0;
let transform_top = 0;
let elementTransform = globalThis.getComputedStyle(element).transform;
if (
elementTransform !== "none" &&
elementTransform != null &&
elementTransform !== ""
) {
let elementTransformSplit = elementTransform
.match(/\((.+)\)/)[1]
.split(",");
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
}
return {
transformLeft: transform_left,
transformTop: transform_top,
};
}
/**
* 修改移动的元素的style
*/
function changeMoveElementStyle(element) {
let old_transitionDuration = element.style.transitionDuration;
if (globalThis.getComputedStyle(element).transitionDuration !== "0s") {
element.style.transitionDuration = "0s";
}
return () => {
element.style.transitionDuration = old_transitionDuration;
};
}
/**
* 获取容器的高度、宽度，一般是window为容器
*/
function getContainerWidthOrHeight(container) {
container = container ?? globalThis;
return {
width: PopsDOMUtils.width(container),
height: PopsDOMUtils.height(container),
};
}
/**
* 获取容器的最小left、top偏移
*/
function getContainerTopOrLeft(container) {
container = container ?? globalThis;
if (PopsUtils.isWin(container)) {
return {
left: 0,
top: 0,
};
} else {
let rect = container.getBoundingClientRect();
return {
left: rect.left,
top: rect.top,
};
}
}
let transformInfo = getTransform(moveElement);
let transformLeft = transformInfo.transformLeft;
let transformTop = transformInfo.transformTop;
let resumeMoveElementStyle = null;
anyTouchElement.on("pan", function (event) {
if (!isMove) {
isMove = true;
let rect = options.dragElement.getBoundingClientRect();
clickElementLeftOffset = event.x - rect.left;
clickElementTopOffset = event.y - rect.top;
transformInfo = getTransform(moveElement);
transformLeft = transformInfo.transformLeft;
transformTop = transformInfo.transformTop;
//if (event.nativeEvent.offsetX) {
// clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
//} else {
// clickElementLeftOffset = parseInt(event.getOffset().x);
//}
//if (event.nativeEvent.offsetY) {
// clickElementTopOffset = parseInt(event.nativeEvent.offsetY);
//} else {
// clickElementTopOffset = parseInt(event.getOffset().y);
//}
resumeMoveElementStyle = changeMoveElementStyle(moveElement);
}
/** 当前移动的left偏移 */
let currentMoveLeftOffset =
event.x - clickElementLeftOffset + transformLeft;
/** 当前移动的top偏移 */
let currentMoveTopOffset =
event.y - clickElementTopOffset + transformTop;
/* 拖拽移动 */
if (event.phase === "move") {
if (options.limit) {
/* 限制在容器内移动 */
/* left偏移最大值 */
let maxLeftOffset =
getContainerWidthOrHeight(options.container).width -
PopsDOMUtils.width(moveElement) +
transformLeft;
let { left: minLeftOffset, top: minTopOffset } =
getContainerTopOrLeft(options.container);
/* top偏移的最大值 */
let maxTopOffset =
getContainerWidthOrHeight(options.container).height -
PopsDOMUtils.height(moveElement) +
transformTop;
if (currentMoveLeftOffset > maxLeftOffset) {
/* 不允许超过容器的最大宽度 */
currentMoveLeftOffset = maxLeftOffset;
}
if (currentMoveTopOffset > maxTopOffset) {
/* 不允许超过容器的最大高度 */
currentMoveTopOffset = maxTopOffset;
}
if (
currentMoveLeftOffset - options.extraDistance * 2 <
minLeftOffset + transformLeft
) {
/* 不允许left偏移小于容器最小值 */
currentMoveLeftOffset = minLeftOffset + transformLeft;
/* 最左边 +额外距离 */
currentMoveLeftOffset += options.extraDistance;
} else {
/* 最右边 -额外距离 */
currentMoveLeftOffset -= options.extraDistance;
}
if (
currentMoveTopOffset - options.extraDistance * 2 <
minTopOffset + transformTop
) {
/* 不允许top偏移小于容器最小值 */
currentMoveTopOffset = minTopOffset + transformTop;
/* 最上面 +额外距离 */
currentMoveTopOffset += options.extraDistance;
} else {
/* 最下面 -额外距离 */
currentMoveTopOffset -= options.extraDistance;
}
}
if (typeof options.moveCallBack === "function") {
options.moveCallBack(
moveElement,
currentMoveLeftOffset,
currentMoveTopOffset
);
}
PopsDOMUtils.css(moveElement, {
left: currentMoveLeftOffset + "px",
top: currentMoveTopOffset + "px",
});
}
/* 停止拖拽 */
if (event.phase === "end") {
isMove = false;
if (typeof resumeMoveElementStyle === "function") {
resumeMoveElementStyle();
resumeMoveElementStyle = null;
}
if (typeof options.endCallBack === "function") {
options.endCallBack(
moveElement,
currentMoveLeftOffset,
currentMoveTopOffset
);
}
}
});
/* 因为会覆盖上面的点击事件，主动触发一下 */
anyTouchElement.on(["click", "tap"], function (event) {
event.changedPoints.forEach((item) => {
PopsDOMUtils.trigger(item.target, "click", void 0, transformLeft);
});
});
},
/**
* AnyTouch
* + https://fastly.jsdelivr.net/npm/any-touch@2.2.0/dist/any-touch.umd.min.js
* + https://github.com/any86/any-touch/blob/master/README.CN.md
*/
AnyTouch() {
let anyTouch = null;
(function (global, factory) {
anyTouch = factory();
})(this, function () {
"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics =
Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array &&
function (d, b) {
d.__proto__ = b;
}) ||
function (d, b) {
for (var p in b)
if (Object.hasOwnProperty.call(b, p)) d[p] = b[p];
};
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError(
"Class extends value " +
String(b) +
" is not a constructor or null"
);
extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype =
b === null
? Object.create(b)
: ((__.prototype = b.prototype), new __());
}
var __assign = function () {
__assign =
Object.assign ||
function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator,
m = s && o[s],
i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
},
};
throw new TypeError(
s ? "Object is not iterable." : "Symbol.iterator is not defined."
);
}
var AnyEvent = (function () {
function AnyEvent() {
this.__map = {};
}
AnyEvent.prototype.beforeEach = function (interceptor) {
this.__interceptor = interceptor;
};
AnyEvent.prototype.on = function (typeOrTypes, listener) {
var e_1, _a;
var types = Array.isArray(typeOrTypes)
? typeOrTypes
: [typeOrTypes];
try {
for (
var types_1 = __values(types), types_1_1 = types_1.next();
!types_1_1.done;
types_1_1 = types_1.next()
) {
var type = types_1_1.value;
this.__map[type] = this.__map[type] || [];
var listeners = this.__map[type];
if (listeners) {
listeners.push(listener);
}
}
} catch (e_1_1) {
e_1 = { error: e_1_1 };
} finally {
try {
if (types_1_1 && !types_1_1.done && (_a = types_1.return))
_a.call(types_1);
} finally {
if (e_1) throw e_1.error;
}
}
return this;
};
AnyEvent.prototype.emit = function (type, payload, callback) {
var _this = this;
if (void 0 !== this.__interceptor) {
this.__interceptor(type, function () {
_this.__emit(type, payload);
callback && callback();
});
} else {
this.__emit(type, payload);
callback && callback();
}
};
AnyEvent.prototype.__emit = function (type, event) {
var e_2, _a;
var listeners = this.__map[type];
if (
Array.isArray(listeners) &&
(listeners === null || listeners === void 0
? void 0
: listeners.length)
) {
try {
for (
var listeners_1 = __values(listeners),
listeners_1_1 = listeners_1.next();
!listeners_1_1.done;
listeners_1_1 = listeners_1.next()
) {
var listener = listeners_1_1.value;
listener(event, type);
}
} catch (e_2_1) {
e_2 = { error: e_2_1 };
} finally {
try {
if (
listeners_1_1 &&
!listeners_1_1.done &&
(_a = listeners_1.return)
)
_a.call(listeners_1);
} finally {
if (e_2) throw e_2.error;
}
}
}
this.event = event;
};
AnyEvent.prototype.off = function (type, listener) {
var listeners = this.__map[type];
if (void 0 !== listeners) {
if (void 0 === listener) {
delete this.__map[type];
} else {
var index = listeners.findIndex(function (cb) {
return cb === listener;
});
listeners.splice(index, 1);
}
}
};
AnyEvent.prototype.destroy = function () {
this.__map = {};
};
return AnyEvent;
})();
var TOUCH_START = "touchstart";
var TOUCH_MOVE = "touchmove";
var TOUCH_END = "touchend";
var TOUCH_CANCEL = "touchcancel";
var MOUSE_UP = "mouseup";
var MOUSE_MOVE = "mousemove";
var MOUSE_DOWN = "mousedown";
var TYPE_START$1 = "start";
var TYPE_MOVE$1 = "move";
var TYPE_END$1 = "end";
function isFunction(input) {
return "[object Function]" === Object.prototype.toString.call(input);
}
var CLIENT_X = "clientX";
var CLIENT_Y = "clientY";
var COMPUTE_INTERVAL = 16;
var TYPE_START = "start";
var TYPE_MOVE = "move";
var TYPE_CANCEL = "cancel";
var TYPE_END = "end";
var DIRECTION_LEFT = "left";
var DIRECTION_RIGHT = "right";
var DIRECTION_UP = "up";
var DIRECTION_DOWN = "down";
var _a;
var STATUS_CODE_AND_NAME_MAP =
((_a = {}),
(_a[4] = TYPE_START),
(_a[5] = TYPE_MOVE),
(_a[1] = TYPE_END),
(_a[3] = TYPE_CANCEL),
_a);
function getStatusName(code) {
return STATUS_CODE_AND_NAME_MAP[code];
}
function flow(isVaild, lastStatus, phase) {
var _a, _b, _c, _d, _e, _f, _g;
var STATE_MAP = {
1:
((_a = {}),
(_a[0] = ((_b = {}), (_b[TYPE_MOVE] = 4), _b)),
(_a[4] =
((_c = {}),
(_c[TYPE_MOVE] = 5),
(_c[TYPE_END] = 1),
(_c[TYPE_CANCEL] = 3),
_c)),
(_a[5] =
((_d = {}),
(_d[TYPE_MOVE] = 5),
(_d[TYPE_END] = 1),
(_d[TYPE_CANCEL] = 3),
_d)),
_a),
0:
((_e = {}),
(_e[4] =
((_f = {}),
(_f[TYPE_MOVE] = 2),
(_f[TYPE_END] = 1),
(_f[TYPE_CANCEL] = 3),
_f)),
(_e[5] =
((_g = {}),
(_g[TYPE_START] = 2),
(_g[TYPE_MOVE] = 2),
(_g[TYPE_END] = 1),
(_g[TYPE_CANCEL] = 3),
_g)),
_e),
};
var map = STATE_MAP[Number(isVaild)][lastStatus];
return (void 0 !== map && map[phase]) || 0;
}
function resetState(context) {
if ([1, 3, 2].includes(context.state)) {
context.state = 0;
}
}
function isMoveOrEndOrCancel(state) {
return [5, 1, 3].includes(state);
}
function isDisabled(context) {
if (context.disabled) {
context.state = 0;
return true;
}
}
function createPluginContext(defaultOptions, options) {
return __assign(__assign(__assign({}, defaultOptions), options), {
state: 0,
disabled: false,
});
}
function round2(n) {
return Math.round(n * 100) / 100;
}
function inputCreator() {
var id = 0;
var prevInput;
var activeInput;
var startInput;
var startMultiInput;
return function (basicsInput) {
prevInput = activeInput;
if (void 0 !== basicsInput) {
id = Number.MAX_SAFE_INTEGER > id ? ++id : 1;
var pureInput = extendInput(basicsInput, id);
activeInput = pureInput;
var isStart = pureInput.isStart,
pointLength = pureInput.pointLength;
if (isStart) {
startInput = pureInput;
prevInput = void 0;
if (1 < pointLength) {
startMultiInput = pureInput;
} else {
startMultiInput = void 0;
}
}
return __assign(__assign({}, pureInput), {
prevInput: prevInput,
startMultiInput: startMultiInput,
startInput: startInput,
});
}
};
}
function getCenter(points) {
var length = points.length;
if (0 < length) {
if (1 === length) {
var _a = points[0],
clientX = _a.clientX,
clientY = _a.clientY;
return { x: Math.round(clientX), y: Math.round(clientY) };
}
var countPoint = points.reduce(
function (countPoint, point) {
countPoint.x += point[CLIENT_X];
countPoint.y += point[CLIENT_Y];
return countPoint;
},
{ x: 0, y: 0 }
);
return {
x: Math.round(countPoint.x / length),
y: Math.round(countPoint.y / length),
};
}
}
function extendInput(basicsInput, id) {
var phase = basicsInput.phase,
points = basicsInput.points,
changedPoints = basicsInput.changedPoints,
nativeEvent = basicsInput.nativeEvent;
var pointLength = points.length;
var isStart = TYPE_START === phase;
var isEnd =
(TYPE_END === phase && 0 === pointLength) || TYPE_CANCEL === phase;
var timestamp = Date.now();
var _a = getCenter(points) || getCenter(changedPoints),
x = _a.x,
y = _a.y;
var currentTarget = nativeEvent.currentTarget;
return Object.assign(basicsInput, {
id: id,
x: x,
y: y,
timestamp: timestamp,
isStart: isStart,
isEnd: isEnd,
pointLength: pointLength,
currentTarget: currentTarget,
getOffset: function (el) {
if (el === void 0) {
el = currentTarget;
}
var rect = el.getBoundingClientRect();
return {
x: x - Math.round(rect.left),
y: y - Math.round(rect.top),
};
},
});
}
function mouse() {
var prevPoints;
var isPressed = false;
var _target = null;
var createInput = inputCreator();
return function (event) {
var clientX = event.clientX,
clientY = event.clientY,
type = event.type,
button = event.button,
target = event.target;
var points = [
{ clientX: clientX, clientY: clientY, target: target },
];
var phase;
if (MOUSE_DOWN === type && 0 === button) {
_target = target;
isPressed = true;
phase = TYPE_START$1;
} else if (isPressed) {
if (MOUSE_MOVE === type) {
phase = TYPE_MOVE$1;
} else if (MOUSE_UP === type) {
points = [];
phase = TYPE_END$1;
isPressed = false;
}
} else {
return;
}
var changedPoints = prevPoints || [
{ clientX: clientX, clientY: clientY, target: target },
];
prevPoints = [
{ clientX: clientX, clientY: clientY, target: target },
];
if (void 0 !== phase) {
return createInput({
phase: phase,
changedPoints: changedPoints,
points: points,
target: _target,
targets: [_target],
nativeEvent: event,
});
}
};
}
function touch(el) {
var createInput = inputCreator();
return function (event) {
var targets = [];
var points = [];
Array.from(event.touches).forEach(function (_a) {
var clientX = _a.clientX,
clientY = _a.clientY,
target = _a.target;
if (el === null || el === void 0 ? void 0 : el.contains(target)) {
targets.push(target);
points.push({
clientX: clientX,
clientY: clientY,
target: target,
});
}
});
var changedPoints = Array.from(event.changedTouches).map(function (
_a
) {
var clientX = _a.clientX,
clientY = _a.clientY,
target = _a.target;
return { clientX: clientX, clientY: clientY, target: target };
});
return createInput({
phase: event.type.replace("touch", ""),
changedPoints: changedPoints,
points: points,
nativeEvent: event,
target: event.target,
targets: targets,
});
};
}
function dispatchDomEvent(typeName, el, payload, eventInit) {
var data = {};
for (var key in payload) {
if (!["target", "currentTarget", "type"].includes(key)) {
data[key] = payload[key];
}
}
var event;
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(
typeName,
eventInit === null || eventInit === void 0
? void 0
: eventInit.bubbles,
eventInit === null || eventInit === void 0
? void 0
: eventInit.cancelable
);
} else {
event = new Event(typeName, eventInit);
}
Object.assign(event, data, {
match: function () {
return (
payload.targets &&
0 < payload.targets.length &&
payload.targets.every(function (target) {
return event.currentTarget.contains(target);
})
);
},
});
return el.dispatchEvent(event);
}
function canPreventDefault(event, options) {
var preventDefault = options.preventDefault;
if (isFunction(preventDefault)) {
return preventDefault(event);
} else {
return !!preventDefault;
}
}
var ELEMENT_TYPES = [
TOUCH_START,
TOUCH_MOVE,
TOUCH_END,
TOUCH_CANCEL,
MOUSE_DOWN,
];
var WINDOW_TYPES = [MOUSE_MOVE, MOUSE_UP];
function bindElement(el, catchEvent, options) {
ELEMENT_TYPES.forEach(function (type) {
el.addEventListener(type, catchEvent, options);
});
WINDOW_TYPES.forEach(function (type) {
window.addEventListener(type, catchEvent, options);
});
return function () {
ELEMENT_TYPES.forEach(function (types) {
el.removeEventListener(types, catchEvent);
});
WINDOW_TYPES.forEach(function (type) {
window.removeEventListener(type, catchEvent);
});
};
}
var TYPE_COMPUTED = "computed";
var DEFAULT_OPTIONS$6 = {
domEvents: { bubbles: true, cancelable: true },
preventDefault: function (event) {
if (event.target && "tagName" in event.target) {
var tagName = event.target.tagName;
return !/^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(tagName);
}
return false;
},
};
var TYPE_UNBIND = "u";
var TYPE_INPUT = "input";
var TYPE_AT_AFTER = "at:after";
var default_1$1 = (function (_super) {
__extends(default_1, _super);
function default_1(el, options) {
var _a;
var _this = _super.call(this) || this;
_this.v = "2.1.3";
_this.__computeFunctionList = [];
_this.__computeFunctionCreatorList = [];
_this.__pluginContexts = [];
_this.__isIgnoreMouse = false;
_this.el = el;
_this.c = {};
_this.__options = __assign(
__assign({}, DEFAULT_OPTIONS$6),
options
);
var createInputFromTouch = touch(_this.el);
var createInputFromMouse = mouse();
_this.__inputCreatorMap =
((_a = {}),
(_a[TOUCH_START] = createInputFromTouch),
(_a[TOUCH_MOVE] = createInputFromTouch),
(_a[TOUCH_END] = createInputFromTouch),
(_a[TOUCH_CANCEL] = createInputFromTouch),
(_a[MOUSE_DOWN] = createInputFromMouse),
(_a[MOUSE_MOVE] = createInputFromMouse),
(_a[MOUSE_UP] = createInputFromMouse),
_a);
_this.on(TYPE_AT_AFTER, function (payload) {
var target = payload.target,
__type = payload.__type;
var domEvents = _this.__options.domEvents;
if (!!domEvents && void 0 !== _this.el && !!target) {
dispatchDomEvent(__type, target, payload, domEvents);
dispatchDomEvent(TYPE_AT_AFTER, target, payload, domEvents);
}
});
if (void 0 !== el) {
el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
var supportsPassive_1 = false;
try {
var opts = {};
OriginPrototype.Object.defineProperty(opts, "passive", {
get: function () {
supportsPassive_1 = true;
},
});
window.addEventListener(
"_",
function () {
return void 0;
},
opts
);
} catch (_b) {}
_this.on(
TYPE_UNBIND,
bindElement(
el,
_this.catchEvent.bind(_this),
false === _this.__options.preventDefault && supportsPassive_1
? { passive: true }
: { passive: false }
)
);
}
return _this;
}
default_1.prototype.use = function (plugin, pluginOptions) {
this.__pluginContexts.push(plugin(this, pluginOptions));
};
default_1.prototype.catchEvent = function (event) {
var input = this.__inputCreatorMap[event.type](event);
if (void 0 !== input) {
var stopPropagation = function () {
return event.stopPropagation();
};
var stopImmediatePropagation = function () {
return event.stopImmediatePropagation();
};
var preventDefault = function () {
return event.preventDefault();
};
if (canPreventDefault(event, this.__options)) {
preventDefault();
} else {
if ("touchstart" === event.type) {
this.__isIgnoreMouse = true;
} else if ("touchmove" === event.type) {
this.__isIgnoreMouse = false;
}
if (this.__isIgnoreMouse && event.type.startsWith("mouse")) {
if ("mouseup" === event.type) {
this.__isIgnoreMouse = false;
}
return;
}
}
this.emit(TYPE_INPUT, input);
this.emit2("at:".concat(input.phase), input, {});
var computed_1 = {};
this.__computeFunctionList.forEach(function (compute) {
var result = compute(input, computed_1);
if (void 0 !== result) {
for (var key in result) {
computed_1[key] = result[key];
}
}
});
this.emit(
TYPE_COMPUTED,
__assign(__assign(__assign({}, input), computed_1), {
stopPropagation: stopPropagation,
stopImmediatePropagation: stopImmediatePropagation,
preventDefault: preventDefault,
})
);
}
};
default_1.prototype.compute = function (
computeFunctionCreatorList,
callback
) {
var e_1, _a;
try {
for (
var computeFunctionCreatorList_1 = __values(
computeFunctionCreatorList
),
computeFunctionCreatorList_1_1 =
computeFunctionCreatorList_1.next();
!computeFunctionCreatorList_1_1.done;
computeFunctionCreatorList_1_1 =
computeFunctionCreatorList_1.next()
) {
var computeFunctionCreator =
computeFunctionCreatorList_1_1.value;
if (
!this.__computeFunctionCreatorList.includes(
computeFunctionCreator
)
) {
this.__computeFunctionCreatorList.push(
computeFunctionCreator
);
this.__computeFunctionList.push(computeFunctionCreator());
}
}
} catch (e_1_1) {
e_1 = { error: e_1_1 };
} finally {
try {
if (
computeFunctionCreatorList_1_1 &&
!computeFunctionCreatorList_1_1.done &&
(_a = computeFunctionCreatorList_1.return)
)
_a.call(computeFunctionCreatorList_1);
} finally {
if (e_1) throw e_1.error;
}
}
this.on(TYPE_COMPUTED, callback);
};
default_1.prototype.beforeEach = function (interceptor) {
var _this = this;
_super.prototype.beforeEach.call(this, function (type, next) {
var _a;
if ((_a = _this.c) === null || _a === void 0 ? void 0 : _a.name) {
interceptor(type, next);
} else {
next();
}
});
};
default_1.prototype.get = function (name) {
return this.__pluginContexts.find(function (pluginContext) {
return name === pluginContext.name;
});
};
default_1.prototype.set = function (newOptions) {
this.__options = __assign(__assign({}, this.__options), newOptions);
};
default_1.prototype.emit2 = function (type, payload, pluginContext) {
var _this = this;
this.c = pluginContext;
this.emit(
type,
__assign(__assign({}, payload), { type: type }),
function () {
_this.emit(
TYPE_AT_AFTER,
__assign(__assign({}, payload), { name: type, __type: type })
);
}
);
};
default_1.prototype.destroy = function () {
this.emit(TYPE_UNBIND);
_super.prototype.destroy.call(this);
};
return default_1;
})(AnyEvent);
var getVLength = function (v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
};
var getDotProduct = function (v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
};
var getRadian = function (v1, v2) {
var mr = getVLength(v1) * getVLength(v2);
if (mr === 0) return 0;
var r = getDotProduct(v1, v2) / mr;
if (r > 1) r = 1;
return Math.acos(r);
};
var getCross = function (v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
};
var radianToAngle = function (radian) {
return (radian / Math.PI) * 180;
};
var getAngle = function (v1, v2) {
var angle = getRadian(v1, v2);
if (getCross(v1, v2) > 0) {
angle *= -1;
}
return radianToAngle(angle);
};
var getDirection = function (x, y) {
if (0 === x && 0 === y) {
return;
}
if (Math.abs(x) >= Math.abs(y)) {
return 0 < x ? DIRECTION_RIGHT : DIRECTION_LEFT;
} else {
return 0 < y ? DIRECTION_DOWN : DIRECTION_UP;
}
};
function ComputeAngle() {
var angle = 0;
var deltaAngle = 0;
return function (input, computed) {
var prevVecotr = computed.prevVecotr,
startVecotr = computed.startVecotr,
activeVecotr = computed.activeVecotr;
if (activeVecotr) {
deltaAngle = Math.round(getAngle(activeVecotr, prevVecotr));
angle = Math.round(getAngle(activeVecotr, startVecotr));
}
return { angle: angle, deltaAngle: deltaAngle };
};
}
function ComputeDeltaXY() {
return function (input) {
var prevInput = input.prevInput;
var deltaX = 0;
var deltaY = 0;
var deltaXYAngle = 0;
if (void 0 !== prevInput) {
deltaX = input.x - prevInput.x;
deltaY = input.y - prevInput.y;
if (0 !== deltaX || 0 !== deltaY) {
var deltaXY = Math.sqrt(
Math.pow(deltaX, 2) + Math.pow(deltaY, 2)
);
deltaXYAngle = Math.round(
radianToAngle(Math.acos(Math.abs(deltaX) / deltaXY))
);
}
}
return {
deltaX: deltaX,
deltaY: deltaY,
deltaXYAngle: deltaXYAngle,
};
};
}
function ComputeDistance() {
var displacementX = 0;
var displacementY = 0;
var distanceX = 0;
var distanceY = 0;
var distance = 0;
var overallDirection;
return function (input) {
var phase = input.phase,
startInput = input.startInput;
if (TYPE_START === phase) {
displacementX = 0;
displacementY = 0;
distanceX = 0;
distanceY = 0;
distance = 0;
} else if (TYPE_MOVE === phase) {
displacementX = Math.round(
input.points[0][CLIENT_X] - startInput.points[0][CLIENT_X]
);
displacementY = Math.round(
input.points[0][CLIENT_Y] - startInput.points[0][CLIENT_Y]
);
distanceX = Math.abs(displacementX);
distanceY = Math.abs(displacementY);
distance = Math.round(getVLength({ x: distanceX, y: distanceY }));
overallDirection = getDirection(displacementX, displacementY);
}
return {
displacementX: displacementX,
displacementY: displacementY,
distanceX: distanceX,
distanceY: distanceY,
distance: distance,
overallDirection: overallDirection,
};
};
}
function ComputeScale() {
var scale = 1;
return function (input, computed) {
var deltaScale = 1;
var prevVecotr = computed.prevVecotr,
startVecotr = computed.startVecotr,
activeVecotr = computed.activeVecotr;
if (activeVecotr) {
deltaScale = round2(
getVLength(activeVecotr) / getVLength(prevVecotr)
);
scale = round2(
getVLength(activeVecotr) / getVLength(startVecotr)
);
}
return { scale: scale, deltaScale: deltaScale };
};
}
function ComputeVAndDir() {
var velocityX = 0;
var velocityY = 0;
var speedX = 0;
var speedY = 0;
var direction;
var lastValidInput;
return function (input) {
if (void 0 !== input) {
lastValidInput = lastValidInput || input.startInput;
var deltaTime = input.timestamp - lastValidInput.timestamp;
if (COMPUTE_INTERVAL < deltaTime) {
var deltaX = input.x - lastValidInput.x;
var deltaY = input.y - lastValidInput.y;
speedX = Math.round((deltaX / deltaTime) * 100) / 100;
speedY = Math.round((deltaY / deltaTime) * 100) / 100;
velocityX = Math.abs(speedX);
velocityY = Math.abs(speedY);
direction = getDirection(deltaX, deltaY);
lastValidInput = input;
}
}
return {
velocityX: velocityX,
velocityY: velocityY,
speedX: speedX,
speedY: speedY,
direction: direction,
};
};
}
function ComputeMaxLength() {
var maxPointLength = 0;
return function (input) {
var phase = input.phase;
if (TYPE_START === phase) {
maxPointLength = input.pointLength;
}
return { maxPointLength: maxPointLength };
};
}
function computeVector(input) {
return {
x: input.points[1][CLIENT_X] - input.points[0][CLIENT_X],
y: input.points[1][CLIENT_Y] - input.points[0][CLIENT_Y],
};
}
function ComputeVectorForMutli() {
var startVecotr;
var prevVecotr;
var activeVecotr;
return function (input) {
var prevInput = input.prevInput,
startMultiInput = input.startMultiInput;
if (
void 0 !== startMultiInput &&
void 0 !== prevInput &&
input.id !== startMultiInput.id &&
1 < prevInput.pointLength &&
1 < input.pointLength
) {
startVecotr = computeVector(startMultiInput);
prevVecotr = computeVector(prevInput);
activeVecotr = computeVector(input);
} else {
activeVecotr = void 0;
}
return {
startVecotr: startVecotr,
prevVecotr: prevVecotr,
activeVecotr: activeVecotr,
};
};
}
var DEFAULT_OPTIONS$5 = {
name: "tap",
pointLength: 1,
tapTimes: 1,
waitNextTapTime: 300,
maxDistance: 2,
maxDistanceFromPrevTap: 9,
maxPressTime: 250,
};
function tap(at, options) {
var context = createPluginContext(DEFAULT_OPTIONS$5, options);
var tapCount = 0;
var prevTapPoint;
var prevTapTime;
var countDownToFailTimer;
function reset() {
tapCount = 0;
prevTapPoint = void 0;
prevTapTime = void 0;
}
function countDownToFail() {
countDownToFailTimer = setTimeout(function () {
context.state = 2;
reset();
}, context.waitNextTapTime);
}
function isValidDistanceFromPrevTap(center, options) {
if (void 0 !== prevTapPoint) {
var distanceFromPreviousTap = getVLength({
x: center.x - prevTapPoint.x,
y: center.y - prevTapPoint.y,
});
prevTapPoint = center;
return options.maxDistanceFromPrevTap >= distanceFromPreviousTap;
} else {
prevTapPoint = center;
return true;
}
}
function isValidInterval(waitNextTapTime) {
var now = performance.now();
if (void 0 === prevTapTime) {
prevTapTime = now;
return true;
} else {
var interval = now - prevTapTime;
prevTapTime = now;
return interval < waitNextTapTime;
}
}
at.compute([ComputeDistance, ComputeMaxLength], function (computed) {
if (isDisabled(context)) return;
var phase = computed.phase,
x = computed.x,
y = computed.y;
if (TYPE_END !== phase) return;
context.state = 0;
if (test()) {
clearTimeout(countDownToFailTimer);
if (
isValidDistanceFromPrevTap({ x: x, y: y }, context) &&
isValidInterval(context.waitNextTapTime)
) {
tapCount++;
} else {
tapCount = 1;
}
if (0 === tapCount % context.tapTimes) {
context.state = 1;
at.emit2(context.name, computed, context);
reset();
} else {
countDownToFail();
}
} else {
reset();
context.state = 2;
}
function test() {
var startInput = computed.startInput,
pointLength = computed.pointLength,
timestamp = computed.timestamp;
var deltaTime = timestamp - startInput.timestamp;
var distance = computed.distance,
maxPointLength = computed.maxPointLength;
return (
maxPointLength === context.pointLength &&
0 === pointLength &&
context.maxDistance >= distance &&
context.maxPressTime > deltaTime
);
}
});
return context;
}
var DEFAULT_OPTIONS$4 = { name: "pan", threshold: 10, pointLength: 1 };
function pan(at, options) {
var context = createPluginContext(DEFAULT_OPTIONS$4, options);
at.compute(
[ComputeVAndDir, ComputeDistance, ComputeDeltaXY],
function (computed) {
resetState(context);
if (isDisabled(context)) return;
var isValid = test();
context.state = flow(isValid, context.state, computed.phase);
if (isValid || isMoveOrEndOrCancel(context.state)) {
var name_1 = context.name;
at.emit2(name_1, computed, context);
at.emit2(
name_1 + getStatusName(context.state),
computed,
context
);
if (
![TYPE_END, TYPE_CANCEL].includes(computed.phase) &&
computed.direction
) {
at.emit2(name_1 + computed.direction, computed, context);
}
}
function test() {
var pointLength = computed.pointLength,
distance = computed.distance;
return (
context.pointLength === pointLength &&
context.threshold <= distance
);
}
}
);
return context;
}
var DEFAULT_OPTIONS$3 = {
name: "swipe",
threshold: 10,
velocity: 0.3,
pointLength: 1,
};
function swipe(at, options) {
var context = createPluginContext(DEFAULT_OPTIONS$3, options);
at.compute(
[ComputeDistance, ComputeVAndDir, ComputeMaxLength],
function (computed) {
context.state = 0;
if (context.disabled) return;
if (test()) {
var name_1 = context.name;
context.state = 1;
at.emit2(name_1, computed, context);
at.emit2(name_1 + computed.direction, computed, context);
}
function test() {
if (TYPE_END !== computed.phase) return false;
var velocityX = computed.velocityX,
velocityY = computed.velocityY,
distance = computed.distance,
maxPointLength = computed.maxPointLength;
return (
maxPointLength === context.pointLength &&
0 === computed.points.length &&
context.threshold < distance &&
context.velocity < Math.max(velocityX, velocityY)
);
}
}
);
return context;
}
var DEFAULT_OPTIONS$2 = {
name: "press",
pointLength: 1,
maxDistance: 9,
minPressTime: 251,
};
function press(at, options) {
var context = createPluginContext(DEFAULT_OPTIONS$2, options);
var timeoutId = 0;
at.compute([ComputeDistance], function (computed) {
if (isDisabled(context)) return;
var phase = computed.phase,
startInput = computed.startInput,
pointLength = computed.pointLength;
if (TYPE_START === phase && context.pointLength === pointLength) {
resetState(context);
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
context.state = 1;
at.emit2(context.name, computed, context);
}, context.minPressTime);
} else if (TYPE_END === phase && 1 === context.state) {
at.emit2(
"".concat(context.name).concat(DIRECTION_UP),
computed,
context
);
} else if (1 !== context.state) {
var deltaTime = computed.timestamp - startInput.timestamp;
if (
!test() ||
(context.minPressTime > deltaTime &&
[TYPE_END, TYPE_CANCEL].includes(phase))
) {
clearTimeout(timeoutId);
context.state = 2;
}
}
function test() {
var distance = computed.distance;
return distance && context.maxDistance > distance;
}
});
return context;
}
var DEFAULT_OPTIONS$1 = {
name: "pinch",
threshold: 0,
pointLength: 2,
};
function pinch(at, options) {
var context = createPluginContext(DEFAULT_OPTIONS$1, options);
at.compute(
[ComputeVectorForMutli, ComputeScale],
function (computed) {
resetState(context);
if (isDisabled(context)) return;
var isValid = test();
context.state = flow(isValid, context.state, computed.phase);
var name = context.name;
if (isValid || isMoveOrEndOrCancel(context.state)) {
at.emit2(name, computed, context);
var deltaScale = computed.deltaScale;
if (1 !== deltaScale) {
at.emit2(
name + (1 < deltaScale ? "in" : "out"),
computed,
context
);
}
}
var stateName = getStatusName(context.state);
if (stateName) {
at.emit2(name + stateName, computed, context);
}
function test() {
var pointLength = computed.pointLength,
scale = computed.scale;
computed.deltaScale;
computed.phase;
return (
context.pointLength === pointLength &&
context.threshold < Math.abs(scale - 1)
);
}
}
);
return context;
}
var DEFAULT_OPTIONS = {
name: "rotate",
threshold: 0,
pointLength: 2,
};
function rotate(at, options) {
var context = createPluginContext(DEFAULT_OPTIONS, options);
at.compute(
[ComputeVectorForMutli, ComputeAngle],
function (computed) {
if (isDisabled(context)) return;
resetState(context);
var isValid = test();
context.state = flow(isValid, context.state, computed.phase);
var name = context.name;
if (isValid || isMoveOrEndOrCancel(context.state)) {
at.emit2(name, computed, context);
}
var stateName = getStatusName(context.state);
if (stateName) {
at.emit2(name + stateName, computed, context);
}
function test() {
var pointLength = computed.pointLength,
angle = computed.angle;
return (
context.pointLength === pointLength &&
context.threshold < Math.abs(angle)
);
}
}
);
return context;
}
function doubletap(at) {
at.use(tap, { name: "doubletap", tapTimes: 2 });
var doubleTapContext = at.get("doubletap");
var timeID;
at.beforeEach(function (type, next) {
if ("tap" === type) {
clearTimeout(timeID);
timeID = setTimeout(function () {
if ([0, 2].includes(doubleTapContext.state)) {
next();
}
}, 300);
} else {
next();
}
});
return doubleTapContext;
}
var default_1 = (function (_super) {
__extends(default_1, _super);
function default_1(el, options) {
var _this = _super.call(this, el, options) || this;
_this.use(tap);
_this.use(pan);
_this.use(swipe);
_this.use(press);
_this.use(pinch);
_this.use(rotate);
return _this;
}
default_1.STATE_POSSIBLE = 0;
default_1.STATE_START = 4;
default_1.STATE_MOVE = 5;
default_1.STATE_END = 1;
default_1.STATE_CANCELLED = 3;
default_1.STATE_FAILED = 2;
default_1.STATE_RECOGNIZED = 1;
default_1.tap = tap;
default_1.pan = pan;
default_1.swipe = swipe;
default_1.press = press;
default_1.rotate = rotate;
default_1.pinch = pinch;
default_1.doubletap = doubletap;
return default_1;
})(default_1$1);
return default_1;
});
//# sourceMappingURL=any-touch.umd.js.map
return anyTouch;
},
/**
* 排序数组
* @param {(value: any)=>any} getBeforeValueFun
* @param {(value: any)=>any} getAfterValueFun
* @param {boolean} sortByDesc 排序是否降序，默认降序
* @returns
*/
sortElementListByProperty(
getBeforeValueFun,
getAfterValueFun,
sortByDesc = true
) {
if (typeof sortByDesc !== "boolean") {
throw "参数 sortByDesc 必须为boolean类型";
}
if (getBeforeValueFun == null || getAfterValueFun == null) {
throw "获取前面的值或后面的值的方法不能为空";
}
return function (after_obj, before_obj) {
var beforeValue = getBeforeValueFun(before_obj); /* 前 */
var afterValue = getAfterValueFun(after_obj); /* 后 */
if (sortByDesc) {
if (afterValue > beforeValue) {
return -1;
} else if (afterValue < beforeValue) {
return 1;
} else {
return 0;
}
} else {
if (afterValue < beforeValue) {
return -1;
} else if (afterValue > beforeValue) {
return 1;
} else {
return 0;
}
}
};
},
/**
* 获取格式化后的时间
* @param {string|number} [text= new Date()] 需要格式化的字符串或者时间戳
* @param {string} [formatType = "yyyy-MM-dd HH:mm:ss"] 格式化成的显示类型
* + yyyy 年
* + MM 月
* + dd 天
* + HH 时 (24小时制)
* + hh 时 (12小时制)
* + mm 分
* + ss 秒
* @returns {string} 返回格式化后的时间
* @example
* Utils.formatTime("2022-08-21 23:59:00","HH:mm:ss");
* > '23:59:00'
* @example
* Utils.formatTime(1899187424988,"HH:mm:ss");
* > '15:10:13'
* @example
* Utils.formatTime()
* > '2023-1-1 00:00:00'
**/
formatTime: function (
text = new Date(),
formatType = "yyyy-MM-dd HH:mm:ss"
) {
let time = text == null ? new Date() : new Date(text);
/**
* 校验时间补0
* @param {number} timeNum
* @returns
*/
function checkTime(timeNum) {
if (timeNum < 10) return "0" + timeNum;
return timeNum;
}
/**
* 时间制修改 24小时制转12小时制
* @param {number} hourNum 小时
* @returns
*/
function timeSystemChange(hourNum) {
return hourNum > 12 ? hourNum - 12 : hourNum;
}
let timeRegexp = {
yyyy: time.getFullYear(),
/* 年 */
MM: checkTime(time.getMonth() + 1),
/* 月 */
dd: checkTime(time.getDate()),
/* 日 */
HH: checkTime(time.getHours()),
/* 时 (24小时制) */
hh: checkTime(timeSystemChange(time.getHours())),
/* 时 (12小时制) */
mm: checkTime(time.getMinutes()),
/* 分 */
ss: checkTime(time.getSeconds()),
/* 秒 */
};
Object.keys(timeRegexp).forEach(function (key) {
let replaecRegexp = new RegExp(key, "g");
formatType = formatType.replace(replaecRegexp, timeRegexp[key]);
});
return formatType;
},
/**
* 格式化byte为KB、MB、GB、TB、PB、EB、ZB、YB、BB、NB、DB
* @param {number|string} byteSize 字节
* @param {boolean} [addType=true]
* + true (默认) 添加单位
* + false 不添加单位
* @returns {string|number}
* + {string} 当addType为true时，且保留小数点末尾2位
* + {number} 当addType为false时，且保留小数点末尾2位
* @example
* Utils.formatByteToSize("812304");
* > '793.27KB'
* @example
* Utils.formatByteToSize("812304",false);
* > 793.27
**/
formatByteToSize: function (byteSize, addType = true) {
byteSize = parseInt(byteSize);
if (isNaN(byteSize)) {
throw new Error("Utils.formatByteToSize 参数 byteSize 格式不正确");
}
let result = 0;
let resultType = "KB";
let sizeData = {};
sizeData.B = 1;
sizeData.KB = 1024;
sizeData.MB = sizeData.KB * sizeData.KB;
sizeData.GB = sizeData.MB * sizeData.KB;
sizeData.TB = sizeData.GB * sizeData.KB;
sizeData.PB = sizeData.TB * sizeData.KB;
sizeData.EB = sizeData.PB * sizeData.KB;
sizeData.ZB = sizeData.EB * sizeData.KB;
sizeData.YB = sizeData.ZB * sizeData.KB;
sizeData.BB = sizeData.YB * sizeData.KB;
sizeData.NB = sizeData.BB * sizeData.KB;
sizeData.DB = sizeData.NB * sizeData.KB;
for (let key in sizeData) {
result = byteSize / sizeData[key];
resultType = key;
if (sizeData.KB >= result) {
break;
}
}
result = result.toFixed(2);
result = addType ? result + resultType.toString() : parseFloat(result);
return result;
},
/**
* 判断元素是否已显示或已连接
* @param {HTMLElement} element
* @returns {boolean}
*/
isShow(element) {
return Boolean(element.getClientRects().length);
},
/**
* 用于显示元素并获取它的高度宽度等其它属性
* @param {HTMLElement} element
* @returns {{recovery: ()=>void}} - 恢复
*/
showElement(element) {
let oldStyleAttribute = element.getAttribute("style");
element.setAttribute(
"style",
"visibility: !important;display:block !important;"
);
return {
recovery() {
if (oldStyleAttribute) {
element.setAttribute("style", oldStyleAttribute);
} else {
element.removeAttribute("style");
}
},
};
},
/**
* 获取元素上的Float格式的属性px
* @param {HTMLElement|CSSStyleDeclaration} element
* @param {string} styleName style名
* @return {number}
*/
getStyleValue(element, styleName) {
let view = null;
let styles = null;
if (element instanceof CSSStyleDeclaration) {
/* 直接就获取了style属性 */
styles = element;
} else {
view = element.ownerDocument.defaultView;
if (!view || !view.opener) {
view = window;
}
styles = view.getComputedStyle(element);
}
let value = parseFloat(styles[styleName]);
if (isNaN(value)) {
return 0;
} else {
return value;
}
},
/**
* 判断是否是window，例如window、self、globalThis
* @param {any} target
* @returns {boolean}
*/
isWin(target) {
if (!typeof target === "object") {
return false;
}
if (target instanceof Node) {
return false;
}
if (target === globalThis) {
return true;
}
if (target === window) {
return true;
}
if (target === self) {
return true;
}
if (target?.Math?.toString() !== "[object Math]") {
return false;
}
return true;
},
/**
* 阻止默认事件触发
* @param {Event} event
*/
preventEvent(event) {
/* 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL */
event?.preventDefault();
/* 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素 */
event?.stopPropagation();
/* 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发 */
event?.stopImmediatePropagation();
},
};
/**
* 浮点数工具类
*/
const MathFloatUtils = {
/**
* 判断数字是否是浮点数
* @param {number} num
* @returns
*/
isFloat(num) {
return Number(num) === num && num % 1 !== 0;
},
/**
* 浮点数加法
* @param {number} number1
* @param {number} number2
*/
add(number1, number2) {
let number1length, number2length, powValue;
try {
number1length = number1.toString().split(".")[1].length;
} catch (error) {
number1length = 0;
}
try {
number2length = number2.toString().split(".")[1].length;
} catch (error) {
number2length = 0;
}
powValue = Math.pow(10, Math.max(number1length, number2length));
return Math.round(number1 * powValue + number2 * powValue) / powValue;
},
/**
* 减法
* @param {number} number1
* @param {number} number2
* @returns
*/
sub(number1, number2) {
let number1length, number2length, powValue;
try {
number1length = number1.toString().split(".")[1].length;
} catch (error) {
number1length = 0;
}
try {
number2length = number2.toString().split(".")[1].length;
} catch (error) {
number2length = 0;
}
powValue = Math.pow(10, Math.max(number1length, number2length));
let fixedValue =
number1length >= number2length ? number1length : number2length;
return (
Math.round(number1 * powValue - number2 * powValue) / powValue
).toFixed(fixedValue);
},
/**
* 除法
* @param {number} number1
* @param {number} number2
*/
division(number1, number2) {
let number1length,
number2length,
number1ReplaceValue,
number2ReplaceValue;
try {
number1length = number1.toString().split(".")[1].length;
} catch (error) {
number1length = 0;
}
try {
number2length = number2.toString().split(".")[1].length;
} catch (error) {
number2length = 0;
}
number1ReplaceValue = Number(number1.toString().replace(".", ""));
number2ReplaceValue = Number(number2.toString().replace(".", ""));
return (
(number1ReplaceValue / number2ReplaceValue) *
Math.pow(10, number2length - number1length)
);
},
};
/** 元素工具类 */
const PopsDOMUtils = {
/**
* 获取animationend的在各个浏览器的兼容名
*/
getAnimationEndNameList() {
return [
"webkitAnimationEnd",
"mozAnimationEnd",
"MSAnimationEnd",
"oanimationend",
"animationend",
];
},
/**
* 获取 transitionend 的在各个浏览器的兼容名
*/
getTransitionEndNameList() {
return [
"webkitTransitionEnd",
"mozTransitionEnd",
"MSTransitionEnd",
"otransitionend",
"transitionend",
];
},
/**
* 绑定事件
* @param {HTMLElement|string|NodeList|Array|Window} element 需要绑定的元素|元素数组|window
* @param {DOMUtils_EventType|DOMUtils_EventType[]} eventType 需要监听的事件
* @param {string|undefined} selector 子元素选择器
* @param {((event: Event)=>void)|undefined} callback 绑定事件触发的回调函数
* @param {boolean|AddEventListenerOptions|undefined} option
* + capture 表示事件是否在捕获阶段触发。默认为false，即在冒泡阶段触发
* + once 表示事件是否只触发一次。默认为false
* + passive 表示事件监听器是否不会调用preventDefault()。默认为false
*/
on(element, eventType, selector, callback, option) {
/**
* 获取option配置
* @param {any[]} args
* @param {number} startIndex
* @param {AddEventListenerOptions} option
* @returns {AddEventListenerOptions}
*/
function getOption(args, startIndex, option) {
if (typeof args[startIndex] === "boolean") {
option.capture = args[startIndex];
if (typeof args[startIndex + 1] === "boolean") {
option.once = args[startIndex + 1];
}
if (typeof args[startIndex + 2] === "boolean") {
option.passive = args[startIndex + 2];
}
} else if (
typeof args[startIndex] === "object" &&
("capture" in args[startIndex] ||
"once" in args[startIndex] ||
"passive" in args[startIndex])
) {
option.capture = args[startIndex].capture;
option.once = args[startIndex].once;
option.passive = args[startIndex].passive;
}
return option;
}
let args = arguments;
if (typeof element === "string") {
element = document.querySelectorAll(element);
}
if (element == void 0) {
return;
}
/**
* @type {HTMLElement[]}
*/
let elementList = [];
if (element instanceof NodeList || Array.isArray(element)) {
elementList = [...element];
} else {
elementList.push(element);
}
/**
* @type {string[]}
*/
let eventTypeList = [];
if (Array.isArray(eventType)) {
eventTypeList = eventTypeList.concat(eventType);
} else if (typeof eventType === "string") {
eventTypeList = eventTypeList.concat(eventType.split(" "));
}
/**
* @type {?string}
*/
let _selector_ = selector;
/**
* @type {(event:Event)=>{}}
*/
let _callback_ = callback;
/**
* @type {AddEventListenerOptions}
*/
let _option_ = {
capture: false,
once: false,
passive: false,
};
if (typeof selector === "function") {
/* 这是为没有selector的情况 */
_selector_ = void 0;
_callback_ = selector;
_option_ = getOption(args, 3, _option_);
} else {
/* 这是存在selector的情况 */
_option_ = getOption(args, 4, _option_);
}
/**
* 如果是once，那么删除该监听和元素上的事件和监听
*/
function checkOptionOnceToRemoveEventListener() {
if (_option_.once) {
PopsDOMUtils.off(element, eventType, selector, callback, option);
}
}
elementList.forEach((elementItem) => {
let ownCallBack = function (event) {
let target = event.target;
if (_selector_) {
/* 存在自定义子元素选择器 */
let totalParent = PopsUtils.isWin(elementItem)
? document.documentElement
: elementItem;
if (target.matches(_selector_)) {
/* 当前目标可以被selector所匹配到 */
_callback_.call(target, event);
checkOptionOnceToRemoveEventListener();
return;
} else if (
target.closest(_selector_) &&
totalParent.contains(target.closest(_selector_))
) {
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
let closestElement = target.closest(_selector_);
/* event的target值不能直接修改 */
OriginPrototype.Object.defineProperty(event, "target", {
get() {
return closestElement;
},
});
_callback_.call(closestElement, event);
checkOptionOnceToRemoveEventListener();
return;
}
} else {
_callback_.call(elementItem, event);
checkOptionOnceToRemoveEventListener();
}
};
/* 遍历事件名设置元素事件 */
eventTypeList.forEach((eventName) => {
elementItem.addEventListener(eventName, ownCallBack, _option_);
if (_callback_ && _callback_.delegate) {
elementItem.setAttribute("data-delegate", _selector_);
}
/* 获取对象上的事件 */
let elementEvents = elementItem[PopsUtils.SymbolEvents] || {};
/* 初始化对象上的xx事件 */
elementEvents[eventName] = elementEvents[eventName] || [];
elementEvents[eventName].push({
selector: _selector_,
option: _option_,
callback: ownCallBack,
originCallBack: _callback_,
});
/* 覆盖事件 */
elementItem[PopsUtils.SymbolEvents] = elementEvents;
});
});
},
/**
* 取消绑定事件
* @param {HTMLElement|string|NodeList|Array|Window} element 需要取消绑定的元素|元素数组
* @param {DOMUtils_EventType|DOMUtils_EventType[]} eventType 需要取消监听的事件
* @param {string|undefined} selector 子元素选择器
* @param {((event: Event)=>void)|undefined} callback 通过DOMUtils.on绑定的事件函数
* @param {EventListenerOptions|boolean|undefined} option
* + capture 如果在添加事件监听器时指定了useCapture为true，则在移除事件监听器时也必须指定为true
*/
off(element, eventType, selector, callback, option) {
/**
* 获取option配置
* @param {any[]} args
* @param {number} startIndex
* @param {EventListenerOptions} option
* @returns {EventListenerOptions}
*/
function getOption(args, startIndex, option) {
if (typeof args[startIndex] === "boolean") {
option.capture = args[startIndex];
} else if (
typeof args[startIndex] === "object" &&
"capture" in args[startIndex]
) {
option.capture = args[startIndex].capture;
}
return option;
}
let args = arguments;
if (typeof element === "string") {
element = document.querySelectorAll(element);
}
if (element == void 0) {
return;
}
/**
* @type {HTMLElement[]}
*/
let elementList = [];
if (element instanceof NodeList || Array.isArray(element)) {
elementList = [...element];
} else {
elementList.push(element);
}
/**
* @type {string[]}
*/
let eventTypeList = [];
if (Array.isArray(eventType)) {
eventTypeList = eventTypeList.concat(eventType);
} else if (typeof eventType === "string") {
eventTypeList = eventTypeList.concat(eventType.split(" "));
}
/**
* @type {?string}
*/
let _selector_ = selector;
/**
* @type {(event:Event)=>{}}
*/
let _callback_ = callback;
/**
* @type {EventListenerOptions}
*/
let _option_ = {
capture: false,
};
if (typeof selector === "function") {
/* 这是为没有selector的情况 */
_selector_ = void 0;
_callback_ = selector;
_option_ = getOption(args, 3, _option_);
} else {
_option_ = getOption(args, 4, _option_);
}
elementList.forEach((elementItem) => {
/* 获取对象上的事件 */
let elementEvents = elementItem[PopsUtils.SymbolEvents] || {};
eventTypeList.forEach((eventName) => {
/**
* @type {DOMUtilsEventListenerOptionsAttribute[]}
*/
let handlers = elementEvents[eventName] || [];
if (typeof filter === "function") {
handlers = handlers.filter(filter);
}
for (let index = 0; index < handlers.length; index++) {
let handler = handlers[index];
let flag = !1;
if (!_selector_ || handler.selector === _selector_) {
/* selector不为空，进行selector判断 */
flag = !0;
}
if (
!_callback_ ||
handler.callback === _callback_ ||
handler.originCallBack === _callback_
) {
/* callback不为空，进行callback判断 */
flag = !0;
}
if (flag) {
elementItem.removeEventListener(
eventName,
handler.callback,
_option_
);
handlers.splice(index--, 1);
}
}
if (handlers.length === 0) {
/* 如果没有任意的handler，那么删除该属性 */
delete elementEvents[eventType];
}
});
elementItem[PopsUtils.SymbolEvents] = elementEvents;
});
},
/**
* 主动触发事件
* @param {HTMLElement|string|NodeList|Array|Window} element 需要触发的元素|元素数组|window
* @param {DOMUtils_EventType|DOMUtils_EventType[]} eventType 需要触发的事件
* @param {object|undefined} details 赋予触发的Event的额外属性
* @param {boolean} [useDispatchToTriggerEvent=true] 是否使用dispatchEvent来触发事件,默认true
*/
trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
if (typeof element === "string") {
element = document.querySelector(element);
}
if (element == void 0) {
return;
}
let elementList = [];
if (element instanceof NodeList || Array.isArray(element)) {
elementList = [...element];
} else {
elementList = [element];
}
let eventTypeList = [];
if (Array.isArray(eventType)) {
eventTypeList = eventType;
} else if (typeof eventType === "string") {
eventTypeList = eventType.split(" ");
}
elementList.forEach((elementItem) => {
/* 获取对象上的事件 */
let events = elementItem[PopsUtils.SymbolEvents] || {};
eventTypeList.forEach((_eventType_) => {
let event = new Event(_eventType_);
if (details) {
Object.keys(details).forEach((keyName) => {
event[keyName] = details[keyName];
});
}
if (useDispatchToTriggerEvent == false && _eventType_ in events) {
events[_eventType_].forEach((eventsItem) => {
eventsItem.callback(event);
});
} else {
elementItem.dispatchEvent(event);
}
});
});
},
/**
* 实现jQuery中的$().offset();
* @param {HTMLElement} element
* @returns
*/
offset(element) {
let rect = element.getBoundingClientRect();
let win = element.ownerDocument.defaultView;
return {
top: parseFloat(rect.top + win.pageYOffset),
bottom: parseFloat(rect.bottom + win + pageYOffset),
left: parseFloat(rect.left + win.pageXOffset),
right: parseFloat(rect.right + win.pageXOffset),
width: rect.width,
height: rect.height,
};
},
/**
* 获取元素的宽度
* @param {HTMLElement} element - 要获取宽度的元素
* @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
* @returns {number} - 元素的宽度，单位为像素
*/
width(element, isShow = false) {
if (PopsUtils.isWin(element)) {
return window.document.documentElement.clientWidth;
}
if (typeof element === "string") {
element = document.querySelector(element);
}
if (element == void 0) {
return;
}
if (element.nodeType === 9) {
/* 文档节点 */
return Math.max(
element.body.scrollWidth,
element.documentElement.scrollWidth,
element.body.offsetWidth,
element.documentElement.offsetWidth,
element.documentElement.clientWidth
);
}
if (isShow || PopsUtils.isShow(element)) {
/* 已显示 */
/* 不从style中获取对应的宽度，因为可能使用了class定义了width !important */
/* 如果element.style.width为空 则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width */
if (parseFloat(PopsUtils.getStyleValue(element, "width")) > 0) {
return parseFloat(PopsUtils.getStyleValue(element, "width"));
}
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
if (element.offsetWidth > 0) {
let borderLeftWidth = PopsUtils.getStyleValue(
element,
"borderLeftWidth"
);
let borderRightWidth = PopsUtils.getStyleValue(
element,
"borderRightWidth"
);
let paddingLeft = PopsUtils.getStyleValue(element, "paddingLeft");
let paddingRight = PopsUtils.getStyleValue(element, "paddingRight");
let backHeight =
parseFloat(element.offsetWidth) -
parseFloat(borderLeftWidth) -
parseFloat(borderRightWidth) -
parseFloat(paddingLeft) -
parseFloat(paddingRight);
return parseFloat(backHeight);
}
return 0;
} else {
/* 未显示 */
let { recovery } = PopsUtils.showElement(element);
let width = PopsDOMUtils.width(element, true);
recovery();
return width;
}
},
/**
* 获取元素的高度
* @param {HTMLElement} element - 要获取高度的元素
* @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
* @returns {number} - 元素的高度，单位为像素
*/
height(element, isShow = false) {
if (PopsUtils.isWin(element)) {
return window.document.documentElement.clientHeight;
}
if (typeof element === "string") {
element = document.querySelector(element);
}
if (element == void 0) {
return;
}
if (element.nodeType === 9) {
/* 文档节点 */
return Math.max(
element.body.scrollHeight,
element.documentElement.scrollHeight,
element.body.offsetHeight,
element.documentElement.offsetHeight,
element.documentElement.clientHeight
);
}
if (isShow || PopsUtils.isShow(element)) {
/* 已显示 */
/* 从style中获取对应的高度，因为可能使用了class定义了width !important */
/* 如果element.style.height为空 则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height */
if (parseFloat(PopsUtils.getStyleValue(element, "height")) > 0) {
return parseFloat(PopsUtils.getStyleValue(element, "height"));
}
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
if (element.offsetHeight > 0) {
let borderTopWidth = PopsUtils.getStyleValue(
element,
"borderTopWidth"
);
let borderBottomWidth = PopsUtils.getStyleValue(
element,
"borderBottomWidth"
);
let paddingTop = PopsUtils.getStyleValue(element, "paddingTop");
let paddingBottom = PopsUtils.getStyleValue(element, "paddingBottom");
let backHeight =
parseFloat(element.offsetHeight) -
parseFloat(borderTopWidth) -
parseFloat(borderBottomWidth) -
parseFloat(paddingTop) -
parseFloat(paddingBottom);
return parseFloat(backHeight);
}
return 0;
} else {
/* 未显示 */
let { recovery } = PopsUtils.showElement(element);
let height = PopsDOMUtils.height(element, true);
recovery();
return height;
}
},
/**
* 获取元素的外部宽度（包括边框和外边距）
* @param {HTMLElement} element - 要获取外部宽度的元素
* @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
* @returns {number} - 元素的外部宽度，单位为像素
*/
outerWidth(element, isShow = false) {
if (PopsUtils.isWin(element)) {
return window.innerWidth;
}
if (typeof element === "string") {
element = document.querySelector(element);
}
if (element == void 0) {
return;
}
if (isShow || PopsUtils.isShow(element)) {
let style = getComputedStyle(element, null);
let marginLeft = PopsUtils.getStyleValue(style, "marginLeft");
let marginRight = PopsUtils.getStyleValue(style, "marginRight");
return element.offsetWidth + marginLeft + marginRight;
} else {
let { recovery } = PopsUtils.showElement(element);
let outerWidth = PopsDOMUtils.outerWidth(element, true);
recovery();
return outerWidth;
}
},
/**
* 获取元素的外部高度（包括边框和外边距）
* @param {HTMLElement} element - 要获取外部高度的元素
* @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
* @returns {number} - 元素的外部高度，单位为像素
*/
outerHeight(element, isShow = false) {
if (PopsUtils.isWin(element)) {
return window.innerHeight;
}
if (typeof element === "string") {
element = document.querySelector(element);
}
if (element == void 0) {
return;
}
if (isShow || PopsUtils.isShow(element)) {
let style = getComputedStyle(element, null);
let marginTop = PopsUtils.getStyleValue(style, "marginTop");
let marginBottom = PopsUtils.getStyleValue(style, "marginBottom");
return element.offsetHeight + marginTop + marginBottom;
} else {
let { recovery } = PopsUtils.showElement(element);
let outerHeight = PopsDOMUtils.outerHeight(element, true);
recovery();
return outerHeight;
}
},
/**
* 添加className
* @param {HTMLElement} element 目标元素
* @param {string} className className属性
*/
addClassName(element, className) {
if (typeof className !== "string") {
return;
}
if (className.trim() === "") {
return;
}
element.classList.add(className);
},
/**
* 删除className
* @param {HTMLElement} element 目标元素
* @param {string} className className属性
*/
removeClassName(element, className) {
if (typeof className !== "string") {
return;
}
if (className.trim() === "") {
return;
}
element.classList.remove(className);
},
/**
* 判断元素是否包含某个className
* @param {HTMLElement} element 目标元素
* @param {string} className className属性
*/
containsClassName(element, className) {
if (typeof className !== "string") {
return;
}
if (className.trim() === "") {
return;
}
return element.classList.contains(className);
},
/**
* 获取或设置元素的样式属性值
* @param {HTMLElement|string} element 目标元素
* @param {CSSStyleDeclaration|string} property 样式属性名或包含多个属性名和属性值的对象
* @param {any} [value] 样式属性值（可选）
* @returns {?string} 如果传入了value，则返回undefined；否则返回样式属性值
**/
css(element, property, value) {
/**
* 把纯数字没有px的加上
*/
function handlePixe(propertyName, propertyValue) {
let allowAddPixe = [
"width",
"height",
"top",
"left",
"right",
"bottom",
"font-size",
];
if (typeof propertyValue === "number") {
propertyValue = propertyValue.toString();
}
if (
typeof propertyValue === "string" &&
allowAddPixe.includes(propertyName) &&
propertyValue.match(/[0-9]$/gi)
) {
propertyValue = propertyValue + "px";
}
return propertyValue;
}
if (typeof element === "string") {
element = document.querySelector(element);
}
if (element == void 0) {
return;
}
if (typeof property === "string") {
if (value === void 0) {
return getComputedStyle(element).getPropertyValue(property);
} else {
if (value === "string" && value.includes("!important")) {
element.style.setProperty(property, value, "important");
} else {
value = handlePixe(property, value);
element.style.setProperty(property, value);
}
}
} else if (typeof property === "object") {
for (let prop in property) {
if (
typeof property[prop] === "string" &&
property[prop].includes("!important")
) {
element.style.setProperty(prop, property[prop], "important");
} else {
property[prop] = handlePixe(prop, property[prop]);
element.style.setProperty(prop, property[prop]);
}
}
}
},
/**
* 创建元素
* @param {keyof HTMLElementTagNameMap} tagName 元素类型
* @param {HTMLElement|undefined} property 元素属性，对已有元素上的属性或者自定义的属性赋值
* @param {object|undefined} attributes 元素自定义属性，通过setAttribute赋值
* @returns {HTMLElement}
*/
createElement(tagName, property, attributes) {
let tempElement = document.createElement(tagName);
if (typeof property === "string") {
tempElement.innerHTML = property;
return tempElement;
}
if (property == void 0) {
property = {};
}
if (attributes == void 0) {
attributes = {};
}
Object.keys(property).forEach((key) => {
let value = property[key];
tempElement[key] = value;
});
Object.keys(attributes).forEach((key) => {
let value = attributes[key];
if (typeof value === "object") {
/* object转字符串 */
value = JSON.stringify(value);
} else if (typeof value === "function") {
/* function转字符串 */
value = value.toString();
}
tempElement.setAttribute(key, value);
});
return tempElement;
},
};
/** 弹窗 */
const pops = {};
/** 配置 */
pops.config = {
/** 版本号 */
version: "2024.3.21",
cssText: {
/** 主CSS */
index: `@charset "utf-8";
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
/* 代替::-webkit-scrollbar */
scrollbar-width: thin;
}
.pops{
--pops-bg-opacity: 1;
--pops-bd-opacity: 1;
--pops-font-size: 16px;
}
.pops-mask{
--pops-mask-bg-opacity: 0.4;
}
.pops {
background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
border-radius: 4px;
border: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));
font-size: var(--pops-font-size);
box-shadow: 0 0 12px rgba(0,0,0,.12);
box-sizing: border-box;
overflow: hidden;
transition: all .35s
}
.pops-anim{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;}
.pops-anim[anim=""]{top:unset;right:unset;bottom:unset;left:unset;width:unset;height:unset;transition:none;}
/* 底部图标动画和样式 */
.pops i.pops-bottom-icon[is-loading="true"]{animation: rotating 2s linear infinite;}
.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}
/* 遮罩层样式 */
.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;}
.pops-header-controls button.pops-header-control[type][data-header]{
float: right;
margin: 0 0;
outline: 0;
border: 0;
border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
background-color: transparent;
color: #888;
cursor: pointer;
}
.pops-header-controls button.pops-header-control[type=max],
.pops-header-controls button.pops-header-control[type=mise],
.pops-header-controls button.pops-header-control[type=min]{position:relative;float:right;margin:0 2px;outline:0!important;border:0;border-color:rgb(136, 136, 136, var(--pops-bd-opacity));background-color:transparent;color:rgb(136, 136, 136);cursor:pointer;transition:all .3s ease-in-out;}
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}
button.pops-header-control svg{height:1.25em;width:1.25em}
button.pops-header-control{right:15px;padding:0;border:none;outline:0;background:0 0;cursor:pointer;position:unset;line-height:1.15;}
button.pops-header-control i:hover{color:rgb(64, 158, 255)}
.pops-header-controls[data-margin] button.pops-header-control{margin:0 6px}
.pops[type-value] .pops-header-controls{display: flex;}
`,
/** 九宫格位置CSS */
ninePalaceGridPosition: `
.pops[position=top_left]{position:fixed;top:0;left:0;}
.pops[position=top]{position:fixed;top:0;left:50%;transform:translateX(-50%);}
.pops[position=top_right]{position:fixed;top:0;right:0;}
.pops[position=center_left]{position:fixed;top:50%;left:0;transform:translateY(-50%);}
.pops[position=center]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);}
.pops[position=center_right]{position:fixed;top:50%;right:0;transform:translateY(-50%);}
.pops[position=bottom_left]{position:fixed;bottom:0;left:0;}
.pops[position=bottom]{position:fixed;bottom:0;left:50%;transform:translate(-50%,0);}
.pops[position=bottom_right]{position:fixed;right:0;bottom:0;}
`,
/** 滚动条CSS */
scrollbar: `
/* firefox上暂不支持::-webkit-scrollbar */
.pops ::-webkit-scrollbar{
width:6px;
height:0;
}
.pops ::-webkit-scrollbar-track{
width:0;
}
.pops ::-webkit-scrollbar-thumb:hover{
background: rgb(178, 178, 178, var(--pops-bg-opacity));
}
.pops ::-webkit-scrollbar-thumb{
min-height: 28px;
border-radius: 2em;
background: rgb(204, 204, 204, var(--pops-bg-opacity));
background-clip: padding-box;
}
`,
/** 按钮CSS */
button: `
.pops {
--button-font-size: 14px;
--button-height: 32px;
--button-color: rgb(51, 51, 51);
--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
--button-margin-top: 0px;
--button-margin-bottom: 0px;
--button-margin-left: 5px;
--button-margin-right: 5px;
--button-padding-top: 6px;
--button-padding-bottom: 6px;
--button-padding-left: 12px;
--button-padding-right: 12px;
--button-radius: 4px;
--container-title-height: 55px;
--container-bottom-btn-height: 55px;
}
.pops[data-bottom-btn="false"]{
--container-bottom-btn-height: 0px;
}
.pops button {
white-space: nowrap;
float: right;
display: inline-block;
margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);
padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
outline: 0;
}
.pops button {
border-radius: var(--button-radius);
box-shadow: none;
font-weight: 400;
font-size: var(--button-font-size);
cursor: pointer;
transition: all .3s ease-in-out;
}
.pops button {
display: flex;
align-items: center;
height: var(--button-height);
line-height: 1;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
border: 1px solid var(--button-bd-color);
}
.pops button {
color: var(--button-color);
border-color: var(--button-bd-color);
background-color: var(--button-bg-color);
}
.pops button:active{
color: var(--button-color);
border-color: var(--button-bd-color);
background-color: var(--button-bg-color);
outline: 0;
}
.pops button:hover{
color: var(--button-color);
border-color: var(--button-bd-color);
background-color: var(--button-bg-color);
}
.pops button:focus-visible{
color: var(--button-color);
border-color: var(--button-bd-color);
background-color: var(--button-bg-color);
}
.pops button:disabled {
cursor: not-allowed;
color: var(--button-color);
border-color: var(--button-bd-color);
background-color: var(--button-bg-color);
}
.pops button.pops-button-large {
--button-height: 32px;
--button-padding-top: 12px;
--button-padding-bottom: 12px;
--button-padding-left: 19px;
--button-padding-right: 19px;
--button-font-size: 14px;
--button-border-radius: 4px;
}
.pops button.pops-button-small {
--button-height: 24px;
--button-padding-top: 5px;
--button-padding-bottom: 5px;
--button-padding-left: 11px;
--button-padding-right: 11px;
--button-font-size: 12px;
--button-border-radius: 4px;
}
.pops-panel-button-no-icon .pops-panel-button_inner i{
display: none;
}
.pops-panel-button-right-icon{
}
.pops-panel-button-right-icon .pops-panel-button_inner{
flex-direction: row-reverse;
}
.pops-panel-button-right-icon .pops-panel-button_inner i{
}
.pops-panel-button .pops-panel-button_inner i:has(svg),
.pops-panel-button-right-icon .pops-panel-button-text{
margin-right: 6px;
}
.pops button[type=default]{--button-color:#333333;--button-bd-color:#dcdfe6;--button-bg-color:#ffffff;}
.pops button[type=default]:active{--button-color:#409eff;--button-bd-color:#409eff;--button-bg-color:#ecf5ff;}
.pops button[type=default]:hover{--button-color:#409eff;--button-bd-color:#c6e2ff;--button-bg-color:#ecf5ff;}
.pops button[type=default]:focus-visible{outline:2px solid #a0cfff;outline-offset:1px;}
.pops button[type=default]:disabled{--button-color:#a8abb2;--button-bd-color:#fff;--button-bg-color:#e4e7ed;}
.pops button[type=primary]{--button-color:#ffffff;--button-bd-color:#409eff;--button-bg-color:#409eff;}
.pops button[type=primary]:active{--button-color:#ffffff;--button-bd-color:#337ecc;--button-bg-color:#337ecc;}
.pops button[type=primary]:hover{--button-color:#ffffff;--button-bd-color:#79bbff;--button-bg-color:#79bbff;}
.pops button[type=primary]:focus-visible{outline:2px solid #a0cfff;outline-offset:1px;}
.pops button[type=primary]:disabled{--button-color:#ffffff;--button-bd-color:#a0cfff;--button-bg-color:#a0cfff;}
.pops button[type=success]{--button-color:#ffffff;--button-bd-color:#4cae4c;--button-bg-color:#5cb85c;}
.pops button[type=success]:active{--button-color:#ffffff;--button-bd-color:#529b2e;--button-bg-color:#529b2e;}
.pops button[type=success]:hover{--button-color:#ffffff;--button-bd-color:#95d475;--button-bg-color:#95d475;}
.pops button[type=success]:focus-visible{outline:2px solid #b3e19d;outline-offset:1px;}
.pops button[type=success]:disabled{--button-color:#ffffff;--button-bd-color:#b3e19d;--button-bg-color:#b3e19d;}
.pops button[type=info]{--button-color:#ffffff;--button-bd-color:#909399;--button-bg-color:#909399;}
.pops button[type=info]:active{--button-color:#ffffff;--button-bd-color:#73767a;--button-bg-color:#73767a;}
.pops button[type=info]:hover{--button-color:#ffffff;--button-bd-color:#b1b3b8;--button-bg-color:#b1b3b8;}
.pops button[type=info]:focus-visible{outline:2px solid #c8c9cc;outline-offset:1px;}
.pops button[type=info]:disabled{--button-color:#ffffff;--button-bd-color:#c8c9cc;--button-bg-color:#c8c9cc;}
.pops button[type=warning]{--button-color:#ffffff;--button-bd-color:#e6a23c;--button-bg-color:#e6a23c;}
.pops button[type=warning]:active{--button-color:#ffffff;--button-bd-color:#b88230;--button-bg-color:#b88230;}
.pops button[type=warning]:hover{--button-color:#ffffff;--button-bd-color:#eebe77;--button-bg-color:#eebe77;}
.pops button[type=warning]:focus-visible{outline:2px solid #f3d19e;outline-offset:1px;}
.pops button[type=warning]:disabled{--button-color:#ffffff;--button-bd-color:#f3d19e;--button-bg-color:#f3d19e;}
.pops button[type=danger]{--button-color:#ffffff;--button-bd-color:#f56c6c;--button-bg-color:#f56c6c;}
.pops button[type=danger]:active{--button-color:#ffffff;--button-bd-color:#c45656;--button-bg-color:#c45656;}
.pops button[type=danger]:hover{--button-color:#ffffff;--button-bd-color:#f89898;--button-bg-color:#f89898;}
.pops button[type=danger]:focus-visible{outline:2px solid #fab6b6;outline-offset:1px;}
.pops button[type=danger]:disabled{--button-color:#ffffff;--button-bd-color:#fab6b6;--button-bg-color:#fab6b6;}
.pops button[type=xiaomi-primary]{--button-color:#ffffff;--button-bd-color:#ff5c00;--button-bg-color:#ff5c00;}
.pops button[type=xiaomi-primary]:active{--button-color:#ffffff;--button-bd-color:#da4f00;--button-bg-color:#da4f00;}
.pops button[type=xiaomi-primary]:hover{--button-color:#ffffff;--button-bd-color:#ff7e29;--button-bg-color:#ff7e29;}
.pops button[type=xiaomi-primary]:focus-visible{outline:2px solid #fab6b6;outline-offset:1px;}
.pops button[type=xiaomi-primary]:disabled{--button-color:#ffffff;--button-bd-color:#fad5b6;--button-bg-color:#fad5b6;}
`,
/** 通用的CSS */
common: `
.pops-flex-items-center{display: flex;align-items: center;}
.pops-flex-y-center{display: flex;justify-content: space-between;}
.pops-flex-x-center{display: flex;align-content: center;}
.pops-hide {display: none;}
.pops-hide-important {display: none !important;}
.pops-no-border{border: 0;}
.pops-no-border-important{border: 0;}
`,
/** 动画 */
anim: `
@keyframes rotating{0%{transform:rotate(0)}
to{transform:rotate(360deg)}
}
@keyframes iframeLoadingChange_85{0%{background:linear-gradient(to right,#4995dd,#fff,rgb(202 224 246));}
20%{background:linear-gradient(to right,#4995dd,#ead0d0,rgb(123 185 246));}
40%{background:linear-gradient(to right,#4995dd,#f4b7b7,rgb(112 178 244));}
60%{background:linear-gradient(to right,#4995dd,#ec9393,rgb(80 163 246));}
80%{background:linear-gradient(to right,#4995dd,#e87f7f,rgb(25 139 253));}
100%{background:linear-gradient(to right,#4995dd,#ee2c2c,rgb(0 124 247));}
from{width:75%;}
to{width:100%;}
}
@keyframes iframeLoadingChange{0%{background:linear-gradient(to right,#4995dd,#fff,rgb(202 224 246));}
20%{background:linear-gradient(to right,#4995dd,#ead0d0,rgb(123 185 246));}
40%{background:linear-gradient(to right,#4995dd,#f4b7b7,rgb(112 178 244));}
60%{background:linear-gradient(to right,#4995dd,#ec9393,rgb(80 163 246));}
80%{background:linear-gradient(to right,#4995dd,#e87f7f,rgb(25 139 253));}
100%{background:linear-gradient(to right,#4995dd,#ee2c2c,rgb(0 124 247));}
from{width:0;}
to{width:75%;}
}
@keyframes pops-anim-wait-rotate{form{transform:rotate(0);}
to{transform:rotate(360deg);}
}
@keyframes pops-anim-spread{0%{opacity:0;transform:scaleX(0);}
100%{opacity:1;transform:scaleX(1);}
}
@keyframes pops-anim-shake{0%,100%{transform:translateX(0);}
10%,30%,50%,70%,90%{transform:translateX(-10px);}
20%,40%,60%,80%{transform:translateX(10px);}
}
@keyframes pops-anim-rolling-left{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;transform:translateX(0) rotate(0);}
}
@keyframes pops-anim-rolling-right{0%{opacity:0;transform:translateX(100%) rotate(120deg);}
100%{opacity:1;transform:translateX(0) rotate(0);}
}
@keyframes pops-anim-slide-top{0%{opacity:0;transform:translateY(-200%);}
100%{opacity:1;transform:translateY(0);}
}
@keyframes pops-anim-slide-bottom{0%{opacity:0;transform:translateY(200%);}
100%{opacity:1;transform:translateY(0);}
}
@keyframes pops-anim-slide-left{0%{opacity:0;transform:translateX(-200%);}
100%{opacity:1;transform:translateX(0);}
}
@keyframes pops-anim-slide-right{0%{transform:translateX(200%);}
100%{opacity:1;transform:translateX(0);}
}
@keyframes pops-anim-fadein{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes pops-anim-fadein-zoom{0%{opacity:0;transform:scale(.5);}
100%{opacity:1;transform:scale(1);}
}
@keyframes pops-anim-fadein-alert{0%{transform:scale(.5);}
45%{transform:scale(1.05);}
80%{transform:scale(.95);}
100%{transform:scale(1);}
}
@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);}
2.08333%{transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);}
4.16667%{transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);}
6.25%{transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);}
8.33333%{transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
10.4167%{transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);}
12.5%{transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);}
14.5833%{transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);}
16.6667%{transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);}
18.75%{transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);}
20.8333%{transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);}
22.9167%{transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);}
25%{transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
27.0833%{transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);}
29.1667%{transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);}
31.25%{transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);}
33.3333%{transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);}
35.4167%{transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);}
37.5%{transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);}
39.5833%{transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);}
41.6667%{transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
43.75%{transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);}
45.8333%{transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);}
47.9167%{transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);}
50%{opacity:1;transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);}
52.0833%{transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);}
54.1667%{transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);}
56.25%{transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);}
58.3333%{transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
60.4167%{transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);}
62.5%{transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);}
64.5833%{transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);}
66.6667%{transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);}
68.75%{transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);}
70.8333%{transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);}
72.9167%{transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);}
75%{transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
77.0833%{transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);}
79.1667%{transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);}
81.25%{transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);}
83.3333%{transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);}
85.4167%{transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);}
87.5%{transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);}
89.5833%{transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);}
91.6667%{transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
93.75%{transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);}
95.8333%{transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);}
97.9167%{transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);}
100%{opacity:1;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
}
@keyframes pops-anim-roll{0%{transform:perspective(1000px) rotate3d(1,0,0,90deg);}
100%{transform:perspective(1000px) rotate3d(1,0,0,0deg);}
}
@keyframes pops-anim-sandra{0%{opacity:0;transform:scale3d(1.1,1.1,1);}
100%{opacity:1;transform:scale3d(1,1,1);}
}
@keyframes pops-anim-gather{0%{opacity:0;transform:scale(5,0);}
100%{opacity:1;transform:scale(1,1);}
}
@keyframes pops-anim-spread-reverse{0%{opacity:1;transform:scaleX(1);}
100%{opacity:0;transform:scaleX(0);}
}
@keyframes pops-anim-shake-reverse{0%,100%{transform:translateX(10px);}
10%,30%,50%,70%,90%{transform:translateX(-10px);}
20%,40%,60%,80%{transform:translateX(0);}
}
@keyframes pops-anim-rolling-left-reverse{0%{opacity:1;transform:translateX(0) rotate(0);}
100%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
}
@keyframes pops-anim-rolling-right-reverse{0%{opacity:1;transform:translateX(0) rotate(0);}
100%{opacity:0;transform:translateX(100%) rotate(120deg);}
}
@keyframes pops-anim-slide-top-reverse{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(-200%);}
}
@keyframes pops-anim-slide-bottom-reverse{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(200%);}
}
@keyframes pops-anim-slide-left-reverse{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(-200%);}
}
@keyframes pops-anim-slide-right-reverse{0%{opacity:1;transform:translateX(0);}
100%{transform:translateX(200%);}
}
@keyframes pops-anim-fadein-reverse{0%{opacity:1;}
100%{opacity:0;}
}
@keyframes pops-anim-fadein-zoom-reverse{0%{opacity:1;transform:scale(1);}
100%{opacity:0;transform:scale(.5);}
}
@keyframes pops-anim-fadein-alert-reverse{0%{transform:scale(1);}
45%{transform:scale(.95);}
80%{transform:scale(1.05);}
100%{transform:scale(.5);}
}
@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);}
97.9167%{transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);}
95.8333%{transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);}
93.75%{transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);}
91.6667%{transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
89.5833%{transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);}
87.5%{transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);}
85.4167%{transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);}
83.3333%{transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);}
81.25%{transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);}
79.1667%{transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);}
77.0833%{transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);}
75%{transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
72.9167%{transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);}
70.8333%{transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);}
68.75%{transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);}
66.6667%{transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);}
64.5833%{transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);}
62.5%{transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);}
60.4167%{transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);}
58.3333%{transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
56.25%{transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);}
54.1667%{transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);}
52.0833%{transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);}
50%{opacity:1;transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);}
47.9167%{transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);}
45.8333%{transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);}
43.75%{transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);}
41.6667%{transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
39.5833%{transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);}
37.5%{transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);}
35.4167%{transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);}
33.3333%{transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);}
31.25%{transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);}
29.1667%{transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);}
27.0833%{transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);}
25%{transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
22.9167%{transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);}
20.8333%{transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);}
18.75%{transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);}
16.6667%{transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);}
14.5833%{transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);}
12.5%{transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);}
10.4167%{transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);}
8.33333%{transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
6.25%{transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);}
4.16667%{transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);}
2.08333%{transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);}
0%{opacity:1;transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0type=close,1);}
}
@keyframes pops-anim-roll-reverse{0%{transform:perspective(1000px) rotate3d(1,0,0,0deg);}
100%{transform:perspective(1000px) rotate3d(1,0,0,90deg);}
}
@keyframes pops-anim-sandra-reverse{0%{opacity:1;transform:scale3d(1,1,1);}
100%{opacity:0;transform:scale3d(1.1,1.1,1);}
}
@keyframes pops-anim-gather-reverse{0%{opacity:0;transform:scale(5,0);}
100%{opacity:0;transform:scale(5,0);}
}
@-webkit-keyframes pops-motion-fadeInTop{0%{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px);}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
}
@keyframes pops-motion-fadeInTop{0%{opacity:0;transform:translateY(-30px);-ms-transform:translateY(-30px);}
100%{opacity:1;transform:translateX(0);-ms-transform:translateX(0);}
}
@-webkit-keyframes pops-motion-fadeOutTop{0%{opacity:10;-webkit-transform:translateY(0);transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px);}
}
@keyframes pops-motion-fadeOutTop{0%{opacity:1;transform:translateY(0);-ms-transform:translateY(0);}
100%{opacity:0;transform:translateY(-30px);-ms-transform:translateY(-30px);}
}
@-webkit-keyframes pops-motion-fadeInBottom{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes pops-motion-fadeInBottom{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);-ms-transform:translateY(20px);}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-transform:translateY(0);}
}
@-webkit-keyframes pops-motion-fadeOutBottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
}
@keyframes pops-motion-fadeOutBottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);-ms-transform:translateY(20px);}
}
@-webkit-keyframes pops-motion-fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px);}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
}
@keyframes pops-motion-fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-30px);transform:translateX(-30px);-ms-transform:translateX(-30px);}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
}
@-webkit-keyframes pops-motion-fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-30px);transform:translateX(-30px);}
}
@keyframes pops-motion-fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px);-ms-transform:translateX(-20px);}
}
@-webkit-keyframes pops-motion-fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
}
@keyframes pops-motion-fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);-ms-transform:translateX(20px);}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
}
@-webkit-keyframes pops-motion-fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);}
}
@keyframes pops-motion-fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-ms-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);-ms-transform:translateX(20px);}
}
/* 动画 */
.pops-anim[anim=pops-anim-spread]{animation:pops-anim-spread .3s;}
.pops-anim[anim=pops-anim-shake]{animation:pops-anim-shake .3s;}
.pops-anim[anim=pops-anim-rolling-left]{animation:pops-anim-rolling-left .3s;}
.pops-anim[anim=pops-anim-rolling-right]{animation:pops-anim-rolling-right .3s;}
.pops-anim[anim=pops-anim-slide-top]{animation:pops-anim-slide-top .3s;}
.pops-anim[anim=pops-anim-slide-bottom]{animation:pops-anim-slide-bottom .3s;}
.pops-anim[anim=pops-anim-slide-left]{animation:pops-anim-slide-left .3s;}
.pops-anim[anim=pops-anim-slide-right]{animation:pops-anim-slide-right .3s;}
.pops-anim[anim=pops-anim-fadein]{animation:pops-anim-fadein .3s;}
.pops-anim[anim=pops-anim-fadein-zoom]{animation:pops-anim-fadein-zoom .3s;}
.pops-anim[anim=pops-anim-fadein-alert]{animation:pops-anim-fadein-alert .3s;}
.pops-anim[anim=pops-anim-don]{animation:pops-anim-don .3s;}
.pops-anim[anim=pops-anim-roll]{animation:pops-anim-roll .3s;}
.pops-anim[anim=pops-anim-sandra]{animation:pops-anim-sandra .3s;}
.pops-anim[anim=pops-anim-gather]{animation:pops-anim-gather .3s;}
.pops-anim[anim=pops-anim-spread-reverse]{animation:pops-anim-spread-reverse .3s;}
.pops-anim[anim=pops-anim-shake-reverse]{animation:pops-anim-shake-reverse .3s;}
.pops-anim[anim=pops-anim-rolling-left-reverse]{animation:pops-anim-rolling-left-reverse .3s;}
.pops-anim[anim=pops-anim-rolling-right-reverse]{animation:pops-anim-rolling-right-reverse .3s;}
.pops-anim[anim=pops-anim-slide-top-reverse]{animation:pops-anim-slide-top-reverse .3s;}
.pops-anim[anim=pops-anim-slide-bottom-reverse]{animation:pops-anim-slide-bottom-reverse .3s;}
.pops-anim[anim=pops-anim-slide-left-reverse]{animation:pops-anim-slide-left-reverse .3s;}
.pops-anim[anim=pops-anim-slide-right-reverse]{animation:pops-anim-slide-right-reverse .3s;}
.pops-anim[anim=pops-anim-fadein-reverse]{animation:pops-anim-fadein-reverse .3s;}
.pops-anim[anim=pops-anim-fadein-zoom-reverse]{animation:pops-anim-fadein-zoom-reverse .3s;}
.pops-anim[anim=pops-anim-fadein-alert-reverse]{animation:pops-anim-fadein-alert-reverse .3s;}
.pops-anim[anim=pops-anim-don-reverse]{animation:pops-anim-don-reverse .3s;}
.pops-anim[anim=pops-anim-roll-reverse]{animation:pops-anim-roll-reverse .3s;}
.pops-anim[anim=pops-anim-sandra-reverse]{animation:pops-anim-sandra-reverse .3s;}
.pops-anim[anim=pops-anim-gather-reverse]{animation:pops-anim-gather-reverse .3s;}
`,
alertCSS: `
.pops[type-value] .pops-alert-title{display: flex;align-items: center;justify-content: space-between;}
.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));}
.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);}
.pops[type-value=alert] .pops-alert-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;}
.pops[type-value=alert] .pops-alert-content{
width:100%;
height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
overflow: auto;
word-break:break-word;
}
.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;}
`,
confirmCSS: `
.pops[type-value] .pops-confirm-title{display: flex;align-items: center;justify-content: space-between;}
.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));}
.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);}
.pops[type-value=confirm] .pops-confirm-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;}
.pops[type-value=confirm] .pops-confirm-content{
width:100%;
height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
overflow: auto;
word-break:break-word;
}
.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;}
`,
promptCSS: `
.pops[type-value] .pops-prompt-title{display: flex;align-items: center;justify-content: space-between;}
.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));}
.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);}
.pops[type-value=prompt] .pops-prompt-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;}
.pops[type-value=prompt] .pops-prompt-content{
width:100%;
height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
overflow: auto;
word-break:break-word;
}
.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;}
.pops[type-value=prompt] input[pops]{padding:5px 10px;}
.pops[type-value=prompt] textarea[pops]{padding:5px 10px;resize:none;}
.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);}
`,
loadingCSS: `
.pops[type-value=loading] {
position: absolute;
top: 272.5px;
top: 50%;
left: 26px;
left: 50%;
display: flex;
overflow: hidden;
padding: 10px 15px;
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0;
border: 1px solid rgba(0,0,0,.2);
border-radius: 5px;
background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
box-shadow: 0 0 5px rgb(0 0 0 / 50%);
vertical-align: middle;
transition: all .35s;
transform: translate(-50%,-50%);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: center;
}
.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;}
.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;}
.pops[type-value=loading] .pops-loading-content p[pops] {
display: inline-block;
padding: 5px 0px;
color: rgb(51, 51, 51);
text-indent: 15px;
font-size: inherit;
text-align: center;
}
`,
iframeCSS: `
.pops[type-value=iframe]{
--container-title-height: 55px;
}
.pops[type-value] .pops-iframe-title{display: flex;align-items: center;justify-content: space-between;}
.pops[type-value=iframe] .pops-iframe-title{width:calc(100% - 0px);height:var(--container-title-height);border-bottom:1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
.pops[type-value=iframe] .pops-iframe-title p[pops]{width:100%;overflow:hidden;color:rgb(51, 51, 51);text-indent:15px;text-overflow:ellipsis;white-space:nowrap;font-weight:500;line-height:var(--container-title-height);}
.pops[type-value=iframe] .pops-iframe-content p[pops]{padding:5px 10px;color:#333;text-indent:15px;}
.pops[type-value=iframe] .pops-iframe-content{
width:100%;
height: calc(100% - var(--container-title-height));
overflow: hidden;
word-break:break-word;
}
.pops-loading{position:absolute;top:40px;right:0;bottom:0;left:0;z-index:5;background-color:rgb(255, 255, 255, var(--pops-bg-opacity));}
.pops-loading:before{position:absolute;top:50%;left:50%;z-index:3;display:block;margin:-20px 0 0 -20px;padding:20px;border:4px solid rgb(221, 221, 221, var(--pops-bd-opacity));border-radius:50%;content:"";border-top-color:transparent;animation:pops-anim-wait-rotate 1.2s linear infinite;}
.pops[type-value=iframe].pops[type-module=min]{top:unset!important;bottom:0;max-width:200px;max-height:53px;transform:none;}
.pops[type-value=iframe].pops[type-module=min] .pops-header-control[type=min]{display:none;}
.pops[type-value=iframe].pops[type-module=max]{top:unset!important;left:unset!important;width:100%!important;height:100%!important;transform:none;}
.pops[type-value=iframe] iframe[pops]{width:calc(100% - 4px);height:calc(100% - 4px);border:0;}
.pops-iframe-content-global-loading{position:absolute;top:0;left:0;z-index:999999;width:0;height:4px;background:linear-gradient(to right,#4995dd,#fff,rgb(202 224 246));animation:iframeLoadingChange 2s forwards;}
`,
drawerCSS: `
.pops[type-value=drawer] {
position: fixed;
box-sizing: border-box;
display: flex;
flex-direction: column;
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);
overflow: hidden;
transition: all .3s;
}
.pops[type-value] .pops-drawer-title{display: flex;align-items: center;justify-content: space-between;}
.pops[type-value=drawer][direction=top]{width: 100%;left: 0;right: 0;top: 0;}
.pops[type-value=drawer][direction=bottom]{width: 100%;left: 0;right: 0;bottom: 0;}
.pops[type-value=drawer][direction=left]{height: 100%;top: 0;bottom: 0;left: 0;}
.pops[type-value=drawer][direction=right]{height: 100%;top: 0;bottom: 0;right: 0;}
.pops-drawer-content{height: 100%;}
.pops[type-value="drawer"] .pops-drawer-btn{padding-top: 10px;padding-bottom: 10px;}
`,
folderCSS: `
.pops[type-value] .pops-folder-title{display: flex;align-items: center;justify-content: space-between;}
.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));}
.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);}
.pops[type-value=folder] .pops-folder-content p[pops]{padding:5px 10px;color:rgb(51, 51, 51);text-indent:15px;}
.pops[type-value=folder] .pops-folder-content{
width:100%;
height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
overflow: auto;
word-break:break-word;
}
.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;}
.pops-folder-list .cursor-p{cursor:pointer}
.pops-folder-list a{background:0 0;text-decoration:none;-webkit-tap-highlight-color:transparent;color:#05082c}
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}
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}
table.pops-folder-list-table__body{height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.pops-folder-list table tr{line-height:1}
.pops-folder-list-table__header-row{height:50px;line-height:50px;color:rgb(129, 137, 153);text-align:left;font-size:12px}
.pops-folder-list-table__header-row{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.pops-folder-list-table__body-row{height:50px;line-height:50px;color:#03081a;font-size:12px}
.pops-folder-list-table__body-row:hover{background:rgb(245, 246, 247, var(--pops-bg-opacity))}
.pops-folder-list table th{border:0;border-bottom:1px solid rgb(247, 248, 250, var(--pops-bg-opacity))}
.pops-folder-list table td{border:0;border-bottom:1px solid rgb(247, 248, 250, var(--pops-bg-opacity));position:relative}
.pops-folder-list .list-name-text{display:inline-block;padding-left:12px;line-height:40px;max-width:176px}
.pops-folder-list-file-name > div{display:flex;align-items:center;}
.pops-mobile-folder-list-file-name{display:flex;align-items:center}
.pops-mobile-folder-list-file-name>div {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
padding: 6px 0px;
flex-direction: column;
}
.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon{width:45px;height:45px}
.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {
padding-left: unset;
max-width: 250px;
overflow-x: hidden;
font-weight: 400;
line-height: unset;
margin-bottom: 4px;
white-space: normal;
text-overflow: unset;
}
/* 修改滚动 */
.pops-folder-content{overflow: hidden !important}
.pops-folder-content .pops-folder-list{height: 100%}
.pops-folder-content .pops-folder-list-table__body-div{height: 100%;padding-bottom: 85px}
.pops-mobile-folder-content .pops-folder-list-table__body-div{height: 100%;padding-bottom: 40px}
.pops-folder-content table.pops-folder-list-table__body{overflow: auto}
.pops-mobile-folder-content .pops-folder-list-table__header-div{display: none}
.pops-folder-list-file-name-title-text:hover{text-decoration:none;color:rgb(6, 167, 255)}
.pops-folder-list .text-ellip{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pops-folder-list .content{color:rgb(129, 137, 153);position:relative;width:100%;text-align:left}
.pops-folder-list .inline-block-v-middle{display:inline-block;vertical-align:middle}
.pops-folder-list .flex-a-i-center{display: flex;align-items: center;}
.pops-folder-list .u-file-icon{display:inline-block;vertical-align:middle}
.pops-folder-list .u-file-icon--list{width:32px;height:32px}
.pops-folder-list .pops-folder-list-file-icon{line-height:1;position:relative;vertical-align:middle}
.pops-folder-list .pops-folder-file-list-breadcrumb-primary {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
min-height: 17px;
flex-wrap: wrap;
}
.pops-folder-list .pops-folder-list-table__sort {
display: inline-flex;
margin-left: 4px;
flex-direction: column;
}
.pops-folder-list .pops-folder-icon-arrow{
width: 10px;
height: 10px;
fill: rgb(212, 215, 222);
}
.pops-folder-list .pops-folder-icon-active{
fill: rgb(6, 167, 255);
}
.pops-folder-list .pops-folder-file-list-breadcrumb {
padding: 4px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: start;
-ms-flex-pack: start;
justify-content: flex-start;
min-height: 35px;
}
.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}
.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a{color:rgb(153, 153, 153)}
.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a{font-size:14px;color:rgb(18, 22, 26)}
.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow{width:16px;height:16px}
.pops-folder-list .iconArrow{
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;
}
`,
panelCSS: `
.pops[type-value=panel]{
--el-disabled-text-color: #a8abb2;
--el-disabled-bg-color: #f5f7fa;
--el-disabled-border-color: #e4e7ed;
--aside-bg-color: #f2f2f2;
}
.pops[type-value] .pops-panel-title{display: flex;align-items: center;justify-content: space-between;}
.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));}
.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);}
.pops[type-value=panel] .pops-panel-content{
width:100%;
height: calc(100% - var(--container-title-height) - var(--container-bottom-btn-height));
overflow: auto;
word-break:break-word;
}
.pops[type-value=panel] .pops-panel-btn{position:absolute;bottom:0;display:flex;padding:10px 10px 10px 10px;width:100%;height:var(--container-bottom-btn-height);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;}
/* ↓panel的CSS↓ */
aside.pops-panel-aside{overflow:auto;box-sizing:border-box;flex-shrink:0;width:200px;height:100%;background:var(--aside-bg-color);border-right:1px solid var(--aside-bg-color);font-size:0.9em;}
.pops-panel-content{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0;bottom:0!important}
section.pops-panel-container{width:100%;padding:10px;overflow:hidden}
section.pops-panel-container .pops-panel-container-header-ul{border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));}
section.pops-panel-container .pops-panel-container-header-ul li{display: flex;justify-content: flex-start !important;text-align:left;}
section.pops-panel-container > ul:last-child{overflow: auto;height: calc(100% - 45px);}
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}
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)}
section.pops-panel-container>ul li{display:flex;justify-content:space-between;align-items:center;margin:10px 20px}
section.pops-panel-container li.pops-panel-forms-container-item{display:block;margin-top:20px}
section.pops-panel-container .pops-panel-forms-container-item ul{border-radius:6px;background:var(--aside-bg-color);margin:10px}
section.pops-panel-container .pops-panel-forms-container-item ul li {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 10px;
padding: 10px 0;
border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
text-align: left;
}
section.pops-panel-container .pops-panel-forms-container-item ul li:last-child{border:0}
section.pops-panel-container .pops-panel-forms-container-item>div{margin:10px;margin-left:20px;font-size:0.9em;text-align:left;}
/* 主文字 */
section.pops-panel-container .pops-panel-forms-container-item .pops-panel-item-left-text .pops-panel-item-left-main-text {
/* line-height: 2; */
}
/* 描述文字 */
section.pops-panel-container .pops-panel-forms-container-item .pops-panel-item-left-text .pops-panel-item-left-desc-text{
/* line-height: 1; */
font-size: 0.8em;
color: rgb(108, 108, 108);
}
/* 兼容移动端CSS */
.pops[type-value="panel"].pops-panel-is-mobile{
width: 92vw;
}
.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container{
padding: 10px 0px;
}
.pops[type-value="panel"].pops-panel-is-mobile .pops-panel-content aside.pops-panel-aside{
width: 20%;
}
.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-forms-container-item>div{
margin: 5px 10px;
text-align: left;
}
.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-forms-container-item ul{
margin: 0px !important;
}
.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container>ul li{
margin: 5px 5px!important;
padding: 5px 5px !important;
}
.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container >ul > li div:nth-child(2){
max-width: 55%;
margin-left: 6px;
text-align: right;
}
.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-select select{
min-width: 88px !important;
width: -webkit-fill-available;
width: -moz-available;
}
.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container .pops-panel-container-header-ul li{
font-size: 16px;
}
.pops[type-value="panel"].pops-panel-is-mobile .pops-panel-title p[pops],
.pops[type-value="panel"].pops-panel-is-mobile section.pops-panel-container>ul li,
.pops[type-value="panel"].pops-panel-is-mobile aside.pops-panel-aside ul li{
font-size: 14px;
}
/* switch的CSS */
.pops-panel-switch {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
position: relative;
font-size: 14px;
line-height: 20px;
height: 32px;
vertical-align: middle
}
.pops-panel-switch input.pops-panel-switch__input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
margin: 0
}
.pops-panel-switch:has(input.pops-panel-switch__input:disabled),
.pops-panel-switch[data-disabled],
.pops-panel-switch[data-disabled] .pops-panel-switch__core,
.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core{
cursor: not-allowed;
opacity: .6;
}
.pops-panel-switch span.pops-panel-switch__core {
display: inline-flex;
position: relative;
align-items: center;
min-width: 40px;
height: 20px;
border: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));
outline: 0;
border-radius: 10px;
box-sizing: border-box;
background: rgb(220, 223, 230, var(--pops-bg-opacity));
cursor: pointer;
transition: border-color .3s,background-color .3s
}
.pops-panel-switch .pops-panel-switch__action {
position: absolute;
left: 1px;
border-radius: 100%;
transition: all .3s;
width: 16px;
height: 16px;
background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
display: flex;
justify-content: center;
align-items: center;
color: rgb(220, 223, 230)
}
.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))}
.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action{left:calc(100% - 17px);color:rgb(64, 158, 255)}
/* switch的CSS */
/* slider旧的CSS */
section.pops-panel-container .pops-panel-slider:has(>input[type=range]){overflow:hidden;height:25px;line-height:25px;display:flex;align-items:center}
section.pops-panel-container .pops-panel-slider input[type=range] {
height: 6px;
background: rgb(228, 231, 237, var(--pops-bg-opacity));
outline: 0;
-webkit-appearance: none;
appearance: none;
width: 100%;
}
section.pops-panel-container .pops-panel-slider input[type=range]::-webkit-slider-thumb{
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));
background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
box-shadow: 0 0 2px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
border-image: linear-gradient(#409eff,#409eff) 0 fill/9 25 9 0/0 0 0 100vw;
}
section.pops-panel-container .pops-panel-slider input[type=range]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));
background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
box-shadow: 0 0 2px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
section.pops-panel-container .pops-panel-slider input[type=range]::-moz-range-progress{
height: 6px;
border-image: linear-gradient(#409eff,#409eff) 0 fill/9 25 9 0/0 0 0 100vw;
}
/* slider旧的CSS */
/* slider的CSS */
.pops-slider {
--pops-slider-color-white: #ffffff;
--pops-slider-color-primary: #409eff;
--pops-slider-color-info: #909399;
--pops-slider-text-color-placeholder: #a8abb2;
--pops-slider-border-color-light: #e4e7ed;
--pops-slider-border-radius-circle: 100%;
--pops-slider-transition-duration-fast: 0.2s;
--pops-slider-main-bg-color: var(--pops-slider-color-primary);
--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);
--pops-slider-stop-bg-color: var(--pops-slider-color-white);
--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);
--pops-slider-border-radius: 3px;
--pops-slider-height: 6px;
--pops-slider-button-size: 20px;
--pops-slider-button-wrapper-size: 36px;
--pops-slider-button-wrapper-offset: -15px;
}
.pops-slider {
width: 100%;
height: 32px;
display: flex;
align-items: center;
}
.pops-slider-width{
flex: 0 0 52%;
margin-left: 10px;
}
.pops-slider__runway {
flex: 1;
height: var(--pops-slider-height);
background-color: var(--pops-slider-runway-bg-color);
border-radius: var(--pops-slider-border-radius);
position: relative;
cursor: pointer;
}
.pops-slider__runway.show-input {
margin-right: 30px;
width: auto;
}
.pops-slider__runway.pops-slider-is-disabled {
cursor: default;
}
.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {
background-color: var(--pops-slider-disabled-color);
}
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {
border-color: var(--pops-slider-disabled-color);
}
.pops-slider__runway.pops-slider-is-disabled
.pops-slider__button:hover,
.pops-slider__runway.pops-slider-is-disabled
.pops-slider__button.hover,
.pops-slider__runway.pops-slider-is-disabled
.pops-slider__button.dragging {
cursor: not-allowed;
}
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
.pops-slider__runway.pops-slider-is-disabled
.pops-slider__button.dragging {
transform: scale(1);
}
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,
.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,
.pops-slider__runway.pops-slider-is-disabled
.pops-slider__button.dragging {
cursor: not-allowed;
}
.pops-slider__input {
flex-shrink: 0;
width: 130px;
}
.pops-slider__bar {
height: var(--pops-slider-height);
background-color: var(--pops-slider-main-bg-color);
border-top-left-radius: var(--pops-slider-border-radius);
border-bottom-left-radius: var(--pops-slider-border-radius);
position: absolute;
}
.pops-slider__button-wrapper {
height: var(--pops-slider-button-wrapper-size);
width: var(--pops-slider-button-wrapper-size);
position: absolute;
z-index: 1;
top: var(--pops-slider-button-wrapper-offset);
transform: translate(-50%);
background-color: transparent;
text-align: center;
user-select: none;
line-height: normal;
outline: none;
}
.pops-slider__button-wrapper:after {
display: inline-block;
content: "";
height: 100%;
vertical-align: middle;
}
.pops-slider__button:hover,
.pops-slider__button.hover {
cursor: grab;
}
.pops-slider__button {
display: inline-block;
width: var(--pops-slider-button-size);
height: var(--pops-slider-button-size);
vertical-align: middle;
border: solid 2px var(--pops-slider-main-bg-color);
background-color: var(--pops-slider-color-white);
border-radius: 50%;
box-sizing: border-box;
transition: var(--pops-slider-transition-duration-fast);
user-select: none;
}
.pops-slider__button:hover,
.pops-slider__button.hover,
.pops-slider__button.dragging {
transform: scale(1.2);
}
.pops-slider__button:hover,
.pops-slider__button.hover {
cursor: grab;
}
.pops-slider__button.dragging {
cursor: grabbing;
}
.pops-slider__stop {
position: absolute;
height: var(--pops-slider-height);
width: var(--pops-slider-height);
border-radius: var(--pops-slider-border-radius-circle);
background-color: var(--pops-slider-stop-bg-color);
transform: translate(-50%);
}
.pops-slider__marks {
top: 0;
left: 12px;
width: 18px;
height: 100%;
}
.pops-slider__marks-text {
position: absolute;
transform: translate(-50%);
font-size: 14px;
color: var(--pops-slider-color-info);
margin-top: 15px;
white-space: pre;
}
.pops-slider.is-vertical {
position: relative;
display: inline-flex;
width: auto;
height: 100%;
flex: 0;
}
.pops-slider.is-vertical .pops-slider__runway {
width: var(--pops-slider-height);
height: 100%;
margin: 0 16px;
}
.pops-slider.is-vertical .pops-slider__bar {
width: var(--pops-slider-height);
height: auto;
border-radius: 0 0 3px 3px;
}
.pops-slider.is-vertical .pops-slider__button-wrapper {
top: auto;
left: var(--pops-slider-button-wrapper-offset);
transform: translateY(50%);
}
.pops-slider.is-vertical .pops-slider__stop {
transform: translateY(50%);
}
.pops-slider.is-vertical .pops-slider__marks-text {
margin-top: 0;
left: 15px;
transform: translateY(50%);
}
.pops-slider--large {
height: 40px;
}
.pops-slider--small {
height: 24px;
}
/* slider的CSS */
/* input的CSS */
.pops-panel-input{display:flex;align-items:center;border:1px solid #dcdfe6;border-radius:4px;background-color:#ffffff}
.pops-panel-input:hover{box-shadow:0 0 0 1px #c0c4cc inset}
.pops-panel-input:has(input:focus){outline:0;border:1px solid #409eff;border-radius:4px;box-shadow:none}
.pops-panel-input input {
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 1;
height: 32px;
white-space: nowrap;
cursor: text;
text-align: center;
box-sizing: border-box;
outline: 0;
transition: .1s;
font-weight: 500;
user-select: none;
vertical-align: middle;
-webkit-appearance: none;
appearance: none;
background-color: transparent;
border: 0;
padding: 8px 8px;
font-size: 14px;
text-align: start;
width: 100%;
flex: 1;
}
.pops-panel-input span.pops-panel-input__suffix {
display: inline-flex;
white-space: nowrap;
flex-shrink: 0;
flex-wrap: nowrap;
height: 100%;
text-align: center;
color: #a8abb2;
transition: all .3s;
pointer-events: none;
margin: 0 8px;
}
.pops-panel-input span.pops-panel-input__suffix-inner{pointer-events:all;display:inline-flex;align-items:center;justify-content:center}
.pops-panel-input .pops-panel-icon{cursor:pointer}
.pops-panel-input .pops-panel-icon{height:inherit;line-height:inherit;display:flex;justify-content:center;align-items:center;transition:all .3s}
.pops-panel-input .pops-panel-icon svg{height:1em;width:1em}
.pops-input-disabled{
background-color: var(--el-disabled-bg-color);
box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
}
.pops-panel-input.pops-input-disabled{
border: none;
}
.pops-panel-input.pops-input-disabled:hover{
box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
}
.pops-panel-input input:disabled,
.pops-panel-input input:disabled + .pops-panel-input__suffix{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
color: var(--el-disabled-text-color);
-webkit-text-fill-color: var(--el-disabled-text-color);
cursor: not-allowed;
}
.pops-panel-input input:disabled + .pops-panel-input__suffix{
display: none;
}
/* input的CSS */
/* textarea的CSS */
.pops-panel-textarea textarea {
width: 100%;
vertical-align: bottom;
position: relative;
display: block;
resize: none;
padding: 5px 11px;
line-height: 1.5;
box-sizing: border-box;
font-size: inherit;
font-family: inherit;
background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
background-image: none;
-webkit-appearance: none;
appearance: none;
box-shadow: 0 0 0 1px #dcdfe6 inset;
border-radius: 0;
transition: box-shadow .2s cubic-bezier(.645, .045, .355, 1);
border: none;
}
.pops-panel-textarea textarea:hover{box-shadow:0 0 0 1px #c0c4cc inset}
.pops-panel-textarea-disable .pops-panel-textarea textarea:hover{box-shadow:none}
.pops-panel-textarea textarea:focus{outline:0;box-shadow:0 0 0 1px #409eff inset}
/* textarea的CSS */
/* select的CSS */
.pops-panel-select select {
height: 32px;
line-height: 32px;
min-width: 200px;
border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));
border-radius: 5px;
text-align: center;
outline: 0;
background: rgb(255, 255, 255, var(--pops-bg-opacity));
box-shadow: none;
}
.pops-panel-select select:hover{box-shadow:0 0 0 1px #c0c4cc inset}
.pops-panel-select-disable .pops-panel-select select:hover{box-shadow:none}
.pops-panel-select select:focus{border:1px solid rgb(64, 158, 255, var(--pops-bd-opacity));box-shadow:none}
/* select的CSS */
`,
tooltipCSS: `
.pops-tip {
--tooltip-color: #4e4e4e;
--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
--tooltip-bd-radius: 2px;
--tooltip-font-size: 14px;
--tooltip-padding-top: 13px;
--tooltip-padding-right: 13px;
--tooltip-padding-bottom: 13px;
--tooltip-padding-left: 13px;
--tooltip-arrow--after-color: rgb(78, 78, 78);
--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
--tooltip-arrow--after-width: 12px;
--tooltip-arrow--after-height: 12px;
position: absolute;
padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom) var(--tooltip-padding-left);
max-width: 400px;
max-height: 300px;
border-radius: var(--tooltip-bd-radius);
background-color: var(--tooltip-bg-color);
box-shadow: 0 1.5px 4px rgba(0,0,0,.24),0 1.5px 6px rgba(0,0,0,.12);
color: var(--tooltip-color);
font-size: var(--tooltip-font-size);
}
/* github的样式 */
.pops-tip.github-tooltip{
--tooltip-bg-opacity: 1;
--tooltip-color: rgb(255, 255, 255);
--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
--tooltip-bd-radius: 6px;
--tooltip-padding-top: 6px;
--tooltip-padding-right: 8px;
--tooltip-padding-bottom: 6px;
--tooltip-padding-left: 8px;
--tooltip-arrow--after-color: rgb(255, 255, 255);
--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
--tooltip-arrow--after-width: 8px;
--tooltip-arrow--after-height: 8px;
}
.pops-tip .pops-tip-arrow {
position: absolute;
top: 100%;
left: 50%;
overflow: hidden;
width: 100%;
height: 12.5px;
transform: translateX(-50%);
}
.pops-tip .pops-tip-arrow::after {
position: absolute;
top: 0;
left: 50%;
width: var(--tooltip-arrow--after-width);
height: var(--tooltip-arrow--after-height);
background: var(--tooltip-arrow--after-bg-color);
color: var(--tooltip-arrow--after-color);
box-shadow: 0 1px 7px rgba(0,0,0,.24),0 1px 7px rgba(0,0,0,.12);
content: "";
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.pops-tip .pops-tip-arrow[data-position=bottom] {
position: absolute;
top: 100%;
left: 50%;
overflow: hidden;
width: 100%;
height: 12.5px;
transform: translateX(-50%);
}
.pops-tip .pops-tip-arrow[data-position=bottom]:after {
position: absolute;
top: 0;
left: 50%;
width: var(--tooltip-arrow--after-width);
height: var(--tooltip-arrow--after-height);
background: var(--tooltip-arrow--after-bg-color);
box-shadow: 0 1px 7px rgba(0,0,0,.24),0 1px 7px rgba(0,0,0,.12);
content: "";
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.pops-tip .pops-tip-arrow[data-position=left] {
top: 50%;
left: -12.5px;
width: 12.5px;
height: 50px;
transform: translateY(-50%);
}
.pops-tip .pops-tip-arrow[data-position=left]:after {
position: absolute;
top: 50%;
left: 100%;
content: "";
}
.pops-tip .pops-tip-arrow[data-position=right] {
top: 50%;
right: -12.5px;
left: auto;
width: 12.5px;
height: 50px;
transform: translateY(-50%);
}
.pops-tip .pops-tip-arrow[data-position=right]:after {
position: absolute;
top: 50%;
left: 0;
content: "";
}
.pops-tip .pops-tip-arrow[data-position=top] {
top: -12.5px;
left: 50%;
transform: translateX(-50%);
}
.pops-tip .pops-tip-arrow[data-position=top]:after {
position: absolute;
top: 100%;
left: 50%;
content: "";
}
.pops-tip[data-motion]{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.pops-tip[data-motion=fadeOutRight]{-webkit-animation-name:pops-motion-fadeOutRight;animation-name:pops-motion-fadeOutRight;}
.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);}
.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);}
.pops-tip[data-motion=fadeInBottom]{-webkit-animation-name:pops-motion-fadeInBottom;animation-name:pops-motion-fadeInBottom;}
.pops-tip[data-motion=fadeOutBottom]{-webkit-animation-name:pops-motion-fadeOutBottom;animation-name:pops-motion-fadeOutBottom;}
.pops-tip[data-motion=fadeInLeft]{-webkit-animation-name:pops-motion-fadeInLeft;animation-name:pops-motion-fadeInLeft;}
.pops-tip[data-motion=fadeOutLeft]{-webkit-animation-name:pops-motion-fadeOutLeft;animation-name:pops-motion-fadeOutLeft;}
.pops-tip[data-motion=fadeInRight]{-webkit-animation-name:pops-motion-fadeInRight;animation-name:pops-motion-fadeInRight;}
`,
},
/** icon图标的svg代码 */
iconSVG: {
min: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z"></path>
</svg>`,
mise: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
max: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
close: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
edit: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
<path
fill="currentColor"
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>
</svg>
`,
share: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
delete: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
search: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
upload: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
loading: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
next: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
prev: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
eleme: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
elemePlus: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"></path>
</svg>
`,
chromeFilled: `
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
xml:space="preserve">
<path
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"
fill="currentColor"></path>
<path
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"
fill="currentColor"></path>
<path
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"
fill="currentColor"></path>
</svg>
`,
cpu: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
<path
fill="currentColor"
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>
</svg>
`,
videoPlay: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
videoPause: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
headset: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
monitor: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
documentCopy: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
</svg>
`,
picture: `
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
fill="currentColor"
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>
<path
fill="currentColor"
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>
</svg>
`,
circleClose: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
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>
<path
fill="currentColor"
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>
</svg>
`,
view: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
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>
</svg>
`,
hide: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
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>
<path
fill="currentColor"
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>
</svg>
`,
keyboard: `
<svg viewBox="0 0 1123 1024" xmlns="http://www.w3.org/2000/svg">
<path
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>
<path
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>
<path
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>
</svg>
`,
},
/**
* 动画名
* @type {string[]}
*/
animation: [],
/**
* 是否已初始化
*/
isInit: false,
/**
* 存储已创建的元素
*/
layer: {
/**
* 存储已创建的pops.alert
* @type { PopsLayerCommonConfig[] }
*/
alert: [],
/**
* 存储已创建的pops.confirm
* @type { PopsLayerCommonConfig[] }
*/
confirm: [],
/**
* 存储已创建的pops.prompt
* @type { PopsLayerCommonConfig[] }
*/
prompt: [],
/**
* 存储已创建的pops.loading
* @type { PopsLayerCommonConfig[] }
*/
loading: [],
/**
* 存储已创建的pops.iframe
* @type { PopsLayerConfig[] }
*/
iframe: [],
/**
* 存储已创建的pops.tooltip
* @type { PopsLayerCommonConfig[] }
*/
tooltip: [],
/**
* 存储已创建的pops.drawer
* @type { PopsLayerCommonConfig[] }
*/
drawer: [],
/**
* 存储已创建的pops.folder
* @type { PopsLayerCommonConfig[] }
*/
folder: [],
/**
* 存储已创建的pops.panel
* @type { PopsLayerCommonConfig[] }
*/
panel: [],
},
forbiddenScroll: {
event(event) {
event.preventDefault();
return false;
},
},
Utils: PopsUtils,
DOMUtils: PopsDOMUtils,
};
/**
* 释放原有的pops控制权
* @example
* let pops = window.pops.noConflict()
*/
pops.noConflict = function () {
if (window.pops) {
delete window.pops;
}
if (AnotherPops) {
window.pops = AnotherPops;
}
return pops;
};
/**
* 初始化CSS、动画
*/
pops.init = function () {
if (!this.config.isInit) {
/* 处理获取当前所有的动画名 */
this.config.isInit = true;
let animationStyle = document.createElement("style");
animationStyle.innerHTML = this.config.cssText.anim;
(document.head || document.body || document.documentElement).appendChild(
animationStyle
);
this.config.animation = PopsUtils.getKeyFrames(animationStyle.sheet);
setTimeout(() => {
animationStyle.remove();
}, 50);
}
};
/**
* 通过navigator.userAgent判断是否是手机访问
* @param {string} userAgent
* @returns {boolean}
*/
pops.isPhone = function (userAgent = navigator.userAgent) {
return Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(userAgent));
};
const PopsHandler = {
/**
* 创建shadow
*/
handlerShadow() {
let $shadowContainer = document.createElement("div");
$shadowContainer.className = "pops-shadow-container";
let $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
return {
$shadowContainer,
$shadowRoot,
};
},
/**
* 处理初始化
* @param {ShadowRoot} $shadowRoot
* @param {string[]|string} cssText
*/
handleInit($shadowRoot, cssText) {
pops.init();
if (!arguments.length) {
return;
}
if (Array.isArray(cssText)) {
cssText.forEach((text) => {
this.handleInit($shadowRoot, text);
});
} else {
let cssStyle = document.createElement("style");
cssStyle.setAttribute("type", "text/css");
cssStyle.innerHTML = cssText;
$shadowRoot.appendChild(cssStyle);
}
},
/**
* 处理遮罩层
* @param {?{
* type: "alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel",
* guid: string,
* config: PopsAlertDetails,
* animElement: HTMLElement,
* maskHTML: string,
* }} details
* @returns { {
* maskElement: HTMLDivElement
* } }
*/
handleMask(details = {}) {
let result = {
maskElement: PopsUtils.parseTextToDOM(details.maskHTML),
};
let isMaskClick = false;
/**
* 点击其它区域的事件
* @param {Event} event
* @returns
*/
function clickEvent(event) {
event?.preventDefault();
event?.stopPropagation();
event?.stopImmediatePropagation();
let targetLayer = pops.config.layer[details.type];
function originalRun() {
if (details.config.mask.clickEvent.toClose) {
/* 关闭 */
PopsUtils.close(
details.type,
targetLayer,
details.guid,
details.config,
details.animElement
);
} else if (details.config.mask.clickEvent.toHide) {
/* 隐藏 */
PopsUtils.hide(
details.type,
targetLayer,
details.guid,
details.config,
details.animElement,
result.maskElement
);
}
}
if (details.config.mask.clickCallBack) {
details.config.mask.clickCallBack(originalRun);
} else {
originalRun();
}
return false;
}
function isAnimElement(element) {
return Boolean(
element?.localName?.toLowerCase() === "div" &&
element.className &&
element.className === "pops-anim" &&
element.hasAttribute("anim")
);
}
if (
details.config.mask.clickEvent.toClose ||
details.config.mask.clickEvent.toHide
) {
/* 判断按下的元素是否是pops-anim */
PopsDOMUtils.on(
details.animElement,
["touchstart", "mousedown"],
void 0,
function (event) {
isMaskClick = isAnimElement(event.composedPath()[0]);
}
);
/* 如果有动画层，在动画层上监听点击事件 */
PopsDOMUtils.on(details.animElement, "click", void 0, function (event) {
if (isAnimElement(event.composedPath()[0]) && isMaskClick) {
return clickEvent(event);
}
});
/* 在遮罩层监听点击事件 */
/* 如果有动画层，那么该点击事件触发不了 */
PopsDOMUtils.on(result.maskElement, "click", void 0, (event) => {
isMaskClick = true;
clickEvent(event);
});
}
return result;
},
/**
* 处理获取元素
* @param {HTMLDivElement} animElement
* @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel"} type
*/
handleQueryElement(animElement, type) {
return {
/**
* 主元素
* @type {?HTMLElement}
*/
popsElement: animElement.querySelector(".pops[type-value"),
/**
* 确认按钮
* @type {?HTMLElement}
*/
btnOkElement: animElement.querySelector(`.pops-${type}-btn-ok`),
/**
* 取消按钮
* @type {?HTMLElement}
*/
btnCancelElement: animElement.querySelector(`.pops-${type}-btn-cancel`),
/**
* 其它按钮
* @type {?HTMLElement}
*/
btnOtherElement: animElement.querySelector(`.pops-${type}-btn-other`),
/**
* 标题元素
* @type {?HTMLElement}
*/
titleElement: animElement.querySelector(`.pops-${type}-title`),
/**
* 输入框元素
* @type {?HTMLTextAreaElement|HTMLInputElement}
*/
inputElement: animElement.querySelector(
`.pops-${type}-content textarea[pops]`
)
? animElement.querySelector(`.pops-${type}-content textarea[pops]`)
: animElement.querySelector(`.pops-${type}-content input[pops]`),
/**
* 顶部按钮控制层元素
* @type {?HTMLElement}
*/
headerControlsElement: animElement.querySelector(
".pops-header-controls"
),
/**
* iframe元素
* @type {?HTMLIFrameElement}
*/
iframeElement: animElement.querySelector("iframe[pops]"),
/**
* 加载中元素
* @type {?HTMLElement}
*/
loadingElement: animElement.querySelector(".pops-loading"),
/**
* 内容元素
* @type {?HTMLElement}
*/
contentElement: animElement.querySelector(`.pops-${type}-content`),
/**
* 内容侧边栏容器元素
* @type {?HTMLElement}
*/
contentAsideElement: animElement.querySelector(
`.pops-${type}-content aside.pops-${type}-aside`
),
/**
* 内容主要区域容器元素
* @type {?HTMLElement}
*/
contentSectionContainerElement: animElement.querySelector(
`.pops-${type}-content section.pops-${type}-container`
),
/**
* 内容加载中元素
* @type {?HTMLElement}
*/
contentLoadingElement: animElement.querySelector(
`.pops-${type}-content-global-loading`
),
/**
* 顶部缩小按钮
* @type {?HTMLElement}
*/
headerMinBtnElement: animElement.querySelector(
".pops-header-control[type='min']"
),
/**
* 顶部放大按钮
* @type {?HTMLElement}
*/
headerMaxBtnElement: animElement.querySelector(
".pops-header-control[type='max']"
),
/**
* 顶部恢复原样按钮
* @type {?HTMLElement}
*/
headerMiseBtnElement: animElement.querySelector(
".pops-header-control[type='mise']"
),
/**
* 顶部关闭按钮
* @type {?HTMLElement}
*/
headerCloseBtnElement: animElement.querySelector(
".pops-header-control[type='close']"
),
/**
* 文件夹列表元素
* @type {?HTMLElement}
*/
folderListElement: animElement.querySelector(".pops-folder-list"),
/**
* 文件夹列表顶部元素
* @type {?HTMLElement}
*/
folderListHeaderElement: animElement.querySelector(
".pops-folder-list .pops-folder-list-table__header-div"
),
/**
* 文件夹列表行元素
* @type {?HTMLTableRowElement}
*/
folderListHeaderRowElement: animElement.querySelector(
".pops-folder-list .pops-folder-list-table__header-div .pops-folder-list-table__header-row"
),
/**
* 文件夹列表tbody元素
* @type {?HTMLTableElement}
*/
folderListBodyElement: animElement.querySelector(
".pops-folder-list .pops-folder-list-table__body-div tbody"
),
/**
* 文件夹列表primary元素
* @type {?HTMLElement}
*/
folderFileListBreadcrumbPrimaryElement: animElement.querySelector(
".pops-folder-list .pops-folder-file-list-breadcrumb-primary"
),
/**
* 文件夹排序按钮-文件名
*/
folderListSortFileNameElement: animElement.querySelector(
'.pops-folder-list-table__sort[data-sort="fileName"]'
),
/**
* 文件夹排序按钮-修改时间
*/
folderListSortLatestTimeElement: animElement.querySelector(
'.pops-folder-list-table__sort[data-sort="latestTime"]'
),
/**
* 文件夹排序按钮-文件大小
*/
folderListSortFileSizeElement: animElement.querySelector(
'.pops-folder-list-table__sort[data-sort="fileSize"]'
),
};
},
/**
* 获取事件配置
* @param {string} guid
* @param {HTMLDivElement} $shadowContainer
* @param {ShadowRoot} $shadowRoot
* @param {"alert"|"confirm"|"prompt"|"loading"|"iframe"|"drawer"|"folder"|"panel"} mode 当前弹窗类型
* @param {HTMLDivElement} animElement 动画层
* @param {HTMLDivElement} popsElement 主元素
* @param {HTMLDivElement} maskElement 遮罩层
* @param {object} config 当前配置
*/
handleEventDetails(
guid,
$shadowContainer,
$shadowRoot,
mode,
animElement,
popsElement,
maskElement,
config
) {
return {
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
element: animElement,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
type: "",
mode: mode,
guid: guid,
close() {
PopsUtils.close(
mode,
pops.config.layer[mode],
guid,
config,
animElement
);
},
hide() {
PopsUtils.hide(
mode,
pops.config.layer[mode],
guid,
config,
animElement,
maskElement
);
},
show() {
PopsUtils.show(
mode,
pops.config.layer[mode],
guid,
config,
animElement,
maskElement
);
},
};
},
/**
* 处理返回的配置，针对popsHandler.handleEventDetails
* @returns { {
* $shadowContainer: HTMLDivElement,
* $shadowRoot: ShadowRoot,
* animElement: HTMLElement,
* popsElement: HTMLElement,
* maskElement: HTMLElement,
* close: ()=> void,
* hide: ()=> void,
* show: ()=> void,
* } }
*/
handleResultDetails(details) {
let _details_ = Object.assign({}, details);
delete _details_["type"];
delete _details_["function"];
delete _details_["type"];
return _details_;
},
/**
* 处理点击事件
* @param {HTMLElement} btnElement 按钮元素
* @param {"ok"|"close"|"cancel"|"other"} type 触发事件类型
* @param {object} event 事件配置，由popsHandler.handleEventDetails创建的
* @param {(event)=>{}} callback 点击回调
*/
handleClickEvent(btnElement, type, event, callback) {
PopsDOMUtils.on(
btnElement,
"click",
void 0,
function () {
let _event_ = {
type: type,
};
_event_ = Object.assign(event, _event_);
callback(_event_);
},
{
capture: true,
}
);
},
/**
* 全局监听键盘事件
* @param {string|number} keyName 键名|键值
* @param {"keyup"|"keypress"|"keydown"} eventName 事件名，默认keypress
* @param {?string[]} otherKeyList 组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
* @param {(event:Event)=> void} callback 回调函数
*/
handleKeyboardEvent(keyName, otherKeyList = [], callback) {
let keyboardEvent = function (event) {
let _keyName = event.code || event.key;
let _keyValue = event.charCode || event.keyCode || event.which;
if (otherKeyList.includes("ctrl") && !event.ctrlKey) {
return;
}
if (otherKeyList.includes("alt") && !event.altKey) {
return;
}
if (otherKeyList.includes("meta") && !event.metaKey) {
return;
}
if (otherKeyList.includes("shift") && !event.shiftKey) {
return;
}
if (typeof keyName === "string" && keyName === _keyName) {
callback && callback(event);
} else if (typeof keyName === "number" && keyName === _keyValue) {
callback && callback(event);
}
};
PopsDOMUtils.on(globalThis, "keydown", void 0, keyboardEvent, {
capture: true,
});
return {
removeKeyboardEvent() {
PopsDOMUtils.off(globalThis, "keydown", void 0, keyboardEvent, {
capture: true,
});
},
};
},
/**
* 处理prompt的点击事件
* @param {HTMLInputElement} inputElement 输入框
* @param {HTMLElement} btnElement 按钮元素
* @param {"ok"|"close"} type 触发事件类型
* @param {object} event 事件配置，由popsHandler.handleEventDetails创建的
* @param {(event)=>{}} callback 点击回调
*/
handlePromptClickEvent(inputElement, btnElement, type, event, callback) {
PopsDOMUtils.on(
btnElement,
"click",
void 0,
function () {
let _event_ = {
type: type,
text: inputElement.value,
};
_event_ = Object.assign(event, _event_);
callback(_event_);
},
{
capture: true,
}
);
},
/**
* 处理config.only
* @param {"alert"|"confirm"|"prompt"|"loading"|"tooltip"|"iframe"|"drawer"|"folder"|"rightClickMenu"} type 当前弹窗类型
* @param {object} config 配置
* @returns {object}
*/
handleOnly(type, config) {
if (config.only) {
if (
type === "loading" ||
type === "tooltip" ||
type === "rightClickMenu"
) {
PopsUtils.configRemove([pops.config.layer[type]], "", true);
} else {
PopsUtils.configRemove(
[
pops.config.layer.alert,
pops.config.layer.confirm,
pops.config.layer.prompt,
pops.config.layer.iframe,
pops.config.layer.drawer,
pops.config.layer.folder,
pops.config.layer.panel,
],
"",
true
);
}
} else {
config.zIndex = PopsUtils.getPopsMaxZIndex(config.zIndex)["zIndex"] * 2;
}
return config;
},
/**
* 处理把已创建的元素保存到内部环境中
* @param {"alert"|"confirm"|"prompt"|"loading"|"tooltip"|"iframe"|"drawer"|"folder"|"panel"} type 当前弹窗类型
* @param {PopsLayerCommonConfig} value
*/
handlePush(type, value) {
pops.config.layer[type].push(value);
},
};
const PopsElementHandler = {
/**
* 获取遮罩层HTML
* @param {string} guid
* @param {number} zIndex z-index
* @param {string} [style=""] style
* @returns {string}
*/
getMaskHTML(guid, zIndex, style = "") {
zIndex = zIndex - 100;
return `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
},
/**
* 获取动画层HTML
* @param {string} guid
* @param {"alert"|"confirm"|"iframe"|"loading"|"prompt"|"drawer"|"folder"|"panel"} type
* @param {object} config
* @param {string} html
* @param {string} bottomBtnHTML
*/
getAnimHTML(guid, type, config, html = "", bottomBtnHTML = "") {
let popsAnimStyle = "";
let popsStyle = "";
let popsPosition = config.position || "";
if (config.zIndex != null) {
popsAnimStyle += `z-index: ${config.zIndex};`;
popsStyle += `z-index: ${config.zIndex};`;
}
if (config.width != null) {
popsStyle += `width: ${config.width};`;
}
if (config.height != null) {
popsStyle += `height: ${config.height};`;
}
/* 是否存在底部按钮 */
let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
return `<div
class="pops-anim"
anim="${config.animation || ""}"
style="${popsAnimStyle};"
data-guid="${guid}">
${
config.style != null
? `<style tyle="text/css">${config.style}</style>`
: ""
}
<div
class="pops ${config.class || ""}"
data-bottom-btn="${hasBottomBtn}"
type-value="${type}"
style="${popsStyle}"
position="${popsPosition}"
data-guid="${guid}">
${html}
</div>
</div>`;
},
/**
* 获取顶部按钮层HTML
* @param {"alert"|"confirm"|"iframe"|"prompt"|"drawer"|"folder"|"panel"} type
* @param {PopsIframeDetails} config
* @returns {string}
*/
getHeaderBtnHTML(type, config) {
if (!config.btn) {
return "";
}
if (type !== "iframe" && !config.btn?.close?.enable) {
return "";
}
let resultHTML = "";
let btnStyle = "";
let closeHTML = "";
if (type === "iframe" && config.topRightButton?.trim() !== "") {
/* iframe的 */
let topRightButtonHTML = "";
config.topRightButton.split("|").forEach((item) => {
item = item.toLowerCase();
topRightButtonHTML += `
<button class="pops-header-control" type="${item}">
<i class="pops-icon">${pops.config.iconSVG[item]}</i>
</button>`;
});
resultHTML = `
<div class="pops-header-controls" data-margin>
${topRightButtonHTML}
</div>`;
} else {
if (config.btn?.close?.enable) {
closeHTML = `
<div class="pops-header-controls">
<button class="pops-header-control" type="close" data-header>
<i class="pops-icon">${pops.config.iconSVG["close"]}</i>
</button>
</div>`;
}
resultHTML = closeHTML;
}
return resultHTML;
},
/**
* 获取底部按钮层HTML
* @param {"alert"|"confirm"|"prompt"|"drawer"|"folder"} type
* @param {PopsConfirmDetails|PopsAlertDetails|PopsPromptDetails|PopsDrawerDetails} config
* @returns {string}
*/
getBottomBtnHTML(type, config) {
if (!config.btn) {
return "";
}
if (
!(
config.btn?.ok?.enable ||
config.btn?.cancel?.enable ||
config.btn?.other?.enable
)
) {
return "";
}
let btnStyle = "";
let resultHTML = "";
let okHTML = "";
let cancelHTML = "";
let ohterHTML = "";
if (config.btn.position) {
btnStyle += `justify-content: ${config.btn.position};`;
}
if (config.btn.reverse) {
btnStyle += "flex-direction: row-reverse;";
}
if (config.btn?.ok?.enable) {
/* 处理确定按钮的尺寸问题 */
let okButtonSizeClassName = "";
if (config.btn.ok.size === "large") {
okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
} else if (config.btn.ok.size === "small") {
okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
}
let okIconHTML = "";
if (config.btn.ok.icon !== "") {
okIconHTML = `
<i class="pops-bottom-icon" is-loading="${
config.btn.ok.iconIsLoading
}">
${
config.btn.ok.icon in pops.config.iconSVG
? pops.config.iconSVG[config.btn.ok.icon]
: config.btn.ok.icon
}
</i>`;
}
okHTML = `
<button
class="pops-${type}-btn-ok ${okButtonSizeClassName}"
type="${config.btn.ok.type}"
data-icon="${config.btn.ok.icon}"
data-rightIcon="${config.btn.ok.rightIcon}"
>
${okIconHTML}
<span>${config.btn.ok.text}</span>
</button>`;
}
if (config.btn?.cancel?.enable) {
/* 处理取消按钮的尺寸问题 */
let cancelButtonSizeClassName = "";
if (config.btn.cancel.size === "large") {
cancelButtonSizeClassName = "pops-button-" + config.btn.cancel.size;
} else if (config.btn.cancel.size === "small") {
cancelButtonSizeClassName = "pops-button-" + config.btn.cancel.size;
}
let cancelIconHTML = "";
if (config.btn.cancel.icon !== "") {
cancelIconHTML = `
<i class="pops-bottom-icon" is-loading="${
config.btn.cancel.iconIsLoading
}">
${
config.btn.cancel.icon in pops.config.iconSVG
? pops.config.iconSVG[config.btn.cancel.icon]
: config.btn.cancel.icon
}
</i>`;
}
cancelHTML = `
<button
class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
type="${config.btn.cancel.type}"
data-icon="${config.btn.cancel.icon}"
data-rightIcon="${config.btn.cancel.rightIcon}"
>
${cancelIconHTML}
<span>${config.btn.cancel.text}</span>
</button>`;
}
if (config.btn?.other?.enable) {
/* 处理其它按钮的尺寸问题 */
let otherButtonSizeClassName = "";
if (config.btn.other.size === "large") {
otherButtonSizeClassName = "pops-button-" + config.btn.other.size;
} else if (config.btn.other.size === "small") {
otherButtonSizeClassName = "pops-button-" + config.btn.other.size;
}
let otherIconHTML = "";
if (config.btn.other.icon !== "") {
otherIconHTML = `
<i class="pops-bottom-icon" is-loading="${
config.btn.other.iconIsLoading
}">
${
config.btn.other.icon in pops.config.iconSVG
? pops.config.iconSVG[config.btn.other.icon]
: config.btn.other.icon
}
</i>`;
}
ohterHTML = `
<button
class="pops-${type}-btn-other ${otherButtonSizeClassName}"
type="${config.btn.other.type}"
data-icon="${config.btn.other.icon}"
data-rightIcon="${config.btn.other.rightIcon}"
>
${otherIconHTML}
<span>${config.btn.other.text}</span>
</button>`;
}
if (config.btn.merge) {
resultHTML = `
<div class="pops-${type}-btn" style="${btnStyle}">
${ohterHTML}
<div
class="pops-${type}-btn-merge"
style="display: flex;
flex-direction: ${
config.btn.mergeReverse ? "row-reverse" : "row"
};
">
${okHTML}
${cancelHTML}
</div>
</div>
`;
} else {
resultHTML = `
<div class="pops-${type}-btn" style="${btnStyle}">
${okHTML}
${cancelHTML}
${ohterHTML}
</div>
`;
}
return resultHTML;
},
/**
* 获取标题style
* @param {"alert"|"confirm"|"prompt"|"drawer"|"folder"|"panel"} type
* @param {PopsAlertDetails|PopsConfirmDetails|PopsPromptDetails|PopsDrawerDetails} config
*/
getHeaderStyle(type, config) {
return {
headerStyle: config?.title?.html ? config?.title?.style || "" : "",
headerPStyle: config?.title?.html ? "" : config?.title?.style || "",
};
},
/**
* 获取内容style
* @param {"alert"|"confirm"|"prompt"|"drawer"} type
* @param {PopsAlertDetails|PopsConfirmDetails|PopsPromptDetails|PopsDrawerDetails} config
*/
getContentStyle(type, config) {
return {
contentStyle: config?.content?.html ? config?.content?.style || "" : "",
contentPStyle: config?.content?.html
? ""
: config?.content?.style || "",
};
},
/**
* 将html转换成元素
* @param {string} html
* @returns {HTMLElement}
*/
parseElement(html) {
return PopsUtils.parseTextToDOM(html);
},
};
/**
* 普通信息框
* @param { PopsAlertDetails } details 配置
*/
pops.alert = function (details) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.alertCSS,
]);
/**
* @type {PopsAlertDetails}
*/
let config = {
title: {
text: "默认标题",
position: "left",
html: false,
style: "",
},
content: {
text: "默认内容",
html: false,
style: "",
},
btn: {
position: "flex-end",
ok: {
size: "",
enable: true,
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "primary",
callback: function (event) {
event.close();
},
},
close: {
enable: true,
callback: function (event) {
event.close();
},
},
},
class: "",
only: false,
width: "350px",
height: "200px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 10000,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false,
},
clickCallBack: null,
},
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {},
dragEndCallBack() {},
forbiddenScroll: false,
style: void 0,
beforeAppendToPageCallBack() {},
};
config = PopsUtils.assignJSON(config, details);
let guid = PopsUtils.getRandomGUID();
const PopsType = "alert";
config = PopsHandler.handleOnly(PopsType, config);
let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
PopsType,
config
);
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
PopsType,
config
);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
`
<div
class="pops-alert-title"
style="text-align: ${config.title.position};
${headerStyle}">
${
config.title.html
? config.title.text
: `<p pops style="${headerPStyle}">${config.title.text}</p>`
}
${headerBtnHTML}
</div>
<div class="pops-alert-content" style="${contentStyle}">
${
config.content.html
? config.content.text
: `<p pops style="${contentPStyle}">${config.content.text}</p>`
}
</div>
${bottomBtnHTML}`,
bottomBtnHTML
);
/**
* 弹窗的主元素，包括动画层
*/
let animElement = PopsElementHandler.parseElement(animHTML);
let {
popsElement,
headerCloseBtnElement: btnCloseElement,
btnOkElement,
titleElement,
} = PopsHandler.handleQueryElement(animElement, PopsType);
/**
* 遮罩层元素
* @type {?HTMLDivElement}
*/
let maskElement = null;
/**
* 已创建的元素列表
* @type {HTMLElement[]}
*/
let elementList = [animElement];
/* 遮罩层元素 */
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid: guid,
config: config,
animElement: animElement,
maskHTML: maskHTML,
});
maskElement = _handleMask_.maskElement;
elementList.push(maskElement);
}
/* 处理返回的配置 */
let eventDetails = PopsHandler.handleEventDetails(
guid,
$shadowContainer,
$shadowRoot,
PopsType,
animElement,
popsElement,
maskElement,
config
);
/* 为顶部右边的关闭按钮添加点击事件 */
PopsHandler.handleClickEvent(
btnCloseElement,
"close",
eventDetails,
config.btn.close.callback
);
/* 为底部ok按钮添加点击事件 */
PopsHandler.handleClickEvent(
btnOkElement,
"ok",
eventDetails,
config.btn.ok.callback
);
/* 创建到页面中 */
PopsUtils.appendChild($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
if (maskElement != null) {
animElement.after(maskElement);
}
/* 保存 */
PopsHandler.handlePush(PopsType, {
guid: guid,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
});
/* 拖拽 */
if (config.drag) {
PopsUtils.drag(popsElement, {
dragElement: titleElement,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack,
});
}
return PopsHandler.handleResultDetails(eventDetails);
};
/**
* 询问框
* @param {PopsConfirmDetails} details
*/
pops.confirm = function (details) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.confirmCSS,
]);
/**
* @type {PopsConfirmDetails}
*/
let config = {
title: {
text: "默认标题",
position: "left",
html: false,
style: "",
},
content: {
text: "默认内容",
html: false,
style: "",
},
btn: {
merge: false,
mergeReverse: false,
reverse: false,
position: "flex-end",
ok: {
enable: true,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "primary",
callback(event) {
event.close();
},
},
cancel: {
enable: true,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "关闭",
type: "default",
callback(event) {
event.close();
},
},
other: {
enable: false,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "其它按钮",
type: "default",
callback(event) {
event.close();
},
},
close: {
enable: true,
callback(event) {
event.close();
},
},
},
class: "",
only: false,
width: "350px",
height: "200px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 10000,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false,
},
clickCallBack: null,
},
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {},
dragEndCallBack() {},
forbiddenScroll: false,
style: void 0,
beforeAppendToPageCallBack() {},
};
config = PopsUtils.assignJSON(config, details);
let guid = PopsUtils.getRandomGUID();
const PopsType = "confirm";
config = PopsHandler.handleOnly(PopsType, config);
let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
PopsType,
config
);
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
PopsType,
config
);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
`
<div class="pops-confirm-title" style="text-align: ${
config.title.position
};${headerStyle}">
${
config.title.html
? config.title.text
: `<p pops style="${headerPStyle}">${config.title.text}</p>`
}
${headerBtnHTML}
</div>
<div class="pops-confirm-content" style="${contentStyle}">
${
config.content.html
? config.content.text
: `<p pops style="${contentPStyle}">${config.content.text}</p>`
}
</div>
${bottomBtnHTML}
`,
bottomBtnHTML
);
/**
* 弹窗的主元素，包括动画层
*/
let animElement = PopsElementHandler.parseElement(animHTML);
let {
popsElement,
titleElement,
headerCloseBtnElement: btnCloseElement,
btnOkElement,
btnCancelElement,
btnOtherElement,
} = PopsHandler.handleQueryElement(animElement, PopsType);
/**
* 遮罩层元素
* @type {?HTMLDivElement}
*/
let maskElement = null;
/**
* 已创建的元素列表
* @type {HTMLElement[]}
*/
let elementList = [animElement];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid: guid,
config: config,
animElement: animElement,
maskHTML: maskHTML,
});
maskElement = _handleMask_.maskElement;
elementList.push(maskElement);
}
let eventDetails = PopsHandler.handleEventDetails(
guid,
$shadowContainer,
$shadowRoot,
PopsType,
animElement,
popsElement,
maskElement,
config
);
PopsHandler.handleClickEvent(
btnCloseElement,
"close",
eventDetails,
config.btn.close.callback
);
PopsHandler.handleClickEvent(
btnOkElement,
"ok",
eventDetails,
config.btn.ok.callback
);
PopsHandler.handleClickEvent(
btnCancelElement,
"cancel",
eventDetails,
config.btn.cancel.callback
);
PopsHandler.handleClickEvent(
btnOtherElement,
"other",
eventDetails,
config.btn.other.callback
);
/* 创建到页面中 */
PopsUtils.appendChild($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
if (maskElement != null) {
animElement.after(maskElement);
}
PopsHandler.handlePush(PopsType, {
guid: guid,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
});
/* 拖拽 */
if (config.drag) {
0;
PopsUtils.drag(popsElement, {
dragElement: titleElement,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack,
});
}
return PopsHandler.handleResultDetails(eventDetails);
};
/**
* 输入框
* @param {PopsPromptDetails} details
*/
pops.prompt = function (details) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.promptCSS,
]);
/**
* @type {PopsPromptDetails}
*/
let config = {
title: {
text: "默认标题",
position: "left",
html: false,
style: "",
},
content: {
text: "",
password: false,
row: false,
focus: true,
placeholder: "默认提示",
style: "",
},
btn: {
merge: false,
mergeReverse: false,
reverse: false,
position: "flex-end",
ok: {
enable: true,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "success",
callback(event) {
console.log(event);
event.close();
},
},
cancel: {
enable: true,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "关闭",
type: "default",
callback(event) {
console.log(event);
event.close();
},
},
other: {
enable: false,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "其它按钮",
type: "default",
callback(event) {
console.log(event);
event.close();
},
},
close: {
enable: true,
callback(event) {
console.log(event);
event.close();
},
},
},
class: "",
only: false,
width: "350px",
height: "200px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 10000,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false,
},
clickCallBack: null,
},
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {},
dragEndCallBack() {},
forbiddenScroll: false,
style: void 0,
beforeAppendToPageCallBack() {},
};
config = PopsUtils.assignJSON(config, details);
let guid = PopsUtils.getRandomGUID();
const PopsType = "prompt";
config = PopsHandler.handleOnly(PopsType, config);
let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
PopsType,
config
);
let { contentPStyle } = PopsElementHandler.getContentStyle(
PopsType,
config
);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
`
<div class="pops-prompt-title" style="text-align: ${
config.title.position
};${headerStyle}">
${
config.title.html
? config.title.text
: `<p pops style="${headerPStyle}">${config.title.text}</p>`
}
${headerBtnHTML}
</div>
<div class="pops-prompt-content" style="${contentPStyle}">
${
config.content.row
? '<textarea pops="" placeholder="' +
config.content.placeholder +
'"></textarea>'
: '<input pops="" placeholder="' +
config.content.placeholder +
'" type="' +
(config.content.password ? "password" : "text") +
'">'
}
</div>
${bottomBtnHTML}
`,
bottomBtnHTML
);
/**
* 弹窗的主元素，包括动画层
* @type {HTMLDivElement}
*/
let animElement = PopsElementHandler.parseElement(animHTML);
let {
popsElement,
inputElement,
headerCloseBtnElement: btnCloseElement,
btnOkElement,
btnCancelElement,
btnOtherElement,
titleElement,
} = PopsHandler.handleQueryElement(animElement, PopsType);
/**
* 遮罩层元素
* @type {?HTMLDivElement}
*/
let maskElement = null;
/**
* 已创建的元素列表
* @type {HTMLElement[]}
*/
let elementList = [animElement];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid: guid,
config: config,
animElement: animElement,
maskHTML: maskHTML,
});
maskElement = _handleMask_.maskElement;
elementList.push(maskElement);
}
let eventDetails = PopsHandler.handleEventDetails(
guid,
$shadowContainer,
$shadowRoot,
PopsType,
animElement,
popsElement,
maskElement,
config
);
/* 输入框赋值初始值 */
inputElement.value = config.content.text;
PopsHandler.handlePromptClickEvent(
inputElement,
btnCloseElement,
"close",
eventDetails,
config.btn.close.callback
);
PopsHandler.handlePromptClickEvent(
inputElement,
btnOkElement,
"ok",
eventDetails,
config.btn.ok.callback
);
PopsHandler.handlePromptClickEvent(
inputElement,
btnCancelElement,
"cancel",
eventDetails,
config.btn.cancel.callback
);
PopsHandler.handlePromptClickEvent(
inputElement,
btnOtherElement,
"other",
eventDetails,
config.btn.other.callback
);
/* 创建到页面中 */
PopsUtils.appendChild($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
if (maskElement != null) {
animElement.after(maskElement);
}
PopsHandler.handlePush(PopsType, {
guid: guid,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
});
/* 拖拽 */
if (config.drag) {
PopsUtils.drag(popsElement, {
dragElement: titleElement,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack,
});
}
/* 设置自动获取焦点 */
if (config.content.focus) {
inputElement?.focus();
}
return PopsHandler.handleResultDetails(eventDetails);
};
/**
* 加载层
* @param {PopsLoadingDetails} details
*/
pops.loading = function (details) {
let that = this;
PopsHandler.handleInit();
/**
* @type {PopsLoadingDetails}
*/
let config = {
parent: document.body,
content: {
text: "加载中...",
icon: "loading",
style: "",
},
class: "",
only: false,
zIndex: 10000,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false,
},
clickCallBack: null,
},
animation: "pops-anim-fadein-zoom",
forbiddenScroll: false,
style: void 0,
addIndexCSS: true,
};
config = PopsUtils.assignJSON(config, details);
let guid = PopsUtils.getRandomGUID();
const PopsType = "loading";
config = PopsHandler.handleOnly(PopsType, config);
let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
let { contentPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
`
<div class="pops-loading-content">
${
config.addIndexCSS
? `
<style type="text/css" data-model-name="index">${pops.config.cssText.index}</style>
<style type="text/css" data-model-name="anim">${pops.config.cssText.anim}</style>
<style type="text/css" data-model-name="common">${pops.config.cssText.common}</style>
`
: ""
}
<style type="text/css" data-model-name="loadingCSS">${
pops.config.cssText.loadingCSS
}</style>
${
config.style != null
? `<style type="text/css">${config.style}</style>`
: ""
}
<p pops style="${contentPStyle}">${config.content.text}</p>
</div>
`,
""
);
/**
* 弹窗的主元素，包括动画层
* @type {HTMLDivElement}
*/
let animElement = PopsElementHandler.parseElement(animHTML);
let { popsElement } = PopsHandler.handleQueryElement(animElement, PopsType);
/**
* 遮罩层元素
* @type {?HTMLDivElement}
*/
let maskElement = null;
/**
* 已创建的元素列表
* @type {HTMLElement[]}
*/
let elementList = [animElement];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid: guid,
config: config,
animElement: animElement,
maskHTML: maskHTML,
});
maskElement = _handleMask_.maskElement;
elementList.push(maskElement);
}
let eventDetails = PopsHandler.handleEventDetails(
guid,
void 0,
void 0,
PopsType,
animElement,
popsElement,
maskElement,
config
);
PopsUtils.appendChild(config.parent, elementList);
if (maskElement != null) {
animElement.after(maskElement);
}
PopsHandler.handlePush(PopsType, {
guid: guid,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
});
return PopsHandler.handleResultDetails(eventDetails);
};
/**
* iframe层
* @param {PopsIframeDetails} details
*/
pops.iframe = function (details) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.iframeCSS,
]);
/**
* @type {PopsIframeDetails}
*/
let config = {
title: {
position: "center",
text: "",
html: false,
style: "",
},
loading: {
enable: true,
icon: true,
text: "",
style: "",
},
class: "",
url: window.location.href,
only: false,
zIndex: 10000,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false,
},
clickCallBack: null,
},
animation: "pops-anim-fadein-zoom",
position: "center",
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {},
dragEndCallBack() {},
width: "300px",
height: "250px",
topRightButton: "min|max|mise|close",
sandbox: false,
forbiddenScroll: false,
loadEndCallBack() {},
btn: {
min: {
callback() {},
},
max: {
callback() {},
},
mise: {
callback() {},
},
close: {
callback() {},
},
},
style: void 0,
beforeAppendToPageCallBack() {},
};
config = PopsUtils.assignJSON(config, details);
if (config.url == null) {
throw "config.url不能为空";
}
let guid = PopsUtils.getRandomGUID();
const PopsType = "iframe";
config = PopsHandler.handleOnly(PopsType, config);
let maskExtraStyle =
config.animation != null && config.animation != ""
? "position:absolute;"
: "";
let maskHTML = PopsElementHandler.getMaskHTML(
guid,
config.zIndex,
maskExtraStyle
);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let iframeLoadingHTML = '<div class="pops-loading"></div>';
let titleText =
config.title.text.trim() !== "" ? config.title.text : config.url;
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
PopsType,
config
);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
`
<div
class="pops-iframe-title"
style="text-align: ${config.title.position};${headerStyle}"
>
${
config.title.html
? titleText
: `<p pops style="${headerPStyle}">${titleText}</p>`
}
${headerBtnHTML}
</div>
<div class="pops-iframe-content">
<div class="pops-iframe-content-global-loading"></div>
<iframe
src="${config.url}"
pops
${
config.sandbox
? "sandbox='allow-forms allow-same-origin allow-scripts'"
: ""
}>
</iframe>
</div>
${config.loading.enable ? iframeLoadingHTML : ""}
`,
""
);
/**
* 弹窗的主元素，包括动画层
* @type {HTMLDivElement}
*/
let animElement = PopsElementHandler.parseElement(animHTML);
let {
popsElement,
headerCloseBtnElement,
headerControlsElement,
titleElement,
iframeElement,
loadingElement,
contentLoadingElement,
headerMinBtnElement,
headerMaxBtnElement,
headerMiseBtnElement,
} = PopsHandler.handleQueryElement(animElement, PopsType);
/**
* 遮罩层元素
* @type {?HTMLDivElement}
*/
let maskElement = null;
/**
* 已创建的元素列表
* @type {HTMLElement[]}
*/
let elementList = [animElement];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid: guid,
config: config,
animElement: animElement,
maskHTML: maskHTML,
});
maskElement = _handleMask_.maskElement;
elementList.push(maskElement);
}
let eventDetails = PopsHandler.handleEventDetails(
guid,
$shadowContainer,
$shadowRoot,
PopsType,
animElement,
popsElement,
maskElement,
config
);
eventDetails["iframeElement"] = iframeElement;
PopsDOMUtils.on(
animElement,
PopsDOMUtils.getAnimationEndNameList(),
void 0,
function () {
/* 动画加载完毕 */
animElement.style.width = "0%";
animElement.style.height = "0%";
}
);
PopsDOMUtils.on(iframeElement, "load", void 0, function () {
/* iframe加载中... */
loadingElement?.remove();
contentLoadingElement.style.animation =
"iframeLoadingChange_85 0.3s forwards";
PopsDOMUtils.on(
contentLoadingElement,
PopsDOMUtils.getAnimationEndNameList(),
void 0,
function () {
/* 动画加载完毕就移除 */
contentLoadingElement.remove();
}
);
if (config.title.text.trim() === "" && iframeElement.contentDocument) {
/* 同域名下的才可以获取网页标题 */
titleElement.querySelector("p").innerText =
iframeElement.contentDocument.title;
}
config.loadEndCallBack(eventDetails);
});
/* 创建到页面中 */
PopsUtils.appendChild($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
if (maskElement != null) {
animElement.after(maskElement);
}
/* 拖拽 */
if (config.drag) {
PopsUtils.drag(popsElement, {
dragElement: titleElement,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack,
});
}
let normalLeft = "";
/* 最小化按钮点击事件 */
PopsDOMUtils.on(
headerMinBtnElement,
"click",
void 0,
(event) => {
/**
* 所有最小化的iframe数组
* @type { HTMLElement[] }
*/
let allMinElementList = [];
pops.config.layer.iframe.forEach((item) => {
if (
item.animElement != animElement &&
item.popsElement.getAttribute("type-module") === "min"
) {
allMinElementList.push(item.popsElement);
}
});
let maxLeftValue = allMinElementList.length
? allMinElementList.length * 205
: 0;
popsElement.style.transitionDuration = "";
normalLeft = popsElement.style.left;
popsElement.style.left = maxLeftValue + "px";
popsElement.setAttribute("type-module", "min");
animElement
.querySelector(".pops-header-controls")
.setAttribute("type", "max");
config.btn.min.callback(event);
},
{
capture: true,
}
);
/* 最大化按钮点击事件 */
PopsDOMUtils.on(
headerMaxBtnElement,
"click",
void 0,
(event) => {
popsElement.style.transitionDuration = "";
normalLeft = popsElement.style.left;
popsElement.removeAttribute("type-module");
popsElement.setAttribute("type-module", "max");
headerControlsElement.setAttribute("type", "max");
headerMaxBtnElement.style.setProperty("display", "none");
headerMiseBtnElement.style.setProperty("display", "");
config.btn.max.callback(event);
},
{
capture: true,
}
);
/* 先隐藏窗口化按钮 */
headerMiseBtnElement?.style?.setProperty("display", "none");
/* 窗口化按钮点击事件 */
PopsDOMUtils.on(
headerMiseBtnElement,
"click",
void 0,
(event) => {
popsElement.style.transitionDuration = "";
popsElement.style.left = normalLeft;
headerControlsElement.removeAttribute("type");
popsElement.removeAttribute("type-module");
/**
* 所有最小化的iframe数组
* @type { HTMLElement[] }
*/
let allMinElementList = [];
pops.config.layer.iframe.forEach((item) => {
if (
item.animElement != animElement &&
popsElement.getAttribute("type-module") === "min"
) {
allMinElementList.push(item.popsElement);
}
});
allMinElementList.sort(
PopsUtils.sortElementListByProperty(
(obj) => {
return parseInt(getComputedStyle(obj).left);
},
(obj) => {
return parseInt(getComputedStyle(obj).left);
},
false
)
);
allMinElementList.forEach((item, index) => {
item.style.left = index * 205 + "px";
});
headerMiseBtnElement.style.setProperty("display", "none");
headerMaxBtnElement.style.setProperty("display", "");
config.btn.mise.callback(event);
},
{
capture: true,
}
);
/* 关闭按钮点击事件 */
PopsDOMUtils.on(
headerCloseBtnElement,
"click",
void 0,
(event) => {
PopsUtils.configRemove([that.config.layer.iframe], guid, false);
setTimeout(() => {
let allIsMinElementList = [];
pops.config.layer.iframe.forEach((item) => {
if (
item.animElement != animElement &&
popsElement.getAttribute("type-module") === "min"
) {
allIsMinElementList.push(item.popsElement);
}
});
allIsMinElementList.sort(
PopsUtils.sortElementListByProperty(
(obj) => {
return parseInt(getComputedStyle(obj).left);
},
(obj) => {
return parseInt(getComputedStyle(obj).left);
},
false
)
);
allIsMinElementList.forEach((item, index) => {
item.style.left = index * 205 + "px";
});
}, 1000 * 0.3);
config.btn.close.callback(event);
},
{
capture: true,
}
);
PopsHandler.handlePush(PopsType, {
guid: guid,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
});
let result = PopsHandler.handleResultDetails(eventDetails);
return result;
};
/**
* 提示框
* @param {PopsToolTipDetails} details
*/
pops.tooltip = function (details) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.tooltipCSS,
]);
/**
* @type {PopsToolTipDetails}
*/
let config = {
target: null,
content: "默认文字",
position: "top",
className: "",
alwaysShow: false,
triggerShowEventName: "mouseenter touchstart",
triggerCloseEventName: "mouseleave touchend",
zIndex: 10000,
only: false,
eventOption: {
passive: false,
capture: true,
once: false,
},
showBeforeCallBack() {},
showAfterCallBack() {},
closeBeforeCallBack() {},
closeAfterCallBack() {},
arrowDistance: 12.5,
otherDistance: 0,
style: void 0,
beforeAppendToPageCallBack() {},
};
config = PopsUtils.assignJSON(config, details);
if (!(config.target instanceof HTMLElement)) {
throw "config.target 必须是HTMLElement类型";
}
let guid = PopsUtils.getRandomGUID();
const PopsType = "tooltip";
config = PopsHandler.handleOnly(PopsType, config);
function getContent() {
return typeof config.content === "function"
? config.content()
: config.content;
}
/**
* 获取悬浮提示的元素信息
*/
function getToolTipElementInfo() {
let _toolTipHTML_ = `<div class="pops-tip"></div>`;
let _toolTipElement_ = PopsUtils.parseTextToDOM(_toolTipHTML_);
if (
typeof config.className === "string" &&
config.className.trim() !== ""
) {
PopsDOMUtils.addClassName(_toolTipElement_, config.className);
}
_toolTipElement_.setAttribute("data-guid", guid);
_toolTipElement_.style.zIndex = config.zIndex;
_toolTipElement_.innerHTML = `
<div style="text-align: center;">${getContent()}</div>
`;
/* 箭头元素 */
let _toolTipArrowHTML_ = '<div class="pops-tip-arrow"></div>';
let _toolTipArrowNode_ = PopsUtils.parseTextToDOM(_toolTipArrowHTML_);
_toolTipElement_.appendChild(_toolTipArrowNode_);
if (config.style != null) {
/* 添加自定义style */
let cssNode = document.createElement("style");
cssNode.setAttribute("type", "text/css");
cssNode.innerHTML = config.style;
_toolTipElement_.appendChild(cssNode);
}
return {
toolTipElement: _toolTipElement_,
toolTipArrowElement: _toolTipArrowNode_,
toolTipHTML: _toolTipHTML_,
toolTipArrowHTML: _toolTipArrowHTML_,
};
}
config.position = config.position.toLowerCase();
let { toolTipElement } = getToolTipElementInfo();
/**
* 设置 提示框的位置
* @param {object} positionDetails
*/
function setToolTipPosition(positionDetails) {
let positionDetail = positionDetails[config.position.toUpperCase()];
if (positionDetail) {
toolTipElement.style.left = positionDetail.left + "px";
toolTipElement.style.top = positionDetail.top + "px";
toolTipElement.setAttribute("data-motion", positionDetail.motion);
toolTipElement
.querySelector(".pops-tip-arrow")
.setAttribute("data-position", positionDetail.arrow);
} else {
console.error("不存在该位置", config.position);
}
}
/**
* 获取 提示框的位置
* @param {HTMLElement} targetElement 目标元素
* @param {number} arrowDistance 箭头和目标元素的距离
* @param {number} otherDistance 其它位置的偏移
*/
function getToolTipPosition(targetElement, arrowDistance, otherDistance) {
let targetElement_width = PopsDOMUtils.offset(targetElement).width;
let targetElement_height = PopsDOMUtils.offset(targetElement).height;
let targetElement_top = PopsDOMUtils.offset(targetElement).top;
let targetElement_bottom = PopsDOMUtils.offset(targetElement).bottom;
let targetElement_left = PopsDOMUtils.offset(targetElement).left;
let targetElement_right = PopsDOMUtils.offset(targetElement).right;
let toolTipElement_width = PopsDOMUtils.outerWidth(toolTipElement);
let toolTipElement_height = PopsDOMUtils.outerHeight(toolTipElement);
/* 目标元素的x轴的中间位置 */
let targetElement_X_center_pos =
targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
/* 目标元素的Y轴的中间位置 */
let targetElement_Y_center_pos =
targetElement_top +
targetElement_height / 2 -
toolTipElement_height / 2;
return {
TOP: {
left: targetElement_X_center_pos - otherDistance,
top: targetElement_top - toolTipElement_height - arrowDistance,
arrow: "bottom",
motion: "fadeInTop",
},
RIGHT: {
left: targetElement_left + targetElement_width + arrowDistance,
top: targetElement_Y_center_pos + otherDistance,
arrow: "left",
motion: "fadeInRight",
},
BOTTOM: {
left: targetElement_X_center_pos - otherDistance,
top: targetElement_top + targetElement_height + arrowDistance,
arrow: "top",
motion: "fadeInBottom",
},
LEFT: {
left: targetElement_left - toolTipElement_width - arrowDistance,
top: targetElement_Y_center_pos + otherDistance,
arrow: "right",
motion: "fadeInLeft",
},
};
}
/**
* 显示提示框
*/
function showToolTipNode() {
if (typeof config.showBeforeCallBack === "function") {
let result = config.showBeforeCallBack();
if (typeof result === "boolean" && !result) {
return;
}
}
if (!PopsUtils.contains($shadowRoot, toolTipElement)) {
PopsUtils.appendChild($shadowRoot, toolTipElement);
}
if (!PopsUtils.contains($shadowContainer)) {
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
}
setToolTipPosition(
getToolTipPosition(
config.target,
config.arrowDistance,
config.otherDistance
)
);
if (typeof config.showAfterCallBack === "function") {
config.showAfterCallBack(toolTipElement);
}
}
/**
* 关闭提示框
*/
function closeToolTipNode() {
if (typeof config.closeBeforeCallBack === "function") {
let result = config.closeBeforeCallBack(toolTipElement);
if (typeof result === "boolean" && !result) {
return;
}
}
toolTipElement.setAttribute(
"data-motion",
toolTipElement.getAttribute("data-motion").replace("fadeIn", "fadeOut")
);
if (typeof config.closeAfterCallBack === "function") {
config.closeAfterCallBack(toolTipElement);
}
}
/**
* 绑定 显示事件
*/
function onShowEvent() {
PopsDOMUtils.on(
config.target,
config.triggerShowEventName,
null,
showToolTipNode,
config.eventOption
);
}
/**
* 绑定 关闭事件
*/
function onCloseEvent() {
PopsDOMUtils.on(
config.target,
config.triggerCloseEventName,
null,
closeToolTipNode,
config.eventOption
);
}
/**
* 取消绑定 显示事件
*/
function offShowEvent() {
PopsDOMUtils.off(
config.target,
null,
config.triggerShowEventName,
showToolTipNode,
{
capture: true,
}
);
}
/**
* 取消绑定 关闭事件
*/
function offCloseEvent() {
PopsDOMUtils.off(
config.target,
null,
config.triggerCloseEventName,
closeToolTipNode,
{
capture: true,
}
);
}
/**
* 即使存在动画属性，但是当前设置的动画Out结束后移除元素
*/
function endEvent() {
if (toolTipElement.getAttribute("data-motion").includes("In")) {
return;
}
toolTipElement.remove();
}
if (config.alwaysShow) {
/* 总是显示 */
showToolTipNode();
return {
guid: guid,
config: config,
toolTipNode: toolTipElement,
show: showToolTipNode,
close() {
PopsDOMUtils.on(
toolTipElement,
PopsDOMUtils.getAnimationEndNameList(),
null,
endEvent,
config.eventOption
);
closeToolTipNode();
},
off: null,
on: null,
};
} else {
/* 事件触发才显示 */
/**
* 进入动画
*/
PopsDOMUtils.on(
toolTipElement,
"mouseenter touchstart",
void 0,
function () {
if (parseInt(getComputedStyle(this)) > 0.5) {
this.style.animationPlayState = "paused";
}
},
config.eventOption
);
/**
* 退出动画
*/
PopsDOMUtils.on(
toolTipElement,
"mouseleave touchend",
void 0,
function () {
this.style.animationPlayState = "running";
},
config.eventOption
);
PopsDOMUtils.on(
toolTipElement,
PopsDOMUtils.getAnimationEndNameList(),
null,
endEvent,
config.eventOption
);
onShowEvent();
onCloseEvent();
return {
guid: guid,
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
config: config,
toolTipNode: toolTipElement,
show: showToolTipNode,
close: closeToolTipNode,
off() {
offShowEvent();
offCloseEvent();
},
on() {
onShowEvent();
onCloseEvent();
},
};
}
};
/**
* 抽屉
* @param {PopsDrawerDetails} details
*/
pops.drawer = function (details) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.drawerCSS,
]);
/**
* @type {PopsDrawerDetails}
*/
let config = {
title: {
enable: true,
position: "center",
text: "默认标题",
html: false,
style: "height: 60px;line-height: 60px;",
},
content: {
text: "默认内容",
html: false,
style: "overflow: auto;padding: 0px 10px;",
},
btn: {
position: "flex-end",
ok: {
enable: true,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "primary",
callback(event) {
event.close();
},
},
cancel: {
enable: true,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "关闭",
type: "default",
callback(event) {
event.close();
},
},
other: {
enable: false,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "其它按钮",
type: "default",
callback(event) {
event.close();
},
},
close: {
enable: true,
callback(event) {
event.close();
},
},
},
mask: {
enable: true,
clickEvent: {
toClose: true,
toHide: false,
},
clickCallBack: null,
},
class: "",
zIndex: 10000,
only: false,
direction: "right",
size: "30%",
lockScroll: false,
closeOnPressEscape: true,
openDelay: 0,
closeDelay: 0,
borderRadius: 0,
style: void 0,
beforeAppendToPageCallBack() {},
};
config = PopsUtils.assignJSON(config, details);
let guid = PopsUtils.getRandomGUID();
const PopsType = "drawer";
config = PopsHandler.handleOnly(PopsType, config);
let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
PopsType,
config
);
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
PopsType,
config
);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
`
${
config.title.enable
? `
<div class="pops-${PopsType}-title" style="${headerStyle}">
${
config.title.html
? config.title.text
: `<p
pops
style="
width: 100%;
text-align: ${config.title.position};
${headerPStyle}">${config.title.text}</p>`
}
${headerBtnHTML}
</div>
`
: ""
}
<div class="pops-${PopsType}-content" style="${contentStyle}">
${
config.content.html
? config.content.text
: `<p pops style="${contentPStyle}">${config.content.text}</p>`
}
</div>
${bottomBtnHTML}
`,
bottomBtnHTML
);
/**
* 弹窗的主元素，包括动画层
*/
let animElement = PopsElementHandler.parseElement(animHTML);
let {
popsElement,
headerCloseBtnElement,
btnCancelElement,
btnOkElement,
btnOtherElement,
} = PopsHandler.handleQueryElement(animElement, PopsType);
/**
* 遮罩层元素
* @type {?HTMLDivElement}
*/
let maskElement = null;
/**
* 已创建的元素列表
* @type {HTMLElement[]}
*/
let elementList = [animElement];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid: guid,
config: config,
animElement: animElement,
maskHTML: maskHTML,
});
maskElement = _handleMask_.maskElement;
elementList.push(maskElement);
}
let eventDetails = PopsHandler.handleEventDetails(
guid,
$shadowContainer,
$shadowRoot,
PopsType,
animElement,
popsElement,
maskElement,
config
);
/* 处理方向 */
popsElement.setAttribute("direction", config.direction);
/* 处理border-radius */
/* 处理动画前的宽高 */
if (config.direction === "top") {
popsElement.style.setProperty("height", 0);
popsElement.style.setProperty(
"border-radius",
`0px 0px ${config.borderRadius}px ${config.borderRadius}px`
);
} else if (config.direction === "bottom") {
popsElement.style.setProperty("height", 0);
popsElement.style.setProperty(
"border-radius",
`${config.borderRadius}px ${config.borderRadius}px 0px 0px`
);
} else if (config.direction === "left") {
popsElement.style.setProperty("width", 0);
popsElement.style.setProperty(
"border-radius",
`0px ${config.borderRadius}px 0px ${config.borderRadius}px`
);
} else if (config.direction === "right") {
popsElement.style.setProperty("width", 0);
popsElement.style.setProperty(
"border-radius",
`${config.borderRadius}px 0px ${config.borderRadius}px 0px`
);
}
/* 按下Esc键触发关闭 */
if (config.closeOnPressEscape) {
PopsHandler.handleKeyboardEvent("Escape", [], function () {
eventDetails.close();
});
}
/* 待处理的点击事件列表 */
let needHandleClickEventList = [
{ close: headerCloseBtnElement },
{ cancel: btnCancelElement },
{ ok: btnOkElement },
{ other: btnOtherElement },
];
needHandleClickEventList.forEach((item) => {
let btnName = Object.keys(item)[0];
PopsHandler.handleClickEvent(
item[btnName],
btnName,
eventDetails,
function (_eventDetails_) {
if (typeof config.btn[btnName].callback === "function") {
config.btn[btnName].callback(_eventDetails_);
}
}
);
});
/* 先隐藏，然后根据config.openDelay来显示 */
elementList.forEach((element) => {
element.style.setProperty("display", "none");
if (["top"].includes(config.direction)) {
popsElement.style.setProperty("height", config.size);
popsElement.style.setProperty("transform", "translateY(-100%)");
} else if (["bottom"].includes(config.direction)) {
popsElement.style.setProperty("height", config.size);
popsElement.style.setProperty("transform", "translateY(100%)");
} else if (["left"].includes(config.direction)) {
popsElement.style.setProperty("width", config.size);
popsElement.style.setProperty("transform", "translateX(-100%)");
} else if (["right"].includes(config.direction)) {
popsElement.style.setProperty("width", config.size);
popsElement.style.setProperty("transform", "translateX(100%)");
}
element.style.setProperty("display", "");
});
/* 创建到页面中 */
PopsUtils.appendChild($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
setTimeout(() => {
setTimeout(() => {
popsElement.style.setProperty("transform", "");
}, config.openDelay);
}, 50);
if (maskElement != null) {
animElement.after(maskElement);
}
PopsHandler.handlePush(PopsType, {
guid: guid,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
});
return PopsHandler.handleResultDetails(eventDetails);
};
/**
* 文件夹
* @param {PopsFolderDetails} details
*/
pops.folder = function (details) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.folderCSS,
]);
/**
* @type {PopsFolderDetails}
*/
let config = {
title: {
text: "pops.Folder",
position: "center",
html: false,
style: "",
},
sort: {
name: "latestTime",
isDesc: false,
callback() {},
},
folder: [
{
fileName: "测试文件夹",
fileSize: 0,
fileType: "",
createTime: 0,
latestTime: 0,
isFolder: true,
index: 0,
clickEvent() {
return [
{
fileName: "内部-测试文件.zip",
fileSize: 1025000,
fileType: "zip",
createTime: 1702038410440,
latestTime: 1702039602126,
isFolder: false,
index: 1,
clickEvent() {
console.log("下载文件：", this.fileName);
return "https://update.greasyfork.org/scripts/456485/pops.js";
},
},
];
},
},
{
fileName: "测试文件.apk",
fileSize: 30125682,
fileType: "apk",
createTime: 1702036410440,
latestTime: 1702039410440,
isFolder: false,
index: 1,
clickEvent() {
console.log("下载文件：", this.fileName);
return "https://update.greasyfork.org/scripts/456485/pops.js";
},
},
],
btn: {
merge: false,
mergeReverse: false,
reverse: false,
position: "flex-end",
ok: {
enable: true,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "primary",
callback(event) {
event.close();
},
},
cancel: {
enable: true,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "关闭",
type: "default",
callback(event) {
event.close();
},
},
other: {
enable: false,
size: "",
icon: "",
rightIcon: false,
iconIsLoading: false,
text: "其它按钮",
type: "default",
callback(event) {
event.close();
},
},
close: {
enable: true,
callback(event) {
event.close();
},
},
},
class: "",
only: false,
width: "500px",
height: "400px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 10000,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false,
},
clickCallBack: null,
},
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {},
dragEndCallBack() {},
forbiddenScroll: false,
style: void 0,
beforeAppendToPageCallBack() {},
};
/**
* 图标
*/
const Folder_ICON = {
folder:
"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",
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==",
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=",
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=",
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",
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==",
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=",
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=",
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=",
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==",
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=",
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",
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=",
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",
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",
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",
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=",
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==",
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==",
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==",
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",
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=",
};
/* 办公几件套 */
Folder_ICON.docx = Folder_ICON.doc;
Folder_ICON.rtf = Folder_ICON.doc;
Folder_ICON.xlsx = Folder_ICON.xls;
Folder_ICON.pptx = Folder_ICON.ppt;
Folder_ICON.dmg = Folder_ICON.ipa;
Folder_ICON.json = Folder_ICON.js;
/* 压缩包 */
let zipIconList = [
"rar",
"7z",
"arj",
"bz2",
"cab",
"iso",
"jar",
"lz",
"lzh",
"tar",
"uue",
"xz",
"z",
"zipx",
"zst",
"001",
];
/* 图片 */
let imageIconList = ["jpg", "jpeg", "ico", "webp"];
/* 代码语言 */
let codeLanguageIconList = [
"htm",
"py",
"vue",
"bat",
"sh",
"vbs",
"java",
"kt",
];
/* Android安装包 */
let androidIconList = ["apk", "apkm", "xapk"];
zipIconList.forEach((keyName) => {
Folder_ICON[keyName] = Folder_ICON.zip;
});
imageIconList.forEach((keyName) => {
Folder_ICON[keyName] = Folder_ICON.png;
});
codeLanguageIconList.forEach((keyName) => {
Folder_ICON[keyName] = Folder_ICON.html;
});
androidIconList.forEach((keyName) => {
Folder_ICON[keyName] = Folder_ICON.apk;
});
config = PopsUtils.assignJSON(config, details);
if (details?.folder) {
config.folder = details.folder;
}
let guid = PopsUtils.getRandomGUID();
const PopsType = "folder";
config = PopsHandler.handleOnly(PopsType, config);
let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
PopsType,
config
);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
`
<div class="pops-folder-title" style="text-align: ${
config.title.position
};${headerStyle}">
${
config.title.html
? config.title.text
: `<p pops style="${headerPStyle}">${config.title.text}</p>`
}
${headerBtnHTML}
</div>
<div class="pops-folder-content ${
pops.isPhone() ? "pops-mobile-folder-content" : ""
}">
<div class="pops-folder-list">
<div class="pops-folder-file-list-breadcrumb">
<div class="pops-folder-file-list-breadcrumb-primary">
<span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
<a>全部文件</a>
</span>
</div>
</div>
<div class="pops-folder-list-table__header-div">
<table class="pops-folder-list-table__header">
<colgroup>
<!-- <col width="8%"> --!>
<col width="52%">
<col width="24%">
<col width="16%">
</colgroup>
<thead>
<tr class="pops-folder-list-table__header-row">
<th class="pops-folder-list-table__header-th cursor-p">
<div class="text-ellip content flex-a-i-center">
<span>文件名</span>
<div class="pops-folder-list-table__sort" data-sort="fileName">
<div class="pops-folder-icon-arrow">
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg">
<path
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
class="pops-folder-icon-arrow-up"></path>
<path
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
class="pops-folder-icon-arrow-down"></path>
</svg>
</div>
</div>
</div>
</th>
<th class="pops-folder-list-table__header-th cursor-p">
<div class="text-ellip content flex-a-i-center">
<span>修改时间</span>
<div class="pops-folder-list-table__sort" data-sort="latestTime">
<div class="pops-folder-icon-arrow">
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg">
<path
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
class="pops-folder-icon-arrow-up"></path>
<path
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
class="pops-folder-icon-arrow-down"></path>
</svg>
</div>
</div>
</div>
</th>
<th class="pops-folder-list-table__header-th cursor-p">
<div class="text-ellip content flex-a-i-center">
<span>大小</span>
<div class="pops-folder-list-table__sort" data-sort="fileSize">
<div class="pops-folder-icon-arrow">
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg">
<path
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
class="pops-folder-icon-arrow-up"></path>
<path
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
class="pops-folder-icon-arrow-down"></path>
</svg>
</div>
</div>
</div>
</th>
</tr>
</thead>
</table>
</div>
<div class="pops-folder-list-table__body-div">
<table class="pops-folder-list-table__body">
<colgroup>
<!-- <col width="8%"> --!>
${
pops.isPhone()
? `<col width="100%">`
: `
<col width="52%">
<col width="24%">
<col width="16%">`
}
</colgroup>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
${bottomBtnHTML}
`,
bottomBtnHTML
);
/**
* 弹窗的主元素，包括动画层
*/
let animElement = PopsElementHandler.parseElement(animHTML);
let {
popsElement,
titleElement,
contentElement,
folderListElement,
folderListHeaderElement,
folderListHeaderRowElement,
folderListBodyElement,
folderFileListBreadcrumbPrimaryElement,
headerCloseBtnElement: btnCloseElement,
btnOkElement,
btnCancelElement,
btnOtherElement,
folderListSortFileNameElement,
folderListSortLatestTimeElement,
folderListSortFileSizeElement,
} = PopsHandler.handleQueryElement(animElement, PopsType);
/**
* 遮罩层元素
* @type {?HTMLDivElement}
*/
let maskElement = null;
/**
* 已创建的元素列表
* @type {HTMLElement[]}
*/
let elementList = [animElement];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid: guid,
config: config,
animElement: animElement,
maskHTML: maskHTML,
});
maskElement = _handleMask_.maskElement;
elementList.push(maskElement);
}
/* 事件 */
let eventDetails = PopsHandler.handleEventDetails(
guid,
$shadowContainer,
$shadowRoot,
PopsType,
animElement,
popsElement,
maskElement,
config
);
PopsHandler.handleClickEvent(
btnCloseElement,
"close",
eventDetails,
config.btn.close.callback
);
PopsHandler.handleClickEvent(
btnOkElement,
"ok",
eventDetails,
config.btn.ok.callback
);
PopsHandler.handleClickEvent(
btnCancelElement,
"cancel",
eventDetails,
config.btn.cancel.callback
);
PopsHandler.handleClickEvent(
btnOtherElement,
"other",
eventDetails,
config.btn.other.callback
);
/* 创建到页面中 */
PopsUtils.appendChild($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
if (maskElement != null) {
animElement.after(maskElement);
}
/* 添加文件信息 */
config.folder.sort();
/**
* 创建文件夹元素
* @param {string} fileName
* @param {string} [fileSize="-"]
* @param {string} [latestTime="-"]
*/
function createFolderRowElement(
fileName,
latestTime = "-",
fileSize = "-"
) {
let origin_fileName = fileName;
let origin_latestTime = latestTime;
let origin_fileSize = fileSize;
let folderELement = PopsDOMUtils.createElement("tr");
let fileNameElement = PopsDOMUtils.createElement("td");
let fileTimeElement = PopsDOMUtils.createElement("td");
let fileFormatSize = PopsDOMUtils.createElement("td");
let fileType = "";
let fileIcon = Folder_ICON.folder;
if (arguments.length === 1) {
/* 文件夹 */
latestTime = "";
fileSize = "";
} else {
/* 文件 */
fileIcon = "";
if (typeof latestTime === "number") {
latestTime = PopsUtils.formatTime(latestTime);
}
if (typeof fileSize === "number") {
fileSize = PopsUtils.formatByteToSize(fileSize);
}
for (let keyName in Folder_ICON) {
if (fileName.toLowerCase().endsWith("." + keyName)) {
fileType = keyName;
fileIcon = Folder_ICON[keyName];
break;
}
}
if (!Boolean(fileIcon)) {
fileType = "Null";
fileIcon = Folder_ICON.Null;
}
}
folderELement.className = "pops-folder-list-table__body-row";
fileNameElement.className = "pops-folder-list-table__body-td";
fileTimeElement.className = "pops-folder-list-table__body-td";
fileFormatSize.className = "pops-folder-list-table__body-td";
fileNameElement.innerHTML = `
<div class="pops-folder-list-file-name cursor-p">
<div>
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
${fileName}
</a>
</div>
</div>
`;
fileTimeElement.innerHTML = `
<div class="pops-folder-list__time">
<span>${latestTime}</span>
</div>
`;
fileFormatSize.innerHTML = `
<div class="pops-folder-list-format-size">
<span>${fileSize}</span>
</div>
`;
/* 存储原来的值 */
let __value__ = {
fileName: origin_fileName,
latestTime: origin_latestTime,
fileSize: origin_fileSize,
};
fileNameElement["__value__"] = __value__;
fileTimeElement["__value__"] = __value__;
fileFormatSize["__value__"] = __value__;
folderELement["__value__"] = __value__;
folderELement.appendChild(fileNameElement);
folderELement.appendChild(fileTimeElement);
folderELement.appendChild(fileFormatSize);
return {
folderELement,
fileNameElement,
fileTimeElement,
fileFormatSize,
};
}
/**
* 创建移动端文件夹元素
* @param {string} fileName
*/
function createMobileFolderRowElement(
fileName,
latestTime = "-",
fileSize = "-"
) {
let origin_fileName = fileName;
let origin_latestTime = latestTime;
let origin_fileSize = fileSize;
let folderELement = PopsDOMUtils.createElement("tr");
let fileNameElement = PopsDOMUtils.createElement("td");
let fileType = "";
let fileIcon = Folder_ICON.folder;
if (arguments.length === 1) {
/* 文件夹 */
latestTime = "";
fileSize = "";
} else {
/* 文件 */
fileIcon = "";
if (typeof latestTime === "number") {
latestTime = PopsUtils.formatTime(latestTime);
}
if (typeof fileSize === "number") {
fileSize = PopsUtils.formatByteToSize(fileSize);
}
for (let keyName in Folder_ICON) {
if (fileName.toLowerCase().endsWith("." + keyName)) {
fileType = keyName;
fileIcon = Folder_ICON[keyName];
break;
}
}
if (!Boolean(fileIcon)) {
fileType = "Null";
fileIcon = Folder_ICON.Null;
}
}
folderELement.className = "pops-folder-list-table__body-row";
fileNameElement.className = "pops-folder-list-table__body-td";
fileNameElement.innerHTML = `
<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
<div>
<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
${fileName}
</a>
<span>${latestTime} ${fileSize}</span>
</div>
</div>
`;
/* 存储原来的值 */
let __value__ = {
fileName: origin_fileName,
latestTime: origin_latestTime,
fileSize: origin_fileSize,
};
fileNameElement["__value__"] = __value__;
folderELement["__value__"] = __value__;
folderELement.appendChild(fileNameElement);
return {
folderELement,
fileNameElement,
};
}
/**
* 清空每行的元素
*/
function clearFolerRow() {
folderListBodyElement.innerHTML = "";
}
function getArrowIconElement() {
let iconArrowElement = PopsDOMUtils.createElement("div", {
className: "iconArrow",
});
return iconArrowElement;
}
/**
* 添加顶部导航
* @param {string} name
* @param {PopsFolderDataConfig} _config_
* @returns
*/
function getBreadcrumbAllFilesElement(name, _config_) {
let spanElement = PopsDOMUtils.createElement(
"span",
{
className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
innerHTML: `<a>${name}</a>`,
_config_: _config_,
},
{
title: "name",
}
);
return spanElement;
}
/**
* 顶部导航的点击事件
* @param {Event} event
* @param {boolean} isTop 是否是全部文件按钮
* @param {PopsFolderDataConfig} _config_ 配置
*/
function breadcrumbAllFilesElementClickEvent(event, isTop, _config_) {
clearFolerRow();
/* 获取当前的导航元素 */
let currentBreadcrumb = event.target.closest(
"span.pops-folder-file-list-breadcrumb-allFiles"
);
if (currentBreadcrumb) {
while (currentBreadcrumb.nextElementSibling) {
currentBreadcrumb.nextElementSibling.remove();
}
} else {
console.error("获取导航按钮失败");
}
let loadingMask = pops.loading({
parent: contentElement,
content: {
text: "获取文件列表中...",
},
mask: {
enable: true,
clickEvent: {
toClose: false,
toHide: false,
},
},
addIndexCSS: false,
});
addFolderElement(_config_);
loadingMask.close();
}
/**
* 刷新文件列表界面信息
* @param {Event} event
* @param {PopsFolderDataConfig} _config_
*/
async function refreshFolderInfoClickEvent(event, _config_) {
clearFolerRow();
let loadingMask = pops.loading({
parent: contentElement,
content: {
text: "获取文件列表中...",
},
mask: {
enable: true,
},
addIndexCSS: false,
});
if (typeof _config_.clickEvent === "function") {
let childConfig = await _config_.clickEvent(event, _config_);
/* 添加顶部导航的箭头 */
folderFileListBreadcrumbPrimaryElement.appendChild(
getArrowIconElement()
);
/* 获取顶部导航 */
let breadcrumbAllFilesElement = getBreadcrumbAllFilesElement(
_config_["fileName"],
childConfig
);
folderFileListBreadcrumbPrimaryElement.appendChild(
breadcrumbAllFilesElement
);
/* 设置顶部导航点击事件 */
PopsDOMUtils.on(
breadcrumbAllFilesElement,
"click",
void 0,
function (event) {
breadcrumbAllFilesElementClickEvent(event, false, childConfig);
}
);
addFolderElement(childConfig);
}
loadingMask.close();
}
/**
* 设置文件点击事件
* @param {HTMLElement} targetElement
* @param {PopsFolderDataConfig} _config_
*/
function setFileClickEvent(targetElement, _config_) {
PopsDOMUtils.on(targetElement, "click", void 0, async function (event) {
event?.preventDefault();
event?.stopPropagation();
event?.stopImmediatePropagation();
let linkElement = targetElement.querySelector("a");
if (typeof _config_.clickEvent === "function") {
let downloadInfo = await _config_.clickEvent(event, _config_);
if (
typeof downloadInfo === "object" &&
typeof downloadInfo.url === "string" &&
downloadInfo.url.trim() !== ""
) {
linkElement.setAttribute("href", downloadInfo.url);
linkElement.setAttribute("target", "_blank");
if (downloadInfo.autoDownload) {
if (downloadInfo.mode == null || downloadInfo.mode === "") {
/* 未设置mode的话默认为aBlank */
downloadInfo.mode = "aBlank";
}
if (downloadInfo.mode === "a" || downloadInfo.mode === "aBlank") {
/* a标签下载 */
let downloadLinkElement = document.createElement("a");
if (downloadInfo.mode === "aBlank") {
downloadLinkElement.setAttribute("target", "_blank");
}
downloadLinkElement.href = downloadInfo.url;
downloadLinkElement.click();
} else if (
downloadInfo.mode === "open" ||
downloadInfo.mode === "openBlank"
) {
/* window.open下载 */
if (downloadInfo.mode === "openBlank") {
globalThis.open(downloadInfo.url, "_blank");
} else {
globalThis.open(downloadInfo.url);
}
} else if (downloadInfo.mode === "iframe") {
/* iframe下载 */
let downloadIframeLinkElement =
document.createElement("iframe");
downloadIframeLinkElement.src = downloadInfo.url;
downloadIframeLinkElement.onload = function () {
setTimeout(() => {
downloadIframeLinkElement.remove();
}, 1000);
};
$shadowRoot.appendChild(downloadIframeLinkElement);
setTimeout(() => {
downloadIframeLinkElement.remove();
}, 3 * 60 * 1000);
} else {
console.error("未知的下载模式", downloadInfo);
}
}
}
}
});
}
/**
* 对配置进行排序
* @param {PopsFolderDataConfig[]} _config_
* @param {"fileName"|"fileSize"|"latestTime"} sortName 比较的属性，默认fileName
* @param {boolean} isDesc 是否降序，默认false（升序）
*/
function sortFolderConfig(_config_, sortName = "fileName", isDesc = false) {
_config_.sort((a, b) => {
let beforeVal = a[sortName];
let afterVal = b[sortName];
if (sortName === "fileName") {
/* 文件名，进行字符串转换 */
beforeVal = beforeVal.toString();
afterVal = afterVal.toString();
} else if (sortName === "fileSize") {
/* 文件大小，进行Float转换 */
beforeVal = parseFloat(beforeVal);
afterVal = parseFloat(afterVal);
} else if (sortName === "latestTime") {
/* 文件时间 */
beforeVal = new Date(beforeVal).getTime();
afterVal = new Date(afterVal).getTime();
}
if (typeof beforeVal === "string" && typeof afterVal === "string") {
let compareVal = beforeVal.localeCompare(afterVal);
if (isDesc) {
/* 降序 */
if (compareVal > 0) {
compareVal = -1;
} else if (compareVal < 0) {
compareVal = 1;
}
}
return compareVal;
} else {
if (beforeVal > afterVal) {
if (isDesc) {
/* 降序 */
return -1;
} else {
return 1;
}
} else if (beforeVal < afterVal) {
if (isDesc) {
/* 降序 */
return 1;
} else {
return -1;
}
} else {
return 0;
}
}
});
return _config_;
}
/**
* 添加元素
* @param {PopsFolderDataConfig[]} _config_
*/
function addFolderElement(_config_) {
sortFolderConfig(_config_, config.sort.name, config.sort.isDesc);
_config_.forEach((item) => {
if (item["isFolder"]) {
let { folderELement, fileNameElement } = pops.isPhone()
? createMobileFolderRowElement(item["fileName"])
: createFolderRowElement(item["fileName"]);
PopsDOMUtils.on(fileNameElement, "click", void 0, function (event) {
refreshFolderInfoClickEvent(event, item);
});
folderListBodyElement.appendChild(folderELement);
} else {
let { folderELement, fileNameElement } = pops.isPhone()
? createMobileFolderRowElement(
item["fileName"],
item["latestTime"],
item["fileSize"]
)
: createFolderRowElement(
item["fileName"],
item["latestTime"],
item["fileSize"]
);
setFileClickEvent(fileNameElement, item);
folderListBodyElement.appendChild(folderELement);
}
});
}
addFolderElement(config.folder);
/* 将数据存到全部文件的属性_config_中 */
let allFilesElement = folderFileListBreadcrumbPrimaryElement.querySelector(
".pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child"
);
allFilesElement._config_ = config.folder;
/* 设置点击顶部的全部文件事件 */
PopsDOMUtils.on(allFilesElement, "click", void 0, function (event) {
breadcrumbAllFilesElementClickEvent(event, true, config.folder);
});
/* 移除所有的当前排序的arrow */
function removeAllArrowActive() {
[
...folderListSortFileNameElement.querySelectorAll(
".pops-folder-icon-active"
),
...folderListSortLatestTimeElement.querySelectorAll(
".pops-folder-icon-active"
),
...folderListSortFileSizeElement.querySelectorAll(
".pops-folder-icon-active"
),
].forEach((ele) => ele.classList.remove("pops-folder-icon-active"));
}
/* 设置当前的排序的arrow */
function changeArrowActive(arrowUp, arrowDown, isDesc) {
removeAllArrowActive();
if (isDesc) {
arrowDown.classList.add("pops-folder-icon-active");
} else {
arrowUp.classList.add("pops-folder-icon-active");
}
}
/**
* 排序按钮的点击事件
* @param {PointerEvent} target
* @param {HTMLElement} event
* @param {string} sortName
* @returns
*/
function arrowSortClickEvent(target, event, sortName) {
if (!event["notChangeSortRule"]) {
config.sort.name = sortName;
config.sort.isDesc = !config.sort.isDesc;
}
let arrowUp = target.querySelector(".pops-folder-icon-arrow-up");
let arrowDown = target.querySelector(".pops-folder-icon-arrow-down");
changeArrowActive(arrowUp, arrowDown, config.sort.isDesc);
if (
typeof config.sort.callback === "function" &&
config.sort.callback(
target,
event,
config.sort.name,
config.sort.isDesc
)
) {
return;
}
let childrenList = [];
Array.from(folderListBodyElement.children).forEach((trElement) => {
let __value__ = trElement["__value__"];
__value__["target"] = trElement;
childrenList.push(__value__);
});
let sortedConfigList = sortFolderConfig(
childrenList,
config.sort.name,
config.sort.isDesc
);
sortedConfigList.forEach((item) => {
folderListBodyElement.appendChild(item.target);
});
}
/* 设置当前排序的图标按钮 */
PopsDOMUtils.on(
folderListSortFileNameElement.closest("th"),
"click",
void 0,
function (event) {
arrowSortClickEvent(folderListSortFileNameElement, event, "fileName");
},
{
capture: true,
}
);
PopsDOMUtils.on(
folderListSortLatestTimeElement.closest("th"),
"click",
void 0,
function (event) {
arrowSortClickEvent(
folderListSortLatestTimeElement,
event,
"latestTime"
);
},
{
capture: true,
}
);
PopsDOMUtils.on(
folderListSortFileSizeElement.closest("th"),
"click",
void 0,
function (event) {
arrowSortClickEvent(folderListSortFileSizeElement, event, "fileSize");
},
{
capture: true,
}
);
/* 设置默认触发的arrow */
if (config.sort.name === "fileName") {
PopsDOMUtils.trigger(folderListSortFileNameElement, "click", {
notChangeSortRule: true,
});
} else if (config.sort.name === "latestTime") {
PopsDOMUtils.trigger(folderListSortLatestTimeElement, "click", {
notChangeSortRule: true,
});
} else if (config.sort.name === "fileSize") {
PopsDOMUtils.trigger(folderListSortFileSizeElement, "click", {
notChangeSortRule: true,
});
}
/* 拖拽 */
if (config.drag) {
PopsUtils.drag(popsElement, {
dragElement: titleElement,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack,
});
}
PopsHandler.handlePush(PopsType, {
guid: guid,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
});
return PopsHandler.handleResultDetails(eventDetails);
};
/**
* 配置面板
* @param { PopsPanelDetails } details 配置
*/
pops.panel = function (details) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.panelCSS,
]);
/**
* @type {PopsPanelDetails}
*/
let config = {
title: {
text: "默认标题",
position: "center",
html: false,
style: "",
},
content: [
{
id: "whitesev-panel-config-1",
title: "菜单配置1",
headerTitle: "菜单配置1",
isDefault: true,
attributes: [
{
"data-test": "test",
"data-test-2": "test2",
},
],
forms: [
{
className: "forms-1",
text: "区域设置",
type: "forms",
attributes: [],
forms: [
{
className: "panel-switch",
text: "switch",
type: "switch",
attributes: [],
getValue() {
return true;
},
callback(event, value) {
console.log("按钮开启状态：", value);
},
},
{
className: "panel-slider",
text: "slider",
type: "slider",
attributes: [],
getValue() {
return 50;
},
callback(event, value) {
console.log("滑块当前数值：", value);
},
min: 1,
max: 100,
},
{
className: "panel-button",
text: "button",
type: "button",
attributes: [],
buttonIcon: "eleme",
buttonIconIsLoading: true,
buttonType: "warning",
buttonText: "warning按钮",
callback(event) {
console.log("点击按钮", event);
},
},
{
className: "panel-button",
text: "button",
type: "button",
attributes: [],
buttonIcon: "chromeFilled",
buttonIconIsLoading: true,
buttonType: "danger",
buttonText: "danger按钮",
callback(event) {
console.log("点击按钮", event);
},
},
{
className: "panel-button",
text: "button",
type: "button",
attributes: [],
buttonIcon: "upload",
buttonIconIsLoading: false,
buttonType: "info",
buttonText: "info按钮",
callback(event) {
console.log("点击按钮", event);
},
},
],
},
],
},
{
id: "whitesev-panel-config-2",
title: "菜单配置2",
headerTitle: "菜单配置2",
isDefault: false,
attributes: [
{
"data-value": "value",
"data-value-2": "value2",
},
],
forms: [
{
className: "panel-input",
text: "input",
type: "input",
attributes: [],
getValue() {
return 50;
},
callback(event, value) {
console.log("输入框内容改变：", value);
},
placeholder: "请输入内容",
},
{
className: "panel-input-password",
text: "input-password",
type: "input",
attributes: [],
getValue() {
return "123456";
},
callback(event, value) {
console.log("密码输入框内容改变：", value);
},
isPassword: true,
placeholder: "请输入密码",
},
{
className: "panel-textarea",
text: "textarea",
type: "textarea",
attributes: [],
getValue() {
return 50;
},
callback(event, value) {
console.log("textarea输入框内容改变：", value);
},
placeholder: "请输入内容",
},
{
className: "panel-select",
text: "select",
type: "select",
attributes: [],
getValue() {
return 50;
},
callback(event, isSelectedValue, isSelectedText) {
console.log(
`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`
);
},
data: [
{
value: "all",
text: "所有",
},
{
value: "text",
text: "文本",
selected: true,
},
{
value: "html",
text: "超文本",
},
],
},
],
},
],
btn: {
close: {
enable: true,
callback(event) {
event.close();
},
},
},
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false,
},
clickCallBack: null,
},
class: "",
mobileClassName: "pops-panel-is-mobile",
isMobile: false,
only: false,
width: "700px",
height: "500px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 10000,
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {},
dragEndCallBack() {},
forbiddenScroll: false,
style: void 0,
beforeAppendToPageCallBack() {},
};
config = PopsUtils.assignJSON(config, details);
if (details && Array.isArray(details.content)) {
config.content = details.content;
}
let guid = PopsUtils.getRandomGUID();
const PopsType = "panel";
config = PopsHandler.handleOnly(PopsType, config);
let maskHTML = PopsElementHandler.getMaskHTML(guid, config.zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
PopsType,
config
);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
`
<div
class="pops-${PopsType}-title"
style="text-align: ${config.title.position};
${headerStyle}">
${
config.title.html
? config.title.text
: `<p pops style="${headerPStyle}">${config.title.text}</p>`
}
${headerBtnHTML}
</div>
<div class="pops-${PopsType}-content">
<aside class="pops-${PopsType}-aside">
<ul></ul>
</aside>
<section class="pops-${PopsType}-container">
<ul class="pops-panel-container-header-ul"></ul>
<ul></ul>
</section>
</div>
`,
""
);
/**
* 弹窗的主元素，包括动画层
*/
let animElement = PopsElementHandler.parseElement(animHTML);
/* 结构元素 */
let {
popsElement,
headerCloseBtnElement: btnCloseElement,
titleElement,
contentElement,
contentAsideElement,
contentSectionContainerElement,
} = PopsHandler.handleQueryElement(animElement, PopsType);
if (config.isMobile || pops.isPhone()) {
PopsDOMUtils.addClassName(popsElement, config.mobileClassName);
}
/**
* 遮罩层元素
* @type {?HTMLDivElement}
*/
let maskElement = null;
/**
* 已创建的元素列表
* @type {HTMLElement[]}
*/
let elementList = [animElement];
/* 遮罩层元素 */
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid: guid,
config: config,
animElement: animElement,
maskHTML: maskHTML,
});
maskElement = _handleMask_.maskElement;
elementList.push(maskElement);
}
/* 处理返回的配置 */
let eventDetails = PopsHandler.handleEventDetails(
guid,
$shadowContainer,
$shadowRoot,
PopsType,
animElement,
popsElement,
maskElement,
config
);
/* 为顶部右边的关闭按钮添加点击事件 */
PopsHandler.handleClickEvent(
btnCloseElement,
"close",
eventDetails,
config.btn.close.callback
);
/* 创建到页面中 */
PopsUtils.appendChild($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
/* 追加遮罩层元素 */
if (maskElement != null) {
animElement.after(maskElement);
}
/**
* 处理内部配置
*/
const HandleContetDetails = {
/**
* @type {HTMLUListElement}
*/
asideULElement: null,
/**
* @type {HTMLUListElement}
*/
sectionContainerHeaderULElement: null,
/**
* @type {HTMLUListElement}
*/
sectionContainerULElement: null,
init() {
this.asideULElement = contentAsideElement.querySelector("ul");
this.sectionContainerHeaderULElement =
contentSectionContainerElement.querySelectorAll("ul")[0];
this.sectionContainerULElement =
contentSectionContainerElement.querySelectorAll("ul")[1];
/**
* 默认点击的左侧容器
* @type {HTMLLIElement}
*/
let asideDefaultItemElement = null;
let isScrollToDefaultView = false;
config.content.forEach((asideItem) => {
let asideLiElement = this.getAsideItem(asideItem);
this.setAsideItemClickEvent(asideLiElement, asideItem);
this.asideULElement.appendChild(asideLiElement);
if (asideDefaultItemElement == null) {
let flag = false;
if (typeof asideItem.isDefault === "function") {
flag = Boolean(asideItem.isDefault());
} else {
flag = Boolean(asideItem.isDefault);
}
if (flag) {
asideDefaultItemElement = asideLiElement;
isScrollToDefaultView = Boolean(asideItem.scrollToDefaultView);
}
}
});
/* 点击左侧列表 */
if (
asideDefaultItemElement == null &&
this.asideULElement.children.length
) {
/* 默认第一个 */
asideDefaultItemElement = this.asideULElement.children[0];
}
if (asideDefaultItemElement) {
/* 点击选择的那一项 */
asideDefaultItemElement.click();
if (isScrollToDefaultView) {
asideDefaultItemElement?.scrollIntoView();
}
} else {
console.error("左侧容器没有项");
}
},
/**
* 清空container容器的元素
*/
clearContainer() {
this.sectionContainerHeaderULElement.innerHTML = "";
this.sectionContainerULElement.innerHTML = "";
},
/**
* 清空左侧容器已访问记录
*/
clearAsideItemIsVisited() {
contentAsideElement
.querySelectorAll(".pops-is-visited")
.forEach((element) => {
PopsDOMUtils.removeClassName(element, "pops-is-visited");
});
},
/**
* 设置左侧容器已访问记录
* @param {HTMLElement} element
*/
setAsideItemIsVisited(element) {
PopsDOMUtils.addClassName(element, "pops-is-visited");
},
/**
* 为元素添加自定义属性
* @param {HTMLElement} element
* @param {object | object[]} attributes
*/
addElementAttributes(element, attributes) {
if (attributes == null) {
return;
}
if (Array.isArray(attributes)) {
attributes.forEach((attrObject) => {
this.addElementAttributes(element, attrObject);
});
} else {
Object.keys(attributes).forEach((attributeName) => {
element.setAttribute(attributeName, attributes[attributeName]);
});
}
},
/**
* 为元素设置(自定义)属性
* @param {HTMLElement} element
* @param {?HTMLElement} props
*/
setElementProps(element, props) {
if (props == null) {
return;
}
Object.keys(props).forEach((propName) => {
element[propName] = props[propName];
});
},
/**
* 获取左侧容器元素<li>
* @param { PopsPanelContentConfig } asideConfig
* @returns
*/
getAsideItem(asideConfig) {
let liElement = document.createElement("li");
liElement.id = asideConfig.id;
liElement.__forms__ = asideConfig.forms;
liElement.innerHTML = asideConfig.title;
this.addElementAttributes(liElement, asideConfig.attributes);
this.setElementProps(liElement, asideConfig.props);
return liElement;
},
/**
* 获取中间容器的元素<li>
* type ==> switch
* @param {PopsPanelSwitchDetails} formConfig
* @returns
*/
getSectionContainerItem_switch(formConfig) {
function setSwitchChecked(
switchElement,
switchInputElement,
checked = false
) {
switchInputElement.checked = Boolean(checked);
if (checked) {
PopsDOMUtils.addClassName(
switchElement,
"pops-panel-switch-is-checked"
);
} else {
PopsDOMUtils.removeClassName(
switchElement,
"pops-panel-switch-is-checked"
);
}
}
let liElement = document.createElement("li");
liElement.__formConfig__ = formConfig;
if (formConfig.className) {
liElement.className = formConfig.className;
}
this.addElementAttributes(liElement, formConfig.attributes);
this.setElementProps(liElement, formConfig.props);
/* 左边底部的描述的文字 */
let leftDescriptionText = "";
if (Boolean(formConfig.description)) {
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
}
liElement.innerHTML = `
<div class="pops-panel-item-left-text">
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
${leftDescriptionText}
</div>
<div class="pops-panel-switch">
<input class="pops-panel-switch__input" type="checkbox">
<span class="pops-panel-switch__core">
<div class="pops-panel-switch__action">
</div>
</span>
</div>
`;
const PopsPanelSwitch = {
[Symbol.toStringTag]: "PopsPanelSwitch",
$data: {
value: Boolean(formConfig.getValue()),
},
$ele: {
/**
* @type {HTMLDivElement}
*/
switch: liElement.querySelector(".pops-panel-switch"),
/**
* @type {HTMLInputElement}
*/
input: liElement.querySelector(".pops-panel-switch__input"),
/**
* @type {HTMLSpanElement}
*/
core: liElement.querySelector(".pops-panel-switch__core"),
},
init() {
this.setStatus(this.$data.value);
if (formConfig.disabled) {
this.disable();
}
this.setClickEvent();
},
setClickEvent() {
let that = this;
PopsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
if (
that.$ele.input.disabled ||
that.$ele.switch.hasAttribute("data-disabled")
) {
return;
}
that.$data.value = that.getStatus();
that.setStatus(that.$data.value);
if (typeof formConfig.callback === "function") {
formConfig.callback(event, that.$data.value);
}
});
},
/**
* 设置状态
*/
setStatus(isChecked = false) {
isChecked = Boolean(isChecked);
this.$ele.input.checked = isChecked;
if (isChecked) {
PopsDOMUtils.addClassName(
this.$ele.switch,
"pops-panel-switch-is-checked"
);
} else {
PopsDOMUtils.removeClassName(
this.$ele.switch,
"pops-panel-switch-is-checked"
);
}
},
/**
* 根据className来获取逆反值
*/
getStatus() {
let checkedValue = false;
if (
!PopsDOMUtils.containsClassName(
this.$ele.switch,
"pops-panel-switch-is-checked"
)
) {
checkedValue = true;
}
return checkedValue;
},
/**
* 禁用复选框
*/
disable() {
this.$ele.input.disabled = true;
this.$ele.switch.setAttribute("data-disabled", true);
},
/**
* 启用复选框
*/
notDisable() {
this.$ele.input.disabled = false;
this.$ele.switch.removeAttribute("data-disabled");
},
};
PopsPanelSwitch.init();
liElement["data-switch"] = PopsPanelSwitch;
return liElement;
},
/**
* 获取中间容器的元素<li>
* type ==> slider
* @param {PopsPanelSliderDetails} formConfig
* @returns
*/
getSectionContainerItem_slider(formConfig) {
let liElement = document.createElement("li");
liElement.__formConfig__ = formConfig;
if (formConfig.className) {
liElement.className = formConfig.className;
}
this.addElementAttributes(liElement, formConfig.attributes);
this.setElementProps(liElement, formConfig.props);
/* 左边底部的描述的文字 */
let leftDescriptionText = "";
if (Boolean(formConfig.description)) {
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
}
liElement.innerHTML = `
<div class="pops-panel-item-left-text">
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
${leftDescriptionText}
</div>
<div class="pops-panel-slider">
<input type="range" min="${formConfig.min}" max="${formConfig.max}">
</div>
`;
/**
* @type {HTMLInputElement}
*/
let rangeInputElement = liElement.querySelector(
".pops-panel-slider input[type=range]"
);
if (formConfig.step) {
rangeInputElement.setAttribute("step", formConfig.step);
}
rangeInputElement.value = formConfig.getValue();
/**
* 获取提示的内容
* @param {number} value
* @returns {string}
*/
let getToolTipContent = function (value) {
if (typeof formConfig.getToolTipContent === "function") {
return formConfig.getToolTipContent(value);
} else {
return value;
}
};
let tooltip = pops.tooltip({
target: rangeInputElement.parentElement,
content: getToolTipContent(rangeInputElement.value),
zIndex: 1000000,
className: "github-tooltip",
triggerShowEventCallBack(toolTipNode) {
toolTipNode.querySelector("div").innerText = getToolTipContent(
rangeInputElement.value
);
},
alwaysShow: false,
only: false,
position: "top",
arrowDistance: 10,
});
PopsDOMUtils.on(
rangeInputElement,
["input", "propertychange"],
void 0,
function (event) {
tooltip.toolTipNode.querySelector("div").innerText =
getToolTipContent(rangeInputElement.value);
if (typeof formConfig.callback === "function") {
formConfig.callback(event, event.target.value);
}
}
);
return liElement;
},
/**
* 获取中间容器的元素<li>
* type ==> slider
* @param {PopsPanelSliderDetails} formConfig
* @returns
*/
getSectionContainerItem_slider_new(formConfig) {
let liElement = document.createElement("li");
liElement.__formConfig__ = formConfig;
if (formConfig.className) {
liElement.className = formConfig.className;
}
this.addElementAttributes(liElement, formConfig.attributes);
this.setElementProps(liElement, formConfig.props);
/* 左边底部的描述的文字 */
let leftDescriptionText = "";
if (Boolean(formConfig.description)) {
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
}
liElement.innerHTML = `
<div class="pops-panel-item-left-text" style="flex: 1;">
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
${leftDescriptionText}
</div>
<div class="pops-slider pops-slider-width">
<div class="pops-slider__runway">
<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
<div
class="pops-slider__button-wrapper"
style="left: 0%">
<div class="pops-slider__button"></div>
</div>
</div>
</div>
`;
const PopsPanelSlider = {
[Symbol.toStringTag]: "PopsPanelSlider",
/**
* 值
*/
value: formConfig.getValue(),
/**
* 最小值
*/
min: formConfig.min,
/**
* 最大值
*/
max: formConfig.max,
/**
* 间隔
*/
step: formConfig.step || 1,
$data: {
/**
* 是否正在移动
*/
isMove: false,
/**
* 是否已初始化已拖拽的距离
*/
isInitDragPosition: false,
/**
* 是否正在检测是否停止拖拽
*/
isCheckingStopDragMove: false,
/**
* 总宽度（px）
*/
totalWidth: 0,
/**
* 每一块的间隔（px）
*/
stepPx: 0,
/**
* 已拖拽的距离（px）
*/
dragWidth: 0,
/**
* 已拖拽的百分比
*/
dragPercent: 0,
/**
* 每一次块的信息
* 例如：当最小值是2，最大值是10，step为2
* 那么生成[2,4,6,8,10] 共计5个
* 又获取到当前滑块总长度是200px
* 那么生成映射
* 2 => 0px~40px
* 4 => 40px~80px
* 6 => 80px~120px
* 8 => 120px~160px
* 10 => 160px~200px
* @type {Map<number,{
* value: number,
* px: number,
* pxLeft: number,
* pxRight: number,
* percent: number,
* }>}
*/
stepBlockMap: new Map(),
},
$ele: {
slider: liElement.querySelector(".pops-slider"),
runAway: liElement.querySelector(".pops-slider__runway"),
bar: liElement.querySelector(".pops-slider__bar"),
buttonWrapper: liElement.querySelector(
".pops-slider__button-wrapper"
),
button: liElement.querySelector(".pops-slider__button"),
/**
* @type {{
* guid: string,
* $shadowContainer: HTMLDivElement,
* $shadowRoot: ShadowRoot,
* config: PopsToolTipDetails,
* toolTipNode: HTMLDivElement,
* show: ()=>void,
* close: ()=>void,
* off: ()=>void,
* on: ()=>void,
* }}
*/
tooltip: null,
},
$interval: {
isCheck: false,
},
$tooltip: null,
init() {
this.initEleData();
this.setToolTipEvent();
this.setPanEvent();
this.setRunAwayClickEvent();
this.intervalInit();
if (formConfig.disabled) {
this.disableDrag();
}
},
/**
* 10s内循环获取slider的宽度等信息
* 获取到了就可以初始化left的值
* @param {number} [checkStepTime=200] 每次检测的间隔时间
* @param {number} [maxTime=10000] 最大的检测时间
*/
intervalInit(checkStepTime = 200, maxTime = 10000) {
if (this.$interval.isCheck) {
return;
}
this.$interval.isCheck = true;
let isSuccess = false;
let oldTotalWidth = this.$data.totalWidth;
let timer = null;
let interval = setInterval(() => {
if (isSuccess) {
this.$interval.isCheck = false;
clearTimeout(timer);
clearInterval(interval);
} else {
this.initTotalWidth();
if (this.$data.totalWidth !== 0) {
isSuccess = true;
if (this.$data.totalWidth !== oldTotalWidth) {
/* slider的总宽度改变了 */
if (MathFloatUtils.isFloat(this.step)) {
this.initFloatStepMap();
} else {
this.initStepMap();
}
this.initSliderPosition();
}
}
}
}, checkStepTime);
/* 最长检测时间是10s */
timer = setTimeout(() => {
clearInterval(interval);
}, maxTime);
},
/**
* 把数据添加到元素上
*/
initEleData() {
this.$ele.slider.setAttribute("data-min", this.min);
this.$ele.slider.setAttribute("data-max", this.max);
this.$ele.slider.setAttribute("data-value", this.value);
this.$ele.slider.setAttribute("data-step", this.step);
this.$ele.slider["data-min"] = this.min;
this.$ele.slider["data-max"] = this.max;
this.$ele.slider["data-value"] = this.value;
this.$ele.slider["data-step"] = this.step;
},
/**
* 初始化滑块的总长度的数据(px)
*/
initTotalWidth() {
this.$data.totalWidth = PopsDOMUtils.width(this.$ele.runAway);
},
/**
* 初始化每一个块的具体数据信息
*/
initStepMap() {
let index = 0;
// 计算出份数
let blockNums = (this.max - this.min) / this.step;
// 计算出每一份占据的px
this.$data.stepPx = this.$data.totalWidth / blockNums;
let widthPx = 0;
for (
let stepValue = this.min;
stepValue <= this.max;
stepValue += this.step
) {
let value = this.formatValue(stepValue);
let info = {};
if (value === this.min) {
/* 起始 */
info = {
value: value,
px: 0,
pxLeft: 0,
pxRight: this.$data.stepPx / 2,
percent: 0,
};
} else {
info = {
value: value,
px: widthPx,
pxLeft: widthPx - this.$data.stepPx / 2,
pxRight: widthPx + this.$data.stepPx / 2,
percent: widthPx / this.$data.totalWidth,
};
//if (value === this.max) {
// info["pxLeft"] = this.$data.stepBlockMap.get(
// index - 1
// ).pxRight;
// info["pxRight"] = this.$data.totalWidth;
//}
}
this.$data.stepBlockMap.set(index, info);
index++;
widthPx += this.$data.stepPx;
}
},
/**
* 初始化每一个块的具体数据信息（浮点）
*/
initFloatStepMap() {
let index = 0;
// 计算出份数
let blockNums = (this.max - this.min) / this.step;
// 计算出每一份占据的px
this.$data.stepPx = this.$data.totalWidth / blockNums;
let widthPx = 0;
for (
let stepValue = this.min;
stepValue <= this.max;
stepValue = MathFloatUtils.add(stepValue, this.step)
) {
let value = this.formatValue(stepValue);
let info = {};
if (value === this.min) {
/* 起始 */
info = {
value: value,
px: 0,
pxLeft: 0,
pxRight: this.$data.stepPx / 2,
percent: 0,
};
} else {
info = {
value: value,
px: widthPx,
pxLeft: widthPx - this.$data.stepPx / 2,
pxRight: widthPx + this.$data.stepPx / 2,
percent: widthPx / this.$data.totalWidth,
};
//if (value === this.max) {
// info["pxLeft"] = this.$data.stepBlockMap.get(
// index - 1
// ).pxRight;
// info["pxRight"] = this.$data.totalWidth;
//}
}
this.$data.stepBlockMap.set(index, info);
index++;
widthPx += this.$data.stepPx;
}
},
/**
* 初始化slider的默认起始left的百分比值
*/
initSliderPosition() {
/* 设置起始默认style的left值 */
let percent = 0;
for (const [
index,
stepBlockInfo,
] of this.$data.stepBlockMap.entries()) {
/* 判断值是否和区域内的值相等 */
if (stepBlockInfo.value == this.value) {
percent = stepBlockInfo.percent;
this.$data.dragWidth = stepBlockInfo.px;
break;
}
}
percent = this.formatValue(percent * 100);
this.setSliderPosition(percent);
},
/**
* 判断数字是否是浮点数
* @param {number} num
* @returns
*/
isFloat(num) {
return Number(num) === num && num % 1 !== 0;
},
/**
* 值改变的回调
* @param {any} event
* @param {number} value
*/
valueChangeCallBack(event, value) {
if (typeof formConfig.callback === "function") {
formConfig.callback(event, value);
}
},
/**
* 根据拖拽距离获取滑块应该在的区间和值
*/
getDragInfo(dragX) {
let result = this.$data.stepBlockMap.get(0);
for (const [
index,
stepBlockInfo,
] of this.$data.stepBlockMap.entries()) {
if (
stepBlockInfo.pxLeft <= dragX &&
dragX < stepBlockInfo.pxRight
) {
result = stepBlockInfo;
break;
}
}
return result;
},
/**
* 获取滑块的当前脱拖拽占据的百分比
* @param {number} dragWidth
*/
getSliderPositonPercent(dragWidth) {
return dragWidth / this.$data.totalWidth;
},
/**
* 根据step格式化value
* @param {number} num
*/
formatValue(num) {
if (MathFloatUtils.isFloat(this.step)) {
num = parseFloat(num.toFixed(2));
} else {
num = parseInt(num);
}
return num;
},
/**
* 设置滑块的位置偏移（left）
* @param {number} percent 百分比
*/
setSliderPosition(percent) {
if (parseInt(percent) === 1) {
percent = 1;
}
if (percent > 1) {
percent = percent / 100;
}
/* 滑块按钮的偏移 */
this.$ele.buttonWrapper.style.left = `${percent * 100}%`;
/* 滑块进度的宽度 */
this.$ele.bar.style.width = `${percent * 100}%`;
},
/**
* 禁止拖拽
*/
disableDrag() {
this.$ele.runAway.classList.add("pops-slider-is-disabled");
},
/**
* 允许拖拽
*/
allowDrag() {
this.$ele.runAway.classList.remove("pops-slider-is-disabled");
},
/**
* 判断当前滑块是否被禁用
*/
isDisabledDrag() {
return this.$ele.runAway.classList.contains(
"pops-slider-is-disabled"
);
},
/**
* 设置进度条点击定位的事件
*/
setRunAwayClickEvent() {
PopsDOMUtils.on(
this.$ele.runAway,
"click",
void 0,
/**
*
* @param {PointerEvent} event
*/
(event) => {
if (
event.target !== this.$ele.runAway &&
event.target !== this.$ele.bar
) {
return;
}
let clickX = parseFloat(event.offsetX);
this.dragStartCallBack();
this.dragMoveCallBack(event, clickX, this.value);
this.dragEndCallBack(clickX);
},
{
capture: false,
}
);
},
/**
* 拖拽开始的回调，如果返回false，禁止拖拽
*/
dragStartCallBack() {
if (!this.$data.isMove) {
if (this.isDisabledDrag()) {
return false;
}
this.$data.isMove = true;
}
return true;
},
/**
* 拖拽中的回调
* @param {MouseEvent|TouchEvent} event 事件
* @param {number} dragX 当前拖拽的距离
* @param {number} oldValue 旧的值
*/
dragMoveCallBack(event, dragX, oldValue) {
let dragPercent = 0;
if (dragX <= 0) {
dragPercent = 0;
this.value = this.min;
} else if (dragX >= this.$data.totalWidth) {
dragPercent = 1;
this.value = this.max;
} else {
const dragInfo = this.getDragInfo(dragX);
dragPercent = dragInfo.percent;
this.value = this.formatValue(dragInfo.value);
}
this.$data.dragPercent = dragPercent;
this.setSliderPosition(this.$data.dragPercent);
this.showToolTip();
if (oldValue !== this.value) {
this.valueChangeCallBack(event, this.value);
}
},
/**
* 拖拽结束的回调
*/
dragEndCallBack(dragX) {
this.$data.isMove = false;
if (dragX <= 0) {
this.$data.dragWidth = 0;
} else if (dragX >= this.$data.totalWidth) {
this.$data.dragWidth = this.$data.totalWidth;
} else {
this.$data.dragWidth = dragX;
}
this.closeToolTip();
},
/**
* 设置点击拖拽事件
*/
setPanEvent() {
const AnyTouch = PopsUtils.AnyTouch();
this.$tooltip = new AnyTouch(this.$ele.button, {
preventEvent() {
return false;
},
});
/**
* 当前的拖拽的距离px
* @type {number}
*/
let currentDragX = 0;
/* 监听拖拽 */
this.$tooltip.on("at:move", (event) => {
if (!this.dragStartCallBack()) {
return;
}
let oldValue = this.value;
const runAwayRect = this.$ele.runAway.getBoundingClientRect();
let displacementX =
event.x - (runAwayRect.left + globalThis.screenX);
if (displacementX <= 0) {
displacementX = 0;
} else if (displacementX >= runAwayRect.width) {
displacementX = runAwayRect.width;
}
currentDragX = displacementX;
/* 拖拽移动 */
this.dragMoveCallBack(event, currentDragX, oldValue);
});
/* 监听触点离开，处理某些情况下，拖拽松开，但是未触发pan事件，可以通过设置这个来关闭tooltip */
this.$tooltip.on("at:end", (event) => {
this.dragEndCallBack(currentDragX);
});
},
/**
* 显示悬浮的
*/
showToolTip() {
this.$ele.tooltip.show();
},
/**
* 关闭悬浮的
*/
closeToolTip() {
this.$ele.tooltip.close();
},
/**
* 检测在1000ms内，是否停止了拖拽
*/
checkStopDragMove() {
if (this.$data.isCheckingStopDragMove) {
return;
}
this.$data.isCheckingStopDragMove = true;
let interval = setInterval(() => {
if (!this.$data.isMove) {
this.$data.isCheckingStopDragMove = false;
this.closeToolTip();
clearInterval(interval);
}
}, 200);
setTimeout(() => {
this.$data.isCheckingStopDragMove = false;
clearInterval(interval);
}, 2000);
},
/**
* 设置拖拽按钮的悬浮事件
*/
setToolTipEvent() {
/**
* 获取提示的内容
*/
function getToolTipContent() {
if (typeof formConfig.getToolTipContent === "function") {
return formConfig.getToolTipContent(PopsPanelSlider.value);
} else {
return PopsPanelSlider.value;
}
}
let tooltipContent = null;
this.$ele.tooltip = pops.tooltip({
target: this.$ele.button,
content: getToolTipContent,
zIndex: 1000000,
className: "github-tooltip",
only: false,
eventOption: {
capture: true,
passive: true,
},
showBeforeCallBack: () => {
this.intervalInit();
},
showAfterCallBack: (toolTipNode) => {
tooltipContent.innerText = getToolTipContent();
},
closeBeforeCallBack: () => {
if (this.$data.isMove) {
this.checkStopDragMove();
return false;
}
},
alwaysShow: false,
only: false,
position: "top",
arrowDistance: 10,
});
tooltipContent = this.$ele.tooltip.toolTipNode.querySelector("div");
},
};
PopsPanelSlider.init();
liElement["data-slider"] = PopsPanelSlider;
return liElement;
},
/**
* 获取中间容器的元素<li>
* type ==> input
* @param {PopsPanelInputDetails} formConfig
* @returns
*/
getSectionContainerItem_input(formConfig) {
let liElement = document.createElement("li");
liElement.__formConfig__ = formConfig;
if (formConfig.className) {
liElement.className = formConfig.className;
}
this.addElementAttributes(liElement, formConfig.attributes);
this.setElementProps(liElement, formConfig.props);
let inputType = "text";
if (formConfig.isPassword) {
inputType = "password";
} else if (formConfig.isNumber) {
inputType = "number";
}
/* 左边底部的描述的文字 */
let leftDescriptionText = "";
if (Boolean(formConfig.description)) {
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
}
liElement.innerHTML = `
<div class="pops-panel-item-left-text">
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
${leftDescriptionText}
</div>
<div class="pops-panel-input">
<input type="${inputType}" placeholder="${formConfig.placeholder}">
</div>
`;
const PopsPanelInput = {
[Symbol.toStringTag]: "PopsPanelInput",
$ele: {
/**
* @type {HTMLDivElement}
*/
panelInput: liElement.querySelector(".pops-panel-input"),
/**
* @type {HTMLInputElement}
*/
input: liElement.querySelector("input"),
inputSpanIcon: document.createElement("span"),
/**
* @type {HTMLSpanElement}
*/
inputSpanIconInner: null,
/**
* @type {HTMLElement}
*/
icon: null,
},
$data: {
value: formConfig.getValue(),
isView: false,
},
init() {
this.initEle();
this.setInputValue(this.$data.value);
/* 如果是密码框，放进图标 */
if (formConfig.isPassword) {
this.setCircleIcon(pops.config.iconSVG.view);
this.setCircleIconClickEvent();
} else {
/* 先判断预设值是否为空，不为空添加清空图标按钮 */
if (this.$ele.input.value != "") {
this.setCircleIcon(pops.config.iconSVG.circleClose);
this.setCircleIconClickEvent();
}
}
this.setInputChangeEvent();
if (formConfig.disabled) {
this.disable();
}
if (typeof formConfig.handlerCallBack === "function") {
formConfig.handlerCallBack(liElement, this.$ele.input);
}
},
/**
* 初始化$ele的配置
*/
initEle() {
this.$ele.input.parentElement.insertBefore(
this.$ele.inputSpanIcon,
this.$ele.input.nextSibling
);
this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
this.$ele.inputSpanIcon.innerHTML = `
<span class="pops-panel-input__suffix-inner">
<i class="pops-panel-icon"></i>
</span>
`;
this.$ele.inputSpanIconInner =
this.$ele.inputSpanIcon.querySelector(
".pops-panel-input__suffix-inner"
);
this.$ele.icon =
this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
},
/**
* 禁用
*/
disable() {
this.$ele.input.disabled = true;
this.$ele.panelInput.classList.add("pops-input-disabled");
},
/**
* 取消禁用
*/
notDisable() {
this.$ele.input.disabled = false;
this.$ele.panelInput.classList.remove("pops-input-disabled");
},
/**
* 判断是否已被禁用
*/
isDisabled() {
return this.$ele.input.disabled;
},
/**
* 设置输入框内容
* @param {string} [value=""] 值
*/
setInputValue(value = "") {
this.$ele.input.value = value;
},
/**
* 设置input元素的type
* @param {string} [typeValue="text"] type值
*/
setInputType(typeValue = "text") {
this.$ele.input.setAttribute("type", typeValue);
},
/**
* 删除图标按钮
*/
removeCircleIcon() {
this.$ele.icon.innerHTML = "";
},
/**
* 添加清空图标按钮
* @param {string} [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
*/
setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
this.$ele.icon.innerHTML = svgHTML;
},
/**
* 添加图标按钮的点击事件
*/
setCircleIconClickEvent() {
PopsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
if (this.isDisabled()) {
return;
}
/* 删除图标 */
this.removeCircleIcon();
if (formConfig.isPassword) {
/* 密码输入框 */
if (this.$data.isView) {
/* 当前可见 => 点击改变为隐藏 */
this.$data.isView = false;
/* 显示输入框内容，且更换图标为隐藏图标 */
this.setInputType("text");
this.setCircleIcon(pops.config.iconSVG.hide);
} else {
/* 当前不可见 => 点击改变为显示 */
this.$data.isView = true;
/* 隐藏输入框内容，且更换图标为显示图标 */
this.setInputType("password");
this.setCircleIcon(pops.config.iconSVG.view);
}
} else {
/* 普通输入框 */
/* 清空内容 */
this.setInputValue("");
/* 获取焦点 */
this.$ele.input.focus();
/* 触发内容改变事件 */
this.$ele.input.dispatchEvent(new Event("input"));
}
});
},
/**
* 监听输入框内容改变
*/
setInputChangeEvent() {
PopsDOMUtils.on(
this.$ele.input,
["input", "propertychange"],
void 0,
(event) => {
this.$data.value = this.$ele.input.value;
if (!formConfig.isPassword) {
/* 不是密码框 */
if (
this.$ele.input.value !== "" &&
this.$ele.icon.innerHTML === ""
) {
/* 不为空，显示清空图标 */
this.setCircleIcon(pops.config.iconSVG.circleClose);
this.setCircleIconClickEvent();
} else if (this.$ele.input.value === "") {
this.removeCircleIcon();
}
}
if (typeof formConfig.callback === "function") {
if (formConfig.isNumber) {
formConfig.callback(
event,
this.$ele.input.value,
this.$ele.input.valueAsNumber
);
} else {
formConfig.callback(event, this.$ele.input.value);
}
}
}
);
},
};
PopsPanelInput.init();
liElement["data-input"] = PopsPanelInput;
return liElement;
},
/**
* 获取中间容器的元素<li>
* type ==> textarea
* @param {PopsPanelTextAreaDetails} formConfig
* @returns
*/
getSectionContainerItem_textarea(formConfig) {
let liElement = document.createElement("li");
liElement.__formConfig__ = formConfig;
if (formConfig.className) {
liElement.className = formConfig.className;
}
this.addElementAttributes(liElement, formConfig.attributes);
this.setElementProps(liElement, formConfig.props);
/* 左边底部的描述的文字 */
let leftDescriptionText = "";
if (Boolean(formConfig.description)) {
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
}
liElement.innerHTML = `
<div class="pops-panel-item-left-text">
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
${leftDescriptionText}
</div>
<div class="pops-panel-textarea">
<textarea placeholder="${formConfig.placeholder ?? ""}">
</textarea>
</div>
`;
const PopsPanelTextArea = {
[Symbol.toStringTag]: "PopsPanelTextArea",
$ele: {
/**
* @type {HTMLDivElement}
*/
panelTextarea: liElement.querySelector(".pops-panel-textarea"),
/**
* @type {HTMLTextAreaElement}
*/
textarea: liElement.querySelector(".pops-panel-textarea textarea"),
},
$data: {
value: formConfig.getValue(),
},
init() {
this.setValue(this.$data.value);
this.setChangeEvent();
if (formConfig.disabled) {
this.disable();
}
},
disable() {
this.$ele.textarea.setAttribute("disabled", true);
this.$ele.panelTextarea.classList.add(
"pops-panel-textarea-disable"
);
},
notDisable() {
this.$ele.textarea.removeAttribute("disabled", true);
this.$ele.panelTextarea.classList.remove(
"pops-panel-textarea-disable"
);
},
isDisabled() {
return (
this.$ele.textarea.hasAttribute("disabled") ||
this.$ele.panelTextarea.classList.hasAttribute(
"pops-panel-textarea-disable"
)
);
},
setValue(value) {
this.$ele.textarea.value = value;
},
/**
* 监听选择内容改变
*/
setChangeEvent() {
PopsDOMUtils.on(
this.$ele.textarea,
["input", "propertychange"],
void 0,
(event) => {
this.$data.value = event.target.value;
if (typeof formConfig.callback === "function") {
formConfig.callback(event, event.target.value);
}
}
);
},
};
PopsPanelTextArea.init();
liElement["data-textarea"] = PopsPanelTextArea;
return liElement;
},
/**
* 获取中间容器的元素<li>
* type ==> select
* @param {PopsPanelSelectDetails} formConfig
* @returns
*/
getSectionContainerItem_select(formConfig) {
let liElement = document.createElement("li");
liElement.__formConfig__ = formConfig;
if (formConfig.className) {
liElement.className = formConfig.className;
}
this.addElementAttributes(liElement, formConfig.attributes);
this.setElementProps(liElement, formConfig.props);
/* 左边底部的描述的文字 */
let leftDescriptionText = "";
if (Boolean(formConfig.description)) {
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
}
liElement.innerHTML = `
<div class="pops-panel-item-left-text">
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
${leftDescriptionText}
</div>
<div class="pops-panel-select">
<select>
</select>
</div>
`;
const PopsPanelSelect = {
[Symbol.toStringTag]: "PopsPanelSelect",
$ele: {
/**
* @type {HTMLDivElement}
*/
panelSelect: liElement.querySelector(".pops-panel-select"),
/**
* @type {HTMLSelectElement}
*/
select: liElement.querySelector(".pops-panel-select select"),
},
$data: {
defaultValue: formConfig.getValue(),
},
init() {
this.initOption();
this.setChangeEvent();
this.setClickEvent();
if (formConfig.disabled) {
this.disable();
}
},
disable() {
this.$ele.select.setAttribute("disabled", true);
this.$ele.panelSelect.classList.add("pops-panel-select-disable");
},
notDisable() {
this.$ele.select.removeAttribute("disabled", true);
this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
},
isDisabled() {
return (
this.$ele.select.hasAttribute("disabled") ||
this.$ele.panelSelect.classList.hasAttribute(
"pops-panel-select-disable"
)
);
},
initOption() {
formConfig.data.forEach((dataItem) => {
let optionElement = document.createElement("option");
optionElement.__value__ = dataItem.value;
optionElement.__disable__ = dataItem.disable;
if (dataItem.value === this.$data.defaultValue) {
optionElement.setAttribute("selected", true);
}
optionElement.innerText = dataItem.text;
this.$ele.select.appendChild(optionElement);
});
},
setSelectOptionsDisableStatus() {
if (this.$ele.select.options && this.$ele.select.options.length) {
Array.from(this.$ele.select.options).forEach((optionItem) => {
this.setOptionDisableStatus(optionItem);
});
}
},
setOptionDisableStatus(optionElement) {
if (typeof optionElement.__disable__ === "function") {
let disableStatus = optionElement.__disable__(
optionElement.__value__
);
if (disableStatus) {
optionElement.setAttribute("disabled", true);
} else {
optionElement.removeAttribute("disabled");
}
}
},
/**
* 监听选择内容改变
*/
setChangeEvent() {
PopsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
this.setSelectOptionsDisableStatus();
if (typeof formConfig.callback === "function") {
/**
* @type {HTMLOptionElement}
*/
let isSelectedElement =
event.target[event.target.selectedIndex];
let isSelectedValue = isSelectedElement.__value__;
let isSelectedText =
isSelectedElement.innerText || isSelectedElement.textContent;
formConfig.callback(event, isSelectedValue, isSelectedText);
}
});
},
/**
* 监听点击事件
*/
setClickEvent() {
PopsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
this.setSelectOptionsDisableStatus();
if (typeof formConfig.clickCallBack === "function") {
formConfig.clickCallBack(event, this.$ele.select);
}
});
},
};
PopsPanelSelect.init();
liElement["data-select"] = PopsPanelSelect;
return liElement;
},
/**
* 获取中间容器的元素<li>
* type ==> button
* @param {PopsPanelButtonDetails} formConfig
* @returns
*/
getSectionContainerItem_button(formConfig) {
let liElement = document.createElement("li");
liElement.__formConfig__ = formConfig;
if (formConfig.className) {
liElement.className = formConfig.className;
}
this.addElementAttributes(liElement, formConfig.attributes);
this.setElementProps(liElement, formConfig.props);
/* 左边底部的描述的文字 */
let leftDescriptionText = "";
if (Boolean(formConfig.description)) {
leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
}
liElement.innerHTML = `
<div class="pops-panel-item-left-text">
<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
${leftDescriptionText}
</div>
<div class="pops-panel-button">
<button class="pops-panel-button_inner">
<i class="pops-bottom-icon"></i>
<span class="pops-panel-button-text"></span>
</button>
</div>
`;
const PopsPanelButton = {
[Symbol.toStringTag]: "PopsPanelButton",
$ele: {
panelButton: liElement.querySelector(".pops-panel-button"),
button: liElement.querySelector(
".pops-panel-button .pops-panel-button_inner"
),
icon: liElement.querySelector(
".pops-panel-button .pops-bottom-icon"
),
spanText: liElement.querySelector(
".pops-panel-button .pops-panel-button-text"
),
},
$data: {},
init() {
this.$ele.panelButton.appendChild(this.$ele.button);
this.initButton();
this.setClickEvent();
},
initButton() {
if (
typeof formConfig.buttonIcon === "string" &&
formConfig.buttonIcon.trim() !== ""
) {
/* 存在icon图标且不为空 */
if (formConfig.buttonIcon in pops.config.iconSVG) {
this.setIconSVG(pops.config.iconSVG[formConfig.buttonIcon]);
} else {
this.setIconSVG(formConfig.buttonIcon);
}
this.showIcon();
} else {
this.hideIcon();
}
/* 按钮文字 */
let buttonText = formConfig.buttonText;
if (typeof formConfig.buttonText === "function") {
buttonText = formConfig.buttonText();
}
this.setButtonType(formConfig.buttonType);
if (formConfig.buttonIsRightIcon) {
this.setIconRight();
} else {
this.setIconLeft();
}
if (formConfig.disable) {
this.disable();
}
this.setButtonText(buttonText);
this.setIconLoadingStatus(formConfig.buttonIconIsLoading);
},
disable() {
this.$ele.button.setAttribute("disabled", "true");
},
notDisable() {
this.$ele.button.removeAttribute("disabled");
},
/**
* 隐藏icon图标
*/
hideIcon() {
this.$ele.panelButton.classList.add("pops-panel-button-no-icon");
},
/**
* 显示icon图标
*/
showIcon() {
this.$ele.panelButton.classList.remove("pops-panel-button-no-icon");
},
/**
* 设置icon图标的svg
*/
setIconSVG(svgHTML) {
this.$ele.icon.innerHTML = svgHTML;
},
/**
* 设置icon图标是否旋转
* @param {boolean} status
*/
setIconLoadingStatus(status) {
this.$ele.icon.setAttribute("is-loading", Boolean(status));
},
/**
* 设置属性上是否存在icon图标
*/
setHasIcon(value) {
this.$ele.button.setAttribute("data-icon", Boolean(value));
},
/**
* 设置按钮类型
* @param {string} typeValue
*/
setButtonType(typeValue) {
this.$ele.button.setAttribute("type", typeValue);
},
/**
* 添加按钮的图标在右边
*/
setIconRight() {
this.$ele.button.classList.add("pops-panel-button-right-icon");
},
/**
* （默认）添加按钮的图标在左边
*/
setIconLeft() {
this.$ele.button.classList.remove("pops-panel-button-right-icon");
},
/**
* 设置按钮文本
* @param {string} text
*/
setButtonText(text) {
this.$ele.spanText.innerHTML = text;
},
setClickEvent() {
PopsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
if (typeof formConfig.callback === "function") {
formConfig.callback(event);
}
});
},
};
PopsPanelButton.init();
liElement["data-button"] = PopsPanelButton;
return liElement;
},
/**
* 获取中间容器的元素<li>
* type ===> own
* @param {PopsPanelOwnDetails} formConfig
* @returns
*/
getSectionContainerItem_own(formConfig) {
let liElement = document.createElement("li");
liElement.__formConfig__ = formConfig;
if (formConfig.className) {
liElement.className = formConfig.className;
}
liElement = formConfig.getLiElementCallBack(liElement);
return liElement;
},
/**
* 获取中间容器的元素<li>
* @param {PopsPanelFormsTotalDetails} formConfig
* @returns
*/
getSectionContainerItem(formConfig) {
if (formConfig["type"] === "switch") {
return this.getSectionContainerItem_switch(formConfig);
} else if (formConfig["type"] === "slider") {
return this.getSectionContainerItem_slider_new(formConfig);
} else if (formConfig["type"] === "input") {
return this.getSectionContainerItem_input(formConfig);
} else if (formConfig["type"] === "textarea") {
return this.getSectionContainerItem_textarea(formConfig);
} else if (formConfig["type"] === "select") {
return this.getSectionContainerItem_select(formConfig);
} else if (formConfig["type"] === "button") {
return this.getSectionContainerItem_button(formConfig);
} else if (formConfig["type"] === "own") {
return this.getSectionContainerItem_own(formConfig);
} else {
console.error("尚未实现的type类型", formConfig);
}
},
/**
* 为左侧容器元素添加点击事件
* @param {HTMLElement} asideLiElement 左侧的容器<li>元素
* @param {PopsPanelContentConfig} asideConfig 配置
*/
setAsideItemClickEvent(asideLiElement, asideConfig) {
let that = this;
/**
*
* @param {PopsPanelFormsTotalDetails} formConfig
* @param {PopsPanelRightAsideContainerOptions} containerOptions
*/
function uListContainerAddItem(formConfig, containerOptions) {
let itemLiElement = that.getSectionContainerItem(formConfig);
if (itemLiElement) {
containerOptions["ulElement"].appendChild(itemLiElement);
}
if (typeof formConfig.afterAddToUListCallBack === "function") {
formConfig.afterAddToUListCallBack(formConfig, containerOptions);
}
}
PopsDOMUtils.on(asideLiElement, "click", void 0, function (event) {
that.clearContainer();
that.clearAsideItemIsVisited();
that.setAsideItemIsVisited(asideLiElement);
/* 顶部标题栏，存在就设置 */
let headerTitleText = asideConfig.headerTitle || asideConfig.title;
if (
typeof headerTitleText === "string" &&
headerTitleText.trim() !== ""
) {
let containerHeaderTitleLIElement = document.createElement("li");
containerHeaderTitleLIElement.__asideConfig__ = asideConfig;
containerHeaderTitleLIElement.innerHTML = headerTitleText;
that.sectionContainerHeaderULElement.appendChild(
containerHeaderTitleLIElement
);
}
/**
* @type {PopsPanelContentConfig[]}
*/
let __forms__ = asideLiElement.__forms__;
__forms__.forEach((formConfig) => {
if (formConfig["type"] === "forms") {
let childForms = formConfig["forms"];
/* 父<li>元素 */
let formContainerListElement = document.createElement("li");
/* 子<ul>元素 */
let formContainerULElement = document.createElement("ul");
formContainerListElement.className =
"pops-panel-forms-container-item";
/* 区域头部的文字 */
let formHeaderDivElement = PopsDOMUtils.createElement("div", {
className: "pops-panel-forms-container-item-header-text",
});
formHeaderDivElement.innerHTML = formConfig["text"];
/* 加进容器内 */
formContainerListElement.appendChild(formHeaderDivElement);
if (formConfig.className) {
PopsDOMUtils.addClassName(
formContainerListElement,
formConfig.className
);
}
that.addElementAttributes(
formContainerListElement,
formConfig.attributes
);
that.setElementProps(formContainerListElement, formConfig.props);
childForms.forEach((childFormConfig) => {
uListContainerAddItem(childFormConfig, {
ulElement: formContainerULElement,
sectionContainerULElement: that.sectionContainerULElement,
formContainerListElement: formContainerListElement,
formHeaderDivElement: formHeaderDivElement,
});
});
formContainerListElement.appendChild(formContainerULElement);
that.sectionContainerULElement.appendChild(
formContainerListElement
);
} else {
/* 如果成功创建，加入到中间容器中 */
uListContainerAddItem(formConfig, {
ulElement: that.sectionContainerULElement,
});
}
});
let autoAdaptionContentHeight =
asideConfig.autoAdaptionContentHeight ?? true;
if (autoAdaptionContentHeight) {
/* 根据标题的高度来自适应内容高度，默认开启 */
/* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
let contentContainerOffset =
asideConfig.contentContainerOffset ?? 0;
/* 获取标题的<ul>元素的高度 */
let sectionContainerHeaderULElementHeight = PopsDOMUtils.height(
that.sectionContainerHeaderULElement
);
that.sectionContainerULElement.style.setProperty(
"height",
`calc( 100% - ${
sectionContainerHeaderULElementHeight + contentContainerOffset
}px )`
);
}
if (typeof asideConfig.callback === "function") {
/* 执行回调 */
asideConfig.callback(
event,
that.sectionContainerHeaderULElement,
that.sectionContainerULElement
);
}
});
},
};
HandleContetDetails.init();
PopsHandler.handlePush(PopsType, {
guid: guid,
animElement: animElement,
popsElement: popsElement,
maskElement: maskElement,
$shadowContainer: $shadowContainer,
$shadowRoot: $shadowRoot,
});
/* 拖拽 */
if (config.drag) {
PopsUtils.drag(popsElement, {
dragElement: titleElement,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack,
});
}
return PopsHandler.handleResultDetails(eventDetails);
};
/**
* 右键菜单
* @param { PopsRightClickMenuDetails } details 配置
*/
pops.rightClickMenu = function (details = {}) {
let that = this;
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.anim,
pops.config.cssText.common,
]);
/**
* @type {PopsRightClickMenuDetails}
*/
let config = {
target: document.documentElement,
targetSelector: void 0,
data: [
{
icon: pops.config.iconSVG.search,
iconIsLoading: false,
text: "搜索",
callback(clickEvent, contextMenuEvent, liElement) {
console.log("点击：" + this.text, [
clickEvent,
contextMenuEvent,
liElement,
]);
},
},
{
icon: pops.config.iconSVG.documentCopy,
iconIsLoading: false,
text: "复制",
callback(clickEvent, contextMenuEvent, liElement) {
console.log("点击：" + this.text, [
clickEvent,
contextMenuEvent,
liElement,
]);
},
},
{
icon: pops.config.iconSVG.delete,
text: "删除",
iconIsLoading: false,
callback(clickEvent, contextMenuEvent, liElement) {
console.log("点击：" + this.text, [
clickEvent,
contextMenuEvent,
liElement,
]);
},
},
{
icon: pops.config.iconSVG.loading,
iconIsLoading: true,
text: "加载",
callback(clickEvent, contextMenuEvent, liElement) {
console.log("点击：" + this.text, [
clickEvent,
contextMenuEvent,
liElement,
]);
return false;
},
},
{
icon: pops.config.iconSVG.elemePlus,
iconIsLoading: true,
text: "饿了么",
callback(clickEvent, contextMenuEvent, liElement) {
console.log("点击：" + this.text, [
clickEvent,
contextMenuEvent,
liElement,
]);
return false;
},
item: [
{
icon: "",
iconIsLoading: false,
text: "处理文件",
callback(clickEvent, contextMenuEvent, liElement) {
console.log("点击：" + this.text, [
clickEvent,
contextMenuEvent,
liElement,
]);
},
},
{
icon: "",
iconIsLoading: false,
text: "其它处理",
callback(clickEvent, contextMenuEvent, liElement) {
console.log("点击：" + this.text, [
clickEvent,
contextMenuEvent,
liElement,
]);
},
item: [
{
icon: pops.config.iconSVG.view,
iconIsLoading: false,
text: "查看",
callback(clickEvent, contextMenuEvent, liElement) {
console.log("点击：" + this.text, [
clickEvent,
contextMenuEvent,
liElement,
]);
},
},
],
},
],
},
],
className: "",
isAnimation: true,
only: false,
zIndex: 10000,
preventDefault: true,
style: void 0,
beforeAppendToPageCallBack() {},
};
config = PopsUtils.assignJSON(config, details);
if (config.target == null) {
throw "config.target 不能为空";
}
if (details.data) {
config.data = details.data;
}
let guid = PopsUtils.getRandomGUID();
const PopsType = "rightClickMenu";
config = PopsHandler.handleOnly(PopsType, config);
if (config.style != null) {
let cssNode = document.createElement("style");
cssNode.setAttribute("type", "text/css");
cssNode.innerHTML = config.style;
$shadowRoot.appendChild(cssNode);
}
const PopsContextMenu = {
/**
* 根元素
* @type {?HTMLElement}
*/
rootElement: null,
/**
* 全局点击检测
* @param {TouchEvent|PointerEvent} event
*/
windowCheckClickEvent(event) {
if (!PopsContextMenu.rootElement) {
return;
}
if (event.target.closest(`.pops-${PopsType}`)) {
return;
}
if (
event.target.className &&
event.target.className === "pops-shadow-container" &&
event.target.shadowRoot != null
) {
return;
}
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
},
/**
* target为shadowRoot或shadowRoot内的全局点击检测
* @param {TouchEvent|PointerEvent} event
*/
shadowRootCheckClickEvent(event) {
if (!PopsContextMenu.rootElement) {
return;
}
if (event.target.closest(`.pops-${PopsType}`)) {
return;
}
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
},
/**
* 添加全局点击检测事件
*/
addWindowCheckClickListener() {
PopsDOMUtils.on(
globalThis,
"click touchstart",
void 0,
PopsContextMenu.windowCheckClickEvent,
{
capture: true,
}
);
const $shadowRoot = config.target.getRootNode();
if ($shadowRoot instanceof ShadowRoot) {
PopsDOMUtils.on(
$shadowRoot,
"click touchstart",
void 0,
PopsContextMenu.shadowRootCheckClickEvent,
{
capture: true,
}
);
}
},
/**
* 移除全局点击检测事件
*/
removeWindowCheckClickListener() {
PopsDOMUtils.off(
globalThis,
"click touchstart",
void 0,
PopsContextMenu.windowCheckClickEvent,
{
capture: true,
}
);
const $shadowRoot = config.target.getRootNode();
if ($shadowRoot instanceof ShadowRoot) {
PopsDOMUtils.off(
$shadowRoot,
"click touchstart",
void 0,
PopsContextMenu.windowCheckClickEvent,
{
capture: true,
}
);
}
},
/**
* contextmenu事件
* @param {PointerEvent} event
*/
contextMenuEvent(event) {
if (config.preventDefault) {
PopsUtils.preventEvent(event);
}
if (PopsContextMenu.rootElement) {
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
}
PopsContextMenu.rootElement = PopsContextMenu.showMenu(
event,
config.data
);
},
/**
* 添加contextmenu事件
* @param {HTMLElement|globalThis|Window} target 目标
* @param {?string} selector 子元素选择器
*/
addContextMenuEvent(target, selector) {
PopsDOMUtils.on(
target,
"contextmenu",
selector,
PopsContextMenu.contextMenuEvent
);
},
/**
* 移除contextmenu事件
* @param {HTMLElement|globalThis|Window} target 目标
* @param {?string} selector 子元素选择器
*/
removeContextMenuEvent(target) {
PopsDOMUtils.off(
target,
"contextmenu",
string,
PopsContextMenu.contextMenuEvent
);
},
/**
* 自动判断是否存在动画，存在动画就执行关闭动画并删除
* @param {HTMLElement} element
*/
animationCloseMenu(element) {
/**
* 动画结束触发的事件
*/
function transitionEndEvent(event) {
PopsDOMUtils.off(
element,
PopsDOMUtils.getTransitionEndNameList(),
void 0,
transitionEndEvent,
{
capture: true,
}
);
element.remove();
}
if (element.classList.contains(`pops-${PopsType}-anim-show`)) {
/* 有动画 */
PopsDOMUtils.on(
element,
PopsDOMUtils.getTransitionEndNameList(),
void 0,
transitionEndEvent,
{
capture: true,
}
);
element.classList.remove(`pops-${PopsType}-anim-show`);
} else {
/* 无动画 */
element.remove();
}
},
/**
* 关闭所有菜单
* @param {HTMLElement} rootElement
*/
closeAllMenu(rootElement) {
if (rootElement?.__menuData__?.root) {
rootElement = rootElement?.__menuData__?.root;
}
/**
* @type {HTMLElement[]}
*/
let childMenuList = rootElement.__menuData__.child;
childMenuList.forEach((childMenuElement) => {
this.animationCloseMenu(childMenuElement);
});
this.animationCloseMenu(rootElement);
PopsContextMenu.rootElement = null;
},
/**
* 获取菜单容器
* @param {number} zIndex z-index值
* @param {boolean} isChildren 是否是rightClickMenu的某一项的子菜单
*/
getMenuContainerElement(zIndex, isChildren) {
let menuElement = PopsUtils.parseTextToDOM(`
<div class="pops-${PopsType}" ${isChildren ? 'is-children="true"' : ""}>
<style type="text/css" data-from="pops-${PopsType}">
.pops-${PopsType} *{
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
scrollbar-width: thin;
}
.pops-${PopsType}{
position: fixed;
z-index: ${zIndex};
text-align: center;
border-radius: 3px;
font-size: 16px;
font-weight: 500;
background: #fff;
box-shadow: 0px 1px 6px 1px #cacaca;
}
.pops-${PopsType}-anim-grid{
display: grid;
transition: 0.3s;
grid-template-rows: 0fr;
}
.pops-${PopsType}-anim-show{
grid-template-rows: 1fr;
}
.pops-${PopsType}-is-visited{
background: #dfdfdf;
}
i.pops-${PopsType}-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;
margin-right: 6px;
}
i.pops-${PopsType}-icon[is-loading="true"]{
animation: rotating 2s linear infinite;
}
.pops-${PopsType} li:hover{background:#dfdfdf;cursor:pointer}
.pops-${PopsType} ul{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
overflow: hidden;
}
.pops-${PopsType} ul li {
padding: 5px 10px;
margin: 2.5px 5px;
border-radius: 3px;
display: flex;
width: -webkit-fill-available;
width: -moz-available;
text-align: left;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
align-items: center;
}
.pops-${PopsType} ul li:first-child{
margin-top: 5px;
}
.pops-${PopsType} ul li:last-child{
margin-bottom: 5px;
}
</style>
<ul></ul>
</div>
`);
/* 添加动画 */
if (config.isAnimation) {
PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-grid`);
}
return menuElement;
},
/**
* 获取left、top偏移
* @param {HTMLElement} menuElement 菜单元素
* @param {number} x
* @param {number} y
*/
getOffset(menuElement, x, y) {
/* left最大偏移 */
let maxLeftOffset =
PopsDOMUtils.width(globalThis) - PopsDOMUtils.width(menuElement) - 1;
/* top最大偏移 */
let maxTopOffset =
PopsDOMUtils.height(globalThis) -
PopsDOMUtils.height(menuElement) -
8;
let currentLeftOffset = x;
let currentTopOffset = y;
/* 不允许超出left最大值 */
currentLeftOffset = currentLeftOffset < 0 ? 0 : currentLeftOffset;
currentLeftOffset =
currentLeftOffset < maxLeftOffset ? currentLeftOffset : maxLeftOffset;
/* 不允许超出top最大值 */
currentTopOffset = currentTopOffset < 0 ? 0 : currentTopOffset;
currentTopOffset =
currentTopOffset < maxTopOffset ? currentTopOffset : maxTopOffset;
return {
left: currentLeftOffset,
top: currentTopOffset,
};
},
/**
* 显示菜单
* @param {PointerEvent} menuEvent 触发的事件
* @param {PopsRightClickMenuDataDetails[]} _config_
*/
showMenu(menuEvent, _config_) {
let menuElement = this.getMenuContainerElement(config.zIndex, false);
menuElement.__menuData__ = {
child: [],
};
PopsContextMenu.addMenuLiELement(
menuEvent,
menuElement,
menuElement,
_config_
);
/* 先隐藏 */
PopsDOMUtils.css(menuElement, {
display: "none",
});
PopsUtils.appendChild($shadowRoot, menuElement);
/* 添加到页面 */
if (!document.contains($shadowContainer)) {
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
PopsUtils.appendChild($shadowContainer);
}
let { left: menuLeftOffset, top: menuTopOffset } = this.getOffset(
menuElement,
menuEvent.clientX,
menuEvent.clientY
);
PopsDOMUtils.css(menuElement, {
left: menuLeftOffset,
top: menuTopOffset,
display: "",
});
/* 过渡动画 */
if (config.isAnimation) {
PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
}
return menuElement;
},
/**
* 显示子菜单
* @param {Event} menuEvent 事件
* @param {{
* clientX: number,
* clientY: number
* }} posInfo 位置信息
* @param {PopsRightClickMenuDataDetails[]} _config_
* @param {?HTMLDivElement} rootElement 根菜单元素
* @param {?HTMLLIElement} targetLiElement 父li项元素
*/
showClildMenu(
menuEvent,
posInfo,
_config_,
rootElement,
targetLiElement
) {
let menuElement = this.getMenuContainerElement(config.zIndex, true);
menuElement.__menuData__ = {
parent: targetLiElement,
root: rootElement,
};
rootElement.__menuData__.child.push(menuElement);
PopsContextMenu.addMenuLiELement(
menuEvent,
rootElement,
menuElement,
_config_
);
/* 先隐藏 */
PopsDOMUtils.css(menuElement, {
display: "none",
});
/* 添加到页面 */
PopsUtils.appendChild($shadowRoot, menuElement);
let { left: menuLeftOffset, top: menuTopOffset } = this.getOffset(
menuElement,
posInfo.clientX,
posInfo.clientY
);
PopsDOMUtils.css(menuElement, {
left: menuLeftOffset,
top: menuTopOffset,
display: "",
});
/* 过渡动画 */
if (config.isAnimation) {
PopsDOMUtils.addClassName(menuElement, `pops-${PopsType}-anim-show`);
}
return menuElement;
},
/**
* 获取菜单项的元素
* @param {PointerEvent} menuEvent 事件
* @param {HTMLElement} rootElement 根元素
* @param {HTMLDivElement} menuElement 菜单元素
* @param {PopsRightClickMenuDataDetails[]} _config_ 配置
*/
addMenuLiELement(menuEvent, rootElement, menuElement, _config_) {
let menuEventTarget = menuEvent.target;
let menuULElement = menuElement.querySelector("ul");
_config_.forEach((item) => {
/**
* @type {HTMLLIElement}
*/
let menuLiElement = PopsUtils.parseTextToDOM(`
<li></li>
`);
/* 判断有无图标，有就添加进去 */
if (typeof item.icon === "string" && item.icon.trim() !== "") {
let iconSVGHTML = pops.config.iconSVG[item.icon] ?? item.icon;
let iconElement = PopsUtils.parseTextToDOM(
`<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`
);
menuLiElement.appendChild(iconElement);
}
/* 插入文字 */
menuLiElement.insertAdjacentHTML(
"beforeend",
`<span>${item.text}</span>`
);
/* 如果存在子数据，显示 */
if (item.item && Array.isArray(item.item)) {
PopsDOMUtils.addClassName(menuLiElement, `pops-${PopsType}-item`);
}
/* 鼠标|触摸 移入事件 */
function liElementHoverEvent() {
Array.from(menuULElement.children).forEach((liElement) => {
PopsDOMUtils.removeClassName(
liElement,
`pops-${PopsType}-is-visited`
);
if (!liElement.__menuData__) {
return;
}
function removeElement(element) {
element.querySelectorAll("ul li").forEach((ele) => {
if (ele?.__menuData__?.child) {
removeElement(ele.__menuData__.child);
}
});
element.remove();
}
/* 遍历根元素的上的__menuData__.child，判断 */
removeElement(liElement.__menuData__.child);
});
/* 清理根元素上的children不存在于页面中的元素 */
for (
let index = 0;
index < rootElement.__menuData__.child.length;
index++
) {
let element = rootElement.__menuData__.child[index];
if (!$shadowRoot.contains(element)) {
rootElement.__menuData__.child.splice(index, 1);
index--;
}
}
PopsDOMUtils.addClassName(
menuLiElement,
`pops-${PopsType}-is-visited`
);
if (!item.item) {
return;
}
let rect = menuLiElement.getBoundingClientRect();
let childMenu = PopsContextMenu.showClildMenu(
menuEvent,
{
clientX: rect.left + PopsDOMUtils.outerWidth(menuLiElement),
clientY: rect.top,
},
item.item,
rootElement,
menuLiElement
);
menuLiElement.__menuData__ = {
child: childMenu,
};
}
/**
* 点击事件
* @param {PointerEvent} clickEvent
* @returns
*/
async function liElementClickEvent(clickEvent) {
if (typeof item.callback === "function") {
OriginPrototype.Object.defineProperty(menuEvent, "target", {
get() {
return menuEventTarget;
},
});
let callbackResult = await item.callback(
clickEvent,
menuEvent,
menuLiElement
);
if (
typeof callbackResult === "boolean" &&
callbackResult == false
) {
return;
}
}
/* 取消绑定的鼠标/触摸事件，防止关闭的时候再次触发 */
Array.from(menuULElement.children).forEach((liEle) => {
PopsDOMUtils.off(liEle, "mouseenter touchstart");
});
PopsContextMenu.closeAllMenu(rootElement);
}
PopsDOMUtils.on(
menuLiElement,
"mouseenter touchstart",
void 0,
liElementHoverEvent
);
/* 项-点击事件 */
PopsDOMUtils.on(menuLiElement, "click", void 0, liElementClickEvent);
menuULElement.appendChild(menuLiElement);
});
},
};
PopsContextMenu.addContextMenuEvent(
config.target,
config.targetSelector,
config.preventDefault
);
PopsContextMenu.addWindowCheckClickListener();
return {
guid: guid,
config: config,
removeWindowCheckClickListener:
PopsContextMenu.removeWindowCheckClickListener,
addWindowCheckClickListener: PopsContextMenu.addWindowCheckClickListener,
removeContextMenuEvent: PopsContextMenu.removeContextMenuEvent,
addContextMenuEvent: PopsContextMenu.addContextMenuEvent,
};
};
/**
* 搜索建议悬浮窗
* @param {PopsSearchSuggestionDetails} details
*/
pops.searchSuggestion = function (details) {
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.anim,
pops.config.cssText.common,
]);
/** @type {PopsSearchSuggestionDetails} */
let config = {
target: null,
inputTarget: null,
selfDocument: document,
data: [
{
value: "数据1",
text: "数据1-html",
},
{
value: "数据2",
text: "数据2-html",
},
],
deleteIcon: {
enable: true,
callback(event, liElement, data) {
console.log("删除当前项", [event, liElement, data]);
liElement.remove();
},
},
className: "",
isAbsolute: true,
isAnimation: true,
width: "250px",
maxHeight: "300px",
followTargetWidth: true,
topDistance: 0,
zIndex: 10000,
searchingTip: "正在搜索中...",
toSearhNotResultHTML: '<li data-none="true">暂无其它数据</li>',
getItemHTML(item) {
return item.text ?? item;
},
async getData(value) {
console.log("当前输入框的值是：", value);
return [];
},
itemClickCallBack(event, liElement, data) {
console.log("item项的点击回调", [event, liElement, data]);
this.inputTarget.value = data.value;
},
style: void 0,
};
config = PopsUtils.assignJSON(config, details);
if (config.target == null) {
throw new TypeError("config.target 不能为空");
}
/* 做下兼容处理 */
if (config.inputTarget == null) {
config.inputTarget = config.target;
}
if (details.data) {
config.data = details.data;
}
const guid = PopsUtils.getRandomGUID();
const PopsType = "searchSuggestion";
if (config.style != null) {
let cssNode = document.createElement("style");
cssNode.setAttribute("type", "text/css");
cssNode.innerHTML = config.style;
$shadowRoot.appendChild(cssNode);
}
const SearchSuggestion = {
/**
* 当前的环境，可以是document，可以是shadowroot，默认是document
*/
selfDocument: config.selfDocument,
/**
* 根元素
* @type {HTMLElement}
*/
root: null,
/**
* ul元素
* @type {HTMLUListElement}
*/
hintULElement: null,
/**
* 初始化
*/
init(parentElement = document.body || document.documentElement) {
this.root = this.getSearchSelectElement();
this.hintULElement = this.root.querySelector("ul");
this.update(config.data);
this.changeHintULElementWidth();
this.changeHintULElementPosition();
this.hide();
if (config.isAnimation) {
this.root.classList.add(`pops-${PopsType}-animation`);
}
$shadowRoot.appendChild(this.root);
parentElement.appendChild($shadowContainer);
},
/**
* 获取显示出搜索建议框的html
*/
getSearchSelectElement() {
let element = PopsDOMUtils.createElement(
"div",
{
className: `pops pops-${PopsType}-search-suggestion`,
innerHTML: `
<style>
.pops-${PopsType}-animation{
-moz-animation: searchSelectFalIn 0.5s 1 linear;
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
-o-animation: searchSelectFalIn 0.5s 1 linear;
-ms-animation: searchSelectFalIn 0.5s 1 linear;
}
.pops-${PopsType}-search-suggestion{
position: ${config.isAbsolute ? "absolute" : "fixed"};
z-index: ${config.zIndex};
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 0;
border: initial;
overflow: initial;
}
ul.pops-${PopsType}-search-suggestion-hint{
width: 0;
left: 0;
max-height: ${config.maxHeight};
overflow-x: hidden;
overflow-y: auto;
padding: 5px 0;
background-color: #fff;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
position: absolute;
}
ul.pops-${PopsType}-search-suggestion-hint li{
padding: 7px;
margin: 0;
clear: both;
color: #515a6e;
font-size: 14px;
list-style: none;
cursor: pointer;
transition: background .2s ease-in-out;
overflow: hidden;
text-overflow: ellipsis;
}
ul.pops-${PopsType}-search-suggestion-hint li[data-none]{
text-align: center;
font-size: 12px;
color: #8e8e8e;
}
ul.pops-${PopsType}-search-suggestion-hint li:hover{
background-color: rgba(0, 0, 0, .1);
}
</style>
<ul class="pops-${PopsType}-search-suggestion-hint">
${config.toSearhNotResultHTML}
</ul>
`,
},
{
"data-guid": guid,
"type-value": PopsType,
}
);
if (config.className !== "" && config.className != null) {
PopsDOMUtils.addClassName(element, config.className);
}
return element;
},
/**
* 获取显示出搜索建议框的每一项的html
* @param {PopsSearchSuggestionData} item 当前项的值
* @param {number} index 当前项的下标
*/
getSearchItemLiElement(item, index) {
return PopsDOMUtils.createElement("li", {
className: `pops-${PopsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
"data-index": index,
"data-value": this.getItemDataValue(item),
innerHTML: `
${config.getItemHTML(item)}
${config.deleteIcon.enable ? this.getDeleteIconHTML() : ""}
`,
});
},
/**
* 获取data-value值
* @param {PopsSearchSuggestionData} item
*/
getItemDataValue(item) {
return item;
},
/**
* 设置搜索建议框每一项的点击事件
* @param {HTMLLIElement} liElement
*/
setSearchItemClickEvent(liElement) {
PopsDOMUtils.on(
liElement,
"click",
void 0,
(event) => {
PopsUtils.preventEvent(event);
if (event.target.closest(`.pops-${PopsType}-delete-icon`)) {
/* 点击的是删除按钮 */
config.deleteIcon.callback(
event,
liElement,
liElement["data-value"]
);
if (!this.hintULElement.children.length) {
/* 全删完了 */
this.clear();
}
} else {
/* 点击项主体 */
config.itemClickCallBack(
event,
liElement,
liElement["data-value"]
);
}
},
{
capture: true,
}
);
},
/**
* 监听输入框内容改变
*/
setInputChangeEvent() {
/* 是input输入框 */
/* 禁用输入框自动提示 */
config.inputTarget.setAttribute("autocomplete", "off");
/* 内容改变事件 */
PopsDOMUtils.on(
config.inputTarget,
"input",
void 0,
async (event) => {
let getListResult = await config.getData(event.target.value);
this.update(getListResult);
},
{
capture: true,
}
);
},
/**
* 移除输入框内容改变的监听
*/
removeInputChangeEvent() {
PopsDOMUtils.off(config.inputTarget, "input", void 0, void 0, {
capture: true,
});
},
/**
* 显示搜索建议框的事件
*/
showEvent() {
SearchSuggestion.changeHintULElementPosition();
SearchSuggestion.changeHintULElementWidth();
SearchSuggestion.show();
},
/**
* 设置显示搜索建议框的事件
*/
setShowEvent() {
/* 焦点|点击事件*/
PopsDOMUtils.on(
[config.target, config.inputTarget],
["focus", "click"],
void 0,
this.showEvent,
{
capture: true,
}
);
},
/**
* 移除显示搜索建议框的事件
*/
removeShowEvent() {
/* 焦点|点击事件*/
PopsDOMUtils.off(
[config.target, config.inputTarget],
["focus", "click"],
void 0,
this.showEvent,
{
capture: true,
}
);
},
/**
* 隐藏搜索建议框的事件
* @param {PointerEvent|MouseEvent} event
*/
hideEvent(event) {
if (event.target instanceof Node) {
if ($shadowContainer.contains(event.target)) {
/* 点击在shadow上的 */
return;
}
if (config.target.contains(event.target)) {
/* 点击在目标元素内 */
return;
}
if (config.inputTarget.contains(event.target)) {
/* 点击在目标input内 */
return;
}
SearchSuggestion.hide();
}
},
/**
* 设置隐藏搜索建议框的事件
*/
setHideEvent() {
/* 全局点击事件 */
/* 全局触摸屏点击事件 */
PopsDOMUtils.on(
SearchSuggestion.selfDocument,
["click", "touchstart"],
void 0,
this.hideEvent,
{
capture: true,
}
);
},
/**
* 移除隐藏搜索建议框的事件
*/
removeHideEvent() {
PopsDOMUtils.off(
SearchSuggestion.selfDocument,
["click", "touchstart"],
void 0,
this.hideEvent,
{
capture: true,
}
);
},
/**
* 设置所有监听
*/
setAllEvent() {
this.setInputChangeEvent();
this.setHideEvent();
this.setShowEvent();
},
/**
* 移除所有监听
*/
removeAllEvent() {
this.removeInputChangeEvent();
this.removeHideEvent();
this.removeShowEvent();
},
/**
* 获取删除按钮的html
*/
getDeleteIconHTML(size = 16, fill = "#bababa") {
return `
<svg class="pops-${PopsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
<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>
<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>
</svg>
`;
},
/**
* 设置当前正在搜索中的提示
*/
setPromptsInSearch() {
let isSearchingElement = PopsDOMUtils.createElement("li", {
className: `pops-${PopsType}-search-suggestion-hint-searching-item`,
innerHTML: config.searchingTip,
});
SearchSuggestion.hintULElement.appendChild(isSearchingElement);
},
/**
* 移除正在搜索中的提示
*/
removePromptsInSearch() {
SearchSuggestion.hintULElement
.querySelector(
`li.pops-${PopsType}-search-suggestion-hint-searching-item`
)
?.remove();
},
/**
* 清空所有的搜索结果
*/
clearAllSearchItemLi() {
SearchSuggestion.hintULElement.innerHTML = "";
},
/**
* 修改搜索建议框的位置(top、left)
* 因为目标元素可能是动态隐藏的
*/
changeHintULElementPosition(
target = config.target ?? config.inputTarget
) {
let targetRect = config.isAbsolute
? PopsDOMUtils.offset(target)
: target.getBoundingClientRect();
SearchSuggestion.hintULElement.style.top =
targetRect.height + targetRect.top + config.topDistance + "px";
SearchSuggestion.hintULElement.style.left = targetRect.left + "px";
},
/**
* 修改搜索建议框的width
* 因为目标元素可能是动态隐藏的
*/
changeHintULElementWidth(target = config.target ?? config.inputTarget) {
let targetRect = target.getBoundingClientRect();
if (config.followTargetWidth) {
SearchSuggestion.hintULElement.style.width = targetRect.width + "px";
} else {
SearchSuggestion.hintULElement.style.width = config.width;
}
},
/**
* 更新页面显示的搜索结果
* @param {PopsSearchSuggestionData[]} data
*/
update(data = []) {
if (!Array.isArray(data)) {
throw new TypeError("传入的数据不是数组");
}
config.data = data;
/* 清空已有的搜索结果 */
if (config.data.length) {
this.clearAllSearchItemLi();
/* 添加进ul中 */
config.data.forEach((item, index) => {
let itemElement = this.getSearchItemLiElement(item, index);
this.setSearchItemClickEvent(itemElement);
this.hintULElement.appendChild(itemElement);
});
} else {
/* 清空 */
this.clear();
}
},
/**
* 清空当前的搜索结果并显示无结果
*/
clear() {
this.clearAllSearchItemLi();
this.hintULElement.appendChild(
PopsUtils.parseTextToDOM(config.toSearhNotResultHTML)
);
},
/**
* 隐藏搜索建议框
*/
hide() {
this.root.style.display = "none";
},
/**
* 显示搜索建议框
*/
show() {
this.root.style.display = "";
},
};
return SearchSuggestion;
};
return pops;
});
