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