@whitesev/pops 2.2.1 → 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 +256 -257
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +256 -257
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +256 -257
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +256 -257
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +256 -257
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +256 -257
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +1 -1
- 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 +3 -3
- package/dist/types/src/types/components.d.ts +5 -5
- package/dist/types/src/types/main.d.ts +34 -31
- package/package.json +1 -1
- package/src/components/alert/index.ts +15 -15
- 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 +14 -13
- package/src/components/panel/index.ts +19 -18
- package/src/components/prompt/index.ts +15 -14
- package/src/components/rightClickMenu/index.ts +17 -16
- package/src/components/searchSuggestion/index.ts +21 -20
- package/src/components/tooltip/index.ts +3 -2
- package/src/handler/PopsElementHandler.ts +18 -18
- package/src/handler/PopsHandler.ts +13 -7
- package/src/types/components.d.ts +5 -5
- package/src/types/main.d.ts +34 -31
package/dist/index.umd.js
CHANGED
|
@@ -3952,6 +3952,10 @@
|
|
|
3952
3952
|
*/
|
|
3953
3953
|
handleOnly(type, config) {
|
|
3954
3954
|
if (config.only) {
|
|
3955
|
+
// .loading
|
|
3956
|
+
// .tooltip
|
|
3957
|
+
// .rightClickMenu
|
|
3958
|
+
// 单独处理
|
|
3955
3959
|
if (type === "loading" ||
|
|
3956
3960
|
type === "tooltip" ||
|
|
3957
3961
|
type === "rightClickMenu") {
|
|
@@ -4058,11 +4062,11 @@
|
|
|
4058
4062
|
init(details) {
|
|
4059
4063
|
const guid = popsUtils.getRandomGUID();
|
|
4060
4064
|
// 设置当前类型
|
|
4061
|
-
const
|
|
4065
|
+
const popsType = "alert";
|
|
4062
4066
|
let config = PopsAlertConfig();
|
|
4063
4067
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4064
4068
|
config = popsUtils.assign(config, details);
|
|
4065
|
-
config = PopsHandler.handleOnly(
|
|
4069
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4066
4070
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4067
4071
|
PopsHandler.handleInit($shadowRoot, [
|
|
4068
4072
|
{
|
|
@@ -4097,23 +4101,23 @@
|
|
|
4097
4101
|
// 先把z-index提取出来
|
|
4098
4102
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4099
4103
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4100
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4101
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4102
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4103
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4104
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4104
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4105
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4106
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4107
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4108
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4105
4109
|
/*html*/ `
|
|
4106
|
-
<div class="pops-title pops-${
|
|
4110
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4107
4111
|
? config.title.text
|
|
4108
|
-
: `<p pops class="pops-${
|
|
4109
|
-
<div class="pops-content pops-${
|
|
4112
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4113
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
4110
4114
|
? config.content.text
|
|
4111
|
-
: `<p pops class="pops-${
|
|
4115
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4112
4116
|
/**
|
|
4113
4117
|
* 弹窗的主元素，包括动画层
|
|
4114
4118
|
*/
|
|
4115
4119
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4116
|
-
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim,
|
|
4120
|
+
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4117
4121
|
/** 遮罩层元素 */
|
|
4118
4122
|
let $mask = null;
|
|
4119
4123
|
/** 已创建的元素列表 */
|
|
@@ -4121,7 +4125,7 @@
|
|
|
4121
4125
|
/* 遮罩层元素 */
|
|
4122
4126
|
if (config.mask.enable) {
|
|
4123
4127
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4124
|
-
type:
|
|
4128
|
+
type: popsType,
|
|
4125
4129
|
guid: guid,
|
|
4126
4130
|
config: config,
|
|
4127
4131
|
animElement: $anim,
|
|
@@ -4131,7 +4135,7 @@
|
|
|
4131
4135
|
elementList.push($mask);
|
|
4132
4136
|
}
|
|
4133
4137
|
/* 处理返回的配置 */
|
|
4134
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4138
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4135
4139
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
4136
4140
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
4137
4141
|
/* 为底部ok按钮添加点击事件 */
|
|
@@ -4147,7 +4151,7 @@
|
|
|
4147
4151
|
$anim.after($mask);
|
|
4148
4152
|
}
|
|
4149
4153
|
/* 保存 */
|
|
4150
|
-
PopsHandler.handlePush(
|
|
4154
|
+
PopsHandler.handlePush(popsType, {
|
|
4151
4155
|
guid: guid,
|
|
4152
4156
|
animElement: $anim,
|
|
4153
4157
|
popsElement: $pops,
|
|
@@ -4262,11 +4266,11 @@
|
|
|
4262
4266
|
init(details) {
|
|
4263
4267
|
const guid = popsUtils.getRandomGUID();
|
|
4264
4268
|
// 设置当前类型
|
|
4265
|
-
const
|
|
4269
|
+
const popsType = "confirm";
|
|
4266
4270
|
let config = PopsConfirmConfig();
|
|
4267
4271
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4268
4272
|
config = popsUtils.assign(config, details);
|
|
4269
|
-
config = PopsHandler.handleOnly(
|
|
4273
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4270
4274
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4271
4275
|
PopsHandler.handleInit($shadowRoot, [
|
|
4272
4276
|
{
|
|
@@ -4301,23 +4305,23 @@
|
|
|
4301
4305
|
// 先把z-index提取出来
|
|
4302
4306
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4303
4307
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4304
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4305
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4306
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4307
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4308
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4308
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4309
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4310
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4311
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4312
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4309
4313
|
/*html*/ `
|
|
4310
|
-
<div class="pops-title pops-${
|
|
4314
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4311
4315
|
? config.title.text
|
|
4312
|
-
: `<p pops class="pops-${
|
|
4313
|
-
<div class="pops-content pops-${
|
|
4316
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4317
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
4314
4318
|
? config.content.text
|
|
4315
|
-
: `<p pops class="pops-${
|
|
4319
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4316
4320
|
/**
|
|
4317
4321
|
* 弹窗的主元素，包括动画层
|
|
4318
4322
|
*/
|
|
4319
4323
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4320
|
-
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim,
|
|
4324
|
+
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4321
4325
|
/**
|
|
4322
4326
|
* 遮罩层元素
|
|
4323
4327
|
*/
|
|
@@ -4329,7 +4333,7 @@
|
|
|
4329
4333
|
if (config.mask.enable) {
|
|
4330
4334
|
// 启用遮罩层
|
|
4331
4335
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4332
|
-
type:
|
|
4336
|
+
type: popsType,
|
|
4333
4337
|
guid: guid,
|
|
4334
4338
|
config: config,
|
|
4335
4339
|
animElement: $anim,
|
|
@@ -4338,7 +4342,7 @@
|
|
|
4338
4342
|
$mask = _handleMask_.maskElement;
|
|
4339
4343
|
elementList.push($mask);
|
|
4340
4344
|
}
|
|
4341
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4345
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4342
4346
|
PopsHandler.handleClickEvent("close", $btnClose, eventDetails, config.btn.close.callback);
|
|
4343
4347
|
PopsHandler.handleClickEvent("ok", $btnOk, eventDetails, config.btn.ok.callback);
|
|
4344
4348
|
PopsHandler.handleClickEvent("cancel", $btnCancel, eventDetails, config.btn.cancel.callback);
|
|
@@ -4352,7 +4356,7 @@
|
|
|
4352
4356
|
if ($mask != null) {
|
|
4353
4357
|
$anim.after($mask);
|
|
4354
4358
|
}
|
|
4355
|
-
PopsHandler.handlePush(
|
|
4359
|
+
PopsHandler.handlePush(popsType, {
|
|
4356
4360
|
guid: guid,
|
|
4357
4361
|
animElement: $anim,
|
|
4358
4362
|
popsElement: $pops,
|
|
@@ -4471,11 +4475,11 @@
|
|
|
4471
4475
|
init(details) {
|
|
4472
4476
|
const guid = popsUtils.getRandomGUID();
|
|
4473
4477
|
// 设置当前类型
|
|
4474
|
-
const
|
|
4478
|
+
const popsType = "prompt";
|
|
4475
4479
|
let config = PopsPromptConfig();
|
|
4476
4480
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4477
4481
|
config = popsUtils.assign(config, details);
|
|
4478
|
-
config = PopsHandler.handleOnly(
|
|
4482
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4479
4483
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4480
4484
|
PopsHandler.handleInit($shadowRoot, [
|
|
4481
4485
|
{
|
|
@@ -4510,16 +4514,16 @@
|
|
|
4510
4514
|
// 先把z-index提取出来
|
|
4511
4515
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4512
4516
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4513
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4514
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4515
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4516
|
-
let { contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4517
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4517
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4518
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4519
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4520
|
+
let { contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4521
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4518
4522
|
/*html*/ `
|
|
4519
|
-
<div class="pops-title pops-${
|
|
4523
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4520
4524
|
? config.title.text
|
|
4521
|
-
: `<p pops class="pops-${
|
|
4522
|
-
<div class="pops-content pops-${
|
|
4525
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4526
|
+
<div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${config.content.row
|
|
4523
4527
|
? '<textarea name="pops-input-text" pops="" placeholder="' +
|
|
4524
4528
|
config.content.placeholder +
|
|
4525
4529
|
'"></textarea>'
|
|
@@ -4532,7 +4536,7 @@
|
|
|
4532
4536
|
* 弹窗的主元素，包括动画层
|
|
4533
4537
|
*/
|
|
4534
4538
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4535
|
-
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim,
|
|
4539
|
+
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4536
4540
|
/**
|
|
4537
4541
|
* 遮罩层元素
|
|
4538
4542
|
*/
|
|
@@ -4544,7 +4548,7 @@
|
|
|
4544
4548
|
if (config.mask.enable) {
|
|
4545
4549
|
// 启用遮罩层
|
|
4546
4550
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4547
|
-
type:
|
|
4551
|
+
type: popsType,
|
|
4548
4552
|
guid: guid,
|
|
4549
4553
|
config: config,
|
|
4550
4554
|
animElement: $anim,
|
|
@@ -4553,7 +4557,7 @@
|
|
|
4553
4557
|
$mask = _handleMask_.maskElement;
|
|
4554
4558
|
elementList.push($mask);
|
|
4555
4559
|
}
|
|
4556
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4560
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4557
4561
|
/* 输入框赋值初始值 */
|
|
4558
4562
|
$input.value = config.content.text;
|
|
4559
4563
|
PopsHandler.handlePromptClickEvent("close", $input, $btnClose, eventDetails, config.btn.close.callback);
|
|
@@ -4569,7 +4573,7 @@
|
|
|
4569
4573
|
if ($mask != null) {
|
|
4570
4574
|
$anim.after($mask);
|
|
4571
4575
|
}
|
|
4572
|
-
PopsHandler.handlePush(
|
|
4576
|
+
PopsHandler.handlePush(popsType, {
|
|
4573
4577
|
guid: guid,
|
|
4574
4578
|
animElement: $anim,
|
|
4575
4579
|
popsElement: $pops,
|
|
@@ -4764,14 +4768,14 @@
|
|
|
4764
4768
|
init(details) {
|
|
4765
4769
|
const guid = popsUtils.getRandomGUID();
|
|
4766
4770
|
// 设置当前类型
|
|
4767
|
-
const
|
|
4771
|
+
const popsType = "iframe";
|
|
4768
4772
|
let config = PopsIframeConfig();
|
|
4769
4773
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4770
4774
|
config = popsUtils.assign(config, details);
|
|
4771
4775
|
if (config.url == null) {
|
|
4772
4776
|
throw new Error("config.url不能为空");
|
|
4773
4777
|
}
|
|
4774
|
-
config = PopsHandler.handleOnly(
|
|
4778
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4775
4779
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4776
4780
|
PopsHandler.handleInit($shadowRoot, [
|
|
4777
4781
|
{
|
|
@@ -4807,17 +4811,17 @@
|
|
|
4807
4811
|
// 先把z-index提取出来
|
|
4808
4812
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4809
4813
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
|
|
4810
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4814
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4811
4815
|
let iframeLoadingHTML = '<div class="pops-loading"></div>';
|
|
4812
4816
|
let titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
|
|
4813
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4814
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4817
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4818
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4815
4819
|
/*html*/ `
|
|
4816
|
-
<div class="pops-title pops-${
|
|
4820
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4817
4821
|
? titleText
|
|
4818
|
-
: `<p pops class="pops-${
|
|
4819
|
-
<div class="pops-content pops-${
|
|
4820
|
-
<div class="pops-${
|
|
4822
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
|
|
4823
|
+
<div class="pops-content pops-${popsType}-content">
|
|
4824
|
+
<div class="pops-${popsType}-content-global-loading"></div>
|
|
4821
4825
|
<iframe src="${config.url}" pops ${config.sandbox
|
|
4822
4826
|
? "sandbox='allow-forms allow-same-origin allow-scripts'"
|
|
4823
4827
|
: ""}>
|
|
@@ -4827,7 +4831,7 @@
|
|
|
4827
4831
|
* 弹窗的主元素，包括动画层
|
|
4828
4832
|
*/
|
|
4829
4833
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4830
|
-
let { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim,
|
|
4834
|
+
let { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4831
4835
|
let $iframeContainer = PopsCore.document.querySelector(".pops-iframe-container");
|
|
4832
4836
|
if (!$iframeContainer) {
|
|
4833
4837
|
$iframeContainer = PopsCore.document.createElement("div");
|
|
@@ -4846,7 +4850,7 @@
|
|
|
4846
4850
|
let elementList = [$anim];
|
|
4847
4851
|
if (config.mask.enable) {
|
|
4848
4852
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4849
|
-
type:
|
|
4853
|
+
type: popsType,
|
|
4850
4854
|
guid: guid,
|
|
4851
4855
|
config: config,
|
|
4852
4856
|
animElement: $anim,
|
|
@@ -4855,7 +4859,7 @@
|
|
|
4855
4859
|
$mask = _handleMask_.maskElement;
|
|
4856
4860
|
elementList.push($mask);
|
|
4857
4861
|
}
|
|
4858
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4862
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4859
4863
|
eventDetails["iframeElement"] = $iframe;
|
|
4860
4864
|
popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
|
|
4861
4865
|
/* 动画加载完毕 */
|
|
@@ -4999,7 +5003,7 @@
|
|
|
4999
5003
|
}, {
|
|
5000
5004
|
capture: true,
|
|
5001
5005
|
});
|
|
5002
|
-
PopsHandler.handlePush(
|
|
5006
|
+
PopsHandler.handlePush(popsType, {
|
|
5003
5007
|
guid: guid,
|
|
5004
5008
|
animElement: $anim,
|
|
5005
5009
|
popsElement: $pops,
|
|
@@ -5103,11 +5107,11 @@
|
|
|
5103
5107
|
init(details) {
|
|
5104
5108
|
const guid = popsUtils.getRandomGUID();
|
|
5105
5109
|
// 设置当前类型
|
|
5106
|
-
const
|
|
5110
|
+
const popsType = "drawer";
|
|
5107
5111
|
let config = PopsDrawerConfig();
|
|
5108
5112
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5109
5113
|
config = popsUtils.assign(config, details);
|
|
5110
|
-
config = PopsHandler.handleOnly(
|
|
5114
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
5111
5115
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5112
5116
|
PopsHandler.handleInit($shadowRoot, [
|
|
5113
5117
|
{
|
|
@@ -5142,25 +5146,25 @@
|
|
|
5142
5146
|
// 先把z-index提取出来
|
|
5143
5147
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5144
5148
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
5145
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
5146
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
5147
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
5148
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
5149
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
5149
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
5150
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
5151
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
5152
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
5153
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
5150
5154
|
/*html*/ `
|
|
5151
5155
|
${config.title.enable
|
|
5152
|
-
? /*html*/ `<div class="pops-title pops-${
|
|
5156
|
+
? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
|
|
5153
5157
|
? config.title.text
|
|
5154
|
-
: /*html*/ `<p pops class="pops-${
|
|
5158
|
+
: /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
|
|
5155
5159
|
: ""}
|
|
5156
|
-
<div class="pops-content pops-${
|
|
5160
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
5157
5161
|
? config.content.text
|
|
5158
|
-
: `<p pops class="pops-${
|
|
5162
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
5159
5163
|
/**
|
|
5160
5164
|
* 弹窗的主元素，包括动画层
|
|
5161
5165
|
*/
|
|
5162
5166
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
5163
|
-
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement, } = PopsHandler.handleQueryElement($anim,
|
|
5167
|
+
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5164
5168
|
let $pops = popsElement;
|
|
5165
5169
|
let $headerCloseBtn = headerCloseBtnElement;
|
|
5166
5170
|
let $btnCancel = btnCancelElement;
|
|
@@ -5176,7 +5180,7 @@
|
|
|
5176
5180
|
let elementList = [$anim];
|
|
5177
5181
|
if (config.mask.enable) {
|
|
5178
5182
|
let _handleMask_ = PopsHandler.handleMask({
|
|
5179
|
-
type:
|
|
5183
|
+
type: popsType,
|
|
5180
5184
|
guid: guid,
|
|
5181
5185
|
config: config,
|
|
5182
5186
|
animElement: $anim,
|
|
@@ -5185,7 +5189,7 @@
|
|
|
5185
5189
|
$mask = _handleMask_.maskElement;
|
|
5186
5190
|
elementList.push($mask);
|
|
5187
5191
|
}
|
|
5188
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
5192
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5189
5193
|
/* 处理方向 */
|
|
5190
5194
|
$pops.setAttribute("direction", config.direction);
|
|
5191
5195
|
/* 处理border-radius */
|
|
@@ -5273,7 +5277,7 @@
|
|
|
5273
5277
|
if ($mask != null) {
|
|
5274
5278
|
$anim.after($mask);
|
|
5275
5279
|
}
|
|
5276
|
-
PopsHandler.handlePush(
|
|
5280
|
+
PopsHandler.handlePush(popsType, {
|
|
5277
5281
|
guid: guid,
|
|
5278
5282
|
animElement: $anim,
|
|
5279
5283
|
popsElement: $pops,
|
|
@@ -5464,11 +5468,11 @@
|
|
|
5464
5468
|
init(details) {
|
|
5465
5469
|
const guid = popsUtils.getRandomGUID();
|
|
5466
5470
|
// 设置当前类型
|
|
5467
|
-
const
|
|
5471
|
+
const popsType = "folder";
|
|
5468
5472
|
let config = PopsFolderConfig();
|
|
5469
5473
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5470
5474
|
config = popsUtils.assign(config, details);
|
|
5471
|
-
config = PopsHandler.handleOnly(
|
|
5475
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
5472
5476
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5473
5477
|
PopsHandler.handleInit($shadowRoot, [
|
|
5474
5478
|
{
|
|
@@ -5548,19 +5552,15 @@
|
|
|
5548
5552
|
/* Android安装包 */
|
|
5549
5553
|
let androidIconList = ["apk", "apkm", "xapk"];
|
|
5550
5554
|
zipIconList.forEach((keyName) => {
|
|
5551
|
-
// @ts-ignore
|
|
5552
5555
|
Folder_ICON[keyName] = Folder_ICON.zip;
|
|
5553
5556
|
});
|
|
5554
5557
|
imageIconList.forEach((keyName) => {
|
|
5555
|
-
// @ts-ignore
|
|
5556
5558
|
Folder_ICON[keyName] = Folder_ICON.png;
|
|
5557
5559
|
});
|
|
5558
5560
|
codeLanguageIconList.forEach((keyName) => {
|
|
5559
|
-
// @ts-ignore
|
|
5560
5561
|
Folder_ICON[keyName] = Folder_ICON.html;
|
|
5561
5562
|
});
|
|
5562
5563
|
androidIconList.forEach((keyName) => {
|
|
5563
|
-
// @ts-ignore
|
|
5564
5564
|
Folder_ICON[keyName] = Folder_ICON.apk;
|
|
5565
5565
|
});
|
|
5566
5566
|
if (details?.folder) {
|
|
@@ -5570,108 +5570,105 @@
|
|
|
5570
5570
|
// 先把z-index提取出来
|
|
5571
5571
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5572
5572
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
5573
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
5574
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
5575
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
5576
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
5573
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
5574
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
5575
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
5576
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
5577
5577
|
/*html*/ `
|
|
5578
|
-
<div class="pops-title pops-${
|
|
5578
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
5579
5579
|
? config.title.text
|
|
5580
|
-
: `<p pops class="pops-${
|
|
5581
|
-
<div class="pops-content pops-${
|
|
5580
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
5581
|
+
<div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
|
|
5582
5582
|
<div class="pops-folder-list">
|
|
5583
5583
|
<div class="pops-folder-file-list-breadcrumb">
|
|
5584
|
-
|
|
5585
|
-
|
|
5586
|
-
|
|
5587
|
-
|
|
5588
|
-
|
|
5584
|
+
<div class="pops-folder-file-list-breadcrumb-primary">
|
|
5585
|
+
<span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
|
|
5586
|
+
<a>全部文件</a>
|
|
5587
|
+
</span>
|
|
5588
|
+
</div>
|
|
5589
5589
|
</div>
|
|
5590
5590
|
<div class="pops-folder-list-table__header-div">
|
|
5591
|
-
|
|
5592
|
-
|
|
5593
|
-
|
|
5594
|
-
|
|
5595
|
-
|
|
5596
|
-
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
|
|
5600
|
-
|
|
5601
|
-
|
|
5602
|
-
|
|
5603
|
-
|
|
5604
|
-
|
|
5605
|
-
|
|
5606
|
-
|
|
5607
|
-
|
|
5608
|
-
|
|
5609
|
-
|
|
5610
|
-
|
|
5611
|
-
|
|
5612
|
-
|
|
5613
|
-
|
|
5614
|
-
|
|
5615
|
-
|
|
5616
|
-
|
|
5617
|
-
|
|
5618
|
-
|
|
5619
|
-
|
|
5620
|
-
|
|
5621
|
-
|
|
5622
|
-
|
|
5623
|
-
|
|
5624
|
-
|
|
5625
|
-
|
|
5626
|
-
|
|
5627
|
-
|
|
5628
|
-
|
|
5629
|
-
|
|
5630
|
-
|
|
5631
|
-
|
|
5632
|
-
|
|
5633
|
-
|
|
5634
|
-
|
|
5635
|
-
|
|
5636
|
-
|
|
5637
|
-
|
|
5638
|
-
|
|
5639
|
-
|
|
5640
|
-
|
|
5641
|
-
|
|
5642
|
-
|
|
5643
|
-
|
|
5644
|
-
|
|
5645
|
-
|
|
5646
|
-
|
|
5647
|
-
|
|
5648
|
-
|
|
5649
|
-
|
|
5650
|
-
|
|
5651
|
-
|
|
5652
|
-
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5658
|
-
|
|
5591
|
+
<table class="pops-folder-list-table__header">
|
|
5592
|
+
<colgroup>
|
|
5593
|
+
<col width="52%">
|
|
5594
|
+
<col width="24%">
|
|
5595
|
+
<col width="16%">
|
|
5596
|
+
</colgroup>
|
|
5597
|
+
<thead>
|
|
5598
|
+
<tr class="pops-folder-list-table__header-row">
|
|
5599
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5600
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5601
|
+
<span>文件名</span>
|
|
5602
|
+
<div class="pops-folder-list-table__sort" data-sort="fileName">
|
|
5603
|
+
<div class="pops-folder-icon-arrow" data-sort="按文件名排序">
|
|
5604
|
+
<svg
|
|
5605
|
+
viewBox="0 0 1024 1024"
|
|
5606
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5607
|
+
<path
|
|
5608
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5609
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5610
|
+
<path
|
|
5611
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5612
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5613
|
+
</svg>
|
|
5614
|
+
</div>
|
|
5615
|
+
</div>
|
|
5616
|
+
</div>
|
|
5617
|
+
</th>
|
|
5618
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5619
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5620
|
+
<span>修改时间</span>
|
|
5621
|
+
<div class="pops-folder-list-table__sort" data-sort="latestTime">
|
|
5622
|
+
<div class="pops-folder-icon-arrow" title="按修改时间排序">
|
|
5623
|
+
<svg
|
|
5624
|
+
viewBox="0 0 1024 1024"
|
|
5625
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5626
|
+
<path
|
|
5627
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5628
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5629
|
+
<path
|
|
5630
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5631
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5632
|
+
</svg>
|
|
5633
|
+
</div>
|
|
5634
|
+
</div>
|
|
5635
|
+
</div>
|
|
5636
|
+
</th>
|
|
5637
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5638
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5639
|
+
<span>大小</span>
|
|
5640
|
+
<div class="pops-folder-list-table__sort" data-sort="fileSize">
|
|
5641
|
+
<div class="pops-folder-icon-arrow" title="按大小排序">
|
|
5642
|
+
<svg
|
|
5643
|
+
viewBox="0 0 1024 1024"
|
|
5644
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5645
|
+
<path
|
|
5646
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5647
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5648
|
+
<path
|
|
5649
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5650
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5651
|
+
</svg>
|
|
5652
|
+
</div>
|
|
5653
|
+
</div>
|
|
5654
|
+
</div>
|
|
5655
|
+
</th>
|
|
5656
|
+
</tr>
|
|
5657
|
+
</thead>
|
|
5658
|
+
</table>
|
|
5659
5659
|
</div>
|
|
5660
5660
|
<div class="pops-folder-list-table__body-div">
|
|
5661
|
-
|
|
5662
|
-
|
|
5663
|
-
|
|
5661
|
+
<table class="pops-folder-list-table__body">
|
|
5662
|
+
<colgroup>
|
|
5663
|
+
${popsUtils.isPhone()
|
|
5664
5664
|
? `<col width="100%">`
|
|
5665
5665
|
: `
|
|
5666
|
-
|
|
5667
|
-
|
|
5668
|
-
|
|
5669
|
-
|
|
5670
|
-
|
|
5671
|
-
|
|
5672
|
-
|
|
5673
|
-
</tbody>
|
|
5674
|
-
</table>
|
|
5666
|
+
<col width="52%">
|
|
5667
|
+
<col width="24%">
|
|
5668
|
+
<col width="16%">`}
|
|
5669
|
+
</colgroup>
|
|
5670
|
+
<tbody></tbody>
|
|
5671
|
+
</table>
|
|
5675
5672
|
</div>
|
|
5676
5673
|
</div>
|
|
5677
5674
|
</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
@@ -5683,7 +5680,7 @@
|
|
|
5683
5680
|
// folderListElement,
|
|
5684
5681
|
// folderListHeaderElement,
|
|
5685
5682
|
// folderListHeaderRowElement,
|
|
5686
|
-
folderListBodyElement, folderFileListBreadcrumbPrimaryElement, headerCloseBtnElement: $btnCloseBtn, btnOkElement, btnCancelElement, btnOtherElement, folderListSortFileNameElement, folderListSortLatestTimeElement, folderListSortFileSizeElement, } = PopsHandler.handleQueryElement($anim,
|
|
5683
|
+
folderListBodyElement, folderFileListBreadcrumbPrimaryElement, headerCloseBtnElement: $btnCloseBtn, btnOkElement, btnCancelElement, btnOtherElement, folderListSortFileNameElement, folderListSortLatestTimeElement, folderListSortFileSizeElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5687
5684
|
/**
|
|
5688
5685
|
* 遮罩层元素
|
|
5689
5686
|
*/
|
|
@@ -5694,7 +5691,7 @@
|
|
|
5694
5691
|
let elementList = [$anim];
|
|
5695
5692
|
if (config.mask.enable) {
|
|
5696
5693
|
let _handleMask_ = PopsHandler.handleMask({
|
|
5697
|
-
type:
|
|
5694
|
+
type: popsType,
|
|
5698
5695
|
guid: guid,
|
|
5699
5696
|
config: config,
|
|
5700
5697
|
animElement: $anim,
|
|
@@ -5704,7 +5701,7 @@
|
|
|
5704
5701
|
elementList.push($mask);
|
|
5705
5702
|
}
|
|
5706
5703
|
/* 事件 */
|
|
5707
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
5704
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5708
5705
|
PopsHandler.handleClickEvent("close", $btnCloseBtn, eventDetails, config.btn.close.callback);
|
|
5709
5706
|
PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok.callback);
|
|
5710
5707
|
PopsHandler.handleClickEvent("cancel", btnCancelElement, eventDetails, config.btn.cancel.callback);
|
|
@@ -5797,10 +5794,10 @@
|
|
|
5797
5794
|
fileSize: origin_fileSize,
|
|
5798
5795
|
isFolder: isFolder,
|
|
5799
5796
|
};
|
|
5800
|
-
fileNameElement
|
|
5801
|
-
fileTimeElement
|
|
5802
|
-
fileFormatSize
|
|
5803
|
-
folderELement
|
|
5797
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
5798
|
+
Reflect.set(fileTimeElement, "__value__", __value__);
|
|
5799
|
+
Reflect.set(fileFormatSize, "__value__", __value__);
|
|
5800
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
5804
5801
|
folderELement.appendChild(fileNameElement);
|
|
5805
5802
|
folderELement.appendChild(fileTimeElement);
|
|
5806
5803
|
folderELement.appendChild(fileFormatSize);
|
|
@@ -5867,8 +5864,8 @@
|
|
|
5867
5864
|
fileSize: origin_fileSize,
|
|
5868
5865
|
isFolder: isFolder,
|
|
5869
5866
|
};
|
|
5870
|
-
fileNameElement
|
|
5871
|
-
folderELement
|
|
5867
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
5868
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
5872
5869
|
folderELement.appendChild(fileNameElement);
|
|
5873
5870
|
return {
|
|
5874
5871
|
folderELement,
|
|
@@ -5878,10 +5875,13 @@
|
|
|
5878
5875
|
/**
|
|
5879
5876
|
* 清空每行的元素
|
|
5880
5877
|
*/
|
|
5881
|
-
function
|
|
5878
|
+
function clearFolderRow() {
|
|
5882
5879
|
PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
|
|
5883
5880
|
}
|
|
5884
|
-
|
|
5881
|
+
/**
|
|
5882
|
+
* 创建顶部导航的箭头图标
|
|
5883
|
+
*/
|
|
5884
|
+
function createHeaderArrowIcon() {
|
|
5885
5885
|
let iconArrowElement = popsDOMUtils.createElement("div", {
|
|
5886
5886
|
className: "iconArrow",
|
|
5887
5887
|
});
|
|
@@ -5889,17 +5889,16 @@
|
|
|
5889
5889
|
}
|
|
5890
5890
|
/**
|
|
5891
5891
|
* 添加顶部导航
|
|
5892
|
-
* @param
|
|
5893
|
-
* @param
|
|
5894
|
-
* @returns
|
|
5892
|
+
* @param folderName 文件夹名
|
|
5893
|
+
* @param folderDataConfig 文件夹配置
|
|
5895
5894
|
*/
|
|
5896
|
-
function
|
|
5895
|
+
function createHeaderFileLinkNavgiation(folderName, folderDataConfig) {
|
|
5897
5896
|
let spanElement = popsDOMUtils.createElement("span", {
|
|
5898
5897
|
className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
|
|
5899
|
-
innerHTML: `<a>${
|
|
5900
|
-
_config_:
|
|
5898
|
+
innerHTML: `<a>${folderName}</a>`,
|
|
5899
|
+
_config_: folderDataConfig,
|
|
5901
5900
|
}, {
|
|
5902
|
-
title:
|
|
5901
|
+
title: folderName,
|
|
5903
5902
|
});
|
|
5904
5903
|
return spanElement;
|
|
5905
5904
|
}
|
|
@@ -5907,10 +5906,10 @@
|
|
|
5907
5906
|
* 顶部导航的点击事件
|
|
5908
5907
|
* @param event
|
|
5909
5908
|
* @param isTop 是否是全部文件按钮
|
|
5910
|
-
* @param
|
|
5909
|
+
* @param folderDataConfigList 配置
|
|
5911
5910
|
*/
|
|
5912
|
-
function breadcrumbAllFilesElementClickEvent(event, isTop,
|
|
5913
|
-
|
|
5911
|
+
function breadcrumbAllFilesElementClickEvent(event, isTop, folderDataConfigList) {
|
|
5912
|
+
clearFolderRow();
|
|
5914
5913
|
/* 获取当前的导航元素 */
|
|
5915
5914
|
let $click = event.target;
|
|
5916
5915
|
let currentBreadcrumb = $click.closest("span.pops-folder-file-list-breadcrumb-allFiles");
|
|
@@ -5936,16 +5935,16 @@
|
|
|
5936
5935
|
},
|
|
5937
5936
|
addIndexCSS: false,
|
|
5938
5937
|
});
|
|
5939
|
-
addFolderElement(
|
|
5938
|
+
addFolderElement(folderDataConfigList);
|
|
5940
5939
|
loadingMask.close();
|
|
5941
5940
|
}
|
|
5942
5941
|
/**
|
|
5943
5942
|
* 刷新文件列表界面信息
|
|
5944
5943
|
* @param event
|
|
5945
|
-
* @param
|
|
5944
|
+
* @param folderDataConfig
|
|
5946
5945
|
*/
|
|
5947
|
-
async function refreshFolderInfoClickEvent(event,
|
|
5948
|
-
|
|
5946
|
+
async function refreshFolderInfoClickEvent(event, folderDataConfig) {
|
|
5947
|
+
clearFolderRow();
|
|
5949
5948
|
let loadingMask = PopsLoading.init({
|
|
5950
5949
|
parent: $content,
|
|
5951
5950
|
content: {
|
|
@@ -5956,12 +5955,12 @@
|
|
|
5956
5955
|
},
|
|
5957
5956
|
addIndexCSS: false,
|
|
5958
5957
|
});
|
|
5959
|
-
if (typeof
|
|
5960
|
-
let childConfig = await
|
|
5958
|
+
if (typeof folderDataConfig.clickEvent === "function") {
|
|
5959
|
+
let childConfig = await folderDataConfig.clickEvent(event, folderDataConfig);
|
|
5961
5960
|
/* 添加顶部导航的箭头 */
|
|
5962
|
-
folderFileListBreadcrumbPrimaryElement.appendChild(
|
|
5963
|
-
/*
|
|
5964
|
-
let breadcrumbAllFilesElement =
|
|
5961
|
+
folderFileListBreadcrumbPrimaryElement.appendChild(createHeaderArrowIcon());
|
|
5962
|
+
/* 添加顶部导航的链接文字 */
|
|
5963
|
+
let breadcrumbAllFilesElement = createHeaderFileLinkNavgiation(folderDataConfig.fileName, childConfig);
|
|
5965
5964
|
folderFileListBreadcrumbPrimaryElement.appendChild(breadcrumbAllFilesElement);
|
|
5966
5965
|
/* 设置顶部导航点击事件 */
|
|
5967
5966
|
popsDOMUtils.on(breadcrumbAllFilesElement, "click", function (event) {
|
|
@@ -6256,7 +6255,7 @@
|
|
|
6256
6255
|
endCallBack: config.dragEndCallBack,
|
|
6257
6256
|
});
|
|
6258
6257
|
}
|
|
6259
|
-
PopsHandler.handlePush(
|
|
6258
|
+
PopsHandler.handlePush(popsType, {
|
|
6260
6259
|
guid: guid,
|
|
6261
6260
|
animElement: $anim,
|
|
6262
6261
|
popsElement: $pops,
|
|
@@ -7348,14 +7347,14 @@
|
|
|
7348
7347
|
init(details) {
|
|
7349
7348
|
const guid = popsUtils.getRandomGUID();
|
|
7350
7349
|
// 设置当前类型
|
|
7351
|
-
const
|
|
7350
|
+
const popsType = "tooltip";
|
|
7352
7351
|
let config = PopsTooltipConfig();
|
|
7353
7352
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
7354
7353
|
config = popsUtils.assign(config, details);
|
|
7355
7354
|
if (!(config.target instanceof HTMLElement)) {
|
|
7356
7355
|
throw new TypeError("config.target 必须是HTMLElement类型");
|
|
7357
7356
|
}
|
|
7358
|
-
config = PopsHandler.handleOnly(
|
|
7357
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
7359
7358
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
7360
7359
|
PopsHandler.handleInit($shadowRoot, [
|
|
7361
7360
|
{
|
|
@@ -10087,14 +10086,14 @@
|
|
|
10087
10086
|
init(details) {
|
|
10088
10087
|
const guid = popsUtils.getRandomGUID();
|
|
10089
10088
|
// 设置当前类型
|
|
10090
|
-
const
|
|
10089
|
+
const popsType = "panel";
|
|
10091
10090
|
let config = PopsPanelConfig();
|
|
10092
10091
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10093
10092
|
config = popsUtils.assign(config, details);
|
|
10094
10093
|
if (details && Array.isArray(details.content)) {
|
|
10095
10094
|
config.content = details.content;
|
|
10096
10095
|
}
|
|
10097
|
-
config = PopsHandler.handleOnly(
|
|
10096
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
10098
10097
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
10099
10098
|
PopsHandler.handleInit($shadowRoot, [
|
|
10100
10099
|
{
|
|
@@ -10129,21 +10128,21 @@
|
|
|
10129
10128
|
// 先把z-index提取出来
|
|
10130
10129
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
10131
10130
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
10132
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
10133
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
10134
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
10131
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
10132
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
10133
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
10135
10134
|
/*html*/ `
|
|
10136
|
-
<div class="pops-title pops-${
|
|
10135
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
10137
10136
|
? config.title.text
|
|
10138
|
-
: `<p pops class="pops-${
|
|
10139
|
-
<div class="pops-content pops-${
|
|
10140
|
-
<aside class="pops-${
|
|
10141
|
-
<ul class="pops-${
|
|
10142
|
-
<ul class="pops-${
|
|
10137
|
+
: `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
10138
|
+
<div class="pops-content pops-${popsType}-content">
|
|
10139
|
+
<aside class="pops-${popsType}-aside">
|
|
10140
|
+
<ul class="pops-${popsType}-aside-top-container"></ul>
|
|
10141
|
+
<ul class="pops-${popsType}-aside-bottom-container"></ul>
|
|
10143
10142
|
</aside>
|
|
10144
|
-
<section class="pops-${
|
|
10145
|
-
<ul class="pops-${
|
|
10146
|
-
<ul class="pops-${
|
|
10143
|
+
<section class="pops-${popsType}-container">
|
|
10144
|
+
<ul class="pops-${popsType}-container-header-ul"></ul>
|
|
10145
|
+
<ul class="pops-${popsType}-container-main-ul"></ul>
|
|
10147
10146
|
</section>
|
|
10148
10147
|
</div>`, "", zIndex);
|
|
10149
10148
|
/**
|
|
@@ -10151,7 +10150,7 @@
|
|
|
10151
10150
|
*/
|
|
10152
10151
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
10153
10152
|
/* 结构元素 */
|
|
10154
|
-
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim,
|
|
10153
|
+
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
10155
10154
|
if (config.isMobile || popsUtils.isPhone()) {
|
|
10156
10155
|
popsDOMUtils.addClassName($pops, config.mobileClassName);
|
|
10157
10156
|
}
|
|
@@ -10166,7 +10165,7 @@
|
|
|
10166
10165
|
/* 遮罩层元素 */
|
|
10167
10166
|
if (config.mask.enable) {
|
|
10168
10167
|
let { maskElement } = PopsHandler.handleMask({
|
|
10169
|
-
type:
|
|
10168
|
+
type: popsType,
|
|
10170
10169
|
guid: guid,
|
|
10171
10170
|
config: config,
|
|
10172
10171
|
animElement: $anim,
|
|
@@ -10176,7 +10175,7 @@
|
|
|
10176
10175
|
isCreatedElementList.push($mask);
|
|
10177
10176
|
}
|
|
10178
10177
|
/* 处理返回的配置 */
|
|
10179
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
10178
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
10180
10179
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
10181
10180
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
10182
10181
|
/* 创建到页面中 */
|
|
@@ -10202,7 +10201,7 @@
|
|
|
10202
10201
|
$contentSectionContainer: $contentSectionContainer,
|
|
10203
10202
|
},
|
|
10204
10203
|
});
|
|
10205
|
-
PopsHandler.handlePush(
|
|
10204
|
+
PopsHandler.handlePush(popsType, {
|
|
10206
10205
|
guid: guid,
|
|
10207
10206
|
animElement: $anim,
|
|
10208
10207
|
popsElement: $pops,
|
|
@@ -10364,11 +10363,11 @@
|
|
|
10364
10363
|
init(details) {
|
|
10365
10364
|
const guid = popsUtils.getRandomGUID();
|
|
10366
10365
|
// 设置当前类型
|
|
10367
|
-
const
|
|
10366
|
+
const popsType = "rightClickMenu";
|
|
10368
10367
|
let config = rightClickMenuConfig();
|
|
10369
10368
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10370
10369
|
config = popsUtils.assign(config, details);
|
|
10371
|
-
config = PopsHandler.handleOnly(
|
|
10370
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
10372
10371
|
if (config.target == null) {
|
|
10373
10372
|
throw new Error("config.target 不能为空");
|
|
10374
10373
|
}
|
|
@@ -10417,7 +10416,7 @@
|
|
|
10417
10416
|
return;
|
|
10418
10417
|
}
|
|
10419
10418
|
let $click = event.target;
|
|
10420
|
-
if ($click.closest(`.pops-${
|
|
10419
|
+
if ($click.closest(`.pops-${popsType}`)) {
|
|
10421
10420
|
return;
|
|
10422
10421
|
}
|
|
10423
10422
|
if ($click.className &&
|
|
@@ -10436,7 +10435,7 @@
|
|
|
10436
10435
|
return;
|
|
10437
10436
|
}
|
|
10438
10437
|
let $click = event.target;
|
|
10439
|
-
if ($click.closest(`.pops-${
|
|
10438
|
+
if ($click.closest(`.pops-${popsType}`)) {
|
|
10440
10439
|
return;
|
|
10441
10440
|
}
|
|
10442
10441
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
@@ -10482,14 +10481,14 @@
|
|
|
10482
10481
|
if (config.preventDefault) {
|
|
10483
10482
|
popsDOMUtils.preventEvent(event);
|
|
10484
10483
|
}
|
|
10485
|
-
PopsHandler.handleOnly(
|
|
10484
|
+
PopsHandler.handleOnly(popsType, config);
|
|
10486
10485
|
if (PopsContextMenu.rootElement) {
|
|
10487
10486
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
10488
10487
|
}
|
|
10489
10488
|
let rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
|
|
10490
10489
|
PopsContextMenu.rootElement = rootElement;
|
|
10491
10490
|
if (config.only) {
|
|
10492
|
-
PopsHandler.handlePush(
|
|
10491
|
+
PopsHandler.handlePush(popsType, {
|
|
10493
10492
|
$shadowRoot: $shadowRoot,
|
|
10494
10493
|
$shadowContainer: $shadowContainer,
|
|
10495
10494
|
guid: guid,
|
|
@@ -10531,12 +10530,12 @@
|
|
|
10531
10530
|
});
|
|
10532
10531
|
element.remove();
|
|
10533
10532
|
}
|
|
10534
|
-
if (element.classList.contains(`pops-${
|
|
10533
|
+
if (element.classList.contains(`pops-${popsType}-anim-show`)) {
|
|
10535
10534
|
/* 有动画 */
|
|
10536
10535
|
popsDOMUtils.on(element, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
|
|
10537
10536
|
capture: true,
|
|
10538
10537
|
});
|
|
10539
|
-
element.classList.remove(`pops-${
|
|
10538
|
+
element.classList.remove(`pops-${popsType}-anim-show`);
|
|
10540
10539
|
}
|
|
10541
10540
|
else {
|
|
10542
10541
|
/* 无动画 */
|
|
@@ -10568,7 +10567,7 @@
|
|
|
10568
10567
|
*/
|
|
10569
10568
|
getMenuContainerElement(isChildren) {
|
|
10570
10569
|
let $menu = popsDOMUtils.createElement("div", {
|
|
10571
|
-
className: `pops-${
|
|
10570
|
+
className: `pops-${popsType}`,
|
|
10572
10571
|
innerHTML: /*html*/ `
|
|
10573
10572
|
<ul></ul>
|
|
10574
10573
|
`,
|
|
@@ -10582,7 +10581,7 @@
|
|
|
10582
10581
|
}
|
|
10583
10582
|
/* 添加动画 */
|
|
10584
10583
|
if (config.isAnimation) {
|
|
10585
|
-
popsDOMUtils.addClassName($menu, `pops-${
|
|
10584
|
+
popsDOMUtils.addClassName($menu, `pops-${popsType}-anim-grid`);
|
|
10586
10585
|
}
|
|
10587
10586
|
return $menu;
|
|
10588
10587
|
},
|
|
@@ -10722,7 +10721,7 @@
|
|
|
10722
10721
|
});
|
|
10723
10722
|
/* 过渡动画 */
|
|
10724
10723
|
if (config.isAnimation) {
|
|
10725
|
-
popsDOMUtils.addClassName(menuElement, `pops-${
|
|
10724
|
+
popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
|
|
10726
10725
|
}
|
|
10727
10726
|
return menuElement;
|
|
10728
10727
|
},
|
|
@@ -10762,7 +10761,7 @@
|
|
|
10762
10761
|
popsDOMUtils.css(menuElement, { ...offset, display: "" });
|
|
10763
10762
|
/* 过渡动画 */
|
|
10764
10763
|
if (config.isAnimation) {
|
|
10765
|
-
popsDOMUtils.addClassName(menuElement, `pops-${
|
|
10764
|
+
popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
|
|
10766
10765
|
}
|
|
10767
10766
|
return menuElement;
|
|
10768
10767
|
},
|
|
@@ -10783,19 +10782,19 @@
|
|
|
10783
10782
|
if (typeof item.icon === "string" && item.icon.trim() !== "") {
|
|
10784
10783
|
let iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
|
|
10785
10784
|
let iconElement = popsDOMUtils.parseTextToDOM(
|
|
10786
|
-
/*html*/ `<i class="pops-${
|
|
10785
|
+
/*html*/ `<i class="pops-${popsType}-icon" is-loading="${item.iconIsLoading ?? false}">${iconSVGHTML}</i>`);
|
|
10787
10786
|
menuLiElement.appendChild(iconElement);
|
|
10788
10787
|
}
|
|
10789
10788
|
/* 插入文字 */
|
|
10790
10789
|
menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
|
|
10791
10790
|
/* 如果存在子数据，显示 */
|
|
10792
10791
|
if (item.item && Array.isArray(item.item)) {
|
|
10793
|
-
popsDOMUtils.addClassName(menuLiElement, `pops-${
|
|
10792
|
+
popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);
|
|
10794
10793
|
}
|
|
10795
10794
|
/* 鼠标|触摸 移入事件 */
|
|
10796
10795
|
function liElementHoverEvent() {
|
|
10797
10796
|
Array.from(menuULElement.children).forEach((liElement) => {
|
|
10798
|
-
popsDOMUtils.removeClassName(liElement, `pops-${
|
|
10797
|
+
popsDOMUtils.removeClassName(liElement, `pops-${popsType}-is-visited`);
|
|
10799
10798
|
if (!liElement.__menuData__) {
|
|
10800
10799
|
return;
|
|
10801
10800
|
}
|
|
@@ -10820,7 +10819,7 @@
|
|
|
10820
10819
|
index--;
|
|
10821
10820
|
}
|
|
10822
10821
|
}
|
|
10823
|
-
popsDOMUtils.addClassName(menuLiElement, `pops-${
|
|
10822
|
+
popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-is-visited`);
|
|
10824
10823
|
if (!item.item) {
|
|
10825
10824
|
return;
|
|
10826
10825
|
}
|
|
@@ -10943,7 +10942,7 @@
|
|
|
10943
10942
|
init(details) {
|
|
10944
10943
|
const guid = popsUtils.getRandomGUID();
|
|
10945
10944
|
// 设置当前类型
|
|
10946
|
-
const
|
|
10945
|
+
const popsType = "searchSuggestion";
|
|
10947
10946
|
let config = searchSuggestionConfig();
|
|
10948
10947
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10949
10948
|
config = popsUtils.assign(config, details);
|
|
@@ -11009,7 +11008,7 @@
|
|
|
11009
11008
|
SearchSuggestion.changeHintULElementPosition();
|
|
11010
11009
|
SearchSuggestion.hide();
|
|
11011
11010
|
if (config.isAnimation) {
|
|
11012
|
-
SearchSuggestion.$el.root.classList.add(`pops-${
|
|
11011
|
+
SearchSuggestion.$el.root.classList.add(`pops-${popsType}-animation`);
|
|
11013
11012
|
}
|
|
11014
11013
|
$shadowRoot.appendChild(SearchSuggestion.$el.root);
|
|
11015
11014
|
parentElement.appendChild($shadowContainer);
|
|
@@ -11026,16 +11025,16 @@
|
|
|
11026
11025
|
*/
|
|
11027
11026
|
getSearchSelectElement() {
|
|
11028
11027
|
let element = popsDOMUtils.createElement("div", {
|
|
11029
|
-
className: `pops pops-${
|
|
11028
|
+
className: `pops pops-${popsType}-search-suggestion`,
|
|
11030
11029
|
innerHTML: /*html*/ `
|
|
11031
11030
|
<style data-dynamic="true">
|
|
11032
11031
|
${this.getDynamicCSS()}
|
|
11033
11032
|
</style>
|
|
11034
|
-
<ul class="pops-${
|
|
11033
|
+
<ul class="pops-${popsType}-search-suggestion-hint">${config.toSearhNotResultHTML}</ul>
|
|
11035
11034
|
`,
|
|
11036
11035
|
}, {
|
|
11037
11036
|
"data-guid": guid,
|
|
11038
|
-
"type-value":
|
|
11037
|
+
"type-value": popsType,
|
|
11039
11038
|
});
|
|
11040
11039
|
if (config.className !== "" && config.className != null) {
|
|
11041
11040
|
popsDOMUtils.addClassName(element, config.className);
|
|
@@ -11045,24 +11044,24 @@
|
|
|
11045
11044
|
/** 动态获取CSS */
|
|
11046
11045
|
getDynamicCSS() {
|
|
11047
11046
|
return /*css*/ `
|
|
11048
|
-
.pops-${
|
|
11047
|
+
.pops-${popsType}-animation{
|
|
11049
11048
|
-moz-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11050
11049
|
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11051
11050
|
-o-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11052
11051
|
-ms-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11053
11052
|
}
|
|
11054
|
-
.pops-${
|
|
11053
|
+
.pops-${popsType}-search-suggestion{
|
|
11055
11054
|
--search-suggestion-bg-color: #ffffff;
|
|
11056
11055
|
--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
|
|
11057
11056
|
--search-suggestion-item-color: #515a6e;
|
|
11058
11057
|
--search-suggestion-item-none-color: #8e8e8e;
|
|
11059
11058
|
--search-suggestion-item-hover-bg-color: rgba(0, 0, 0, .1);
|
|
11060
11059
|
}
|
|
11061
|
-
.pops-${
|
|
11060
|
+
.pops-${popsType}-search-suggestion{
|
|
11062
11061
|
border: initial;
|
|
11063
11062
|
overflow: initial;
|
|
11064
11063
|
}
|
|
11065
|
-
ul.pops-${
|
|
11064
|
+
ul.pops-${popsType}-search-suggestion-hint{
|
|
11066
11065
|
position: ${config.isAbsolute ? "absolute" : "fixed"};
|
|
11067
11066
|
z-index: ${PopsHandler.handleZIndex(config.zIndex)};
|
|
11068
11067
|
width: 0;
|
|
@@ -11077,14 +11076,14 @@
|
|
|
11077
11076
|
box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
|
|
11078
11077
|
}
|
|
11079
11078
|
/* 建议框在上面时 */
|
|
11080
|
-
ul.pops-${
|
|
11079
|
+
ul.pops-${popsType}-search-suggestion-hint[data-top-reverse]{
|
|
11081
11080
|
display: flex;
|
|
11082
11081
|
flex-direction: column-reverse;
|
|
11083
11082
|
}
|
|
11084
|
-
ul.pops-${
|
|
11083
|
+
ul.pops-${popsType}-search-suggestion-hint[data-top-reverse] li{
|
|
11085
11084
|
flex-shrink: 0;
|
|
11086
11085
|
}
|
|
11087
|
-
ul.pops-${
|
|
11086
|
+
ul.pops-${popsType}-search-suggestion-hint li{
|
|
11088
11087
|
padding: 7px;
|
|
11089
11088
|
margin: 0;
|
|
11090
11089
|
clear: both;
|
|
@@ -11097,17 +11096,17 @@
|
|
|
11097
11096
|
text-overflow: ellipsis;
|
|
11098
11097
|
width: 100%;
|
|
11099
11098
|
}
|
|
11100
|
-
ul.pops-${
|
|
11099
|
+
ul.pops-${popsType}-search-suggestion-hint li[data-none]{
|
|
11101
11100
|
text-align: center;
|
|
11102
11101
|
font-size: 12px;
|
|
11103
11102
|
color: var(--search-suggestion-item-none-color);
|
|
11104
11103
|
}
|
|
11105
|
-
ul.pops-${
|
|
11104
|
+
ul.pops-${popsType}-search-suggestion-hint li:hover{
|
|
11106
11105
|
background-color: var(--search-suggestion-item-hover-bg-color);
|
|
11107
11106
|
}
|
|
11108
11107
|
|
|
11109
11108
|
@media (prefers-color-scheme: dark){
|
|
11110
|
-
.pops-${
|
|
11109
|
+
.pops-${popsType}-search-suggestion{
|
|
11111
11110
|
--search-suggestion-bg-color: #1d1e1f;
|
|
11112
11111
|
--search-suggestion-item-color: #cfd3d4;
|
|
11113
11112
|
--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
|
|
@@ -11122,7 +11121,7 @@
|
|
|
11122
11121
|
*/
|
|
11123
11122
|
getSearchItemLiElement(data, index) {
|
|
11124
11123
|
return popsDOMUtils.createElement("li", {
|
|
11125
|
-
className: `pops-${
|
|
11124
|
+
className: `pops-${popsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
|
|
11126
11125
|
"data-index": index,
|
|
11127
11126
|
"data-value": SearchSuggestion.getItemDataValue(data),
|
|
11128
11127
|
innerHTML: `${config.getItemHTML(data)}${config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""}`,
|
|
@@ -11143,7 +11142,7 @@
|
|
|
11143
11142
|
popsDOMUtils.on(liElement, "click", void 0, (event) => {
|
|
11144
11143
|
popsDOMUtils.preventEvent(event);
|
|
11145
11144
|
let $click = event.target;
|
|
11146
|
-
if ($click.closest(`.pops-${
|
|
11145
|
+
if ($click.closest(`.pops-${popsType}-delete-icon`)) {
|
|
11147
11146
|
/* 点击的是删除按钮 */
|
|
11148
11147
|
if (typeof config.deleteIcon.callback === "function") {
|
|
11149
11148
|
config.deleteIcon.callback(event, liElement, liElement["data-value"]);
|
|
@@ -11335,7 +11334,7 @@
|
|
|
11335
11334
|
*/
|
|
11336
11335
|
getDeleteIconHTML(size = 16, fill = "#bababa") {
|
|
11337
11336
|
return /*html*/ `
|
|
11338
|
-
<svg class="pops-${
|
|
11337
|
+
<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
|
|
11339
11338
|
<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
|
|
11340
11339
|
<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
|
|
11341
11340
|
</svg>
|
|
@@ -11346,7 +11345,7 @@
|
|
|
11346
11345
|
*/
|
|
11347
11346
|
setPromptsInSearch() {
|
|
11348
11347
|
let isSearchingElement = popsDOMUtils.createElement("li", {
|
|
11349
|
-
className: `pops-${
|
|
11348
|
+
className: `pops-${popsType}-search-suggestion-hint-searching-item`,
|
|
11350
11349
|
innerHTML: config.searchingTip,
|
|
11351
11350
|
});
|
|
11352
11351
|
SearchSuggestion.$el.$hintULContainer.appendChild(isSearchingElement);
|
|
@@ -11356,7 +11355,7 @@
|
|
|
11356
11355
|
*/
|
|
11357
11356
|
removePromptsInSearch() {
|
|
11358
11357
|
SearchSuggestion.$el.$hintULContainer
|
|
11359
|
-
.querySelector(`li.pops-${
|
|
11358
|
+
.querySelector(`li.pops-${popsType}-search-suggestion-hint-searching-item`)
|
|
11360
11359
|
?.remove();
|
|
11361
11360
|
},
|
|
11362
11361
|
/**
|