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