@whitesev/pops 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.amd.js +364 -357
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +364 -357
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +364 -357
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +364 -357
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +364 -357
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +364 -357
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +17 -17
- package/dist/types/src/PopsInst.d.ts +8 -0
- package/dist/types/src/components/panel/index.d.ts +2 -1
- package/dist/types/src/components/searchSuggestion/index.d.ts +1 -1
- package/dist/types/src/handler/PopsElementHandler.d.ts +6 -6
- package/dist/types/src/handler/PopsHandler.d.ts +6 -6
- package/dist/types/src/types/button.d.ts +2 -2
- package/dist/types/src/types/components.d.ts +5 -5
- package/dist/types/src/types/event.d.ts +3 -3
- package/dist/types/src/types/{layer.d.ts → inst.d.ts} +7 -5
- package/dist/types/src/types/main.d.ts +36 -58
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +10 -10
- package/package.json +1 -1
- package/src/Pops.ts +2 -2
- package/src/PopsInst.ts +21 -0
- package/src/components/alert/index.ts +16 -16
- package/src/components/confirm/index.ts +16 -15
- package/src/components/drawer/index.ts +16 -15
- package/src/components/folder/index.ts +141 -152
- package/src/components/iframe/index.ts +16 -15
- package/src/components/panel/index.ts +19 -18
- package/src/components/prompt/index.ts +15 -14
- package/src/components/rightClickMenu/index.ts +19 -18
- package/src/components/searchSuggestion/index.ts +21 -20
- package/src/components/tooltip/index.ts +3 -2
- package/src/css/scrollbar.css +9 -5
- package/src/handler/PopsElementHandler.ts +18 -18
- package/src/handler/PopsHandler.ts +38 -32
- package/src/types/button.d.ts +2 -2
- package/src/types/components.d.ts +5 -5
- package/src/types/event.d.ts +3 -3
- package/src/types/{layer.d.ts → inst.d.ts} +7 -5
- package/src/types/main.d.ts +36 -58
- package/src/utils/PopsInstanceUtils.ts +84 -81
- package/dist/types/src/PopsLayer.d.ts +0 -5
- package/src/PopsLayer.ts +0 -18
package/dist/index.umd.js
CHANGED
|
@@ -2344,7 +2344,10 @@
|
|
|
2344
2344
|
}
|
|
2345
2345
|
const popsDOMUtils = new PopsDOMUtils();
|
|
2346
2346
|
|
|
2347
|
-
|
|
2347
|
+
/**
|
|
2348
|
+
* 弹窗实例数据
|
|
2349
|
+
*/
|
|
2350
|
+
const PopsInstData = {
|
|
2348
2351
|
alert: [],
|
|
2349
2352
|
confirm: [],
|
|
2350
2353
|
drawer: [],
|
|
@@ -2362,7 +2365,7 @@
|
|
|
2362
2365
|
|
|
2363
2366
|
var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"top\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n.pops[position=\"top_right\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n}\r\n.pops[position=\"center_left\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"center\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%);\r\n}\r\n.pops[position=\"center_right\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tright: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"bottom_left\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"bottom\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, 0);\r\n}\r\n.pops[position=\"bottom_right\"] {\r\n\tposition: fixed;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n";
|
|
2364
2367
|
|
|
2365
|
-
var scrollbarCSS = "/*
|
|
2368
|
+
var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\r\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\r\n.pops ::-webkit-scrollbar {\r\n\twidth: 6px;\r\n\theight: 0;\r\n}\r\n\r\n/* 滚动条轨道 */\r\n.pops ::-webkit-scrollbar-track {\r\n\twidth: 0;\r\n}\r\n/* 滚动条滑块 */\r\n.pops ::-webkit-scrollbar-thumb {\r\n\tmin-height: 28px;\r\n\tborder-radius: 2em;\r\n\tbackground: rgb(204, 204, 204, var(--pops-bg-opacity, 1));\r\n\tbackground-clip: padding-box;\r\n}\r\n/* 滚动条滑块 */\r\n.pops ::-webkit-scrollbar-thumb:hover {\r\n\tbackground: rgb(178, 178, 178, var(--pops-bg-opacity, 1));\r\n}\r\n";
|
|
2366
2369
|
|
|
2367
2370
|
var buttonCSS = ".pops {\r\n\t--button-font-size: 14px;\r\n\t--button-height: 32px;\r\n\t--button-color: rgb(51, 51, 51);\r\n\t--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t--button-margin-top: 0px;\r\n\t--button-margin-bottom: 0px;\r\n\t--button-margin-left: 5px;\r\n\t--button-margin-right: 5px;\r\n\t--button-padding-top: 6px;\r\n\t--button-padding-bottom: 6px;\r\n\t--button-padding-left: 12px;\r\n\t--button-padding-right: 12px;\r\n\t--button-radius: 4px;\r\n\r\n\t--container-title-height: 55px;\r\n\t--container-bottom-btn-height: 55px;\r\n\r\n\t/* default按钮 */\r\n\t--button-default-color: #333333;\r\n\t--button-default-bd-color: #dcdfe6;\r\n\t--button-default-bg-color: #ffffff;\r\n\t--button-default-active-color: #409eff;\r\n\t--button-default-active-bd-color: #409eff;\r\n\t--button-default-active-bg-color: #ecf5ff;\r\n\t--button-default-hover-color: #409eff;\r\n\t--button-default-hover-bd-color: #c6e2ff;\r\n\t--button-default-hover-bg-color: #ecf5ff;\r\n\t--button-default-focus-visible-outline-color: #a0cfff;\r\n\t--button-default-focus-visible-outline: 2px solid\r\n\t\tvar(--button-default-focus-visible-outline-color);\r\n\t--button-default-focus-visible-outline-offset: 1px;\r\n\t--button-default-disabled-color: #a8abb2;\r\n\t--button-default-disabled-bd-color: #ffffff;\r\n\t--button-default-disabled-bg-color: #e4e7ed;\r\n\r\n\t/* primary按钮 */\r\n\t--button-primary-color: #ffffff;\r\n\t--button-primary-bd-color: #409eff;\r\n\t--button-primary-bg-color: #409eff;\r\n\t--button-primary-active-color: #ffffff;\r\n\t--button-primary-active-bd-color: #337ecc;\r\n\t--button-primary-active-bg-color: #337ecc;\r\n\t--button-primary-hover-color: #ffffff;\r\n\t--button-primary-hover-bd-color: #79bbff;\r\n\t--button-primary-hover-bg-color: #79bbff;\r\n\t--button-primary-focus-visible-outline-color: #a0cfff;\r\n\t--button-primary-focus-visible-outline: 2px solid\r\n\t\tvar(--button-primary-focus-visible-outline-color);\r\n\t--button-primary-focus-visible-outline-offset: 1px;\r\n\t--button-primary-disabled-color: #ffffff80;\r\n\t--button-primary-disabled-bd-color: #a0cfff;\r\n\t--button-primary-disabled-bg-color: #a0cfff;\r\n\r\n\t/* success按钮 */\r\n\t--button-success-color: #ffffff;\r\n\t--button-success-bd-color: #4cae4c;\r\n\t--button-success-bg-color: #5cb85c;\r\n\t--button-success-active-color: #ffffff;\r\n\t--button-success-active-bd-color: #529b2e;\r\n\t--button-success-active-bg-color: #529b2e;\r\n\t--button-success-hover-color: #ffffff;\r\n\t--button-success-hover-bd-color: #95d475;\r\n\t--button-success-hover-bg-color: #95d475;\r\n\t--button-success-focus-visible-outline-color: #b3e19d;\r\n\t--button-success-focus-visible-outline: 2px solid\r\n\t\tvar(--button-success-focus-visible-outline-color);\r\n\t--button-success-focus-visible-outline-offset: 1px;\r\n\t--button-success-disabled-color: #ffffff80;\r\n\t--button-success-disabled-bd-color: #b3e19d;\r\n\t--button-success-disabled-bg-color: #b3e19d;\r\n\r\n\t/* info按钮 */\r\n\t--button-info-color: #ffffff;\r\n\t--button-info-bd-color: #909399;\r\n\t--button-info-bg-color: #909399;\r\n\t--button-info-active-color: #ffffff;\r\n\t--button-info-active-bd-color: #73767a;\r\n\t--button-info-active-bg-color: #73767a;\r\n\t--button-info-hover-color: #ffffff;\r\n\t--button-info-hover-bd-color: #b1b3b8;\r\n\t--button-info-hover-bg-color: #b1b3b8;\r\n\t--button-info-focus-visible-outline-color: #c8c9cc;\r\n\t--button-info-focus-visible-outline: 2px solid\r\n\t\tvar(--button-info-focus-visible-outline-color);\r\n\t--button-info-focus-visible-outline-offset: 1px;\r\n\t--button-info-disabled-color: #ffffff80;\r\n\t--button-info-disabled-bd-color: #c8c9cc;\r\n\t--button-info-disabled-bg-color: #c8c9cc;\r\n\r\n\t/* warning按钮 */\r\n\t--button-warning-color: #ffffff;\r\n\t--button-warning-bd-color: #e6a23c;\r\n\t--button-warning-bg-color: #e6a23c;\r\n\t--button-warning-active-color: #ffffff;\r\n\t--button-warning-active-bd-color: #b88230;\r\n\t--button-warning-active-bg-color: #b88230;\r\n\t--button-warning-hover-color: #ffffff80;\r\n\t--button-warning-hover-bd-color: #eebe77;\r\n\t--button-warning-hover-bg-color: #eebe77;\r\n\t--button-warning-focus-visible-outline-color: #f3d19e;\r\n\t--button-warning-focus-visible-outline: 2px solid\r\n\t\tvar(--button-warning-focus-visible-outline-color);\r\n\t--button-warning-focus-visible-outline-offset: 1px;\r\n\t--button-warning-disabled-color: #ffffff80;\r\n\t--button-warning-disabled-bd-color: #f3d19e;\r\n\t--button-warning-disabled-bg-color: #f3d19e;\r\n\r\n\t/* danger按钮 */\r\n\t--button-danger-color: #ffffff;\r\n\t--button-danger-bd-color: #f56c6c;\r\n\t--button-danger-bg-color: #f56c6c;\r\n\t--button-danger-active-color: #ffffff;\r\n\t--button-danger-active-bd-color: #c45656;\r\n\t--button-danger-active-bg-color: #c45656;\r\n\t--button-danger-hover-color: #ffffff;\r\n\t--button-danger-hover-bd-color: #f89898;\r\n\t--button-danger-hover-bg-color: #f89898;\r\n\t--button-danger-focus-visible-outline-color: #fab6b6;\r\n\t--button-danger-focus-visible-outline: 2px solid\r\n\t\tvar(--button-danger-focus-visible-outline-color);\r\n\t--button-danger-focus-visible-outline-offset: 1px;\r\n\t--button-danger-disabled-color: #ffffff80;\r\n\t--button-danger-disabled-bd-color: #fab6b6;\r\n\t--button-danger-disabled-bg-color: #fab6b6;\r\n\r\n\t/* xiaomi-primary按钮 */\r\n\t--button-xiaomi-primary-color: #ffffff;\r\n\t--button-xiaomi-primary-bd-color: #ff5c00;\r\n\t--button-xiaomi-primary-bg-color: #ff5c00;\r\n\t--button-xiaomi-primary-active-color: #ffffff;\r\n\t--button-xiaomi-primary-active-bd-color: #da4f00;\r\n\t--button-xiaomi-primary-active-bg-color: #da4f00;\r\n\t--button-xiaomi-primary-hover-color: #ffffff;\r\n\t--button-xiaomi-primary-hover-bd-color: #ff7e29;\r\n\t--button-xiaomi-primary-hover-bg-color: #ff7e29;\r\n\t--button-xiaomi-primary-focus-visible-outline-color: #ffa061;\r\n\t--button-xiaomi-primary-focus-visible-outline: 2px solid\r\n\t\tvar(--button-xiaomi-primary-focus-visible-outline-color);\r\n\t--button-xiaomi-primary-focus-visible-outline-offset: 1px;\r\n\t--button-xiaomi-primary-disabled-color: #ffffff80;\r\n\t--button-xiaomi-primary-disabled-bd-color: #fad5b6;\r\n\t--button-xiaomi-primary-disabled-bg-color: #fad5b6;\r\n\r\n\t/* violet按钮 */\r\n\t--button-violet-color: #ffffff;\r\n\t--button-violet-bd-color: #626aef;\r\n\t--button-violet-bg-color: #626aef;\r\n\t--button-violet-active-color: #ffffff;\r\n\t--button-violet-active-bd-color: #8188f2;\r\n\t--button-violet-active-bg-color: #8188f2;\r\n\t--button-violet-hover-color: #ffffff;\r\n\t--button-violet-hover-bd-color: #4b50ad;\r\n\t--button-violet-hover-bg-color: #4b50ad;\r\n\t--button-violet-focus-visible-outline-color: #2a598a;\r\n\t--button-violet-focus-visible-outline: 2px solid\r\n\t\tvar(--button-violet-focus-visible-outline-color);\r\n\t--button-violet-focus-visible-outline-offset: 1px;\r\n\t--button-violet-disabled-color: #ffffff80;\r\n\t--button-violet-disabled-bd-color: #3b3f82;\r\n\t--button-violet-disabled-bg-color: #3b3f82;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops {\r\n\t\t/* default按钮 */\r\n\t\t--button-default-color: #cfd3dc;\r\n\t\t--button-default-bd-color: #4c4d4f;\r\n\t\t--button-default-bg-color: transparent;\r\n\t\t--button-default-active-color: #409eff;\r\n\t\t--button-default-active-bd-color: #409eff;\r\n\t\t--button-default-active-bg-color: #18222c;\r\n\t\t--button-default-hover-color: #409eff;\r\n\t\t--button-default-hover-bd-color: #213d5b;\r\n\t\t--button-default-hover-bg-color: #18222c;\r\n\t\t--button-default-focus-visible-outline-color: #2a598a;\r\n\t\t--button-default-focus-visible-outline: 2px solid\r\n\t\t\tvar(--button-default-focus-visible-outline-color);\r\n\t\t--button-default-focus-visible-outline-offset: 1px;\r\n\t\t--button-default-disabled-color: #ffffff80;\r\n\t\t--button-default-disabled-bd-color: #414243;\r\n\t\t--button-default-disabled-bg-color: transparent;\r\n\r\n\t\t/* primary按钮 */\r\n\t\t--button-primary-color: #ffffff;\r\n\t\t--button-primary-bd-color: #409eff;\r\n\t\t--button-primary-bg-color: #409eff;\r\n\t\t--button-primary-active-color: #ffffff;\r\n\t\t--button-primary-active-bd-color: #66b1ff;\r\n\t\t--button-primary-active-bg-color: #66b1ff;\r\n\t\t--button-primary-hover-color: #ffffff;\r\n\t\t--button-primary-hover-bd-color: #3375b9;\r\n\t\t--button-primary-hover-bg-color: #3375b9;\r\n\t\t--button-primary-focus-visible-outline-color: #2a598a;\r\n\t\t--button-primary-focus-visible-outline: 2px solid\r\n\t\t\tvar(--button-primary-focus-visible-outline-color);\r\n\t\t--button-primary-focus-visible-outline-offset: 1px;\r\n\t\t--button-primary-disabled-color: #ffffff80;\r\n\t\t--button-primary-disabled-bd-color: #2a598a;\r\n\t\t--button-primary-disabled-bg-color: #2a598a;\r\n\r\n\t\t/* success按钮 */\r\n\t\t--button-success-color: #ffffff;\r\n\t\t--button-success-bd-color: #67c23a;\r\n\t\t--button-success-bg-color: #67c23a;\r\n\t\t--button-success-active-color: #ffffff;\r\n\t\t--button-success-active-bd-color: #85ce61;\r\n\t\t--button-success-active-bg-color: #85ce61;\r\n\t\t--button-success-hover-color: #ffffff;\r\n\t\t--button-success-hover-bd-color: #4e8e2f;\r\n\t\t--button-success-hover-bg-color: #4e8e2f;\r\n\t\t--button-success-focus-visible-outline-color: #3e6b27;\r\n\t\t--button-success-focus-visible-outline: 2px solid\r\n\t\t\tvar(--button-success-focus-visible-outline-color);\r\n\t\t--button-success-focus-visible-outline-offset: 1px;\r\n\t\t--button-success-disabled-color: #ffffff80;\r\n\t\t--button-success-disabled-bd-color: #3e6b27;\r\n\t\t--button-success-disabled-bg-color: #3e6b27;\r\n\r\n\t\t/* info按钮 */\r\n\t\t--button-info-color: #ffffff;\r\n\t\t--button-info-bd-color: #909399;\r\n\t\t--button-info-bg-color: #909399;\r\n\t\t--button-info-active-color: #ffffff;\r\n\t\t--button-info-active-bd-color: #a6a9ad;\r\n\t\t--button-info-active-bg-color: #a6a9ad;\r\n\t\t--button-info-hover-color: #ffffff;\r\n\t\t--button-info-hover-bd-color: #6b6d71;\r\n\t\t--button-info-hover-bg-color: #6b6d71;\r\n\t\t--button-info-focus-visible-outline-color: #525457;\r\n\t\t--button-info-focus-visible-outline: 2px solid\r\n\t\t\tvar(--button-info-focus-visible-outline-color);\r\n\t\t--button-info-focus-visible-outline-offset: 1px;\r\n\t\t--button-info-disabled-color: #ffffff80;\r\n\t\t--button-info-disabled-bd-color: #525457;\r\n\t\t--button-info-disabled-bg-color: #525457;\r\n\r\n\t\t/* warning按钮 */\r\n\t\t--button-warning-color: #ffffff;\r\n\t\t--button-warning-bd-color: #e6a23c;\r\n\t\t--button-warning-bg-color: #e6a23c;\r\n\t\t--button-warning-active-color: #ffffff;\r\n\t\t--button-warning-active-bd-color: #ebb563;\r\n\t\t--button-warning-active-bg-color: #ebb563;\r\n\t\t--button-warning-hover-color: #ffffff80;\r\n\t\t--button-warning-hover-bd-color: #a77730;\r\n\t\t--button-warning-hover-bg-color: #a77730;\r\n\t\t--button-warning-focus-visible-outline-color: #7d5b28;\r\n\t\t--button-warning-focus-visible-outline: 2px solid\r\n\t\t\tvar(--button-warning-focus-visible-outline-color);\r\n\t\t--button-warning-focus-visible-outline-offset: 1px;\r\n\t\t--button-warning-disabled-color: #ffffff80;\r\n\t\t--button-warning-disabled-bd-color: #7d5b28;\r\n\t\t--button-warning-disabled-bg-color: #7d5b28;\r\n\r\n\t\t/* danger按钮 */\r\n\t\t--button-danger-color: #ffffff;\r\n\t\t--button-danger-bd-color: #f56c6c;\r\n\t\t--button-danger-bg-color: #f56c6c;\r\n\t\t--button-danger-active-color: #ffffff;\r\n\t\t--button-danger-active-bd-color: #f78989;\r\n\t\t--button-danger-active-bg-color: #f78989;\r\n\t\t--button-danger-hover-color: #ffffff;\r\n\t\t--button-danger-hover-bd-color: #b25252;\r\n\t\t--button-danger-hover-bg-color: #b25252;\r\n\t\t--button-danger-focus-visible-outline-color: #854040;\r\n\t\t--button-danger-focus-visible-outline: 2px solid\r\n\t\t\tvar(--button-danger-focus-visible-outline-color);\r\n\t\t--button-danger-focus-visible-outline-offset: 1px;\r\n\t\t--button-danger-disabled-color: #ffffff80;\r\n\t\t--button-danger-disabled-bd-color: #854040;\r\n\t\t--button-danger-disabled-bg-color: #854040;\r\n\t}\r\n}\r\n.pops[data-bottom-btn=\"false\"] {\r\n\t--container-bottom-btn-height: 0px;\r\n}\r\n.pops button {\r\n\twhite-space: nowrap;\r\n\tfloat: right;\r\n\tdisplay: inline-block;\r\n\tmargin: var(--button-margin-top) var(--button-margin-right)\r\n\t\tvar(--button-margin-bottom) var(--button-margin-left);\r\n\tpadding: var(--button-padding-top) var(--button-padding-right)\r\n\t\tvar(--button-padding-bottom) var(--button-padding-left);\r\n\toutline: 0;\r\n}\r\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\r\n\tdisplay: none;\r\n}\r\n.pops button {\r\n\tborder-radius: var(--button-radius);\r\n\tbox-shadow: none;\r\n\tfont-weight: 400;\r\n\tfont-size: var(--button-font-size);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\n.pops button {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\theight: var(--button-height);\r\n\tline-height: normal;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tborder: 1px solid var(--button-bd-color);\r\n}\r\n.pops button {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:active {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n\toutline: 0;\r\n}\r\n.pops button:hover {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:focus-visible {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:disabled {\r\n\tcursor: not-allowed;\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button.pops-button-large {\r\n\t--button-height: 32px;\r\n\t--button-padding-top: 12px;\r\n\t--button-padding-bottom: 12px;\r\n\t--button-padding-left: 19px;\r\n\t--button-padding-right: 19px;\r\n\t--button-font-size: 14px;\r\n\t--button-border-radius: 4px;\r\n}\r\n\r\n.pops button.pops-button-small {\r\n\t--button-height: 24px;\r\n\t--button-padding-top: 5px;\r\n\t--button-padding-bottom: 5px;\r\n\t--button-padding-left: 11px;\r\n\t--button-padding-right: 11px;\r\n\t--button-font-size: 12px;\r\n\t--button-border-radius: 4px;\r\n}\r\n.pops-panel-button-no-icon .pops-panel-button_inner i {\r\n\tdisplay: none;\r\n}\r\n.pops-panel-button-right-icon {\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner {\r\n\tflex-direction: row-reverse;\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner i {\r\n}\r\n.pops-panel-button .pops-panel-button_inner i:has(svg),\r\n.pops-panel-button-right-icon .pops-panel-button-text {\r\n\tmargin-right: 6px;\r\n}\r\n\r\n.pops button[type=\"default\"] {\r\n\t--button-color: var(--button-default-color);\r\n\t--button-bd-color: var(--button-default-bd-color);\r\n\t--button-bg-color: var(--button-default-bg-color);\r\n}\r\n.pops button[type=\"default\"]:active {\r\n\t--button-color: var(--button-default-active-color);\r\n\t--button-bd-color: var(--button-default-active-bd-color);\r\n\t--button-bg-color: var(--button-default-active-bg-color);\r\n}\r\n.pops button[type=\"default\"]:hover {\r\n\t--button-color: var(--button-default-hover-color);\r\n\t--button-bd-color: var(--button-default-hover-bd-color);\r\n\t--button-bg-color: var(--button-default-hover-bg-color);\r\n}\r\n.pops button[type=\"default\"]:focus-visible {\r\n\toutline: var(--button-default-focus-visible-outline);\r\n\toutline-offset: var(--button-default-focus-visible-outline-offset);\r\n}\r\n.pops button[type=\"default\"]:disabled {\r\n\t--button-color: var(--button-default-disabled-color);\r\n\t--button-bd-color: var(--button-default-disabled-bd-color);\r\n\t--button-bg-color: var(--button-default-disabled-bg-color);\r\n}\r\n\r\n.pops button[type=\"primary\"] {\r\n\t--button-color: var(--button-primary-color);\r\n\t--button-bd-color: var(--button-primary-bd-color);\r\n\t--button-bg-color: var(--button-primary-bg-color);\r\n}\r\n.pops button[type=\"primary\"]:active {\r\n\t--button-color: var(--button-primary-active-color);\r\n\t--button-bd-color: var(--button-primary-active-bd-color);\r\n\t--button-bg-color: var(--button-primary-active-bg-color);\r\n}\r\n.pops button[type=\"primary\"]:hover {\r\n\t--button-color: var(--button-primary-hover-color);\r\n\t--button-bd-color: var(--button-primary-hover-bd-color);\r\n\t--button-bg-color: var(--button-primary-hover-bg-color);\r\n}\r\n.pops button[type=\"primary\"]:focus-visible {\r\n\toutline: var(--button-primary-focus-visible-outline);\r\n\toutline-offset: var(--button-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[type=\"primary\"]:disabled {\r\n\t--button-color: var(--button-primary-disabled-color);\r\n\t--button-bd-color: var(--button-primary-disabled-bd-color);\r\n\t--button-bg-color: var(--button-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[type=\"success\"] {\r\n\t--button-color: var(--button-success-color);\r\n\t--button-bd-color: var(--button-success-bd-color);\r\n\t--button-bg-color: var(--button-success-bg-color);\r\n}\r\n.pops button[type=\"success\"]:active {\r\n\t--button-color: var(--button-success-active-color);\r\n\t--button-bd-color: var(--button-success-active-bd-color);\r\n\t--button-bg-color: var(--button-success-active-bg-color);\r\n}\r\n.pops button[type=\"success\"]:hover {\r\n\t--button-color: var(--button-success-hover-color);\r\n\t--button-bd-color: var(--button-success-hover-bd-color);\r\n\t--button-bg-color: var(--button-success-hover-bg-color);\r\n}\r\n.pops button[type=\"success\"]:focus-visible {\r\n\toutline: var(--button-success-focus-visible-outline);\r\n\toutline-offset: var(--button-success-focus-visible-outline-offset);\r\n}\r\n.pops button[type=\"success\"]:disabled {\r\n\t--button-color: var(--button-success-disabled-color);\r\n\t--button-bd-color: var(--button-success-disabled-bd-color);\r\n\t--button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n\r\n.pops button[type=\"info\"] {\r\n\t--button-color: var(--button-info-color);\r\n\t--button-bd-color: var(--button-info-bd-color);\r\n\t--button-bg-color: var(--button-info-bg-color);\r\n}\r\n.pops button[type=\"info\"]:active {\r\n\t--button-color: var(--button-info-active-color);\r\n\t--button-bd-color: var(--button-info-active-bd-color);\r\n\t--button-bg-color: var(--button-info-active-bg-color);\r\n}\r\n.pops button[type=\"info\"]:hover {\r\n\t--button-color: var(--button-info-hover-color);\r\n\t--button-bd-color: var(--button-info-hover-bd-color);\r\n\t--button-bg-color: var(--button-info-hover-bg-color);\r\n}\r\n.pops button[type=\"info\"]:focus-visible {\r\n\toutline: var(--button-info-focus-visible-outline);\r\n\toutline-offset: var(--button-info-focus-visible-outline-offset);\r\n}\r\n.pops button[type=\"info\"]:disabled {\r\n\t--button-color: var(--button-success-disabled-color);\r\n\t--button-bd-color: var(--button-success-disabled-bd-color);\r\n\t--button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n\r\n.pops button[type=\"warning\"] {\r\n\t--button-color: var(--button-warning-color);\r\n\t--button-bd-color: var(--button-warning-bd-color);\r\n\t--button-bg-color: var(--button-warning-bg-color);\r\n}\r\n.pops button[type=\"warning\"]:active {\r\n\t--button-color: var(--button-warning-active-color);\r\n\t--button-bd-color: var(--button-warning-active-bd-color);\r\n\t--button-bg-color: var(--button-warning-active-bg-color);\r\n}\r\n.pops button[type=\"warning\"]:hover {\r\n\t--button-color: var(--button-warning-hover-color);\r\n\t--button-bd-color: var(--button-warning-hover-bd-color);\r\n\t--button-bg-color: var(--button-warning-hover-bg-color);\r\n}\r\n.pops button[type=\"warning\"]:focus-visible {\r\n\toutline: var(--button-warning-focus-visible-outline);\r\n\toutline-offset: var(--button-warning-focus-visible-outline-offset);\r\n}\r\n.pops button[type=\"warning\"]:disabled {\r\n\t--button-color: var(--button-success-disabled-color);\r\n\t--button-bd-color: var(--button-success-disabled-bd-color);\r\n\t--button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n\r\n.pops button[type=\"danger\"] {\r\n\t--button-color: var(--button-danger-color);\r\n\t--button-bd-color: var(--button-danger-bd-color);\r\n\t--button-bg-color: var(--button-danger-bg-color);\r\n}\r\n.pops button[type=\"danger\"]:active {\r\n\t--button-color: var(--button-danger-active-color);\r\n\t--button-bd-color: var(--button-danger-active-bd-color);\r\n\t--button-bg-color: var(--button-danger-active-bg-color);\r\n}\r\n.pops button[type=\"danger\"]:hover {\r\n\t--button-color: var(--button-danger-hover-color);\r\n\t--button-bd-color: var(--button-danger-hover-bd-color);\r\n\t--button-bg-color: var(--button-danger-hover-bg-color);\r\n}\r\n.pops button[type=\"danger\"]:focus-visible {\r\n\toutline: var(--button-danger-focus-visible-outline);\r\n\toutline-offset: var(--button-danger-focus-visible-outline-offset);\r\n}\r\n.pops button[type=\"danger\"]:disabled {\r\n\t--button-color: var(--button-success-disabled-color);\r\n\t--button-bd-color: var(--button-success-disabled-bd-color);\r\n\t--button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n\r\n.pops button[type=\"xiaomi-primary\"] {\r\n\t--button-color: var(--button-xiaomi-primary-color);\r\n\t--button-bd-color: var(--button-xiaomi-primary-bd-color);\r\n\t--button-bg-color: var(--button-xiaomi-primary-bg-color);\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:active {\r\n\t--button-color: var(--button-xiaomi-primary-active-color);\r\n\t--button-bd-color: var(--button-xiaomi-primary-active-bd-color);\r\n\t--button-bg-color: var(--button-xiaomi-primary-active-bg-color);\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:hover {\r\n\t--button-color: var(--button-xiaomi-primary-hover-color);\r\n\t--button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\r\n\t--button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:focus-visible {\r\n\toutline: var(--button-xiaomi-primary-focus-visible-outline);\r\n\toutline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:disabled {\r\n\t--button-color: var(--button-success-disabled-color);\r\n\t--button-bd-color: var(--button-success-disabled-bd-color);\r\n\t--button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n";
|
|
2368
2371
|
|
|
@@ -2550,18 +2553,18 @@
|
|
|
2550
2553
|
function isVisibleNode($css) {
|
|
2551
2554
|
return $css.position !== "static" && $css.display !== "none";
|
|
2552
2555
|
}
|
|
2553
|
-
Object.keys(
|
|
2554
|
-
let
|
|
2555
|
-
for (let index = 0; index <
|
|
2556
|
-
const
|
|
2557
|
-
let nodeStyle = window.getComputedStyle(
|
|
2556
|
+
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
2557
|
+
let instData = PopsInstData[instKeyName];
|
|
2558
|
+
for (let index = 0; index < instData.length; index++) {
|
|
2559
|
+
const inst = instData[index];
|
|
2560
|
+
let nodeStyle = window.getComputedStyle(inst.animElement);
|
|
2558
2561
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
2559
2562
|
if (isVisibleNode(nodeStyle)) {
|
|
2560
2563
|
let nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
2561
2564
|
if (!isNaN(nodeZIndex)) {
|
|
2562
2565
|
if (nodeZIndex > zIndex) {
|
|
2563
2566
|
zIndex = nodeZIndex;
|
|
2564
|
-
maxZIndexNode =
|
|
2567
|
+
maxZIndexNode = inst.animElement;
|
|
2565
2568
|
}
|
|
2566
2569
|
}
|
|
2567
2570
|
}
|
|
@@ -2587,69 +2590,69 @@
|
|
|
2587
2590
|
},
|
|
2588
2591
|
/**
|
|
2589
2592
|
* 删除配置中对应的对象
|
|
2590
|
-
* @param
|
|
2593
|
+
* @param instConfigList 配置实例列表
|
|
2591
2594
|
* @param guid 唯一标识
|
|
2592
2595
|
* @param isAll 是否全部删除
|
|
2593
2596
|
*/
|
|
2594
|
-
removeInstance(
|
|
2597
|
+
removeInstance(instConfigList, guid, isAll = false) {
|
|
2595
2598
|
/**
|
|
2596
2599
|
* 移除元素实例
|
|
2597
|
-
* @param
|
|
2600
|
+
* @param instCommonConfig
|
|
2598
2601
|
*/
|
|
2599
|
-
function removeItem(
|
|
2600
|
-
if (typeof
|
|
2602
|
+
function removeItem(instCommonConfig) {
|
|
2603
|
+
if (typeof instCommonConfig.beforeRemoveCallBack === "function") {
|
|
2601
2604
|
// 调用移除签的回调
|
|
2602
|
-
|
|
2605
|
+
instCommonConfig.beforeRemoveCallBack(instCommonConfig);
|
|
2603
2606
|
}
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2607
|
+
instCommonConfig?.animElement?.remove();
|
|
2608
|
+
instCommonConfig?.popsElement?.remove();
|
|
2609
|
+
instCommonConfig?.maskElement?.remove();
|
|
2610
|
+
instCommonConfig?.$shadowContainer?.remove();
|
|
2608
2611
|
}
|
|
2609
|
-
// [
|
|
2610
|
-
|
|
2611
|
-
//
|
|
2612
|
-
|
|
2612
|
+
// [ inst[], inst[],...]
|
|
2613
|
+
instConfigList.forEach((instConfigList) => {
|
|
2614
|
+
// inst[]
|
|
2615
|
+
instConfigList.forEach((instConfigItem, index) => {
|
|
2613
2616
|
// 移除全部或者guid相同
|
|
2614
|
-
if (isAll ||
|
|
2617
|
+
if (isAll || instConfigItem["guid"] === guid) {
|
|
2615
2618
|
// 判断是否有动画
|
|
2616
|
-
let animName =
|
|
2619
|
+
let animName = instConfigItem.animElement.getAttribute("anim");
|
|
2617
2620
|
if (PopsAnimation.hasAnim(animName)) {
|
|
2618
2621
|
let reverseAnimName = animName + "-reverse";
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
+
instConfigItem.animElement.style.width = "100%";
|
|
2623
|
+
instConfigItem.animElement.style.height = "100%";
|
|
2624
|
+
instConfigItem.animElement.style["animation-name"] =
|
|
2622
2625
|
reverseAnimName;
|
|
2623
|
-
if (PopsAnimation.hasAnim(
|
|
2624
|
-
popsDOMUtils.on(
|
|
2625
|
-
removeItem(
|
|
2626
|
+
if (PopsAnimation.hasAnim(instConfigItem.animElement.style["animation-name"])) {
|
|
2627
|
+
popsDOMUtils.on(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), function () {
|
|
2628
|
+
removeItem(instConfigItem);
|
|
2626
2629
|
}, {
|
|
2627
2630
|
capture: true,
|
|
2628
2631
|
});
|
|
2629
2632
|
}
|
|
2630
2633
|
else {
|
|
2631
|
-
removeItem(
|
|
2634
|
+
removeItem(instConfigItem);
|
|
2632
2635
|
}
|
|
2633
2636
|
}
|
|
2634
2637
|
else {
|
|
2635
|
-
removeItem(
|
|
2638
|
+
removeItem(instConfigItem);
|
|
2636
2639
|
}
|
|
2637
|
-
|
|
2640
|
+
instConfigList.splice(index, 1);
|
|
2638
2641
|
}
|
|
2639
2642
|
});
|
|
2640
2643
|
});
|
|
2641
|
-
return
|
|
2644
|
+
return instConfigList;
|
|
2642
2645
|
},
|
|
2643
2646
|
/**
|
|
2644
2647
|
* 隐藏
|
|
2645
2648
|
* @param popsType
|
|
2646
|
-
* @param
|
|
2649
|
+
* @param instConfigList
|
|
2647
2650
|
* @param guid
|
|
2648
2651
|
* @param config
|
|
2649
2652
|
* @param animElement
|
|
2650
2653
|
* @param maskElement
|
|
2651
2654
|
*/
|
|
2652
|
-
hide(popsType,
|
|
2655
|
+
hide(popsType, instConfigList, guid, config, animElement, maskElement) {
|
|
2653
2656
|
return new Promise((resolve) => {
|
|
2654
2657
|
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
2655
2658
|
if (popsType === "drawer") {
|
|
@@ -2669,36 +2672,39 @@
|
|
|
2669
2672
|
}, drawerConfig.closeDelay);
|
|
2670
2673
|
}
|
|
2671
2674
|
else {
|
|
2672
|
-
let
|
|
2673
|
-
if (
|
|
2675
|
+
let fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
2676
|
+
if (fintInst) {
|
|
2674
2677
|
/* 存在动画 */
|
|
2675
|
-
let
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2678
|
+
let instConfigItem = fintInst;
|
|
2679
|
+
instConfigItem.animElement.style.width = "100%";
|
|
2680
|
+
instConfigItem.animElement.style.height = "100%";
|
|
2681
|
+
// @ts-ignore
|
|
2682
|
+
instConfigItem.animElement.style["animation-name"] =
|
|
2683
|
+
instConfigItem.animElement.getAttribute("anim") + "-reverse";
|
|
2684
|
+
if (PopsAnimation.hasAnim(
|
|
2685
|
+
// @ts-ignore
|
|
2686
|
+
instConfigItem.animElement.style["animation-name"])) {
|
|
2681
2687
|
/**
|
|
2682
2688
|
* 动画结束的回调
|
|
2683
2689
|
*/
|
|
2684
2690
|
function animationendCallBack() {
|
|
2685
|
-
|
|
2686
|
-
if (
|
|
2687
|
-
|
|
2691
|
+
instConfigItem.animElement.style.display = "none";
|
|
2692
|
+
if (instConfigItem.maskElement) {
|
|
2693
|
+
instConfigItem.maskElement.style.display = "none";
|
|
2688
2694
|
}
|
|
2689
|
-
popsDOMUtils.off(
|
|
2695
|
+
popsDOMUtils.off(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2690
2696
|
capture: true,
|
|
2691
2697
|
});
|
|
2692
2698
|
resolve();
|
|
2693
2699
|
}
|
|
2694
|
-
popsDOMUtils.on(
|
|
2700
|
+
popsDOMUtils.on(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2695
2701
|
capture: true,
|
|
2696
2702
|
});
|
|
2697
2703
|
}
|
|
2698
2704
|
else {
|
|
2699
|
-
|
|
2700
|
-
if (
|
|
2701
|
-
|
|
2705
|
+
instConfigItem.animElement.style.display = "none";
|
|
2706
|
+
if (instConfigItem.maskElement) {
|
|
2707
|
+
instConfigItem.maskElement.style.display = "none";
|
|
2702
2708
|
}
|
|
2703
2709
|
resolve();
|
|
2704
2710
|
}
|
|
@@ -2709,13 +2715,13 @@
|
|
|
2709
2715
|
/**
|
|
2710
2716
|
* 显示
|
|
2711
2717
|
* @param popsType
|
|
2712
|
-
* @param
|
|
2718
|
+
* @param instConfigList
|
|
2713
2719
|
* @param guid
|
|
2714
2720
|
* @param config
|
|
2715
2721
|
* @param animElement
|
|
2716
2722
|
* @param maskElement
|
|
2717
2723
|
*/
|
|
2718
|
-
show(popsType,
|
|
2724
|
+
show(popsType, instConfigList, guid, config, animElement, maskElement) {
|
|
2719
2725
|
return new Promise((resolve) => {
|
|
2720
2726
|
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
2721
2727
|
if (popsType === "drawer") {
|
|
@@ -2737,37 +2743,39 @@
|
|
|
2737
2743
|
}, drawerConfig.openDelay ?? 0);
|
|
2738
2744
|
}
|
|
2739
2745
|
else {
|
|
2740
|
-
let
|
|
2741
|
-
if (
|
|
2742
|
-
let
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
if (PopsAnimation.hasAnim(
|
|
2746
|
+
let fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
2747
|
+
if (fintInst) {
|
|
2748
|
+
let instConfigItem = fintInst;
|
|
2749
|
+
instConfigItem.animElement.style.width = "";
|
|
2750
|
+
instConfigItem.animElement.style.height = "";
|
|
2751
|
+
// @ts-ignore
|
|
2752
|
+
instConfigItem.animElement.style["animation-name"] = instConfigItem
|
|
2753
|
+
.animElement.getAttribute("anim")
|
|
2754
|
+
.replace("-reverse", "");
|
|
2755
|
+
if (PopsAnimation.hasAnim(
|
|
2756
|
+
// @ts-ignore
|
|
2757
|
+
instConfigItem.animElement.style["animation-name"])) {
|
|
2750
2758
|
/**
|
|
2751
2759
|
* 动画结束的回调
|
|
2752
2760
|
*/
|
|
2753
2761
|
function animationendCallBack() {
|
|
2754
|
-
popsDOMUtils.off(
|
|
2762
|
+
popsDOMUtils.off(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2755
2763
|
capture: true,
|
|
2756
2764
|
});
|
|
2757
2765
|
resolve();
|
|
2758
2766
|
}
|
|
2759
|
-
|
|
2760
|
-
if (
|
|
2761
|
-
|
|
2767
|
+
instConfigItem.animElement.style.display = "";
|
|
2768
|
+
if (instConfigItem.maskElement) {
|
|
2769
|
+
instConfigItem.maskElement.style.display = "";
|
|
2762
2770
|
}
|
|
2763
|
-
popsDOMUtils.on(
|
|
2771
|
+
popsDOMUtils.on(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2764
2772
|
capture: true,
|
|
2765
2773
|
});
|
|
2766
2774
|
}
|
|
2767
2775
|
else {
|
|
2768
|
-
|
|
2769
|
-
if (
|
|
2770
|
-
|
|
2776
|
+
instConfigItem.animElement.style.display = "";
|
|
2777
|
+
if (instConfigItem.maskElement) {
|
|
2778
|
+
instConfigItem.maskElement.style.display = "";
|
|
2771
2779
|
}
|
|
2772
2780
|
resolve();
|
|
2773
2781
|
}
|
|
@@ -2778,12 +2786,12 @@
|
|
|
2778
2786
|
/**
|
|
2779
2787
|
* 关闭
|
|
2780
2788
|
* @param popsType
|
|
2781
|
-
* @param
|
|
2789
|
+
* @param instConfigList
|
|
2782
2790
|
* @param guid
|
|
2783
2791
|
* @param config
|
|
2784
2792
|
* @param animElement
|
|
2785
2793
|
*/
|
|
2786
|
-
close(popsType,
|
|
2794
|
+
close(popsType, instConfigList, guid, config, animElement) {
|
|
2787
2795
|
return new Promise((resolve) => {
|
|
2788
2796
|
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
2789
2797
|
let drawerConfig = config;
|
|
@@ -2799,7 +2807,7 @@
|
|
|
2799
2807
|
return;
|
|
2800
2808
|
}
|
|
2801
2809
|
popsDOMUtils.off(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
|
|
2802
|
-
PopsInstanceUtils.removeInstance([
|
|
2810
|
+
PopsInstanceUtils.removeInstance([instConfigList], guid);
|
|
2803
2811
|
resolve();
|
|
2804
2812
|
}
|
|
2805
2813
|
/* 监听过渡结束 */
|
|
@@ -2831,7 +2839,7 @@
|
|
|
2831
2839
|
}, drawerConfig.closeDelay);
|
|
2832
2840
|
}
|
|
2833
2841
|
else {
|
|
2834
|
-
PopsInstanceUtils.removeInstance([
|
|
2842
|
+
PopsInstanceUtils.removeInstance([instConfigList], guid);
|
|
2835
2843
|
resolve();
|
|
2836
2844
|
}
|
|
2837
2845
|
});
|
|
@@ -3614,15 +3622,15 @@
|
|
|
3614
3622
|
function clickEvent(event) {
|
|
3615
3623
|
popsDOMUtils.preventEvent(event);
|
|
3616
3624
|
// 获取该类型实例存储列表
|
|
3617
|
-
let
|
|
3625
|
+
let targetInst = PopsInstData[details.type];
|
|
3618
3626
|
function originalRun() {
|
|
3619
3627
|
if (details.config.mask.clickEvent.toClose) {
|
|
3620
3628
|
/* 关闭 */
|
|
3621
|
-
return PopsInstanceUtils.close(details.type,
|
|
3629
|
+
return PopsInstanceUtils.close(details.type, targetInst, details.guid, details.config, details.animElement);
|
|
3622
3630
|
}
|
|
3623
3631
|
else if (details.config.mask.clickEvent.toHide) {
|
|
3624
3632
|
/* 隐藏 */
|
|
3625
|
-
return PopsInstanceUtils.hide(details.type,
|
|
3633
|
+
return PopsInstanceUtils.hide(details.type, targetInst, details.guid, details.config, details.animElement, result.maskElement);
|
|
3626
3634
|
}
|
|
3627
3635
|
}
|
|
3628
3636
|
if (typeof details.config.mask.clickCallBack === "function") {
|
|
@@ -3801,13 +3809,13 @@
|
|
|
3801
3809
|
mode: mode,
|
|
3802
3810
|
guid: guid,
|
|
3803
3811
|
close() {
|
|
3804
|
-
return PopsInstanceUtils.close(mode,
|
|
3812
|
+
return PopsInstanceUtils.close(mode, PopsInstData[mode], guid, config, animElement);
|
|
3805
3813
|
},
|
|
3806
3814
|
hide() {
|
|
3807
|
-
return PopsInstanceUtils.hide(mode,
|
|
3815
|
+
return PopsInstanceUtils.hide(mode, PopsInstData[mode], guid, config, animElement, maskElement);
|
|
3808
3816
|
},
|
|
3809
3817
|
show() {
|
|
3810
|
-
return PopsInstanceUtils.show(mode,
|
|
3818
|
+
return PopsInstanceUtils.show(mode, PopsInstData[mode], guid, config, animElement, maskElement);
|
|
3811
3819
|
},
|
|
3812
3820
|
};
|
|
3813
3821
|
},
|
|
@@ -3829,13 +3837,13 @@
|
|
|
3829
3837
|
mode: mode,
|
|
3830
3838
|
guid: guid,
|
|
3831
3839
|
close() {
|
|
3832
|
-
return PopsInstanceUtils.close(mode,
|
|
3840
|
+
return PopsInstanceUtils.close(mode, PopsInstData[mode], guid, config, animElement);
|
|
3833
3841
|
},
|
|
3834
3842
|
hide() {
|
|
3835
|
-
return PopsInstanceUtils.hide(mode,
|
|
3843
|
+
return PopsInstanceUtils.hide(mode, PopsInstData[mode], guid, config, animElement, maskElement);
|
|
3836
3844
|
},
|
|
3837
3845
|
show() {
|
|
3838
|
-
return PopsInstanceUtils.show(mode,
|
|
3846
|
+
return PopsInstanceUtils.show(mode, PopsInstData[mode], guid, config, animElement, maskElement);
|
|
3839
3847
|
},
|
|
3840
3848
|
};
|
|
3841
3849
|
},
|
|
@@ -3944,23 +3952,27 @@
|
|
|
3944
3952
|
*/
|
|
3945
3953
|
handleOnly(type, config) {
|
|
3946
3954
|
if (config.only) {
|
|
3955
|
+
// .loading
|
|
3956
|
+
// .tooltip
|
|
3957
|
+
// .rightClickMenu
|
|
3958
|
+
// 单独处理
|
|
3947
3959
|
if (type === "loading" ||
|
|
3948
3960
|
type === "tooltip" ||
|
|
3949
3961
|
type === "rightClickMenu") {
|
|
3950
|
-
let
|
|
3951
|
-
if (
|
|
3952
|
-
PopsInstanceUtils.removeInstance([
|
|
3962
|
+
let inst = PopsInstData[type];
|
|
3963
|
+
if (inst) {
|
|
3964
|
+
PopsInstanceUtils.removeInstance([inst], "", true);
|
|
3953
3965
|
}
|
|
3954
3966
|
}
|
|
3955
3967
|
else {
|
|
3956
3968
|
PopsInstanceUtils.removeInstance([
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
|
|
3969
|
+
PopsInstData.alert,
|
|
3970
|
+
PopsInstData.confirm,
|
|
3971
|
+
PopsInstData.prompt,
|
|
3972
|
+
PopsInstData.iframe,
|
|
3973
|
+
PopsInstData.drawer,
|
|
3974
|
+
PopsInstData.folder,
|
|
3975
|
+
PopsInstData.panel,
|
|
3964
3976
|
], "", true);
|
|
3965
3977
|
}
|
|
3966
3978
|
}
|
|
@@ -3981,7 +3993,7 @@
|
|
|
3981
3993
|
* @param value
|
|
3982
3994
|
*/
|
|
3983
3995
|
handlePush(type, value) {
|
|
3984
|
-
|
|
3996
|
+
PopsInstData[type].push(value);
|
|
3985
3997
|
},
|
|
3986
3998
|
};
|
|
3987
3999
|
|
|
@@ -4050,11 +4062,11 @@
|
|
|
4050
4062
|
init(details) {
|
|
4051
4063
|
const guid = popsUtils.getRandomGUID();
|
|
4052
4064
|
// 设置当前类型
|
|
4053
|
-
const
|
|
4065
|
+
const popsType = "alert";
|
|
4054
4066
|
let config = PopsAlertConfig();
|
|
4055
4067
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4056
4068
|
config = popsUtils.assign(config, details);
|
|
4057
|
-
config = PopsHandler.handleOnly(
|
|
4069
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4058
4070
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4059
4071
|
PopsHandler.handleInit($shadowRoot, [
|
|
4060
4072
|
{
|
|
@@ -4089,23 +4101,23 @@
|
|
|
4089
4101
|
// 先把z-index提取出来
|
|
4090
4102
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4091
4103
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4092
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4093
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4094
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4095
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4096
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4104
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4105
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4106
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4107
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4108
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4097
4109
|
/*html*/ `
|
|
4098
|
-
<div class="pops-title pops-${
|
|
4110
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4099
4111
|
? config.title.text
|
|
4100
|
-
: `<p pops class="pops-${
|
|
4101
|
-
<div class="pops-content pops-${
|
|
4112
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4113
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
4102
4114
|
? config.content.text
|
|
4103
|
-
: `<p pops class="pops-${
|
|
4115
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4104
4116
|
/**
|
|
4105
4117
|
* 弹窗的主元素，包括动画层
|
|
4106
4118
|
*/
|
|
4107
4119
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4108
|
-
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim,
|
|
4120
|
+
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4109
4121
|
/** 遮罩层元素 */
|
|
4110
4122
|
let $mask = null;
|
|
4111
4123
|
/** 已创建的元素列表 */
|
|
@@ -4113,7 +4125,7 @@
|
|
|
4113
4125
|
/* 遮罩层元素 */
|
|
4114
4126
|
if (config.mask.enable) {
|
|
4115
4127
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4116
|
-
type:
|
|
4128
|
+
type: popsType,
|
|
4117
4129
|
guid: guid,
|
|
4118
4130
|
config: config,
|
|
4119
4131
|
animElement: $anim,
|
|
@@ -4123,7 +4135,7 @@
|
|
|
4123
4135
|
elementList.push($mask);
|
|
4124
4136
|
}
|
|
4125
4137
|
/* 处理返回的配置 */
|
|
4126
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4138
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4127
4139
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
4128
4140
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
4129
4141
|
/* 为底部ok按钮添加点击事件 */
|
|
@@ -4139,7 +4151,7 @@
|
|
|
4139
4151
|
$anim.after($mask);
|
|
4140
4152
|
}
|
|
4141
4153
|
/* 保存 */
|
|
4142
|
-
PopsHandler.handlePush(
|
|
4154
|
+
PopsHandler.handlePush(popsType, {
|
|
4143
4155
|
guid: guid,
|
|
4144
4156
|
animElement: $anim,
|
|
4145
4157
|
popsElement: $pops,
|
|
@@ -4254,11 +4266,11 @@
|
|
|
4254
4266
|
init(details) {
|
|
4255
4267
|
const guid = popsUtils.getRandomGUID();
|
|
4256
4268
|
// 设置当前类型
|
|
4257
|
-
const
|
|
4269
|
+
const popsType = "confirm";
|
|
4258
4270
|
let config = PopsConfirmConfig();
|
|
4259
4271
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4260
4272
|
config = popsUtils.assign(config, details);
|
|
4261
|
-
config = PopsHandler.handleOnly(
|
|
4273
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4262
4274
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4263
4275
|
PopsHandler.handleInit($shadowRoot, [
|
|
4264
4276
|
{
|
|
@@ -4293,23 +4305,23 @@
|
|
|
4293
4305
|
// 先把z-index提取出来
|
|
4294
4306
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4295
4307
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4296
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4297
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4298
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4299
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4300
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4308
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4309
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4310
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4311
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4312
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4301
4313
|
/*html*/ `
|
|
4302
|
-
<div class="pops-title pops-${
|
|
4314
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4303
4315
|
? config.title.text
|
|
4304
|
-
: `<p pops class="pops-${
|
|
4305
|
-
<div class="pops-content pops-${
|
|
4316
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4317
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
4306
4318
|
? config.content.text
|
|
4307
|
-
: `<p pops class="pops-${
|
|
4319
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4308
4320
|
/**
|
|
4309
4321
|
* 弹窗的主元素，包括动画层
|
|
4310
4322
|
*/
|
|
4311
4323
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4312
|
-
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim,
|
|
4324
|
+
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4313
4325
|
/**
|
|
4314
4326
|
* 遮罩层元素
|
|
4315
4327
|
*/
|
|
@@ -4321,7 +4333,7 @@
|
|
|
4321
4333
|
if (config.mask.enable) {
|
|
4322
4334
|
// 启用遮罩层
|
|
4323
4335
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4324
|
-
type:
|
|
4336
|
+
type: popsType,
|
|
4325
4337
|
guid: guid,
|
|
4326
4338
|
config: config,
|
|
4327
4339
|
animElement: $anim,
|
|
@@ -4330,7 +4342,7 @@
|
|
|
4330
4342
|
$mask = _handleMask_.maskElement;
|
|
4331
4343
|
elementList.push($mask);
|
|
4332
4344
|
}
|
|
4333
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4345
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4334
4346
|
PopsHandler.handleClickEvent("close", $btnClose, eventDetails, config.btn.close.callback);
|
|
4335
4347
|
PopsHandler.handleClickEvent("ok", $btnOk, eventDetails, config.btn.ok.callback);
|
|
4336
4348
|
PopsHandler.handleClickEvent("cancel", $btnCancel, eventDetails, config.btn.cancel.callback);
|
|
@@ -4344,7 +4356,7 @@
|
|
|
4344
4356
|
if ($mask != null) {
|
|
4345
4357
|
$anim.after($mask);
|
|
4346
4358
|
}
|
|
4347
|
-
PopsHandler.handlePush(
|
|
4359
|
+
PopsHandler.handlePush(popsType, {
|
|
4348
4360
|
guid: guid,
|
|
4349
4361
|
animElement: $anim,
|
|
4350
4362
|
popsElement: $pops,
|
|
@@ -4463,11 +4475,11 @@
|
|
|
4463
4475
|
init(details) {
|
|
4464
4476
|
const guid = popsUtils.getRandomGUID();
|
|
4465
4477
|
// 设置当前类型
|
|
4466
|
-
const
|
|
4478
|
+
const popsType = "prompt";
|
|
4467
4479
|
let config = PopsPromptConfig();
|
|
4468
4480
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4469
4481
|
config = popsUtils.assign(config, details);
|
|
4470
|
-
config = PopsHandler.handleOnly(
|
|
4482
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4471
4483
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4472
4484
|
PopsHandler.handleInit($shadowRoot, [
|
|
4473
4485
|
{
|
|
@@ -4502,16 +4514,16 @@
|
|
|
4502
4514
|
// 先把z-index提取出来
|
|
4503
4515
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4504
4516
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4505
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4506
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4507
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4508
|
-
let { contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4509
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4517
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4518
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4519
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4520
|
+
let { contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4521
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4510
4522
|
/*html*/ `
|
|
4511
|
-
<div class="pops-title pops-${
|
|
4523
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4512
4524
|
? config.title.text
|
|
4513
|
-
: `<p pops class="pops-${
|
|
4514
|
-
<div class="pops-content pops-${
|
|
4525
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4526
|
+
<div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${config.content.row
|
|
4515
4527
|
? '<textarea name="pops-input-text" pops="" placeholder="' +
|
|
4516
4528
|
config.content.placeholder +
|
|
4517
4529
|
'"></textarea>'
|
|
@@ -4524,7 +4536,7 @@
|
|
|
4524
4536
|
* 弹窗的主元素，包括动画层
|
|
4525
4537
|
*/
|
|
4526
4538
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4527
|
-
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim,
|
|
4539
|
+
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4528
4540
|
/**
|
|
4529
4541
|
* 遮罩层元素
|
|
4530
4542
|
*/
|
|
@@ -4536,7 +4548,7 @@
|
|
|
4536
4548
|
if (config.mask.enable) {
|
|
4537
4549
|
// 启用遮罩层
|
|
4538
4550
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4539
|
-
type:
|
|
4551
|
+
type: popsType,
|
|
4540
4552
|
guid: guid,
|
|
4541
4553
|
config: config,
|
|
4542
4554
|
animElement: $anim,
|
|
@@ -4545,7 +4557,7 @@
|
|
|
4545
4557
|
$mask = _handleMask_.maskElement;
|
|
4546
4558
|
elementList.push($mask);
|
|
4547
4559
|
}
|
|
4548
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4560
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4549
4561
|
/* 输入框赋值初始值 */
|
|
4550
4562
|
$input.value = config.content.text;
|
|
4551
4563
|
PopsHandler.handlePromptClickEvent("close", $input, $btnClose, eventDetails, config.btn.close.callback);
|
|
@@ -4561,7 +4573,7 @@
|
|
|
4561
4573
|
if ($mask != null) {
|
|
4562
4574
|
$anim.after($mask);
|
|
4563
4575
|
}
|
|
4564
|
-
PopsHandler.handlePush(
|
|
4576
|
+
PopsHandler.handlePush(popsType, {
|
|
4565
4577
|
guid: guid,
|
|
4566
4578
|
animElement: $anim,
|
|
4567
4579
|
popsElement: $pops,
|
|
@@ -4756,14 +4768,14 @@
|
|
|
4756
4768
|
init(details) {
|
|
4757
4769
|
const guid = popsUtils.getRandomGUID();
|
|
4758
4770
|
// 设置当前类型
|
|
4759
|
-
const
|
|
4771
|
+
const popsType = "iframe";
|
|
4760
4772
|
let config = PopsIframeConfig();
|
|
4761
4773
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4762
4774
|
config = popsUtils.assign(config, details);
|
|
4763
4775
|
if (config.url == null) {
|
|
4764
4776
|
throw new Error("config.url不能为空");
|
|
4765
4777
|
}
|
|
4766
|
-
config = PopsHandler.handleOnly(
|
|
4778
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4767
4779
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4768
4780
|
PopsHandler.handleInit($shadowRoot, [
|
|
4769
4781
|
{
|
|
@@ -4799,17 +4811,17 @@
|
|
|
4799
4811
|
// 先把z-index提取出来
|
|
4800
4812
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4801
4813
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
|
|
4802
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4814
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4803
4815
|
let iframeLoadingHTML = '<div class="pops-loading"></div>';
|
|
4804
4816
|
let titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
|
|
4805
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4806
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4817
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4818
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4807
4819
|
/*html*/ `
|
|
4808
|
-
<div class="pops-title pops-${
|
|
4820
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4809
4821
|
? titleText
|
|
4810
|
-
: `<p pops class="pops-${
|
|
4811
|
-
<div class="pops-content pops-${
|
|
4812
|
-
<div class="pops-${
|
|
4822
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
|
|
4823
|
+
<div class="pops-content pops-${popsType}-content">
|
|
4824
|
+
<div class="pops-${popsType}-content-global-loading"></div>
|
|
4813
4825
|
<iframe src="${config.url}" pops ${config.sandbox
|
|
4814
4826
|
? "sandbox='allow-forms allow-same-origin allow-scripts'"
|
|
4815
4827
|
: ""}>
|
|
@@ -4819,7 +4831,7 @@
|
|
|
4819
4831
|
* 弹窗的主元素，包括动画层
|
|
4820
4832
|
*/
|
|
4821
4833
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4822
|
-
let { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim,
|
|
4834
|
+
let { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4823
4835
|
let $iframeContainer = PopsCore.document.querySelector(".pops-iframe-container");
|
|
4824
4836
|
if (!$iframeContainer) {
|
|
4825
4837
|
$iframeContainer = PopsCore.document.createElement("div");
|
|
@@ -4838,7 +4850,7 @@
|
|
|
4838
4850
|
let elementList = [$anim];
|
|
4839
4851
|
if (config.mask.enable) {
|
|
4840
4852
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4841
|
-
type:
|
|
4853
|
+
type: popsType,
|
|
4842
4854
|
guid: guid,
|
|
4843
4855
|
config: config,
|
|
4844
4856
|
animElement: $anim,
|
|
@@ -4847,7 +4859,7 @@
|
|
|
4847
4859
|
$mask = _handleMask_.maskElement;
|
|
4848
4860
|
elementList.push($mask);
|
|
4849
4861
|
}
|
|
4850
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4862
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4851
4863
|
eventDetails["iframeElement"] = $iframe;
|
|
4852
4864
|
popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
|
|
4853
4865
|
/* 动画加载完毕 */
|
|
@@ -4984,14 +4996,14 @@
|
|
|
4984
4996
|
popsDOMUtils.on(headerCloseBtnElement, "click", (event) => {
|
|
4985
4997
|
event.preventDefault();
|
|
4986
4998
|
event.stopPropagation();
|
|
4987
|
-
PopsInstanceUtils.removeInstance([
|
|
4999
|
+
PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
|
|
4988
5000
|
if (typeof config?.btn?.close?.callback === "function") {
|
|
4989
5001
|
config.btn.close.callback(eventDetails, event);
|
|
4990
5002
|
}
|
|
4991
5003
|
}, {
|
|
4992
5004
|
capture: true,
|
|
4993
5005
|
});
|
|
4994
|
-
PopsHandler.handlePush(
|
|
5006
|
+
PopsHandler.handlePush(popsType, {
|
|
4995
5007
|
guid: guid,
|
|
4996
5008
|
animElement: $anim,
|
|
4997
5009
|
popsElement: $pops,
|
|
@@ -5095,11 +5107,11 @@
|
|
|
5095
5107
|
init(details) {
|
|
5096
5108
|
const guid = popsUtils.getRandomGUID();
|
|
5097
5109
|
// 设置当前类型
|
|
5098
|
-
const
|
|
5110
|
+
const popsType = "drawer";
|
|
5099
5111
|
let config = PopsDrawerConfig();
|
|
5100
5112
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5101
5113
|
config = popsUtils.assign(config, details);
|
|
5102
|
-
config = PopsHandler.handleOnly(
|
|
5114
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
5103
5115
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5104
5116
|
PopsHandler.handleInit($shadowRoot, [
|
|
5105
5117
|
{
|
|
@@ -5134,25 +5146,25 @@
|
|
|
5134
5146
|
// 先把z-index提取出来
|
|
5135
5147
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5136
5148
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
5137
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
5138
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
5139
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
5140
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
5141
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
5149
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
5150
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
5151
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
5152
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
5153
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
5142
5154
|
/*html*/ `
|
|
5143
5155
|
${config.title.enable
|
|
5144
|
-
? /*html*/ `<div class="pops-title pops-${
|
|
5156
|
+
? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
|
|
5145
5157
|
? config.title.text
|
|
5146
|
-
: /*html*/ `<p pops class="pops-${
|
|
5158
|
+
: /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
|
|
5147
5159
|
: ""}
|
|
5148
|
-
<div class="pops-content pops-${
|
|
5160
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
5149
5161
|
? config.content.text
|
|
5150
|
-
: `<p pops class="pops-${
|
|
5162
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
5151
5163
|
/**
|
|
5152
5164
|
* 弹窗的主元素，包括动画层
|
|
5153
5165
|
*/
|
|
5154
5166
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
5155
|
-
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement, } = PopsHandler.handleQueryElement($anim,
|
|
5167
|
+
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5156
5168
|
let $pops = popsElement;
|
|
5157
5169
|
let $headerCloseBtn = headerCloseBtnElement;
|
|
5158
5170
|
let $btnCancel = btnCancelElement;
|
|
@@ -5168,7 +5180,7 @@
|
|
|
5168
5180
|
let elementList = [$anim];
|
|
5169
5181
|
if (config.mask.enable) {
|
|
5170
5182
|
let _handleMask_ = PopsHandler.handleMask({
|
|
5171
|
-
type:
|
|
5183
|
+
type: popsType,
|
|
5172
5184
|
guid: guid,
|
|
5173
5185
|
config: config,
|
|
5174
5186
|
animElement: $anim,
|
|
@@ -5177,7 +5189,7 @@
|
|
|
5177
5189
|
$mask = _handleMask_.maskElement;
|
|
5178
5190
|
elementList.push($mask);
|
|
5179
5191
|
}
|
|
5180
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
5192
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5181
5193
|
/* 处理方向 */
|
|
5182
5194
|
$pops.setAttribute("direction", config.direction);
|
|
5183
5195
|
/* 处理border-radius */
|
|
@@ -5265,7 +5277,7 @@
|
|
|
5265
5277
|
if ($mask != null) {
|
|
5266
5278
|
$anim.after($mask);
|
|
5267
5279
|
}
|
|
5268
|
-
PopsHandler.handlePush(
|
|
5280
|
+
PopsHandler.handlePush(popsType, {
|
|
5269
5281
|
guid: guid,
|
|
5270
5282
|
animElement: $anim,
|
|
5271
5283
|
popsElement: $pops,
|
|
@@ -5456,11 +5468,11 @@
|
|
|
5456
5468
|
init(details) {
|
|
5457
5469
|
const guid = popsUtils.getRandomGUID();
|
|
5458
5470
|
// 设置当前类型
|
|
5459
|
-
const
|
|
5471
|
+
const popsType = "folder";
|
|
5460
5472
|
let config = PopsFolderConfig();
|
|
5461
5473
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5462
5474
|
config = popsUtils.assign(config, details);
|
|
5463
|
-
config = PopsHandler.handleOnly(
|
|
5475
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
5464
5476
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5465
5477
|
PopsHandler.handleInit($shadowRoot, [
|
|
5466
5478
|
{
|
|
@@ -5540,19 +5552,15 @@
|
|
|
5540
5552
|
/* Android安装包 */
|
|
5541
5553
|
let androidIconList = ["apk", "apkm", "xapk"];
|
|
5542
5554
|
zipIconList.forEach((keyName) => {
|
|
5543
|
-
// @ts-ignore
|
|
5544
5555
|
Folder_ICON[keyName] = Folder_ICON.zip;
|
|
5545
5556
|
});
|
|
5546
5557
|
imageIconList.forEach((keyName) => {
|
|
5547
|
-
// @ts-ignore
|
|
5548
5558
|
Folder_ICON[keyName] = Folder_ICON.png;
|
|
5549
5559
|
});
|
|
5550
5560
|
codeLanguageIconList.forEach((keyName) => {
|
|
5551
|
-
// @ts-ignore
|
|
5552
5561
|
Folder_ICON[keyName] = Folder_ICON.html;
|
|
5553
5562
|
});
|
|
5554
5563
|
androidIconList.forEach((keyName) => {
|
|
5555
|
-
// @ts-ignore
|
|
5556
5564
|
Folder_ICON[keyName] = Folder_ICON.apk;
|
|
5557
5565
|
});
|
|
5558
5566
|
if (details?.folder) {
|
|
@@ -5562,108 +5570,105 @@
|
|
|
5562
5570
|
// 先把z-index提取出来
|
|
5563
5571
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5564
5572
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
5565
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
5566
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
5567
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
5568
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
5573
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
5574
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
5575
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
5576
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
5569
5577
|
/*html*/ `
|
|
5570
|
-
<div class="pops-title pops-${
|
|
5578
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
5571
5579
|
? config.title.text
|
|
5572
|
-
: `<p pops class="pops-${
|
|
5573
|
-
<div class="pops-content pops-${
|
|
5580
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
5581
|
+
<div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
|
|
5574
5582
|
<div class="pops-folder-list">
|
|
5575
5583
|
<div class="pops-folder-file-list-breadcrumb">
|
|
5576
|
-
|
|
5577
|
-
|
|
5578
|
-
|
|
5579
|
-
|
|
5580
|
-
|
|
5584
|
+
<div class="pops-folder-file-list-breadcrumb-primary">
|
|
5585
|
+
<span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
|
|
5586
|
+
<a>全部文件</a>
|
|
5587
|
+
</span>
|
|
5588
|
+
</div>
|
|
5581
5589
|
</div>
|
|
5582
5590
|
<div class="pops-folder-list-table__header-div">
|
|
5583
|
-
|
|
5584
|
-
|
|
5585
|
-
|
|
5586
|
-
|
|
5587
|
-
|
|
5588
|
-
|
|
5589
|
-
|
|
5590
|
-
|
|
5591
|
-
|
|
5592
|
-
|
|
5593
|
-
|
|
5594
|
-
|
|
5595
|
-
|
|
5596
|
-
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
|
|
5600
|
-
|
|
5601
|
-
|
|
5602
|
-
|
|
5603
|
-
|
|
5604
|
-
|
|
5605
|
-
|
|
5606
|
-
|
|
5607
|
-
|
|
5608
|
-
|
|
5609
|
-
|
|
5610
|
-
|
|
5611
|
-
|
|
5612
|
-
|
|
5613
|
-
|
|
5614
|
-
|
|
5615
|
-
|
|
5616
|
-
|
|
5617
|
-
|
|
5618
|
-
|
|
5619
|
-
|
|
5620
|
-
|
|
5621
|
-
|
|
5622
|
-
|
|
5623
|
-
|
|
5624
|
-
|
|
5625
|
-
|
|
5626
|
-
|
|
5627
|
-
|
|
5628
|
-
|
|
5629
|
-
|
|
5630
|
-
|
|
5631
|
-
|
|
5632
|
-
|
|
5633
|
-
|
|
5634
|
-
|
|
5635
|
-
|
|
5636
|
-
|
|
5637
|
-
|
|
5638
|
-
|
|
5639
|
-
|
|
5640
|
-
|
|
5641
|
-
|
|
5642
|
-
|
|
5643
|
-
|
|
5644
|
-
|
|
5645
|
-
|
|
5646
|
-
|
|
5647
|
-
|
|
5648
|
-
|
|
5649
|
-
|
|
5650
|
-
|
|
5591
|
+
<table class="pops-folder-list-table__header">
|
|
5592
|
+
<colgroup>
|
|
5593
|
+
<col width="52%">
|
|
5594
|
+
<col width="24%">
|
|
5595
|
+
<col width="16%">
|
|
5596
|
+
</colgroup>
|
|
5597
|
+
<thead>
|
|
5598
|
+
<tr class="pops-folder-list-table__header-row">
|
|
5599
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5600
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5601
|
+
<span>文件名</span>
|
|
5602
|
+
<div class="pops-folder-list-table__sort" data-sort="fileName">
|
|
5603
|
+
<div class="pops-folder-icon-arrow" data-sort="按文件名排序">
|
|
5604
|
+
<svg
|
|
5605
|
+
viewBox="0 0 1024 1024"
|
|
5606
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5607
|
+
<path
|
|
5608
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5609
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5610
|
+
<path
|
|
5611
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5612
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5613
|
+
</svg>
|
|
5614
|
+
</div>
|
|
5615
|
+
</div>
|
|
5616
|
+
</div>
|
|
5617
|
+
</th>
|
|
5618
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5619
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5620
|
+
<span>修改时间</span>
|
|
5621
|
+
<div class="pops-folder-list-table__sort" data-sort="latestTime">
|
|
5622
|
+
<div class="pops-folder-icon-arrow" title="按修改时间排序">
|
|
5623
|
+
<svg
|
|
5624
|
+
viewBox="0 0 1024 1024"
|
|
5625
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5626
|
+
<path
|
|
5627
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5628
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5629
|
+
<path
|
|
5630
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5631
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5632
|
+
</svg>
|
|
5633
|
+
</div>
|
|
5634
|
+
</div>
|
|
5635
|
+
</div>
|
|
5636
|
+
</th>
|
|
5637
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5638
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5639
|
+
<span>大小</span>
|
|
5640
|
+
<div class="pops-folder-list-table__sort" data-sort="fileSize">
|
|
5641
|
+
<div class="pops-folder-icon-arrow" title="按大小排序">
|
|
5642
|
+
<svg
|
|
5643
|
+
viewBox="0 0 1024 1024"
|
|
5644
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5645
|
+
<path
|
|
5646
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5647
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5648
|
+
<path
|
|
5649
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5650
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5651
|
+
</svg>
|
|
5652
|
+
</div>
|
|
5653
|
+
</div>
|
|
5654
|
+
</div>
|
|
5655
|
+
</th>
|
|
5656
|
+
</tr>
|
|
5657
|
+
</thead>
|
|
5658
|
+
</table>
|
|
5651
5659
|
</div>
|
|
5652
5660
|
<div class="pops-folder-list-table__body-div">
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5661
|
+
<table class="pops-folder-list-table__body">
|
|
5662
|
+
<colgroup>
|
|
5663
|
+
${popsUtils.isPhone()
|
|
5656
5664
|
? `<col width="100%">`
|
|
5657
5665
|
: `
|
|
5658
|
-
|
|
5659
|
-
|
|
5660
|
-
|
|
5661
|
-
|
|
5662
|
-
|
|
5663
|
-
|
|
5664
|
-
|
|
5665
|
-
</tbody>
|
|
5666
|
-
</table>
|
|
5666
|
+
<col width="52%">
|
|
5667
|
+
<col width="24%">
|
|
5668
|
+
<col width="16%">`}
|
|
5669
|
+
</colgroup>
|
|
5670
|
+
<tbody></tbody>
|
|
5671
|
+
</table>
|
|
5667
5672
|
</div>
|
|
5668
5673
|
</div>
|
|
5669
5674
|
</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
@@ -5675,7 +5680,7 @@
|
|
|
5675
5680
|
// folderListElement,
|
|
5676
5681
|
// folderListHeaderElement,
|
|
5677
5682
|
// folderListHeaderRowElement,
|
|
5678
|
-
folderListBodyElement, folderFileListBreadcrumbPrimaryElement, headerCloseBtnElement: $btnCloseBtn, btnOkElement, btnCancelElement, btnOtherElement, folderListSortFileNameElement, folderListSortLatestTimeElement, folderListSortFileSizeElement, } = PopsHandler.handleQueryElement($anim,
|
|
5683
|
+
folderListBodyElement, folderFileListBreadcrumbPrimaryElement, headerCloseBtnElement: $btnCloseBtn, btnOkElement, btnCancelElement, btnOtherElement, folderListSortFileNameElement, folderListSortLatestTimeElement, folderListSortFileSizeElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5679
5684
|
/**
|
|
5680
5685
|
* 遮罩层元素
|
|
5681
5686
|
*/
|
|
@@ -5686,7 +5691,7 @@
|
|
|
5686
5691
|
let elementList = [$anim];
|
|
5687
5692
|
if (config.mask.enable) {
|
|
5688
5693
|
let _handleMask_ = PopsHandler.handleMask({
|
|
5689
|
-
type:
|
|
5694
|
+
type: popsType,
|
|
5690
5695
|
guid: guid,
|
|
5691
5696
|
config: config,
|
|
5692
5697
|
animElement: $anim,
|
|
@@ -5696,7 +5701,7 @@
|
|
|
5696
5701
|
elementList.push($mask);
|
|
5697
5702
|
}
|
|
5698
5703
|
/* 事件 */
|
|
5699
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
5704
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5700
5705
|
PopsHandler.handleClickEvent("close", $btnCloseBtn, eventDetails, config.btn.close.callback);
|
|
5701
5706
|
PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok.callback);
|
|
5702
5707
|
PopsHandler.handleClickEvent("cancel", btnCancelElement, eventDetails, config.btn.cancel.callback);
|
|
@@ -5789,10 +5794,10 @@
|
|
|
5789
5794
|
fileSize: origin_fileSize,
|
|
5790
5795
|
isFolder: isFolder,
|
|
5791
5796
|
};
|
|
5792
|
-
fileNameElement
|
|
5793
|
-
fileTimeElement
|
|
5794
|
-
fileFormatSize
|
|
5795
|
-
folderELement
|
|
5797
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
5798
|
+
Reflect.set(fileTimeElement, "__value__", __value__);
|
|
5799
|
+
Reflect.set(fileFormatSize, "__value__", __value__);
|
|
5800
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
5796
5801
|
folderELement.appendChild(fileNameElement);
|
|
5797
5802
|
folderELement.appendChild(fileTimeElement);
|
|
5798
5803
|
folderELement.appendChild(fileFormatSize);
|
|
@@ -5859,8 +5864,8 @@
|
|
|
5859
5864
|
fileSize: origin_fileSize,
|
|
5860
5865
|
isFolder: isFolder,
|
|
5861
5866
|
};
|
|
5862
|
-
fileNameElement
|
|
5863
|
-
folderELement
|
|
5867
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
5868
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
5864
5869
|
folderELement.appendChild(fileNameElement);
|
|
5865
5870
|
return {
|
|
5866
5871
|
folderELement,
|
|
@@ -5870,10 +5875,13 @@
|
|
|
5870
5875
|
/**
|
|
5871
5876
|
* 清空每行的元素
|
|
5872
5877
|
*/
|
|
5873
|
-
function
|
|
5878
|
+
function clearFolderRow() {
|
|
5874
5879
|
PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
|
|
5875
5880
|
}
|
|
5876
|
-
|
|
5881
|
+
/**
|
|
5882
|
+
* 创建顶部导航的箭头图标
|
|
5883
|
+
*/
|
|
5884
|
+
function createHeaderArrowIcon() {
|
|
5877
5885
|
let iconArrowElement = popsDOMUtils.createElement("div", {
|
|
5878
5886
|
className: "iconArrow",
|
|
5879
5887
|
});
|
|
@@ -5881,17 +5889,16 @@
|
|
|
5881
5889
|
}
|
|
5882
5890
|
/**
|
|
5883
5891
|
* 添加顶部导航
|
|
5884
|
-
* @param
|
|
5885
|
-
* @param
|
|
5886
|
-
* @returns
|
|
5892
|
+
* @param folderName 文件夹名
|
|
5893
|
+
* @param folderDataConfig 文件夹配置
|
|
5887
5894
|
*/
|
|
5888
|
-
function
|
|
5895
|
+
function createHeaderFileLinkNavgiation(folderName, folderDataConfig) {
|
|
5889
5896
|
let spanElement = popsDOMUtils.createElement("span", {
|
|
5890
5897
|
className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
|
|
5891
|
-
innerHTML: `<a>${
|
|
5892
|
-
_config_:
|
|
5898
|
+
innerHTML: `<a>${folderName}</a>`,
|
|
5899
|
+
_config_: folderDataConfig,
|
|
5893
5900
|
}, {
|
|
5894
|
-
title:
|
|
5901
|
+
title: folderName,
|
|
5895
5902
|
});
|
|
5896
5903
|
return spanElement;
|
|
5897
5904
|
}
|
|
@@ -5899,10 +5906,10 @@
|
|
|
5899
5906
|
* 顶部导航的点击事件
|
|
5900
5907
|
* @param event
|
|
5901
5908
|
* @param isTop 是否是全部文件按钮
|
|
5902
|
-
* @param
|
|
5909
|
+
* @param folderDataConfigList 配置
|
|
5903
5910
|
*/
|
|
5904
|
-
function breadcrumbAllFilesElementClickEvent(event, isTop,
|
|
5905
|
-
|
|
5911
|
+
function breadcrumbAllFilesElementClickEvent(event, isTop, folderDataConfigList) {
|
|
5912
|
+
clearFolderRow();
|
|
5906
5913
|
/* 获取当前的导航元素 */
|
|
5907
5914
|
let $click = event.target;
|
|
5908
5915
|
let currentBreadcrumb = $click.closest("span.pops-folder-file-list-breadcrumb-allFiles");
|
|
@@ -5928,16 +5935,16 @@
|
|
|
5928
5935
|
},
|
|
5929
5936
|
addIndexCSS: false,
|
|
5930
5937
|
});
|
|
5931
|
-
addFolderElement(
|
|
5938
|
+
addFolderElement(folderDataConfigList);
|
|
5932
5939
|
loadingMask.close();
|
|
5933
5940
|
}
|
|
5934
5941
|
/**
|
|
5935
5942
|
* 刷新文件列表界面信息
|
|
5936
5943
|
* @param event
|
|
5937
|
-
* @param
|
|
5944
|
+
* @param folderDataConfig
|
|
5938
5945
|
*/
|
|
5939
|
-
async function refreshFolderInfoClickEvent(event,
|
|
5940
|
-
|
|
5946
|
+
async function refreshFolderInfoClickEvent(event, folderDataConfig) {
|
|
5947
|
+
clearFolderRow();
|
|
5941
5948
|
let loadingMask = PopsLoading.init({
|
|
5942
5949
|
parent: $content,
|
|
5943
5950
|
content: {
|
|
@@ -5948,12 +5955,12 @@
|
|
|
5948
5955
|
},
|
|
5949
5956
|
addIndexCSS: false,
|
|
5950
5957
|
});
|
|
5951
|
-
if (typeof
|
|
5952
|
-
let childConfig = await
|
|
5958
|
+
if (typeof folderDataConfig.clickEvent === "function") {
|
|
5959
|
+
let childConfig = await folderDataConfig.clickEvent(event, folderDataConfig);
|
|
5953
5960
|
/* 添加顶部导航的箭头 */
|
|
5954
|
-
folderFileListBreadcrumbPrimaryElement.appendChild(
|
|
5955
|
-
/*
|
|
5956
|
-
let breadcrumbAllFilesElement =
|
|
5961
|
+
folderFileListBreadcrumbPrimaryElement.appendChild(createHeaderArrowIcon());
|
|
5962
|
+
/* 添加顶部导航的链接文字 */
|
|
5963
|
+
let breadcrumbAllFilesElement = createHeaderFileLinkNavgiation(folderDataConfig.fileName, childConfig);
|
|
5957
5964
|
folderFileListBreadcrumbPrimaryElement.appendChild(breadcrumbAllFilesElement);
|
|
5958
5965
|
/* 设置顶部导航点击事件 */
|
|
5959
5966
|
popsDOMUtils.on(breadcrumbAllFilesElement, "click", function (event) {
|
|
@@ -6248,7 +6255,7 @@
|
|
|
6248
6255
|
endCallBack: config.dragEndCallBack,
|
|
6249
6256
|
});
|
|
6250
6257
|
}
|
|
6251
|
-
PopsHandler.handlePush(
|
|
6258
|
+
PopsHandler.handlePush(popsType, {
|
|
6252
6259
|
guid: guid,
|
|
6253
6260
|
animElement: $anim,
|
|
6254
6261
|
popsElement: $pops,
|
|
@@ -7340,14 +7347,14 @@
|
|
|
7340
7347
|
init(details) {
|
|
7341
7348
|
const guid = popsUtils.getRandomGUID();
|
|
7342
7349
|
// 设置当前类型
|
|
7343
|
-
const
|
|
7350
|
+
const popsType = "tooltip";
|
|
7344
7351
|
let config = PopsTooltipConfig();
|
|
7345
7352
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
7346
7353
|
config = popsUtils.assign(config, details);
|
|
7347
7354
|
if (!(config.target instanceof HTMLElement)) {
|
|
7348
7355
|
throw new TypeError("config.target 必须是HTMLElement类型");
|
|
7349
7356
|
}
|
|
7350
|
-
config = PopsHandler.handleOnly(
|
|
7357
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
7351
7358
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
7352
7359
|
PopsHandler.handleInit($shadowRoot, [
|
|
7353
7360
|
{
|
|
@@ -10079,14 +10086,14 @@
|
|
|
10079
10086
|
init(details) {
|
|
10080
10087
|
const guid = popsUtils.getRandomGUID();
|
|
10081
10088
|
// 设置当前类型
|
|
10082
|
-
const
|
|
10089
|
+
const popsType = "panel";
|
|
10083
10090
|
let config = PopsPanelConfig();
|
|
10084
10091
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10085
10092
|
config = popsUtils.assign(config, details);
|
|
10086
10093
|
if (details && Array.isArray(details.content)) {
|
|
10087
10094
|
config.content = details.content;
|
|
10088
10095
|
}
|
|
10089
|
-
config = PopsHandler.handleOnly(
|
|
10096
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
10090
10097
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
10091
10098
|
PopsHandler.handleInit($shadowRoot, [
|
|
10092
10099
|
{
|
|
@@ -10121,21 +10128,21 @@
|
|
|
10121
10128
|
// 先把z-index提取出来
|
|
10122
10129
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
10123
10130
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
10124
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
10125
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
10126
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
10131
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
10132
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
10133
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
10127
10134
|
/*html*/ `
|
|
10128
|
-
<div class="pops-title pops-${
|
|
10135
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
10129
10136
|
? config.title.text
|
|
10130
|
-
: `<p pops class="pops-${
|
|
10131
|
-
<div class="pops-content pops-${
|
|
10132
|
-
<aside class="pops-${
|
|
10133
|
-
<ul class="pops-${
|
|
10134
|
-
<ul class="pops-${
|
|
10137
|
+
: `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
10138
|
+
<div class="pops-content pops-${popsType}-content">
|
|
10139
|
+
<aside class="pops-${popsType}-aside">
|
|
10140
|
+
<ul class="pops-${popsType}-aside-top-container"></ul>
|
|
10141
|
+
<ul class="pops-${popsType}-aside-bottom-container"></ul>
|
|
10135
10142
|
</aside>
|
|
10136
|
-
<section class="pops-${
|
|
10137
|
-
<ul class="pops-${
|
|
10138
|
-
<ul class="pops-${
|
|
10143
|
+
<section class="pops-${popsType}-container">
|
|
10144
|
+
<ul class="pops-${popsType}-container-header-ul"></ul>
|
|
10145
|
+
<ul class="pops-${popsType}-container-main-ul"></ul>
|
|
10139
10146
|
</section>
|
|
10140
10147
|
</div>`, "", zIndex);
|
|
10141
10148
|
/**
|
|
@@ -10143,7 +10150,7 @@
|
|
|
10143
10150
|
*/
|
|
10144
10151
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
10145
10152
|
/* 结构元素 */
|
|
10146
|
-
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim,
|
|
10153
|
+
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
10147
10154
|
if (config.isMobile || popsUtils.isPhone()) {
|
|
10148
10155
|
popsDOMUtils.addClassName($pops, config.mobileClassName);
|
|
10149
10156
|
}
|
|
@@ -10158,7 +10165,7 @@
|
|
|
10158
10165
|
/* 遮罩层元素 */
|
|
10159
10166
|
if (config.mask.enable) {
|
|
10160
10167
|
let { maskElement } = PopsHandler.handleMask({
|
|
10161
|
-
type:
|
|
10168
|
+
type: popsType,
|
|
10162
10169
|
guid: guid,
|
|
10163
10170
|
config: config,
|
|
10164
10171
|
animElement: $anim,
|
|
@@ -10168,7 +10175,7 @@
|
|
|
10168
10175
|
isCreatedElementList.push($mask);
|
|
10169
10176
|
}
|
|
10170
10177
|
/* 处理返回的配置 */
|
|
10171
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
10178
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
10172
10179
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
10173
10180
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
10174
10181
|
/* 创建到页面中 */
|
|
@@ -10194,7 +10201,7 @@
|
|
|
10194
10201
|
$contentSectionContainer: $contentSectionContainer,
|
|
10195
10202
|
},
|
|
10196
10203
|
});
|
|
10197
|
-
PopsHandler.handlePush(
|
|
10204
|
+
PopsHandler.handlePush(popsType, {
|
|
10198
10205
|
guid: guid,
|
|
10199
10206
|
animElement: $anim,
|
|
10200
10207
|
popsElement: $pops,
|
|
@@ -10356,11 +10363,11 @@
|
|
|
10356
10363
|
init(details) {
|
|
10357
10364
|
const guid = popsUtils.getRandomGUID();
|
|
10358
10365
|
// 设置当前类型
|
|
10359
|
-
const
|
|
10366
|
+
const popsType = "rightClickMenu";
|
|
10360
10367
|
let config = rightClickMenuConfig();
|
|
10361
10368
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10362
10369
|
config = popsUtils.assign(config, details);
|
|
10363
|
-
config = PopsHandler.handleOnly(
|
|
10370
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
10364
10371
|
if (config.target == null) {
|
|
10365
10372
|
throw new Error("config.target 不能为空");
|
|
10366
10373
|
}
|
|
@@ -10409,7 +10416,7 @@
|
|
|
10409
10416
|
return;
|
|
10410
10417
|
}
|
|
10411
10418
|
let $click = event.target;
|
|
10412
|
-
if ($click.closest(`.pops-${
|
|
10419
|
+
if ($click.closest(`.pops-${popsType}`)) {
|
|
10413
10420
|
return;
|
|
10414
10421
|
}
|
|
10415
10422
|
if ($click.className &&
|
|
@@ -10428,7 +10435,7 @@
|
|
|
10428
10435
|
return;
|
|
10429
10436
|
}
|
|
10430
10437
|
let $click = event.target;
|
|
10431
|
-
if ($click.closest(`.pops-${
|
|
10438
|
+
if ($click.closest(`.pops-${popsType}`)) {
|
|
10432
10439
|
return;
|
|
10433
10440
|
}
|
|
10434
10441
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
@@ -10474,21 +10481,21 @@
|
|
|
10474
10481
|
if (config.preventDefault) {
|
|
10475
10482
|
popsDOMUtils.preventEvent(event);
|
|
10476
10483
|
}
|
|
10477
|
-
PopsHandler.handleOnly(
|
|
10484
|
+
PopsHandler.handleOnly(popsType, config);
|
|
10478
10485
|
if (PopsContextMenu.rootElement) {
|
|
10479
10486
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
10480
10487
|
}
|
|
10481
10488
|
let rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
|
|
10482
10489
|
PopsContextMenu.rootElement = rootElement;
|
|
10483
10490
|
if (config.only) {
|
|
10484
|
-
PopsHandler.handlePush(
|
|
10491
|
+
PopsHandler.handlePush(popsType, {
|
|
10485
10492
|
$shadowRoot: $shadowRoot,
|
|
10486
10493
|
$shadowContainer: $shadowContainer,
|
|
10487
10494
|
guid: guid,
|
|
10488
10495
|
animElement: rootElement,
|
|
10489
10496
|
popsElement: rootElement,
|
|
10490
|
-
beforeRemoveCallBack(
|
|
10491
|
-
PopsContextMenu.closeAllMenu(
|
|
10497
|
+
beforeRemoveCallBack(instCommonConfig) {
|
|
10498
|
+
PopsContextMenu.closeAllMenu(instCommonConfig.popsElement);
|
|
10492
10499
|
},
|
|
10493
10500
|
});
|
|
10494
10501
|
}
|
|
@@ -10523,12 +10530,12 @@
|
|
|
10523
10530
|
});
|
|
10524
10531
|
element.remove();
|
|
10525
10532
|
}
|
|
10526
|
-
if (element.classList.contains(`pops-${
|
|
10533
|
+
if (element.classList.contains(`pops-${popsType}-anim-show`)) {
|
|
10527
10534
|
/* 有动画 */
|
|
10528
10535
|
popsDOMUtils.on(element, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
|
|
10529
10536
|
capture: true,
|
|
10530
10537
|
});
|
|
10531
|
-
element.classList.remove(`pops-${
|
|
10538
|
+
element.classList.remove(`pops-${popsType}-anim-show`);
|
|
10532
10539
|
}
|
|
10533
10540
|
else {
|
|
10534
10541
|
/* 无动画 */
|
|
@@ -10560,7 +10567,7 @@
|
|
|
10560
10567
|
*/
|
|
10561
10568
|
getMenuContainerElement(isChildren) {
|
|
10562
10569
|
let $menu = popsDOMUtils.createElement("div", {
|
|
10563
|
-
className: `pops-${
|
|
10570
|
+
className: `pops-${popsType}`,
|
|
10564
10571
|
innerHTML: /*html*/ `
|
|
10565
10572
|
<ul></ul>
|
|
10566
10573
|
`,
|
|
@@ -10574,7 +10581,7 @@
|
|
|
10574
10581
|
}
|
|
10575
10582
|
/* 添加动画 */
|
|
10576
10583
|
if (config.isAnimation) {
|
|
10577
|
-
popsDOMUtils.addClassName($menu, `pops-${
|
|
10584
|
+
popsDOMUtils.addClassName($menu, `pops-${popsType}-anim-grid`);
|
|
10578
10585
|
}
|
|
10579
10586
|
return $menu;
|
|
10580
10587
|
},
|
|
@@ -10714,7 +10721,7 @@
|
|
|
10714
10721
|
});
|
|
10715
10722
|
/* 过渡动画 */
|
|
10716
10723
|
if (config.isAnimation) {
|
|
10717
|
-
popsDOMUtils.addClassName(menuElement, `pops-${
|
|
10724
|
+
popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
|
|
10718
10725
|
}
|
|
10719
10726
|
return menuElement;
|
|
10720
10727
|
},
|
|
@@ -10754,7 +10761,7 @@
|
|
|
10754
10761
|
popsDOMUtils.css(menuElement, { ...offset, display: "" });
|
|
10755
10762
|
/* 过渡动画 */
|
|
10756
10763
|
if (config.isAnimation) {
|
|
10757
|
-
popsDOMUtils.addClassName(menuElement, `pops-${
|
|
10764
|
+
popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
|
|
10758
10765
|
}
|
|
10759
10766
|
return menuElement;
|
|
10760
10767
|
},
|
|
@@ -10775,19 +10782,19 @@
|
|
|
10775
10782
|
if (typeof item.icon === "string" && item.icon.trim() !== "") {
|
|
10776
10783
|
let iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
|
|
10777
10784
|
let iconElement = popsDOMUtils.parseTextToDOM(
|
|
10778
|
-
/*html*/ `<i class="pops-${
|
|
10785
|
+
/*html*/ `<i class="pops-${popsType}-icon" is-loading="${item.iconIsLoading ?? false}">${iconSVGHTML}</i>`);
|
|
10779
10786
|
menuLiElement.appendChild(iconElement);
|
|
10780
10787
|
}
|
|
10781
10788
|
/* 插入文字 */
|
|
10782
10789
|
menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
|
|
10783
10790
|
/* 如果存在子数据，显示 */
|
|
10784
10791
|
if (item.item && Array.isArray(item.item)) {
|
|
10785
|
-
popsDOMUtils.addClassName(menuLiElement, `pops-${
|
|
10792
|
+
popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);
|
|
10786
10793
|
}
|
|
10787
10794
|
/* 鼠标|触摸 移入事件 */
|
|
10788
10795
|
function liElementHoverEvent() {
|
|
10789
10796
|
Array.from(menuULElement.children).forEach((liElement) => {
|
|
10790
|
-
popsDOMUtils.removeClassName(liElement, `pops-${
|
|
10797
|
+
popsDOMUtils.removeClassName(liElement, `pops-${popsType}-is-visited`);
|
|
10791
10798
|
if (!liElement.__menuData__) {
|
|
10792
10799
|
return;
|
|
10793
10800
|
}
|
|
@@ -10812,7 +10819,7 @@
|
|
|
10812
10819
|
index--;
|
|
10813
10820
|
}
|
|
10814
10821
|
}
|
|
10815
|
-
popsDOMUtils.addClassName(menuLiElement, `pops-${
|
|
10822
|
+
popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-is-visited`);
|
|
10816
10823
|
if (!item.item) {
|
|
10817
10824
|
return;
|
|
10818
10825
|
}
|
|
@@ -10935,7 +10942,7 @@
|
|
|
10935
10942
|
init(details) {
|
|
10936
10943
|
const guid = popsUtils.getRandomGUID();
|
|
10937
10944
|
// 设置当前类型
|
|
10938
|
-
const
|
|
10945
|
+
const popsType = "searchSuggestion";
|
|
10939
10946
|
let config = searchSuggestionConfig();
|
|
10940
10947
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10941
10948
|
config = popsUtils.assign(config, details);
|
|
@@ -11001,7 +11008,7 @@
|
|
|
11001
11008
|
SearchSuggestion.changeHintULElementPosition();
|
|
11002
11009
|
SearchSuggestion.hide();
|
|
11003
11010
|
if (config.isAnimation) {
|
|
11004
|
-
SearchSuggestion.$el.root.classList.add(`pops-${
|
|
11011
|
+
SearchSuggestion.$el.root.classList.add(`pops-${popsType}-animation`);
|
|
11005
11012
|
}
|
|
11006
11013
|
$shadowRoot.appendChild(SearchSuggestion.$el.root);
|
|
11007
11014
|
parentElement.appendChild($shadowContainer);
|
|
@@ -11018,16 +11025,16 @@
|
|
|
11018
11025
|
*/
|
|
11019
11026
|
getSearchSelectElement() {
|
|
11020
11027
|
let element = popsDOMUtils.createElement("div", {
|
|
11021
|
-
className: `pops pops-${
|
|
11028
|
+
className: `pops pops-${popsType}-search-suggestion`,
|
|
11022
11029
|
innerHTML: /*html*/ `
|
|
11023
11030
|
<style data-dynamic="true">
|
|
11024
11031
|
${this.getDynamicCSS()}
|
|
11025
11032
|
</style>
|
|
11026
|
-
<ul class="pops-${
|
|
11033
|
+
<ul class="pops-${popsType}-search-suggestion-hint">${config.toSearhNotResultHTML}</ul>
|
|
11027
11034
|
`,
|
|
11028
11035
|
}, {
|
|
11029
11036
|
"data-guid": guid,
|
|
11030
|
-
"type-value":
|
|
11037
|
+
"type-value": popsType,
|
|
11031
11038
|
});
|
|
11032
11039
|
if (config.className !== "" && config.className != null) {
|
|
11033
11040
|
popsDOMUtils.addClassName(element, config.className);
|
|
@@ -11037,24 +11044,24 @@
|
|
|
11037
11044
|
/** 动态获取CSS */
|
|
11038
11045
|
getDynamicCSS() {
|
|
11039
11046
|
return /*css*/ `
|
|
11040
|
-
.pops-${
|
|
11047
|
+
.pops-${popsType}-animation{
|
|
11041
11048
|
-moz-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11042
11049
|
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11043
11050
|
-o-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11044
11051
|
-ms-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11045
11052
|
}
|
|
11046
|
-
.pops-${
|
|
11053
|
+
.pops-${popsType}-search-suggestion{
|
|
11047
11054
|
--search-suggestion-bg-color: #ffffff;
|
|
11048
11055
|
--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
|
|
11049
11056
|
--search-suggestion-item-color: #515a6e;
|
|
11050
11057
|
--search-suggestion-item-none-color: #8e8e8e;
|
|
11051
11058
|
--search-suggestion-item-hover-bg-color: rgba(0, 0, 0, .1);
|
|
11052
11059
|
}
|
|
11053
|
-
.pops-${
|
|
11060
|
+
.pops-${popsType}-search-suggestion{
|
|
11054
11061
|
border: initial;
|
|
11055
11062
|
overflow: initial;
|
|
11056
11063
|
}
|
|
11057
|
-
ul.pops-${
|
|
11064
|
+
ul.pops-${popsType}-search-suggestion-hint{
|
|
11058
11065
|
position: ${config.isAbsolute ? "absolute" : "fixed"};
|
|
11059
11066
|
z-index: ${PopsHandler.handleZIndex(config.zIndex)};
|
|
11060
11067
|
width: 0;
|
|
@@ -11069,14 +11076,14 @@
|
|
|
11069
11076
|
box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
|
|
11070
11077
|
}
|
|
11071
11078
|
/* 建议框在上面时 */
|
|
11072
|
-
ul.pops-${
|
|
11079
|
+
ul.pops-${popsType}-search-suggestion-hint[data-top-reverse]{
|
|
11073
11080
|
display: flex;
|
|
11074
11081
|
flex-direction: column-reverse;
|
|
11075
11082
|
}
|
|
11076
|
-
ul.pops-${
|
|
11083
|
+
ul.pops-${popsType}-search-suggestion-hint[data-top-reverse] li{
|
|
11077
11084
|
flex-shrink: 0;
|
|
11078
11085
|
}
|
|
11079
|
-
ul.pops-${
|
|
11086
|
+
ul.pops-${popsType}-search-suggestion-hint li{
|
|
11080
11087
|
padding: 7px;
|
|
11081
11088
|
margin: 0;
|
|
11082
11089
|
clear: both;
|
|
@@ -11089,17 +11096,17 @@
|
|
|
11089
11096
|
text-overflow: ellipsis;
|
|
11090
11097
|
width: 100%;
|
|
11091
11098
|
}
|
|
11092
|
-
ul.pops-${
|
|
11099
|
+
ul.pops-${popsType}-search-suggestion-hint li[data-none]{
|
|
11093
11100
|
text-align: center;
|
|
11094
11101
|
font-size: 12px;
|
|
11095
11102
|
color: var(--search-suggestion-item-none-color);
|
|
11096
11103
|
}
|
|
11097
|
-
ul.pops-${
|
|
11104
|
+
ul.pops-${popsType}-search-suggestion-hint li:hover{
|
|
11098
11105
|
background-color: var(--search-suggestion-item-hover-bg-color);
|
|
11099
11106
|
}
|
|
11100
11107
|
|
|
11101
11108
|
@media (prefers-color-scheme: dark){
|
|
11102
|
-
.pops-${
|
|
11109
|
+
.pops-${popsType}-search-suggestion{
|
|
11103
11110
|
--search-suggestion-bg-color: #1d1e1f;
|
|
11104
11111
|
--search-suggestion-item-color: #cfd3d4;
|
|
11105
11112
|
--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
|
|
@@ -11114,7 +11121,7 @@
|
|
|
11114
11121
|
*/
|
|
11115
11122
|
getSearchItemLiElement(data, index) {
|
|
11116
11123
|
return popsDOMUtils.createElement("li", {
|
|
11117
|
-
className: `pops-${
|
|
11124
|
+
className: `pops-${popsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
|
|
11118
11125
|
"data-index": index,
|
|
11119
11126
|
"data-value": SearchSuggestion.getItemDataValue(data),
|
|
11120
11127
|
innerHTML: `${config.getItemHTML(data)}${config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""}`,
|
|
@@ -11135,7 +11142,7 @@
|
|
|
11135
11142
|
popsDOMUtils.on(liElement, "click", void 0, (event) => {
|
|
11136
11143
|
popsDOMUtils.preventEvent(event);
|
|
11137
11144
|
let $click = event.target;
|
|
11138
|
-
if ($click.closest(`.pops-${
|
|
11145
|
+
if ($click.closest(`.pops-${popsType}-delete-icon`)) {
|
|
11139
11146
|
/* 点击的是删除按钮 */
|
|
11140
11147
|
if (typeof config.deleteIcon.callback === "function") {
|
|
11141
11148
|
config.deleteIcon.callback(event, liElement, liElement["data-value"]);
|
|
@@ -11327,7 +11334,7 @@
|
|
|
11327
11334
|
*/
|
|
11328
11335
|
getDeleteIconHTML(size = 16, fill = "#bababa") {
|
|
11329
11336
|
return /*html*/ `
|
|
11330
|
-
<svg class="pops-${
|
|
11337
|
+
<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
|
|
11331
11338
|
<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>
|
|
11332
11339
|
<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>
|
|
11333
11340
|
</svg>
|
|
@@ -11338,7 +11345,7 @@
|
|
|
11338
11345
|
*/
|
|
11339
11346
|
setPromptsInSearch() {
|
|
11340
11347
|
let isSearchingElement = popsDOMUtils.createElement("li", {
|
|
11341
|
-
className: `pops-${
|
|
11348
|
+
className: `pops-${popsType}-search-suggestion-hint-searching-item`,
|
|
11342
11349
|
innerHTML: config.searchingTip,
|
|
11343
11350
|
});
|
|
11344
11351
|
SearchSuggestion.$el.$hintULContainer.appendChild(isSearchingElement);
|
|
@@ -11348,7 +11355,7 @@
|
|
|
11348
11355
|
*/
|
|
11349
11356
|
removePromptsInSearch() {
|
|
11350
11357
|
SearchSuggestion.$el.$hintULContainer
|
|
11351
|
-
.querySelector(`li.pops-${
|
|
11358
|
+
.querySelector(`li.pops-${popsType}-search-suggestion-hint-searching-item`)
|
|
11352
11359
|
?.remove();
|
|
11353
11360
|
},
|
|
11354
11361
|
/**
|
|
@@ -11508,7 +11515,7 @@
|
|
|
11508
11515
|
/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
|
|
11509
11516
|
animation: PopsAnimation.$data,
|
|
11510
11517
|
/** 存储已创建的元素 */
|
|
11511
|
-
|
|
11518
|
+
instData: PopsInstData,
|
|
11512
11519
|
/** 禁止滚动 */
|
|
11513
11520
|
forbiddenScroll: {
|
|
11514
11521
|
event(event) {
|