@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.esm.js
CHANGED
|
@@ -2338,7 +2338,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2338
2338
|
}
|
|
2339
2339
|
const popsDOMUtils = new PopsDOMUtils();
|
|
2340
2340
|
|
|
2341
|
-
|
|
2341
|
+
/**
|
|
2342
|
+
* 弹窗实例数据
|
|
2343
|
+
*/
|
|
2344
|
+
const PopsInstData = {
|
|
2342
2345
|
alert: [],
|
|
2343
2346
|
confirm: [],
|
|
2344
2347
|
drawer: [],
|
|
@@ -2356,7 +2359,7 @@ var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n\t-webkit-box-sizing: border
|
|
|
2356
2359
|
|
|
2357
2360
|
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";
|
|
2358
2361
|
|
|
2359
|
-
var scrollbarCSS = "/*
|
|
2362
|
+
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";
|
|
2360
2363
|
|
|
2361
2364
|
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";
|
|
2362
2365
|
|
|
@@ -2544,18 +2547,18 @@ const PopsInstanceUtils = {
|
|
|
2544
2547
|
function isVisibleNode($css) {
|
|
2545
2548
|
return $css.position !== "static" && $css.display !== "none";
|
|
2546
2549
|
}
|
|
2547
|
-
Object.keys(
|
|
2548
|
-
let
|
|
2549
|
-
for (let index = 0; index <
|
|
2550
|
-
const
|
|
2551
|
-
let nodeStyle = window.getComputedStyle(
|
|
2550
|
+
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
2551
|
+
let instData = PopsInstData[instKeyName];
|
|
2552
|
+
for (let index = 0; index < instData.length; index++) {
|
|
2553
|
+
const inst = instData[index];
|
|
2554
|
+
let nodeStyle = window.getComputedStyle(inst.animElement);
|
|
2552
2555
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
2553
2556
|
if (isVisibleNode(nodeStyle)) {
|
|
2554
2557
|
let nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
2555
2558
|
if (!isNaN(nodeZIndex)) {
|
|
2556
2559
|
if (nodeZIndex > zIndex) {
|
|
2557
2560
|
zIndex = nodeZIndex;
|
|
2558
|
-
maxZIndexNode =
|
|
2561
|
+
maxZIndexNode = inst.animElement;
|
|
2559
2562
|
}
|
|
2560
2563
|
}
|
|
2561
2564
|
}
|
|
@@ -2581,69 +2584,69 @@ const PopsInstanceUtils = {
|
|
|
2581
2584
|
},
|
|
2582
2585
|
/**
|
|
2583
2586
|
* 删除配置中对应的对象
|
|
2584
|
-
* @param
|
|
2587
|
+
* @param instConfigList 配置实例列表
|
|
2585
2588
|
* @param guid 唯一标识
|
|
2586
2589
|
* @param isAll 是否全部删除
|
|
2587
2590
|
*/
|
|
2588
|
-
removeInstance(
|
|
2591
|
+
removeInstance(instConfigList, guid, isAll = false) {
|
|
2589
2592
|
/**
|
|
2590
2593
|
* 移除元素实例
|
|
2591
|
-
* @param
|
|
2594
|
+
* @param instCommonConfig
|
|
2592
2595
|
*/
|
|
2593
|
-
function removeItem(
|
|
2594
|
-
if (typeof
|
|
2596
|
+
function removeItem(instCommonConfig) {
|
|
2597
|
+
if (typeof instCommonConfig.beforeRemoveCallBack === "function") {
|
|
2595
2598
|
// 调用移除签的回调
|
|
2596
|
-
|
|
2599
|
+
instCommonConfig.beforeRemoveCallBack(instCommonConfig);
|
|
2597
2600
|
}
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2601
|
+
instCommonConfig?.animElement?.remove();
|
|
2602
|
+
instCommonConfig?.popsElement?.remove();
|
|
2603
|
+
instCommonConfig?.maskElement?.remove();
|
|
2604
|
+
instCommonConfig?.$shadowContainer?.remove();
|
|
2602
2605
|
}
|
|
2603
|
-
// [
|
|
2604
|
-
|
|
2605
|
-
//
|
|
2606
|
-
|
|
2606
|
+
// [ inst[], inst[],...]
|
|
2607
|
+
instConfigList.forEach((instConfigList) => {
|
|
2608
|
+
// inst[]
|
|
2609
|
+
instConfigList.forEach((instConfigItem, index) => {
|
|
2607
2610
|
// 移除全部或者guid相同
|
|
2608
|
-
if (isAll ||
|
|
2611
|
+
if (isAll || instConfigItem["guid"] === guid) {
|
|
2609
2612
|
// 判断是否有动画
|
|
2610
|
-
let animName =
|
|
2613
|
+
let animName = instConfigItem.animElement.getAttribute("anim");
|
|
2611
2614
|
if (PopsAnimation.hasAnim(animName)) {
|
|
2612
2615
|
let reverseAnimName = animName + "-reverse";
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
+
instConfigItem.animElement.style.width = "100%";
|
|
2617
|
+
instConfigItem.animElement.style.height = "100%";
|
|
2618
|
+
instConfigItem.animElement.style["animation-name"] =
|
|
2616
2619
|
reverseAnimName;
|
|
2617
|
-
if (PopsAnimation.hasAnim(
|
|
2618
|
-
popsDOMUtils.on(
|
|
2619
|
-
removeItem(
|
|
2620
|
+
if (PopsAnimation.hasAnim(instConfigItem.animElement.style["animation-name"])) {
|
|
2621
|
+
popsDOMUtils.on(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), function () {
|
|
2622
|
+
removeItem(instConfigItem);
|
|
2620
2623
|
}, {
|
|
2621
2624
|
capture: true,
|
|
2622
2625
|
});
|
|
2623
2626
|
}
|
|
2624
2627
|
else {
|
|
2625
|
-
removeItem(
|
|
2628
|
+
removeItem(instConfigItem);
|
|
2626
2629
|
}
|
|
2627
2630
|
}
|
|
2628
2631
|
else {
|
|
2629
|
-
removeItem(
|
|
2632
|
+
removeItem(instConfigItem);
|
|
2630
2633
|
}
|
|
2631
|
-
|
|
2634
|
+
instConfigList.splice(index, 1);
|
|
2632
2635
|
}
|
|
2633
2636
|
});
|
|
2634
2637
|
});
|
|
2635
|
-
return
|
|
2638
|
+
return instConfigList;
|
|
2636
2639
|
},
|
|
2637
2640
|
/**
|
|
2638
2641
|
* 隐藏
|
|
2639
2642
|
* @param popsType
|
|
2640
|
-
* @param
|
|
2643
|
+
* @param instConfigList
|
|
2641
2644
|
* @param guid
|
|
2642
2645
|
* @param config
|
|
2643
2646
|
* @param animElement
|
|
2644
2647
|
* @param maskElement
|
|
2645
2648
|
*/
|
|
2646
|
-
hide(popsType,
|
|
2649
|
+
hide(popsType, instConfigList, guid, config, animElement, maskElement) {
|
|
2647
2650
|
return new Promise((resolve) => {
|
|
2648
2651
|
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
2649
2652
|
if (popsType === "drawer") {
|
|
@@ -2663,36 +2666,39 @@ const PopsInstanceUtils = {
|
|
|
2663
2666
|
}, drawerConfig.closeDelay);
|
|
2664
2667
|
}
|
|
2665
2668
|
else {
|
|
2666
|
-
let
|
|
2667
|
-
if (
|
|
2669
|
+
let fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
2670
|
+
if (fintInst) {
|
|
2668
2671
|
/* 存在动画 */
|
|
2669
|
-
let
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2672
|
+
let instConfigItem = fintInst;
|
|
2673
|
+
instConfigItem.animElement.style.width = "100%";
|
|
2674
|
+
instConfigItem.animElement.style.height = "100%";
|
|
2675
|
+
// @ts-ignore
|
|
2676
|
+
instConfigItem.animElement.style["animation-name"] =
|
|
2677
|
+
instConfigItem.animElement.getAttribute("anim") + "-reverse";
|
|
2678
|
+
if (PopsAnimation.hasAnim(
|
|
2679
|
+
// @ts-ignore
|
|
2680
|
+
instConfigItem.animElement.style["animation-name"])) {
|
|
2675
2681
|
/**
|
|
2676
2682
|
* 动画结束的回调
|
|
2677
2683
|
*/
|
|
2678
2684
|
function animationendCallBack() {
|
|
2679
|
-
|
|
2680
|
-
if (
|
|
2681
|
-
|
|
2685
|
+
instConfigItem.animElement.style.display = "none";
|
|
2686
|
+
if (instConfigItem.maskElement) {
|
|
2687
|
+
instConfigItem.maskElement.style.display = "none";
|
|
2682
2688
|
}
|
|
2683
|
-
popsDOMUtils.off(
|
|
2689
|
+
popsDOMUtils.off(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2684
2690
|
capture: true,
|
|
2685
2691
|
});
|
|
2686
2692
|
resolve();
|
|
2687
2693
|
}
|
|
2688
|
-
popsDOMUtils.on(
|
|
2694
|
+
popsDOMUtils.on(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2689
2695
|
capture: true,
|
|
2690
2696
|
});
|
|
2691
2697
|
}
|
|
2692
2698
|
else {
|
|
2693
|
-
|
|
2694
|
-
if (
|
|
2695
|
-
|
|
2699
|
+
instConfigItem.animElement.style.display = "none";
|
|
2700
|
+
if (instConfigItem.maskElement) {
|
|
2701
|
+
instConfigItem.maskElement.style.display = "none";
|
|
2696
2702
|
}
|
|
2697
2703
|
resolve();
|
|
2698
2704
|
}
|
|
@@ -2703,13 +2709,13 @@ const PopsInstanceUtils = {
|
|
|
2703
2709
|
/**
|
|
2704
2710
|
* 显示
|
|
2705
2711
|
* @param popsType
|
|
2706
|
-
* @param
|
|
2712
|
+
* @param instConfigList
|
|
2707
2713
|
* @param guid
|
|
2708
2714
|
* @param config
|
|
2709
2715
|
* @param animElement
|
|
2710
2716
|
* @param maskElement
|
|
2711
2717
|
*/
|
|
2712
|
-
show(popsType,
|
|
2718
|
+
show(popsType, instConfigList, guid, config, animElement, maskElement) {
|
|
2713
2719
|
return new Promise((resolve) => {
|
|
2714
2720
|
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
2715
2721
|
if (popsType === "drawer") {
|
|
@@ -2731,37 +2737,39 @@ const PopsInstanceUtils = {
|
|
|
2731
2737
|
}, drawerConfig.openDelay ?? 0);
|
|
2732
2738
|
}
|
|
2733
2739
|
else {
|
|
2734
|
-
let
|
|
2735
|
-
if (
|
|
2736
|
-
let
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
if (PopsAnimation.hasAnim(
|
|
2740
|
+
let fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
2741
|
+
if (fintInst) {
|
|
2742
|
+
let instConfigItem = fintInst;
|
|
2743
|
+
instConfigItem.animElement.style.width = "";
|
|
2744
|
+
instConfigItem.animElement.style.height = "";
|
|
2745
|
+
// @ts-ignore
|
|
2746
|
+
instConfigItem.animElement.style["animation-name"] = instConfigItem
|
|
2747
|
+
.animElement.getAttribute("anim")
|
|
2748
|
+
.replace("-reverse", "");
|
|
2749
|
+
if (PopsAnimation.hasAnim(
|
|
2750
|
+
// @ts-ignore
|
|
2751
|
+
instConfigItem.animElement.style["animation-name"])) {
|
|
2744
2752
|
/**
|
|
2745
2753
|
* 动画结束的回调
|
|
2746
2754
|
*/
|
|
2747
2755
|
function animationendCallBack() {
|
|
2748
|
-
popsDOMUtils.off(
|
|
2756
|
+
popsDOMUtils.off(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2749
2757
|
capture: true,
|
|
2750
2758
|
});
|
|
2751
2759
|
resolve();
|
|
2752
2760
|
}
|
|
2753
|
-
|
|
2754
|
-
if (
|
|
2755
|
-
|
|
2761
|
+
instConfigItem.animElement.style.display = "";
|
|
2762
|
+
if (instConfigItem.maskElement) {
|
|
2763
|
+
instConfigItem.maskElement.style.display = "";
|
|
2756
2764
|
}
|
|
2757
|
-
popsDOMUtils.on(
|
|
2765
|
+
popsDOMUtils.on(instConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2758
2766
|
capture: true,
|
|
2759
2767
|
});
|
|
2760
2768
|
}
|
|
2761
2769
|
else {
|
|
2762
|
-
|
|
2763
|
-
if (
|
|
2764
|
-
|
|
2770
|
+
instConfigItem.animElement.style.display = "";
|
|
2771
|
+
if (instConfigItem.maskElement) {
|
|
2772
|
+
instConfigItem.maskElement.style.display = "";
|
|
2765
2773
|
}
|
|
2766
2774
|
resolve();
|
|
2767
2775
|
}
|
|
@@ -2772,12 +2780,12 @@ const PopsInstanceUtils = {
|
|
|
2772
2780
|
/**
|
|
2773
2781
|
* 关闭
|
|
2774
2782
|
* @param popsType
|
|
2775
|
-
* @param
|
|
2783
|
+
* @param instConfigList
|
|
2776
2784
|
* @param guid
|
|
2777
2785
|
* @param config
|
|
2778
2786
|
* @param animElement
|
|
2779
2787
|
*/
|
|
2780
|
-
close(popsType,
|
|
2788
|
+
close(popsType, instConfigList, guid, config, animElement) {
|
|
2781
2789
|
return new Promise((resolve) => {
|
|
2782
2790
|
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
2783
2791
|
let drawerConfig = config;
|
|
@@ -2793,7 +2801,7 @@ const PopsInstanceUtils = {
|
|
|
2793
2801
|
return;
|
|
2794
2802
|
}
|
|
2795
2803
|
popsDOMUtils.off(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
|
|
2796
|
-
PopsInstanceUtils.removeInstance([
|
|
2804
|
+
PopsInstanceUtils.removeInstance([instConfigList], guid);
|
|
2797
2805
|
resolve();
|
|
2798
2806
|
}
|
|
2799
2807
|
/* 监听过渡结束 */
|
|
@@ -2825,7 +2833,7 @@ const PopsInstanceUtils = {
|
|
|
2825
2833
|
}, drawerConfig.closeDelay);
|
|
2826
2834
|
}
|
|
2827
2835
|
else {
|
|
2828
|
-
PopsInstanceUtils.removeInstance([
|
|
2836
|
+
PopsInstanceUtils.removeInstance([instConfigList], guid);
|
|
2829
2837
|
resolve();
|
|
2830
2838
|
}
|
|
2831
2839
|
});
|
|
@@ -3608,15 +3616,15 @@ const PopsHandler = {
|
|
|
3608
3616
|
function clickEvent(event) {
|
|
3609
3617
|
popsDOMUtils.preventEvent(event);
|
|
3610
3618
|
// 获取该类型实例存储列表
|
|
3611
|
-
let
|
|
3619
|
+
let targetInst = PopsInstData[details.type];
|
|
3612
3620
|
function originalRun() {
|
|
3613
3621
|
if (details.config.mask.clickEvent.toClose) {
|
|
3614
3622
|
/* 关闭 */
|
|
3615
|
-
return PopsInstanceUtils.close(details.type,
|
|
3623
|
+
return PopsInstanceUtils.close(details.type, targetInst, details.guid, details.config, details.animElement);
|
|
3616
3624
|
}
|
|
3617
3625
|
else if (details.config.mask.clickEvent.toHide) {
|
|
3618
3626
|
/* 隐藏 */
|
|
3619
|
-
return PopsInstanceUtils.hide(details.type,
|
|
3627
|
+
return PopsInstanceUtils.hide(details.type, targetInst, details.guid, details.config, details.animElement, result.maskElement);
|
|
3620
3628
|
}
|
|
3621
3629
|
}
|
|
3622
3630
|
if (typeof details.config.mask.clickCallBack === "function") {
|
|
@@ -3795,13 +3803,13 @@ const PopsHandler = {
|
|
|
3795
3803
|
mode: mode,
|
|
3796
3804
|
guid: guid,
|
|
3797
3805
|
close() {
|
|
3798
|
-
return PopsInstanceUtils.close(mode,
|
|
3806
|
+
return PopsInstanceUtils.close(mode, PopsInstData[mode], guid, config, animElement);
|
|
3799
3807
|
},
|
|
3800
3808
|
hide() {
|
|
3801
|
-
return PopsInstanceUtils.hide(mode,
|
|
3809
|
+
return PopsInstanceUtils.hide(mode, PopsInstData[mode], guid, config, animElement, maskElement);
|
|
3802
3810
|
},
|
|
3803
3811
|
show() {
|
|
3804
|
-
return PopsInstanceUtils.show(mode,
|
|
3812
|
+
return PopsInstanceUtils.show(mode, PopsInstData[mode], guid, config, animElement, maskElement);
|
|
3805
3813
|
},
|
|
3806
3814
|
};
|
|
3807
3815
|
},
|
|
@@ -3823,13 +3831,13 @@ const PopsHandler = {
|
|
|
3823
3831
|
mode: mode,
|
|
3824
3832
|
guid: guid,
|
|
3825
3833
|
close() {
|
|
3826
|
-
return PopsInstanceUtils.close(mode,
|
|
3834
|
+
return PopsInstanceUtils.close(mode, PopsInstData[mode], guid, config, animElement);
|
|
3827
3835
|
},
|
|
3828
3836
|
hide() {
|
|
3829
|
-
return PopsInstanceUtils.hide(mode,
|
|
3837
|
+
return PopsInstanceUtils.hide(mode, PopsInstData[mode], guid, config, animElement, maskElement);
|
|
3830
3838
|
},
|
|
3831
3839
|
show() {
|
|
3832
|
-
return PopsInstanceUtils.show(mode,
|
|
3840
|
+
return PopsInstanceUtils.show(mode, PopsInstData[mode], guid, config, animElement, maskElement);
|
|
3833
3841
|
},
|
|
3834
3842
|
};
|
|
3835
3843
|
},
|
|
@@ -3938,23 +3946,27 @@ const PopsHandler = {
|
|
|
3938
3946
|
*/
|
|
3939
3947
|
handleOnly(type, config) {
|
|
3940
3948
|
if (config.only) {
|
|
3949
|
+
// .loading
|
|
3950
|
+
// .tooltip
|
|
3951
|
+
// .rightClickMenu
|
|
3952
|
+
// 单独处理
|
|
3941
3953
|
if (type === "loading" ||
|
|
3942
3954
|
type === "tooltip" ||
|
|
3943
3955
|
type === "rightClickMenu") {
|
|
3944
|
-
let
|
|
3945
|
-
if (
|
|
3946
|
-
PopsInstanceUtils.removeInstance([
|
|
3956
|
+
let inst = PopsInstData[type];
|
|
3957
|
+
if (inst) {
|
|
3958
|
+
PopsInstanceUtils.removeInstance([inst], "", true);
|
|
3947
3959
|
}
|
|
3948
3960
|
}
|
|
3949
3961
|
else {
|
|
3950
3962
|
PopsInstanceUtils.removeInstance([
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3963
|
+
PopsInstData.alert,
|
|
3964
|
+
PopsInstData.confirm,
|
|
3965
|
+
PopsInstData.prompt,
|
|
3966
|
+
PopsInstData.iframe,
|
|
3967
|
+
PopsInstData.drawer,
|
|
3968
|
+
PopsInstData.folder,
|
|
3969
|
+
PopsInstData.panel,
|
|
3958
3970
|
], "", true);
|
|
3959
3971
|
}
|
|
3960
3972
|
}
|
|
@@ -3975,7 +3987,7 @@ const PopsHandler = {
|
|
|
3975
3987
|
* @param value
|
|
3976
3988
|
*/
|
|
3977
3989
|
handlePush(type, value) {
|
|
3978
|
-
|
|
3990
|
+
PopsInstData[type].push(value);
|
|
3979
3991
|
},
|
|
3980
3992
|
};
|
|
3981
3993
|
|
|
@@ -4044,11 +4056,11 @@ const PopsAlert = {
|
|
|
4044
4056
|
init(details) {
|
|
4045
4057
|
const guid = popsUtils.getRandomGUID();
|
|
4046
4058
|
// 设置当前类型
|
|
4047
|
-
const
|
|
4059
|
+
const popsType = "alert";
|
|
4048
4060
|
let config = PopsAlertConfig();
|
|
4049
4061
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4050
4062
|
config = popsUtils.assign(config, details);
|
|
4051
|
-
config = PopsHandler.handleOnly(
|
|
4063
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4052
4064
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4053
4065
|
PopsHandler.handleInit($shadowRoot, [
|
|
4054
4066
|
{
|
|
@@ -4083,23 +4095,23 @@ const PopsAlert = {
|
|
|
4083
4095
|
// 先把z-index提取出来
|
|
4084
4096
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4085
4097
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4086
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4087
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4088
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4089
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4090
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4098
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4099
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4100
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4101
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4102
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4091
4103
|
/*html*/ `
|
|
4092
|
-
<div class="pops-title pops-${
|
|
4104
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4093
4105
|
? config.title.text
|
|
4094
|
-
: `<p pops class="pops-${
|
|
4095
|
-
<div class="pops-content pops-${
|
|
4106
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4107
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
4096
4108
|
? config.content.text
|
|
4097
|
-
: `<p pops class="pops-${
|
|
4109
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4098
4110
|
/**
|
|
4099
4111
|
* 弹窗的主元素，包括动画层
|
|
4100
4112
|
*/
|
|
4101
4113
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4102
|
-
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim,
|
|
4114
|
+
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4103
4115
|
/** 遮罩层元素 */
|
|
4104
4116
|
let $mask = null;
|
|
4105
4117
|
/** 已创建的元素列表 */
|
|
@@ -4107,7 +4119,7 @@ const PopsAlert = {
|
|
|
4107
4119
|
/* 遮罩层元素 */
|
|
4108
4120
|
if (config.mask.enable) {
|
|
4109
4121
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4110
|
-
type:
|
|
4122
|
+
type: popsType,
|
|
4111
4123
|
guid: guid,
|
|
4112
4124
|
config: config,
|
|
4113
4125
|
animElement: $anim,
|
|
@@ -4117,7 +4129,7 @@ const PopsAlert = {
|
|
|
4117
4129
|
elementList.push($mask);
|
|
4118
4130
|
}
|
|
4119
4131
|
/* 处理返回的配置 */
|
|
4120
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4132
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4121
4133
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
4122
4134
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
4123
4135
|
/* 为底部ok按钮添加点击事件 */
|
|
@@ -4133,7 +4145,7 @@ const PopsAlert = {
|
|
|
4133
4145
|
$anim.after($mask);
|
|
4134
4146
|
}
|
|
4135
4147
|
/* 保存 */
|
|
4136
|
-
PopsHandler.handlePush(
|
|
4148
|
+
PopsHandler.handlePush(popsType, {
|
|
4137
4149
|
guid: guid,
|
|
4138
4150
|
animElement: $anim,
|
|
4139
4151
|
popsElement: $pops,
|
|
@@ -4248,11 +4260,11 @@ const PopsConfirm = {
|
|
|
4248
4260
|
init(details) {
|
|
4249
4261
|
const guid = popsUtils.getRandomGUID();
|
|
4250
4262
|
// 设置当前类型
|
|
4251
|
-
const
|
|
4263
|
+
const popsType = "confirm";
|
|
4252
4264
|
let config = PopsConfirmConfig();
|
|
4253
4265
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4254
4266
|
config = popsUtils.assign(config, details);
|
|
4255
|
-
config = PopsHandler.handleOnly(
|
|
4267
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4256
4268
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4257
4269
|
PopsHandler.handleInit($shadowRoot, [
|
|
4258
4270
|
{
|
|
@@ -4287,23 +4299,23 @@ const PopsConfirm = {
|
|
|
4287
4299
|
// 先把z-index提取出来
|
|
4288
4300
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4289
4301
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4290
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4291
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4292
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4293
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4294
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4302
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4303
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4304
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4305
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4306
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4295
4307
|
/*html*/ `
|
|
4296
|
-
<div class="pops-title pops-${
|
|
4308
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4297
4309
|
? config.title.text
|
|
4298
|
-
: `<p pops class="pops-${
|
|
4299
|
-
<div class="pops-content pops-${
|
|
4310
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4311
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
4300
4312
|
? config.content.text
|
|
4301
|
-
: `<p pops class="pops-${
|
|
4313
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4302
4314
|
/**
|
|
4303
4315
|
* 弹窗的主元素，包括动画层
|
|
4304
4316
|
*/
|
|
4305
4317
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4306
|
-
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim,
|
|
4318
|
+
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4307
4319
|
/**
|
|
4308
4320
|
* 遮罩层元素
|
|
4309
4321
|
*/
|
|
@@ -4315,7 +4327,7 @@ const PopsConfirm = {
|
|
|
4315
4327
|
if (config.mask.enable) {
|
|
4316
4328
|
// 启用遮罩层
|
|
4317
4329
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4318
|
-
type:
|
|
4330
|
+
type: popsType,
|
|
4319
4331
|
guid: guid,
|
|
4320
4332
|
config: config,
|
|
4321
4333
|
animElement: $anim,
|
|
@@ -4324,7 +4336,7 @@ const PopsConfirm = {
|
|
|
4324
4336
|
$mask = _handleMask_.maskElement;
|
|
4325
4337
|
elementList.push($mask);
|
|
4326
4338
|
}
|
|
4327
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4339
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4328
4340
|
PopsHandler.handleClickEvent("close", $btnClose, eventDetails, config.btn.close.callback);
|
|
4329
4341
|
PopsHandler.handleClickEvent("ok", $btnOk, eventDetails, config.btn.ok.callback);
|
|
4330
4342
|
PopsHandler.handleClickEvent("cancel", $btnCancel, eventDetails, config.btn.cancel.callback);
|
|
@@ -4338,7 +4350,7 @@ const PopsConfirm = {
|
|
|
4338
4350
|
if ($mask != null) {
|
|
4339
4351
|
$anim.after($mask);
|
|
4340
4352
|
}
|
|
4341
|
-
PopsHandler.handlePush(
|
|
4353
|
+
PopsHandler.handlePush(popsType, {
|
|
4342
4354
|
guid: guid,
|
|
4343
4355
|
animElement: $anim,
|
|
4344
4356
|
popsElement: $pops,
|
|
@@ -4457,11 +4469,11 @@ const PopsPrompt = {
|
|
|
4457
4469
|
init(details) {
|
|
4458
4470
|
const guid = popsUtils.getRandomGUID();
|
|
4459
4471
|
// 设置当前类型
|
|
4460
|
-
const
|
|
4472
|
+
const popsType = "prompt";
|
|
4461
4473
|
let config = PopsPromptConfig();
|
|
4462
4474
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4463
4475
|
config = popsUtils.assign(config, details);
|
|
4464
|
-
config = PopsHandler.handleOnly(
|
|
4476
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4465
4477
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4466
4478
|
PopsHandler.handleInit($shadowRoot, [
|
|
4467
4479
|
{
|
|
@@ -4496,16 +4508,16 @@ const PopsPrompt = {
|
|
|
4496
4508
|
// 先把z-index提取出来
|
|
4497
4509
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4498
4510
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4499
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4500
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4501
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4502
|
-
let { contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4503
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4511
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4512
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4513
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4514
|
+
let { contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4515
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4504
4516
|
/*html*/ `
|
|
4505
|
-
<div class="pops-title pops-${
|
|
4517
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4506
4518
|
? config.title.text
|
|
4507
|
-
: `<p pops class="pops-${
|
|
4508
|
-
<div class="pops-content pops-${
|
|
4519
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4520
|
+
<div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${config.content.row
|
|
4509
4521
|
? '<textarea name="pops-input-text" pops="" placeholder="' +
|
|
4510
4522
|
config.content.placeholder +
|
|
4511
4523
|
'"></textarea>'
|
|
@@ -4518,7 +4530,7 @@ const PopsPrompt = {
|
|
|
4518
4530
|
* 弹窗的主元素，包括动画层
|
|
4519
4531
|
*/
|
|
4520
4532
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4521
|
-
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim,
|
|
4533
|
+
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4522
4534
|
/**
|
|
4523
4535
|
* 遮罩层元素
|
|
4524
4536
|
*/
|
|
@@ -4530,7 +4542,7 @@ const PopsPrompt = {
|
|
|
4530
4542
|
if (config.mask.enable) {
|
|
4531
4543
|
// 启用遮罩层
|
|
4532
4544
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4533
|
-
type:
|
|
4545
|
+
type: popsType,
|
|
4534
4546
|
guid: guid,
|
|
4535
4547
|
config: config,
|
|
4536
4548
|
animElement: $anim,
|
|
@@ -4539,7 +4551,7 @@ const PopsPrompt = {
|
|
|
4539
4551
|
$mask = _handleMask_.maskElement;
|
|
4540
4552
|
elementList.push($mask);
|
|
4541
4553
|
}
|
|
4542
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4554
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4543
4555
|
/* 输入框赋值初始值 */
|
|
4544
4556
|
$input.value = config.content.text;
|
|
4545
4557
|
PopsHandler.handlePromptClickEvent("close", $input, $btnClose, eventDetails, config.btn.close.callback);
|
|
@@ -4555,7 +4567,7 @@ const PopsPrompt = {
|
|
|
4555
4567
|
if ($mask != null) {
|
|
4556
4568
|
$anim.after($mask);
|
|
4557
4569
|
}
|
|
4558
|
-
PopsHandler.handlePush(
|
|
4570
|
+
PopsHandler.handlePush(popsType, {
|
|
4559
4571
|
guid: guid,
|
|
4560
4572
|
animElement: $anim,
|
|
4561
4573
|
popsElement: $pops,
|
|
@@ -4750,14 +4762,14 @@ const PopsIframe = {
|
|
|
4750
4762
|
init(details) {
|
|
4751
4763
|
const guid = popsUtils.getRandomGUID();
|
|
4752
4764
|
// 设置当前类型
|
|
4753
|
-
const
|
|
4765
|
+
const popsType = "iframe";
|
|
4754
4766
|
let config = PopsIframeConfig();
|
|
4755
4767
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4756
4768
|
config = popsUtils.assign(config, details);
|
|
4757
4769
|
if (config.url == null) {
|
|
4758
4770
|
throw new Error("config.url不能为空");
|
|
4759
4771
|
}
|
|
4760
|
-
config = PopsHandler.handleOnly(
|
|
4772
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4761
4773
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4762
4774
|
PopsHandler.handleInit($shadowRoot, [
|
|
4763
4775
|
{
|
|
@@ -4793,17 +4805,17 @@ const PopsIframe = {
|
|
|
4793
4805
|
// 先把z-index提取出来
|
|
4794
4806
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4795
4807
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
|
|
4796
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4808
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4797
4809
|
let iframeLoadingHTML = '<div class="pops-loading"></div>';
|
|
4798
4810
|
let titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
|
|
4799
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4800
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4811
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4812
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4801
4813
|
/*html*/ `
|
|
4802
|
-
<div class="pops-title pops-${
|
|
4814
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4803
4815
|
? titleText
|
|
4804
|
-
: `<p pops class="pops-${
|
|
4805
|
-
<div class="pops-content pops-${
|
|
4806
|
-
<div class="pops-${
|
|
4816
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
|
|
4817
|
+
<div class="pops-content pops-${popsType}-content">
|
|
4818
|
+
<div class="pops-${popsType}-content-global-loading"></div>
|
|
4807
4819
|
<iframe src="${config.url}" pops ${config.sandbox
|
|
4808
4820
|
? "sandbox='allow-forms allow-same-origin allow-scripts'"
|
|
4809
4821
|
: ""}>
|
|
@@ -4813,7 +4825,7 @@ const PopsIframe = {
|
|
|
4813
4825
|
* 弹窗的主元素，包括动画层
|
|
4814
4826
|
*/
|
|
4815
4827
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4816
|
-
let { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim,
|
|
4828
|
+
let { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4817
4829
|
let $iframeContainer = PopsCore.document.querySelector(".pops-iframe-container");
|
|
4818
4830
|
if (!$iframeContainer) {
|
|
4819
4831
|
$iframeContainer = PopsCore.document.createElement("div");
|
|
@@ -4832,7 +4844,7 @@ const PopsIframe = {
|
|
|
4832
4844
|
let elementList = [$anim];
|
|
4833
4845
|
if (config.mask.enable) {
|
|
4834
4846
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4835
|
-
type:
|
|
4847
|
+
type: popsType,
|
|
4836
4848
|
guid: guid,
|
|
4837
4849
|
config: config,
|
|
4838
4850
|
animElement: $anim,
|
|
@@ -4841,7 +4853,7 @@ const PopsIframe = {
|
|
|
4841
4853
|
$mask = _handleMask_.maskElement;
|
|
4842
4854
|
elementList.push($mask);
|
|
4843
4855
|
}
|
|
4844
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4856
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4845
4857
|
eventDetails["iframeElement"] = $iframe;
|
|
4846
4858
|
popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
|
|
4847
4859
|
/* 动画加载完毕 */
|
|
@@ -4978,14 +4990,14 @@ const PopsIframe = {
|
|
|
4978
4990
|
popsDOMUtils.on(headerCloseBtnElement, "click", (event) => {
|
|
4979
4991
|
event.preventDefault();
|
|
4980
4992
|
event.stopPropagation();
|
|
4981
|
-
PopsInstanceUtils.removeInstance([
|
|
4993
|
+
PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
|
|
4982
4994
|
if (typeof config?.btn?.close?.callback === "function") {
|
|
4983
4995
|
config.btn.close.callback(eventDetails, event);
|
|
4984
4996
|
}
|
|
4985
4997
|
}, {
|
|
4986
4998
|
capture: true,
|
|
4987
4999
|
});
|
|
4988
|
-
PopsHandler.handlePush(
|
|
5000
|
+
PopsHandler.handlePush(popsType, {
|
|
4989
5001
|
guid: guid,
|
|
4990
5002
|
animElement: $anim,
|
|
4991
5003
|
popsElement: $pops,
|
|
@@ -5089,11 +5101,11 @@ const PopsDrawer = {
|
|
|
5089
5101
|
init(details) {
|
|
5090
5102
|
const guid = popsUtils.getRandomGUID();
|
|
5091
5103
|
// 设置当前类型
|
|
5092
|
-
const
|
|
5104
|
+
const popsType = "drawer";
|
|
5093
5105
|
let config = PopsDrawerConfig();
|
|
5094
5106
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5095
5107
|
config = popsUtils.assign(config, details);
|
|
5096
|
-
config = PopsHandler.handleOnly(
|
|
5108
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
5097
5109
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5098
5110
|
PopsHandler.handleInit($shadowRoot, [
|
|
5099
5111
|
{
|
|
@@ -5128,25 +5140,25 @@ const PopsDrawer = {
|
|
|
5128
5140
|
// 先把z-index提取出来
|
|
5129
5141
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5130
5142
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
5131
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
5132
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
5133
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
5134
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
5135
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
5143
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
5144
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
5145
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
5146
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
5147
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
5136
5148
|
/*html*/ `
|
|
5137
5149
|
${config.title.enable
|
|
5138
|
-
? /*html*/ `<div class="pops-title pops-${
|
|
5150
|
+
? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
|
|
5139
5151
|
? config.title.text
|
|
5140
|
-
: /*html*/ `<p pops class="pops-${
|
|
5152
|
+
: /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
|
|
5141
5153
|
: ""}
|
|
5142
|
-
<div class="pops-content pops-${
|
|
5154
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
5143
5155
|
? config.content.text
|
|
5144
|
-
: `<p pops class="pops-${
|
|
5156
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
5145
5157
|
/**
|
|
5146
5158
|
* 弹窗的主元素，包括动画层
|
|
5147
5159
|
*/
|
|
5148
5160
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
5149
|
-
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement, } = PopsHandler.handleQueryElement($anim,
|
|
5161
|
+
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5150
5162
|
let $pops = popsElement;
|
|
5151
5163
|
let $headerCloseBtn = headerCloseBtnElement;
|
|
5152
5164
|
let $btnCancel = btnCancelElement;
|
|
@@ -5162,7 +5174,7 @@ const PopsDrawer = {
|
|
|
5162
5174
|
let elementList = [$anim];
|
|
5163
5175
|
if (config.mask.enable) {
|
|
5164
5176
|
let _handleMask_ = PopsHandler.handleMask({
|
|
5165
|
-
type:
|
|
5177
|
+
type: popsType,
|
|
5166
5178
|
guid: guid,
|
|
5167
5179
|
config: config,
|
|
5168
5180
|
animElement: $anim,
|
|
@@ -5171,7 +5183,7 @@ const PopsDrawer = {
|
|
|
5171
5183
|
$mask = _handleMask_.maskElement;
|
|
5172
5184
|
elementList.push($mask);
|
|
5173
5185
|
}
|
|
5174
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
5186
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5175
5187
|
/* 处理方向 */
|
|
5176
5188
|
$pops.setAttribute("direction", config.direction);
|
|
5177
5189
|
/* 处理border-radius */
|
|
@@ -5259,7 +5271,7 @@ const PopsDrawer = {
|
|
|
5259
5271
|
if ($mask != null) {
|
|
5260
5272
|
$anim.after($mask);
|
|
5261
5273
|
}
|
|
5262
|
-
PopsHandler.handlePush(
|
|
5274
|
+
PopsHandler.handlePush(popsType, {
|
|
5263
5275
|
guid: guid,
|
|
5264
5276
|
animElement: $anim,
|
|
5265
5277
|
popsElement: $pops,
|
|
@@ -5450,11 +5462,11 @@ const PopsFolder = {
|
|
|
5450
5462
|
init(details) {
|
|
5451
5463
|
const guid = popsUtils.getRandomGUID();
|
|
5452
5464
|
// 设置当前类型
|
|
5453
|
-
const
|
|
5465
|
+
const popsType = "folder";
|
|
5454
5466
|
let config = PopsFolderConfig();
|
|
5455
5467
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5456
5468
|
config = popsUtils.assign(config, details);
|
|
5457
|
-
config = PopsHandler.handleOnly(
|
|
5469
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
5458
5470
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5459
5471
|
PopsHandler.handleInit($shadowRoot, [
|
|
5460
5472
|
{
|
|
@@ -5534,19 +5546,15 @@ const PopsFolder = {
|
|
|
5534
5546
|
/* Android安装包 */
|
|
5535
5547
|
let androidIconList = ["apk", "apkm", "xapk"];
|
|
5536
5548
|
zipIconList.forEach((keyName) => {
|
|
5537
|
-
// @ts-ignore
|
|
5538
5549
|
Folder_ICON[keyName] = Folder_ICON.zip;
|
|
5539
5550
|
});
|
|
5540
5551
|
imageIconList.forEach((keyName) => {
|
|
5541
|
-
// @ts-ignore
|
|
5542
5552
|
Folder_ICON[keyName] = Folder_ICON.png;
|
|
5543
5553
|
});
|
|
5544
5554
|
codeLanguageIconList.forEach((keyName) => {
|
|
5545
|
-
// @ts-ignore
|
|
5546
5555
|
Folder_ICON[keyName] = Folder_ICON.html;
|
|
5547
5556
|
});
|
|
5548
5557
|
androidIconList.forEach((keyName) => {
|
|
5549
|
-
// @ts-ignore
|
|
5550
5558
|
Folder_ICON[keyName] = Folder_ICON.apk;
|
|
5551
5559
|
});
|
|
5552
5560
|
if (details?.folder) {
|
|
@@ -5556,108 +5564,105 @@ const PopsFolder = {
|
|
|
5556
5564
|
// 先把z-index提取出来
|
|
5557
5565
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5558
5566
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
5559
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
5560
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
5561
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
5562
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
5567
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
5568
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
5569
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
5570
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
5563
5571
|
/*html*/ `
|
|
5564
|
-
<div class="pops-title pops-${
|
|
5572
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
5565
5573
|
? config.title.text
|
|
5566
|
-
: `<p pops class="pops-${
|
|
5567
|
-
<div class="pops-content pops-${
|
|
5574
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
5575
|
+
<div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
|
|
5568
5576
|
<div class="pops-folder-list">
|
|
5569
5577
|
<div class="pops-folder-file-list-breadcrumb">
|
|
5570
|
-
|
|
5571
|
-
|
|
5572
|
-
|
|
5573
|
-
|
|
5574
|
-
|
|
5578
|
+
<div class="pops-folder-file-list-breadcrumb-primary">
|
|
5579
|
+
<span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
|
|
5580
|
+
<a>全部文件</a>
|
|
5581
|
+
</span>
|
|
5582
|
+
</div>
|
|
5575
5583
|
</div>
|
|
5576
5584
|
<div class="pops-folder-list-table__header-div">
|
|
5577
|
-
|
|
5578
|
-
|
|
5579
|
-
|
|
5580
|
-
|
|
5581
|
-
|
|
5582
|
-
|
|
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
|
-
|
|
5585
|
+
<table class="pops-folder-list-table__header">
|
|
5586
|
+
<colgroup>
|
|
5587
|
+
<col width="52%">
|
|
5588
|
+
<col width="24%">
|
|
5589
|
+
<col width="16%">
|
|
5590
|
+
</colgroup>
|
|
5591
|
+
<thead>
|
|
5592
|
+
<tr class="pops-folder-list-table__header-row">
|
|
5593
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5594
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5595
|
+
<span>文件名</span>
|
|
5596
|
+
<div class="pops-folder-list-table__sort" data-sort="fileName">
|
|
5597
|
+
<div class="pops-folder-icon-arrow" data-sort="按文件名排序">
|
|
5598
|
+
<svg
|
|
5599
|
+
viewBox="0 0 1024 1024"
|
|
5600
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5601
|
+
<path
|
|
5602
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5603
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5604
|
+
<path
|
|
5605
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5606
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5607
|
+
</svg>
|
|
5608
|
+
</div>
|
|
5609
|
+
</div>
|
|
5610
|
+
</div>
|
|
5611
|
+
</th>
|
|
5612
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5613
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5614
|
+
<span>修改时间</span>
|
|
5615
|
+
<div class="pops-folder-list-table__sort" data-sort="latestTime">
|
|
5616
|
+
<div class="pops-folder-icon-arrow" title="按修改时间排序">
|
|
5617
|
+
<svg
|
|
5618
|
+
viewBox="0 0 1024 1024"
|
|
5619
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5620
|
+
<path
|
|
5621
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5622
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5623
|
+
<path
|
|
5624
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5625
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5626
|
+
</svg>
|
|
5627
|
+
</div>
|
|
5628
|
+
</div>
|
|
5629
|
+
</div>
|
|
5630
|
+
</th>
|
|
5631
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5632
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5633
|
+
<span>大小</span>
|
|
5634
|
+
<div class="pops-folder-list-table__sort" data-sort="fileSize">
|
|
5635
|
+
<div class="pops-folder-icon-arrow" title="按大小排序">
|
|
5636
|
+
<svg
|
|
5637
|
+
viewBox="0 0 1024 1024"
|
|
5638
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5639
|
+
<path
|
|
5640
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5641
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5642
|
+
<path
|
|
5643
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5644
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5645
|
+
</svg>
|
|
5646
|
+
</div>
|
|
5647
|
+
</div>
|
|
5648
|
+
</div>
|
|
5649
|
+
</th>
|
|
5650
|
+
</tr>
|
|
5651
|
+
</thead>
|
|
5652
|
+
</table>
|
|
5645
5653
|
</div>
|
|
5646
5654
|
<div class="pops-folder-list-table__body-div">
|
|
5647
|
-
|
|
5648
|
-
|
|
5649
|
-
|
|
5655
|
+
<table class="pops-folder-list-table__body">
|
|
5656
|
+
<colgroup>
|
|
5657
|
+
${popsUtils.isPhone()
|
|
5650
5658
|
? `<col width="100%">`
|
|
5651
5659
|
: `
|
|
5652
|
-
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5658
|
-
|
|
5659
|
-
</tbody>
|
|
5660
|
-
</table>
|
|
5660
|
+
<col width="52%">
|
|
5661
|
+
<col width="24%">
|
|
5662
|
+
<col width="16%">`}
|
|
5663
|
+
</colgroup>
|
|
5664
|
+
<tbody></tbody>
|
|
5665
|
+
</table>
|
|
5661
5666
|
</div>
|
|
5662
5667
|
</div>
|
|
5663
5668
|
</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
@@ -5669,7 +5674,7 @@ const PopsFolder = {
|
|
|
5669
5674
|
// folderListElement,
|
|
5670
5675
|
// folderListHeaderElement,
|
|
5671
5676
|
// folderListHeaderRowElement,
|
|
5672
|
-
folderListBodyElement, folderFileListBreadcrumbPrimaryElement, headerCloseBtnElement: $btnCloseBtn, btnOkElement, btnCancelElement, btnOtherElement, folderListSortFileNameElement, folderListSortLatestTimeElement, folderListSortFileSizeElement, } = PopsHandler.handleQueryElement($anim,
|
|
5677
|
+
folderListBodyElement, folderFileListBreadcrumbPrimaryElement, headerCloseBtnElement: $btnCloseBtn, btnOkElement, btnCancelElement, btnOtherElement, folderListSortFileNameElement, folderListSortLatestTimeElement, folderListSortFileSizeElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5673
5678
|
/**
|
|
5674
5679
|
* 遮罩层元素
|
|
5675
5680
|
*/
|
|
@@ -5680,7 +5685,7 @@ const PopsFolder = {
|
|
|
5680
5685
|
let elementList = [$anim];
|
|
5681
5686
|
if (config.mask.enable) {
|
|
5682
5687
|
let _handleMask_ = PopsHandler.handleMask({
|
|
5683
|
-
type:
|
|
5688
|
+
type: popsType,
|
|
5684
5689
|
guid: guid,
|
|
5685
5690
|
config: config,
|
|
5686
5691
|
animElement: $anim,
|
|
@@ -5690,7 +5695,7 @@ const PopsFolder = {
|
|
|
5690
5695
|
elementList.push($mask);
|
|
5691
5696
|
}
|
|
5692
5697
|
/* 事件 */
|
|
5693
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
5698
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5694
5699
|
PopsHandler.handleClickEvent("close", $btnCloseBtn, eventDetails, config.btn.close.callback);
|
|
5695
5700
|
PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok.callback);
|
|
5696
5701
|
PopsHandler.handleClickEvent("cancel", btnCancelElement, eventDetails, config.btn.cancel.callback);
|
|
@@ -5783,10 +5788,10 @@ const PopsFolder = {
|
|
|
5783
5788
|
fileSize: origin_fileSize,
|
|
5784
5789
|
isFolder: isFolder,
|
|
5785
5790
|
};
|
|
5786
|
-
fileNameElement
|
|
5787
|
-
fileTimeElement
|
|
5788
|
-
fileFormatSize
|
|
5789
|
-
folderELement
|
|
5791
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
5792
|
+
Reflect.set(fileTimeElement, "__value__", __value__);
|
|
5793
|
+
Reflect.set(fileFormatSize, "__value__", __value__);
|
|
5794
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
5790
5795
|
folderELement.appendChild(fileNameElement);
|
|
5791
5796
|
folderELement.appendChild(fileTimeElement);
|
|
5792
5797
|
folderELement.appendChild(fileFormatSize);
|
|
@@ -5853,8 +5858,8 @@ const PopsFolder = {
|
|
|
5853
5858
|
fileSize: origin_fileSize,
|
|
5854
5859
|
isFolder: isFolder,
|
|
5855
5860
|
};
|
|
5856
|
-
fileNameElement
|
|
5857
|
-
folderELement
|
|
5861
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
5862
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
5858
5863
|
folderELement.appendChild(fileNameElement);
|
|
5859
5864
|
return {
|
|
5860
5865
|
folderELement,
|
|
@@ -5864,10 +5869,13 @@ const PopsFolder = {
|
|
|
5864
5869
|
/**
|
|
5865
5870
|
* 清空每行的元素
|
|
5866
5871
|
*/
|
|
5867
|
-
function
|
|
5872
|
+
function clearFolderRow() {
|
|
5868
5873
|
PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
|
|
5869
5874
|
}
|
|
5870
|
-
|
|
5875
|
+
/**
|
|
5876
|
+
* 创建顶部导航的箭头图标
|
|
5877
|
+
*/
|
|
5878
|
+
function createHeaderArrowIcon() {
|
|
5871
5879
|
let iconArrowElement = popsDOMUtils.createElement("div", {
|
|
5872
5880
|
className: "iconArrow",
|
|
5873
5881
|
});
|
|
@@ -5875,17 +5883,16 @@ const PopsFolder = {
|
|
|
5875
5883
|
}
|
|
5876
5884
|
/**
|
|
5877
5885
|
* 添加顶部导航
|
|
5878
|
-
* @param
|
|
5879
|
-
* @param
|
|
5880
|
-
* @returns
|
|
5886
|
+
* @param folderName 文件夹名
|
|
5887
|
+
* @param folderDataConfig 文件夹配置
|
|
5881
5888
|
*/
|
|
5882
|
-
function
|
|
5889
|
+
function createHeaderFileLinkNavgiation(folderName, folderDataConfig) {
|
|
5883
5890
|
let spanElement = popsDOMUtils.createElement("span", {
|
|
5884
5891
|
className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
|
|
5885
|
-
innerHTML: `<a>${
|
|
5886
|
-
_config_:
|
|
5892
|
+
innerHTML: `<a>${folderName}</a>`,
|
|
5893
|
+
_config_: folderDataConfig,
|
|
5887
5894
|
}, {
|
|
5888
|
-
title:
|
|
5895
|
+
title: folderName,
|
|
5889
5896
|
});
|
|
5890
5897
|
return spanElement;
|
|
5891
5898
|
}
|
|
@@ -5893,10 +5900,10 @@ const PopsFolder = {
|
|
|
5893
5900
|
* 顶部导航的点击事件
|
|
5894
5901
|
* @param event
|
|
5895
5902
|
* @param isTop 是否是全部文件按钮
|
|
5896
|
-
* @param
|
|
5903
|
+
* @param folderDataConfigList 配置
|
|
5897
5904
|
*/
|
|
5898
|
-
function breadcrumbAllFilesElementClickEvent(event, isTop,
|
|
5899
|
-
|
|
5905
|
+
function breadcrumbAllFilesElementClickEvent(event, isTop, folderDataConfigList) {
|
|
5906
|
+
clearFolderRow();
|
|
5900
5907
|
/* 获取当前的导航元素 */
|
|
5901
5908
|
let $click = event.target;
|
|
5902
5909
|
let currentBreadcrumb = $click.closest("span.pops-folder-file-list-breadcrumb-allFiles");
|
|
@@ -5922,16 +5929,16 @@ const PopsFolder = {
|
|
|
5922
5929
|
},
|
|
5923
5930
|
addIndexCSS: false,
|
|
5924
5931
|
});
|
|
5925
|
-
addFolderElement(
|
|
5932
|
+
addFolderElement(folderDataConfigList);
|
|
5926
5933
|
loadingMask.close();
|
|
5927
5934
|
}
|
|
5928
5935
|
/**
|
|
5929
5936
|
* 刷新文件列表界面信息
|
|
5930
5937
|
* @param event
|
|
5931
|
-
* @param
|
|
5938
|
+
* @param folderDataConfig
|
|
5932
5939
|
*/
|
|
5933
|
-
async function refreshFolderInfoClickEvent(event,
|
|
5934
|
-
|
|
5940
|
+
async function refreshFolderInfoClickEvent(event, folderDataConfig) {
|
|
5941
|
+
clearFolderRow();
|
|
5935
5942
|
let loadingMask = PopsLoading.init({
|
|
5936
5943
|
parent: $content,
|
|
5937
5944
|
content: {
|
|
@@ -5942,12 +5949,12 @@ const PopsFolder = {
|
|
|
5942
5949
|
},
|
|
5943
5950
|
addIndexCSS: false,
|
|
5944
5951
|
});
|
|
5945
|
-
if (typeof
|
|
5946
|
-
let childConfig = await
|
|
5952
|
+
if (typeof folderDataConfig.clickEvent === "function") {
|
|
5953
|
+
let childConfig = await folderDataConfig.clickEvent(event, folderDataConfig);
|
|
5947
5954
|
/* 添加顶部导航的箭头 */
|
|
5948
|
-
folderFileListBreadcrumbPrimaryElement.appendChild(
|
|
5949
|
-
/*
|
|
5950
|
-
let breadcrumbAllFilesElement =
|
|
5955
|
+
folderFileListBreadcrumbPrimaryElement.appendChild(createHeaderArrowIcon());
|
|
5956
|
+
/* 添加顶部导航的链接文字 */
|
|
5957
|
+
let breadcrumbAllFilesElement = createHeaderFileLinkNavgiation(folderDataConfig.fileName, childConfig);
|
|
5951
5958
|
folderFileListBreadcrumbPrimaryElement.appendChild(breadcrumbAllFilesElement);
|
|
5952
5959
|
/* 设置顶部导航点击事件 */
|
|
5953
5960
|
popsDOMUtils.on(breadcrumbAllFilesElement, "click", function (event) {
|
|
@@ -6242,7 +6249,7 @@ const PopsFolder = {
|
|
|
6242
6249
|
endCallBack: config.dragEndCallBack,
|
|
6243
6250
|
});
|
|
6244
6251
|
}
|
|
6245
|
-
PopsHandler.handlePush(
|
|
6252
|
+
PopsHandler.handlePush(popsType, {
|
|
6246
6253
|
guid: guid,
|
|
6247
6254
|
animElement: $anim,
|
|
6248
6255
|
popsElement: $pops,
|
|
@@ -7334,14 +7341,14 @@ const PopsTooltip = {
|
|
|
7334
7341
|
init(details) {
|
|
7335
7342
|
const guid = popsUtils.getRandomGUID();
|
|
7336
7343
|
// 设置当前类型
|
|
7337
|
-
const
|
|
7344
|
+
const popsType = "tooltip";
|
|
7338
7345
|
let config = PopsTooltipConfig();
|
|
7339
7346
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
7340
7347
|
config = popsUtils.assign(config, details);
|
|
7341
7348
|
if (!(config.target instanceof HTMLElement)) {
|
|
7342
7349
|
throw new TypeError("config.target 必须是HTMLElement类型");
|
|
7343
7350
|
}
|
|
7344
|
-
config = PopsHandler.handleOnly(
|
|
7351
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
7345
7352
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
7346
7353
|
PopsHandler.handleInit($shadowRoot, [
|
|
7347
7354
|
{
|
|
@@ -10073,14 +10080,14 @@ const PopsPanel = {
|
|
|
10073
10080
|
init(details) {
|
|
10074
10081
|
const guid = popsUtils.getRandomGUID();
|
|
10075
10082
|
// 设置当前类型
|
|
10076
|
-
const
|
|
10083
|
+
const popsType = "panel";
|
|
10077
10084
|
let config = PopsPanelConfig();
|
|
10078
10085
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10079
10086
|
config = popsUtils.assign(config, details);
|
|
10080
10087
|
if (details && Array.isArray(details.content)) {
|
|
10081
10088
|
config.content = details.content;
|
|
10082
10089
|
}
|
|
10083
|
-
config = PopsHandler.handleOnly(
|
|
10090
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
10084
10091
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
10085
10092
|
PopsHandler.handleInit($shadowRoot, [
|
|
10086
10093
|
{
|
|
@@ -10115,21 +10122,21 @@ const PopsPanel = {
|
|
|
10115
10122
|
// 先把z-index提取出来
|
|
10116
10123
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
10117
10124
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
10118
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
10119
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
10120
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
10125
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
10126
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
10127
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
10121
10128
|
/*html*/ `
|
|
10122
|
-
<div class="pops-title pops-${
|
|
10129
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
10123
10130
|
? config.title.text
|
|
10124
|
-
: `<p pops class="pops-${
|
|
10125
|
-
<div class="pops-content pops-${
|
|
10126
|
-
<aside class="pops-${
|
|
10127
|
-
<ul class="pops-${
|
|
10128
|
-
<ul class="pops-${
|
|
10131
|
+
: `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
10132
|
+
<div class="pops-content pops-${popsType}-content">
|
|
10133
|
+
<aside class="pops-${popsType}-aside">
|
|
10134
|
+
<ul class="pops-${popsType}-aside-top-container"></ul>
|
|
10135
|
+
<ul class="pops-${popsType}-aside-bottom-container"></ul>
|
|
10129
10136
|
</aside>
|
|
10130
|
-
<section class="pops-${
|
|
10131
|
-
<ul class="pops-${
|
|
10132
|
-
<ul class="pops-${
|
|
10137
|
+
<section class="pops-${popsType}-container">
|
|
10138
|
+
<ul class="pops-${popsType}-container-header-ul"></ul>
|
|
10139
|
+
<ul class="pops-${popsType}-container-main-ul"></ul>
|
|
10133
10140
|
</section>
|
|
10134
10141
|
</div>`, "", zIndex);
|
|
10135
10142
|
/**
|
|
@@ -10137,7 +10144,7 @@ const PopsPanel = {
|
|
|
10137
10144
|
*/
|
|
10138
10145
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
10139
10146
|
/* 结构元素 */
|
|
10140
|
-
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim,
|
|
10147
|
+
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
10141
10148
|
if (config.isMobile || popsUtils.isPhone()) {
|
|
10142
10149
|
popsDOMUtils.addClassName($pops, config.mobileClassName);
|
|
10143
10150
|
}
|
|
@@ -10152,7 +10159,7 @@ const PopsPanel = {
|
|
|
10152
10159
|
/* 遮罩层元素 */
|
|
10153
10160
|
if (config.mask.enable) {
|
|
10154
10161
|
let { maskElement } = PopsHandler.handleMask({
|
|
10155
|
-
type:
|
|
10162
|
+
type: popsType,
|
|
10156
10163
|
guid: guid,
|
|
10157
10164
|
config: config,
|
|
10158
10165
|
animElement: $anim,
|
|
@@ -10162,7 +10169,7 @@ const PopsPanel = {
|
|
|
10162
10169
|
isCreatedElementList.push($mask);
|
|
10163
10170
|
}
|
|
10164
10171
|
/* 处理返回的配置 */
|
|
10165
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
10172
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
10166
10173
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
10167
10174
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
10168
10175
|
/* 创建到页面中 */
|
|
@@ -10188,7 +10195,7 @@ const PopsPanel = {
|
|
|
10188
10195
|
$contentSectionContainer: $contentSectionContainer,
|
|
10189
10196
|
},
|
|
10190
10197
|
});
|
|
10191
|
-
PopsHandler.handlePush(
|
|
10198
|
+
PopsHandler.handlePush(popsType, {
|
|
10192
10199
|
guid: guid,
|
|
10193
10200
|
animElement: $anim,
|
|
10194
10201
|
popsElement: $pops,
|
|
@@ -10350,11 +10357,11 @@ const PopsRightClickMenu = {
|
|
|
10350
10357
|
init(details) {
|
|
10351
10358
|
const guid = popsUtils.getRandomGUID();
|
|
10352
10359
|
// 设置当前类型
|
|
10353
|
-
const
|
|
10360
|
+
const popsType = "rightClickMenu";
|
|
10354
10361
|
let config = rightClickMenuConfig();
|
|
10355
10362
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10356
10363
|
config = popsUtils.assign(config, details);
|
|
10357
|
-
config = PopsHandler.handleOnly(
|
|
10364
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
10358
10365
|
if (config.target == null) {
|
|
10359
10366
|
throw new Error("config.target 不能为空");
|
|
10360
10367
|
}
|
|
@@ -10403,7 +10410,7 @@ const PopsRightClickMenu = {
|
|
|
10403
10410
|
return;
|
|
10404
10411
|
}
|
|
10405
10412
|
let $click = event.target;
|
|
10406
|
-
if ($click.closest(`.pops-${
|
|
10413
|
+
if ($click.closest(`.pops-${popsType}`)) {
|
|
10407
10414
|
return;
|
|
10408
10415
|
}
|
|
10409
10416
|
if ($click.className &&
|
|
@@ -10422,7 +10429,7 @@ const PopsRightClickMenu = {
|
|
|
10422
10429
|
return;
|
|
10423
10430
|
}
|
|
10424
10431
|
let $click = event.target;
|
|
10425
|
-
if ($click.closest(`.pops-${
|
|
10432
|
+
if ($click.closest(`.pops-${popsType}`)) {
|
|
10426
10433
|
return;
|
|
10427
10434
|
}
|
|
10428
10435
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
@@ -10468,21 +10475,21 @@ const PopsRightClickMenu = {
|
|
|
10468
10475
|
if (config.preventDefault) {
|
|
10469
10476
|
popsDOMUtils.preventEvent(event);
|
|
10470
10477
|
}
|
|
10471
|
-
PopsHandler.handleOnly(
|
|
10478
|
+
PopsHandler.handleOnly(popsType, config);
|
|
10472
10479
|
if (PopsContextMenu.rootElement) {
|
|
10473
10480
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
10474
10481
|
}
|
|
10475
10482
|
let rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
|
|
10476
10483
|
PopsContextMenu.rootElement = rootElement;
|
|
10477
10484
|
if (config.only) {
|
|
10478
|
-
PopsHandler.handlePush(
|
|
10485
|
+
PopsHandler.handlePush(popsType, {
|
|
10479
10486
|
$shadowRoot: $shadowRoot,
|
|
10480
10487
|
$shadowContainer: $shadowContainer,
|
|
10481
10488
|
guid: guid,
|
|
10482
10489
|
animElement: rootElement,
|
|
10483
10490
|
popsElement: rootElement,
|
|
10484
|
-
beforeRemoveCallBack(
|
|
10485
|
-
PopsContextMenu.closeAllMenu(
|
|
10491
|
+
beforeRemoveCallBack(instCommonConfig) {
|
|
10492
|
+
PopsContextMenu.closeAllMenu(instCommonConfig.popsElement);
|
|
10486
10493
|
},
|
|
10487
10494
|
});
|
|
10488
10495
|
}
|
|
@@ -10517,12 +10524,12 @@ const PopsRightClickMenu = {
|
|
|
10517
10524
|
});
|
|
10518
10525
|
element.remove();
|
|
10519
10526
|
}
|
|
10520
|
-
if (element.classList.contains(`pops-${
|
|
10527
|
+
if (element.classList.contains(`pops-${popsType}-anim-show`)) {
|
|
10521
10528
|
/* 有动画 */
|
|
10522
10529
|
popsDOMUtils.on(element, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
|
|
10523
10530
|
capture: true,
|
|
10524
10531
|
});
|
|
10525
|
-
element.classList.remove(`pops-${
|
|
10532
|
+
element.classList.remove(`pops-${popsType}-anim-show`);
|
|
10526
10533
|
}
|
|
10527
10534
|
else {
|
|
10528
10535
|
/* 无动画 */
|
|
@@ -10554,7 +10561,7 @@ const PopsRightClickMenu = {
|
|
|
10554
10561
|
*/
|
|
10555
10562
|
getMenuContainerElement(isChildren) {
|
|
10556
10563
|
let $menu = popsDOMUtils.createElement("div", {
|
|
10557
|
-
className: `pops-${
|
|
10564
|
+
className: `pops-${popsType}`,
|
|
10558
10565
|
innerHTML: /*html*/ `
|
|
10559
10566
|
<ul></ul>
|
|
10560
10567
|
`,
|
|
@@ -10568,7 +10575,7 @@ const PopsRightClickMenu = {
|
|
|
10568
10575
|
}
|
|
10569
10576
|
/* 添加动画 */
|
|
10570
10577
|
if (config.isAnimation) {
|
|
10571
|
-
popsDOMUtils.addClassName($menu, `pops-${
|
|
10578
|
+
popsDOMUtils.addClassName($menu, `pops-${popsType}-anim-grid`);
|
|
10572
10579
|
}
|
|
10573
10580
|
return $menu;
|
|
10574
10581
|
},
|
|
@@ -10708,7 +10715,7 @@ const PopsRightClickMenu = {
|
|
|
10708
10715
|
});
|
|
10709
10716
|
/* 过渡动画 */
|
|
10710
10717
|
if (config.isAnimation) {
|
|
10711
|
-
popsDOMUtils.addClassName(menuElement, `pops-${
|
|
10718
|
+
popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
|
|
10712
10719
|
}
|
|
10713
10720
|
return menuElement;
|
|
10714
10721
|
},
|
|
@@ -10748,7 +10755,7 @@ const PopsRightClickMenu = {
|
|
|
10748
10755
|
popsDOMUtils.css(menuElement, { ...offset, display: "" });
|
|
10749
10756
|
/* 过渡动画 */
|
|
10750
10757
|
if (config.isAnimation) {
|
|
10751
|
-
popsDOMUtils.addClassName(menuElement, `pops-${
|
|
10758
|
+
popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
|
|
10752
10759
|
}
|
|
10753
10760
|
return menuElement;
|
|
10754
10761
|
},
|
|
@@ -10769,19 +10776,19 @@ const PopsRightClickMenu = {
|
|
|
10769
10776
|
if (typeof item.icon === "string" && item.icon.trim() !== "") {
|
|
10770
10777
|
let iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
|
|
10771
10778
|
let iconElement = popsDOMUtils.parseTextToDOM(
|
|
10772
|
-
/*html*/ `<i class="pops-${
|
|
10779
|
+
/*html*/ `<i class="pops-${popsType}-icon" is-loading="${item.iconIsLoading ?? false}">${iconSVGHTML}</i>`);
|
|
10773
10780
|
menuLiElement.appendChild(iconElement);
|
|
10774
10781
|
}
|
|
10775
10782
|
/* 插入文字 */
|
|
10776
10783
|
menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
|
|
10777
10784
|
/* 如果存在子数据，显示 */
|
|
10778
10785
|
if (item.item && Array.isArray(item.item)) {
|
|
10779
|
-
popsDOMUtils.addClassName(menuLiElement, `pops-${
|
|
10786
|
+
popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);
|
|
10780
10787
|
}
|
|
10781
10788
|
/* 鼠标|触摸 移入事件 */
|
|
10782
10789
|
function liElementHoverEvent() {
|
|
10783
10790
|
Array.from(menuULElement.children).forEach((liElement) => {
|
|
10784
|
-
popsDOMUtils.removeClassName(liElement, `pops-${
|
|
10791
|
+
popsDOMUtils.removeClassName(liElement, `pops-${popsType}-is-visited`);
|
|
10785
10792
|
if (!liElement.__menuData__) {
|
|
10786
10793
|
return;
|
|
10787
10794
|
}
|
|
@@ -10806,7 +10813,7 @@ const PopsRightClickMenu = {
|
|
|
10806
10813
|
index--;
|
|
10807
10814
|
}
|
|
10808
10815
|
}
|
|
10809
|
-
popsDOMUtils.addClassName(menuLiElement, `pops-${
|
|
10816
|
+
popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-is-visited`);
|
|
10810
10817
|
if (!item.item) {
|
|
10811
10818
|
return;
|
|
10812
10819
|
}
|
|
@@ -10929,7 +10936,7 @@ const PopsSearchSuggestion = {
|
|
|
10929
10936
|
init(details) {
|
|
10930
10937
|
const guid = popsUtils.getRandomGUID();
|
|
10931
10938
|
// 设置当前类型
|
|
10932
|
-
const
|
|
10939
|
+
const popsType = "searchSuggestion";
|
|
10933
10940
|
let config = searchSuggestionConfig();
|
|
10934
10941
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10935
10942
|
config = popsUtils.assign(config, details);
|
|
@@ -10995,7 +11002,7 @@ const PopsSearchSuggestion = {
|
|
|
10995
11002
|
SearchSuggestion.changeHintULElementPosition();
|
|
10996
11003
|
SearchSuggestion.hide();
|
|
10997
11004
|
if (config.isAnimation) {
|
|
10998
|
-
SearchSuggestion.$el.root.classList.add(`pops-${
|
|
11005
|
+
SearchSuggestion.$el.root.classList.add(`pops-${popsType}-animation`);
|
|
10999
11006
|
}
|
|
11000
11007
|
$shadowRoot.appendChild(SearchSuggestion.$el.root);
|
|
11001
11008
|
parentElement.appendChild($shadowContainer);
|
|
@@ -11012,16 +11019,16 @@ const PopsSearchSuggestion = {
|
|
|
11012
11019
|
*/
|
|
11013
11020
|
getSearchSelectElement() {
|
|
11014
11021
|
let element = popsDOMUtils.createElement("div", {
|
|
11015
|
-
className: `pops pops-${
|
|
11022
|
+
className: `pops pops-${popsType}-search-suggestion`,
|
|
11016
11023
|
innerHTML: /*html*/ `
|
|
11017
11024
|
<style data-dynamic="true">
|
|
11018
11025
|
${this.getDynamicCSS()}
|
|
11019
11026
|
</style>
|
|
11020
|
-
<ul class="pops-${
|
|
11027
|
+
<ul class="pops-${popsType}-search-suggestion-hint">${config.toSearhNotResultHTML}</ul>
|
|
11021
11028
|
`,
|
|
11022
11029
|
}, {
|
|
11023
11030
|
"data-guid": guid,
|
|
11024
|
-
"type-value":
|
|
11031
|
+
"type-value": popsType,
|
|
11025
11032
|
});
|
|
11026
11033
|
if (config.className !== "" && config.className != null) {
|
|
11027
11034
|
popsDOMUtils.addClassName(element, config.className);
|
|
@@ -11031,24 +11038,24 @@ const PopsSearchSuggestion = {
|
|
|
11031
11038
|
/** 动态获取CSS */
|
|
11032
11039
|
getDynamicCSS() {
|
|
11033
11040
|
return /*css*/ `
|
|
11034
|
-
.pops-${
|
|
11041
|
+
.pops-${popsType}-animation{
|
|
11035
11042
|
-moz-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11036
11043
|
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11037
11044
|
-o-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11038
11045
|
-ms-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11039
11046
|
}
|
|
11040
|
-
.pops-${
|
|
11047
|
+
.pops-${popsType}-search-suggestion{
|
|
11041
11048
|
--search-suggestion-bg-color: #ffffff;
|
|
11042
11049
|
--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
|
|
11043
11050
|
--search-suggestion-item-color: #515a6e;
|
|
11044
11051
|
--search-suggestion-item-none-color: #8e8e8e;
|
|
11045
11052
|
--search-suggestion-item-hover-bg-color: rgba(0, 0, 0, .1);
|
|
11046
11053
|
}
|
|
11047
|
-
.pops-${
|
|
11054
|
+
.pops-${popsType}-search-suggestion{
|
|
11048
11055
|
border: initial;
|
|
11049
11056
|
overflow: initial;
|
|
11050
11057
|
}
|
|
11051
|
-
ul.pops-${
|
|
11058
|
+
ul.pops-${popsType}-search-suggestion-hint{
|
|
11052
11059
|
position: ${config.isAbsolute ? "absolute" : "fixed"};
|
|
11053
11060
|
z-index: ${PopsHandler.handleZIndex(config.zIndex)};
|
|
11054
11061
|
width: 0;
|
|
@@ -11063,14 +11070,14 @@ const PopsSearchSuggestion = {
|
|
|
11063
11070
|
box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
|
|
11064
11071
|
}
|
|
11065
11072
|
/* 建议框在上面时 */
|
|
11066
|
-
ul.pops-${
|
|
11073
|
+
ul.pops-${popsType}-search-suggestion-hint[data-top-reverse]{
|
|
11067
11074
|
display: flex;
|
|
11068
11075
|
flex-direction: column-reverse;
|
|
11069
11076
|
}
|
|
11070
|
-
ul.pops-${
|
|
11077
|
+
ul.pops-${popsType}-search-suggestion-hint[data-top-reverse] li{
|
|
11071
11078
|
flex-shrink: 0;
|
|
11072
11079
|
}
|
|
11073
|
-
ul.pops-${
|
|
11080
|
+
ul.pops-${popsType}-search-suggestion-hint li{
|
|
11074
11081
|
padding: 7px;
|
|
11075
11082
|
margin: 0;
|
|
11076
11083
|
clear: both;
|
|
@@ -11083,17 +11090,17 @@ const PopsSearchSuggestion = {
|
|
|
11083
11090
|
text-overflow: ellipsis;
|
|
11084
11091
|
width: 100%;
|
|
11085
11092
|
}
|
|
11086
|
-
ul.pops-${
|
|
11093
|
+
ul.pops-${popsType}-search-suggestion-hint li[data-none]{
|
|
11087
11094
|
text-align: center;
|
|
11088
11095
|
font-size: 12px;
|
|
11089
11096
|
color: var(--search-suggestion-item-none-color);
|
|
11090
11097
|
}
|
|
11091
|
-
ul.pops-${
|
|
11098
|
+
ul.pops-${popsType}-search-suggestion-hint li:hover{
|
|
11092
11099
|
background-color: var(--search-suggestion-item-hover-bg-color);
|
|
11093
11100
|
}
|
|
11094
11101
|
|
|
11095
11102
|
@media (prefers-color-scheme: dark){
|
|
11096
|
-
.pops-${
|
|
11103
|
+
.pops-${popsType}-search-suggestion{
|
|
11097
11104
|
--search-suggestion-bg-color: #1d1e1f;
|
|
11098
11105
|
--search-suggestion-item-color: #cfd3d4;
|
|
11099
11106
|
--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
|
|
@@ -11108,7 +11115,7 @@ const PopsSearchSuggestion = {
|
|
|
11108
11115
|
*/
|
|
11109
11116
|
getSearchItemLiElement(data, index) {
|
|
11110
11117
|
return popsDOMUtils.createElement("li", {
|
|
11111
|
-
className: `pops-${
|
|
11118
|
+
className: `pops-${popsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
|
|
11112
11119
|
"data-index": index,
|
|
11113
11120
|
"data-value": SearchSuggestion.getItemDataValue(data),
|
|
11114
11121
|
innerHTML: `${config.getItemHTML(data)}${config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""}`,
|
|
@@ -11129,7 +11136,7 @@ const PopsSearchSuggestion = {
|
|
|
11129
11136
|
popsDOMUtils.on(liElement, "click", void 0, (event) => {
|
|
11130
11137
|
popsDOMUtils.preventEvent(event);
|
|
11131
11138
|
let $click = event.target;
|
|
11132
|
-
if ($click.closest(`.pops-${
|
|
11139
|
+
if ($click.closest(`.pops-${popsType}-delete-icon`)) {
|
|
11133
11140
|
/* 点击的是删除按钮 */
|
|
11134
11141
|
if (typeof config.deleteIcon.callback === "function") {
|
|
11135
11142
|
config.deleteIcon.callback(event, liElement, liElement["data-value"]);
|
|
@@ -11321,7 +11328,7 @@ const PopsSearchSuggestion = {
|
|
|
11321
11328
|
*/
|
|
11322
11329
|
getDeleteIconHTML(size = 16, fill = "#bababa") {
|
|
11323
11330
|
return /*html*/ `
|
|
11324
|
-
<svg class="pops-${
|
|
11331
|
+
<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
|
|
11325
11332
|
<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>
|
|
11326
11333
|
<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>
|
|
11327
11334
|
</svg>
|
|
@@ -11332,7 +11339,7 @@ const PopsSearchSuggestion = {
|
|
|
11332
11339
|
*/
|
|
11333
11340
|
setPromptsInSearch() {
|
|
11334
11341
|
let isSearchingElement = popsDOMUtils.createElement("li", {
|
|
11335
|
-
className: `pops-${
|
|
11342
|
+
className: `pops-${popsType}-search-suggestion-hint-searching-item`,
|
|
11336
11343
|
innerHTML: config.searchingTip,
|
|
11337
11344
|
});
|
|
11338
11345
|
SearchSuggestion.$el.$hintULContainer.appendChild(isSearchingElement);
|
|
@@ -11342,7 +11349,7 @@ const PopsSearchSuggestion = {
|
|
|
11342
11349
|
*/
|
|
11343
11350
|
removePromptsInSearch() {
|
|
11344
11351
|
SearchSuggestion.$el.$hintULContainer
|
|
11345
|
-
.querySelector(`li.pops-${
|
|
11352
|
+
.querySelector(`li.pops-${popsType}-search-suggestion-hint-searching-item`)
|
|
11346
11353
|
?.remove();
|
|
11347
11354
|
},
|
|
11348
11355
|
/**
|
|
@@ -11502,7 +11509,7 @@ class Pops {
|
|
|
11502
11509
|
/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
|
|
11503
11510
|
animation: PopsAnimation.$data,
|
|
11504
11511
|
/** 存储已创建的元素 */
|
|
11505
|
-
|
|
11512
|
+
instData: PopsInstData,
|
|
11506
11513
|
/** 禁止滚动 */
|
|
11507
11514
|
forbiddenScroll: {
|
|
11508
11515
|
event(event) {
|