@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.esm.js
CHANGED
|
@@ -3946,6 +3946,10 @@ const PopsHandler = {
|
|
|
3946
3946
|
*/
|
|
3947
3947
|
handleOnly(type, config) {
|
|
3948
3948
|
if (config.only) {
|
|
3949
|
+
// .loading
|
|
3950
|
+
// .tooltip
|
|
3951
|
+
// .rightClickMenu
|
|
3952
|
+
// 单独处理
|
|
3949
3953
|
if (type === "loading" ||
|
|
3950
3954
|
type === "tooltip" ||
|
|
3951
3955
|
type === "rightClickMenu") {
|
|
@@ -4052,11 +4056,11 @@ const PopsAlert = {
|
|
|
4052
4056
|
init(details) {
|
|
4053
4057
|
const guid = popsUtils.getRandomGUID();
|
|
4054
4058
|
// 设置当前类型
|
|
4055
|
-
const
|
|
4059
|
+
const popsType = "alert";
|
|
4056
4060
|
let config = PopsAlertConfig();
|
|
4057
4061
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4058
4062
|
config = popsUtils.assign(config, details);
|
|
4059
|
-
config = PopsHandler.handleOnly(
|
|
4063
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4060
4064
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4061
4065
|
PopsHandler.handleInit($shadowRoot, [
|
|
4062
4066
|
{
|
|
@@ -4091,23 +4095,23 @@ const PopsAlert = {
|
|
|
4091
4095
|
// 先把z-index提取出来
|
|
4092
4096
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4093
4097
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4094
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4095
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4096
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4097
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4098
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4098
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4099
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4100
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4101
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4102
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4099
4103
|
/*html*/ `
|
|
4100
|
-
<div class="pops-title pops-${
|
|
4104
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4101
4105
|
? config.title.text
|
|
4102
|
-
: `<p pops class="pops-${
|
|
4103
|
-
<div class="pops-content pops-${
|
|
4106
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4107
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
4104
4108
|
? config.content.text
|
|
4105
|
-
: `<p pops class="pops-${
|
|
4109
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4106
4110
|
/**
|
|
4107
4111
|
* 弹窗的主元素，包括动画层
|
|
4108
4112
|
*/
|
|
4109
4113
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4110
|
-
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim,
|
|
4114
|
+
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4111
4115
|
/** 遮罩层元素 */
|
|
4112
4116
|
let $mask = null;
|
|
4113
4117
|
/** 已创建的元素列表 */
|
|
@@ -4115,7 +4119,7 @@ const PopsAlert = {
|
|
|
4115
4119
|
/* 遮罩层元素 */
|
|
4116
4120
|
if (config.mask.enable) {
|
|
4117
4121
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4118
|
-
type:
|
|
4122
|
+
type: popsType,
|
|
4119
4123
|
guid: guid,
|
|
4120
4124
|
config: config,
|
|
4121
4125
|
animElement: $anim,
|
|
@@ -4125,7 +4129,7 @@ const PopsAlert = {
|
|
|
4125
4129
|
elementList.push($mask);
|
|
4126
4130
|
}
|
|
4127
4131
|
/* 处理返回的配置 */
|
|
4128
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4132
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4129
4133
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
4130
4134
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
4131
4135
|
/* 为底部ok按钮添加点击事件 */
|
|
@@ -4141,7 +4145,7 @@ const PopsAlert = {
|
|
|
4141
4145
|
$anim.after($mask);
|
|
4142
4146
|
}
|
|
4143
4147
|
/* 保存 */
|
|
4144
|
-
PopsHandler.handlePush(
|
|
4148
|
+
PopsHandler.handlePush(popsType, {
|
|
4145
4149
|
guid: guid,
|
|
4146
4150
|
animElement: $anim,
|
|
4147
4151
|
popsElement: $pops,
|
|
@@ -4256,11 +4260,11 @@ const PopsConfirm = {
|
|
|
4256
4260
|
init(details) {
|
|
4257
4261
|
const guid = popsUtils.getRandomGUID();
|
|
4258
4262
|
// 设置当前类型
|
|
4259
|
-
const
|
|
4263
|
+
const popsType = "confirm";
|
|
4260
4264
|
let config = PopsConfirmConfig();
|
|
4261
4265
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4262
4266
|
config = popsUtils.assign(config, details);
|
|
4263
|
-
config = PopsHandler.handleOnly(
|
|
4267
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4264
4268
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4265
4269
|
PopsHandler.handleInit($shadowRoot, [
|
|
4266
4270
|
{
|
|
@@ -4295,23 +4299,23 @@ const PopsConfirm = {
|
|
|
4295
4299
|
// 先把z-index提取出来
|
|
4296
4300
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4297
4301
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4298
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4299
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4300
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4301
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4302
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4302
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4303
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4304
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4305
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4306
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4303
4307
|
/*html*/ `
|
|
4304
|
-
<div class="pops-title pops-${
|
|
4308
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4305
4309
|
? config.title.text
|
|
4306
|
-
: `<p pops class="pops-${
|
|
4307
|
-
<div class="pops-content pops-${
|
|
4310
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4311
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
4308
4312
|
? config.content.text
|
|
4309
|
-
: `<p pops class="pops-${
|
|
4313
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
4310
4314
|
/**
|
|
4311
4315
|
* 弹窗的主元素，包括动画层
|
|
4312
4316
|
*/
|
|
4313
4317
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4314
|
-
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim,
|
|
4318
|
+
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4315
4319
|
/**
|
|
4316
4320
|
* 遮罩层元素
|
|
4317
4321
|
*/
|
|
@@ -4323,7 +4327,7 @@ const PopsConfirm = {
|
|
|
4323
4327
|
if (config.mask.enable) {
|
|
4324
4328
|
// 启用遮罩层
|
|
4325
4329
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4326
|
-
type:
|
|
4330
|
+
type: popsType,
|
|
4327
4331
|
guid: guid,
|
|
4328
4332
|
config: config,
|
|
4329
4333
|
animElement: $anim,
|
|
@@ -4332,7 +4336,7 @@ const PopsConfirm = {
|
|
|
4332
4336
|
$mask = _handleMask_.maskElement;
|
|
4333
4337
|
elementList.push($mask);
|
|
4334
4338
|
}
|
|
4335
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4339
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4336
4340
|
PopsHandler.handleClickEvent("close", $btnClose, eventDetails, config.btn.close.callback);
|
|
4337
4341
|
PopsHandler.handleClickEvent("ok", $btnOk, eventDetails, config.btn.ok.callback);
|
|
4338
4342
|
PopsHandler.handleClickEvent("cancel", $btnCancel, eventDetails, config.btn.cancel.callback);
|
|
@@ -4346,7 +4350,7 @@ const PopsConfirm = {
|
|
|
4346
4350
|
if ($mask != null) {
|
|
4347
4351
|
$anim.after($mask);
|
|
4348
4352
|
}
|
|
4349
|
-
PopsHandler.handlePush(
|
|
4353
|
+
PopsHandler.handlePush(popsType, {
|
|
4350
4354
|
guid: guid,
|
|
4351
4355
|
animElement: $anim,
|
|
4352
4356
|
popsElement: $pops,
|
|
@@ -4465,11 +4469,11 @@ const PopsPrompt = {
|
|
|
4465
4469
|
init(details) {
|
|
4466
4470
|
const guid = popsUtils.getRandomGUID();
|
|
4467
4471
|
// 设置当前类型
|
|
4468
|
-
const
|
|
4472
|
+
const popsType = "prompt";
|
|
4469
4473
|
let config = PopsPromptConfig();
|
|
4470
4474
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4471
4475
|
config = popsUtils.assign(config, details);
|
|
4472
|
-
config = PopsHandler.handleOnly(
|
|
4476
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4473
4477
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4474
4478
|
PopsHandler.handleInit($shadowRoot, [
|
|
4475
4479
|
{
|
|
@@ -4504,16 +4508,16 @@ const PopsPrompt = {
|
|
|
4504
4508
|
// 先把z-index提取出来
|
|
4505
4509
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4506
4510
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
4507
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4508
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
4509
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4510
|
-
let { contentPStyle } = PopsElementHandler.getContentStyle(
|
|
4511
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4511
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4512
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
4513
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4514
|
+
let { contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
4515
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4512
4516
|
/*html*/ `
|
|
4513
|
-
<div class="pops-title pops-${
|
|
4517
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4514
4518
|
? config.title.text
|
|
4515
|
-
: `<p pops class="pops-${
|
|
4516
|
-
<div class="pops-content pops-${
|
|
4519
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
4520
|
+
<div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${config.content.row
|
|
4517
4521
|
? '<textarea name="pops-input-text" pops="" placeholder="' +
|
|
4518
4522
|
config.content.placeholder +
|
|
4519
4523
|
'"></textarea>'
|
|
@@ -4526,7 +4530,7 @@ const PopsPrompt = {
|
|
|
4526
4530
|
* 弹窗的主元素，包括动画层
|
|
4527
4531
|
*/
|
|
4528
4532
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4529
|
-
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim,
|
|
4533
|
+
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4530
4534
|
/**
|
|
4531
4535
|
* 遮罩层元素
|
|
4532
4536
|
*/
|
|
@@ -4538,7 +4542,7 @@ const PopsPrompt = {
|
|
|
4538
4542
|
if (config.mask.enable) {
|
|
4539
4543
|
// 启用遮罩层
|
|
4540
4544
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4541
|
-
type:
|
|
4545
|
+
type: popsType,
|
|
4542
4546
|
guid: guid,
|
|
4543
4547
|
config: config,
|
|
4544
4548
|
animElement: $anim,
|
|
@@ -4547,7 +4551,7 @@ const PopsPrompt = {
|
|
|
4547
4551
|
$mask = _handleMask_.maskElement;
|
|
4548
4552
|
elementList.push($mask);
|
|
4549
4553
|
}
|
|
4550
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4554
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4551
4555
|
/* 输入框赋值初始值 */
|
|
4552
4556
|
$input.value = config.content.text;
|
|
4553
4557
|
PopsHandler.handlePromptClickEvent("close", $input, $btnClose, eventDetails, config.btn.close.callback);
|
|
@@ -4563,7 +4567,7 @@ const PopsPrompt = {
|
|
|
4563
4567
|
if ($mask != null) {
|
|
4564
4568
|
$anim.after($mask);
|
|
4565
4569
|
}
|
|
4566
|
-
PopsHandler.handlePush(
|
|
4570
|
+
PopsHandler.handlePush(popsType, {
|
|
4567
4571
|
guid: guid,
|
|
4568
4572
|
animElement: $anim,
|
|
4569
4573
|
popsElement: $pops,
|
|
@@ -4758,14 +4762,14 @@ const PopsIframe = {
|
|
|
4758
4762
|
init(details) {
|
|
4759
4763
|
const guid = popsUtils.getRandomGUID();
|
|
4760
4764
|
// 设置当前类型
|
|
4761
|
-
const
|
|
4765
|
+
const popsType = "iframe";
|
|
4762
4766
|
let config = PopsIframeConfig();
|
|
4763
4767
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4764
4768
|
config = popsUtils.assign(config, details);
|
|
4765
4769
|
if (config.url == null) {
|
|
4766
4770
|
throw new Error("config.url不能为空");
|
|
4767
4771
|
}
|
|
4768
|
-
config = PopsHandler.handleOnly(
|
|
4772
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4769
4773
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4770
4774
|
PopsHandler.handleInit($shadowRoot, [
|
|
4771
4775
|
{
|
|
@@ -4801,17 +4805,17 @@ const PopsIframe = {
|
|
|
4801
4805
|
// 先把z-index提取出来
|
|
4802
4806
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
4803
4807
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
|
|
4804
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
4808
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
4805
4809
|
let iframeLoadingHTML = '<div class="pops-loading"></div>';
|
|
4806
4810
|
let titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
|
|
4807
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
4808
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
4811
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
4812
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
4809
4813
|
/*html*/ `
|
|
4810
|
-
<div class="pops-title pops-${
|
|
4814
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
4811
4815
|
? titleText
|
|
4812
|
-
: `<p pops class="pops-${
|
|
4813
|
-
<div class="pops-content pops-${
|
|
4814
|
-
<div class="pops-${
|
|
4816
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
|
|
4817
|
+
<div class="pops-content pops-${popsType}-content">
|
|
4818
|
+
<div class="pops-${popsType}-content-global-loading"></div>
|
|
4815
4819
|
<iframe src="${config.url}" pops ${config.sandbox
|
|
4816
4820
|
? "sandbox='allow-forms allow-same-origin allow-scripts'"
|
|
4817
4821
|
: ""}>
|
|
@@ -4821,7 +4825,7 @@ const PopsIframe = {
|
|
|
4821
4825
|
* 弹窗的主元素，包括动画层
|
|
4822
4826
|
*/
|
|
4823
4827
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
4824
|
-
let { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim,
|
|
4828
|
+
let { popsElement: $pops, headerCloseBtnElement, headerControlsElement, titleElement: $title, iframeElement: $iframe, loadingElement, contentLoadingElement: $contentLoading, headerMinBtnElement, headerMaxBtnElement, headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4825
4829
|
let $iframeContainer = PopsCore.document.querySelector(".pops-iframe-container");
|
|
4826
4830
|
if (!$iframeContainer) {
|
|
4827
4831
|
$iframeContainer = PopsCore.document.createElement("div");
|
|
@@ -4840,7 +4844,7 @@ const PopsIframe = {
|
|
|
4840
4844
|
let elementList = [$anim];
|
|
4841
4845
|
if (config.mask.enable) {
|
|
4842
4846
|
let _handleMask_ = PopsHandler.handleMask({
|
|
4843
|
-
type:
|
|
4847
|
+
type: popsType,
|
|
4844
4848
|
guid: guid,
|
|
4845
4849
|
config: config,
|
|
4846
4850
|
animElement: $anim,
|
|
@@ -4849,7 +4853,7 @@ const PopsIframe = {
|
|
|
4849
4853
|
$mask = _handleMask_.maskElement;
|
|
4850
4854
|
elementList.push($mask);
|
|
4851
4855
|
}
|
|
4852
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
4856
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
4853
4857
|
eventDetails["iframeElement"] = $iframe;
|
|
4854
4858
|
popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
|
|
4855
4859
|
/* 动画加载完毕 */
|
|
@@ -4993,7 +4997,7 @@ const PopsIframe = {
|
|
|
4993
4997
|
}, {
|
|
4994
4998
|
capture: true,
|
|
4995
4999
|
});
|
|
4996
|
-
PopsHandler.handlePush(
|
|
5000
|
+
PopsHandler.handlePush(popsType, {
|
|
4997
5001
|
guid: guid,
|
|
4998
5002
|
animElement: $anim,
|
|
4999
5003
|
popsElement: $pops,
|
|
@@ -5097,11 +5101,11 @@ const PopsDrawer = {
|
|
|
5097
5101
|
init(details) {
|
|
5098
5102
|
const guid = popsUtils.getRandomGUID();
|
|
5099
5103
|
// 设置当前类型
|
|
5100
|
-
const
|
|
5104
|
+
const popsType = "drawer";
|
|
5101
5105
|
let config = PopsDrawerConfig();
|
|
5102
5106
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5103
5107
|
config = popsUtils.assign(config, details);
|
|
5104
|
-
config = PopsHandler.handleOnly(
|
|
5108
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
5105
5109
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5106
5110
|
PopsHandler.handleInit($shadowRoot, [
|
|
5107
5111
|
{
|
|
@@ -5136,25 +5140,25 @@ const PopsDrawer = {
|
|
|
5136
5140
|
// 先把z-index提取出来
|
|
5137
5141
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5138
5142
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
5139
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
5140
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
5141
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
5142
|
-
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
|
|
5143
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
5143
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
5144
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
5145
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
5146
|
+
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(popsType, config);
|
|
5147
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
5144
5148
|
/*html*/ `
|
|
5145
5149
|
${config.title.enable
|
|
5146
|
-
? /*html*/ `<div class="pops-title pops-${
|
|
5150
|
+
? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
|
|
5147
5151
|
? config.title.text
|
|
5148
|
-
: /*html*/ `<p pops class="pops-${
|
|
5152
|
+
: /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
|
|
5149
5153
|
: ""}
|
|
5150
|
-
<div class="pops-content pops-${
|
|
5154
|
+
<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
|
|
5151
5155
|
? config.content.text
|
|
5152
|
-
: `<p pops class="pops-${
|
|
5156
|
+
: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
5153
5157
|
/**
|
|
5154
5158
|
* 弹窗的主元素，包括动画层
|
|
5155
5159
|
*/
|
|
5156
5160
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
5157
|
-
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement, } = PopsHandler.handleQueryElement($anim,
|
|
5161
|
+
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5158
5162
|
let $pops = popsElement;
|
|
5159
5163
|
let $headerCloseBtn = headerCloseBtnElement;
|
|
5160
5164
|
let $btnCancel = btnCancelElement;
|
|
@@ -5170,7 +5174,7 @@ const PopsDrawer = {
|
|
|
5170
5174
|
let elementList = [$anim];
|
|
5171
5175
|
if (config.mask.enable) {
|
|
5172
5176
|
let _handleMask_ = PopsHandler.handleMask({
|
|
5173
|
-
type:
|
|
5177
|
+
type: popsType,
|
|
5174
5178
|
guid: guid,
|
|
5175
5179
|
config: config,
|
|
5176
5180
|
animElement: $anim,
|
|
@@ -5179,7 +5183,7 @@ const PopsDrawer = {
|
|
|
5179
5183
|
$mask = _handleMask_.maskElement;
|
|
5180
5184
|
elementList.push($mask);
|
|
5181
5185
|
}
|
|
5182
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
5186
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5183
5187
|
/* 处理方向 */
|
|
5184
5188
|
$pops.setAttribute("direction", config.direction);
|
|
5185
5189
|
/* 处理border-radius */
|
|
@@ -5267,7 +5271,7 @@ const PopsDrawer = {
|
|
|
5267
5271
|
if ($mask != null) {
|
|
5268
5272
|
$anim.after($mask);
|
|
5269
5273
|
}
|
|
5270
|
-
PopsHandler.handlePush(
|
|
5274
|
+
PopsHandler.handlePush(popsType, {
|
|
5271
5275
|
guid: guid,
|
|
5272
5276
|
animElement: $anim,
|
|
5273
5277
|
popsElement: $pops,
|
|
@@ -5458,11 +5462,11 @@ const PopsFolder = {
|
|
|
5458
5462
|
init(details) {
|
|
5459
5463
|
const guid = popsUtils.getRandomGUID();
|
|
5460
5464
|
// 设置当前类型
|
|
5461
|
-
const
|
|
5465
|
+
const popsType = "folder";
|
|
5462
5466
|
let config = PopsFolderConfig();
|
|
5463
5467
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5464
5468
|
config = popsUtils.assign(config, details);
|
|
5465
|
-
config = PopsHandler.handleOnly(
|
|
5469
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
5466
5470
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5467
5471
|
PopsHandler.handleInit($shadowRoot, [
|
|
5468
5472
|
{
|
|
@@ -5542,19 +5546,15 @@ const PopsFolder = {
|
|
|
5542
5546
|
/* Android安装包 */
|
|
5543
5547
|
let androidIconList = ["apk", "apkm", "xapk"];
|
|
5544
5548
|
zipIconList.forEach((keyName) => {
|
|
5545
|
-
// @ts-ignore
|
|
5546
5549
|
Folder_ICON[keyName] = Folder_ICON.zip;
|
|
5547
5550
|
});
|
|
5548
5551
|
imageIconList.forEach((keyName) => {
|
|
5549
|
-
// @ts-ignore
|
|
5550
5552
|
Folder_ICON[keyName] = Folder_ICON.png;
|
|
5551
5553
|
});
|
|
5552
5554
|
codeLanguageIconList.forEach((keyName) => {
|
|
5553
|
-
// @ts-ignore
|
|
5554
5555
|
Folder_ICON[keyName] = Folder_ICON.html;
|
|
5555
5556
|
});
|
|
5556
5557
|
androidIconList.forEach((keyName) => {
|
|
5557
|
-
// @ts-ignore
|
|
5558
5558
|
Folder_ICON[keyName] = Folder_ICON.apk;
|
|
5559
5559
|
});
|
|
5560
5560
|
if (details?.folder) {
|
|
@@ -5564,108 +5564,105 @@ const PopsFolder = {
|
|
|
5564
5564
|
// 先把z-index提取出来
|
|
5565
5565
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
5566
5566
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
5567
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
5568
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
5569
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
5570
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
5567
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
5568
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
5569
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
5570
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
5571
5571
|
/*html*/ `
|
|
5572
|
-
<div class="pops-title pops-${
|
|
5572
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
5573
5573
|
? config.title.text
|
|
5574
|
-
: `<p pops class="pops-${
|
|
5575
|
-
<div class="pops-content pops-${
|
|
5574
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
5575
|
+
<div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
|
|
5576
5576
|
<div class="pops-folder-list">
|
|
5577
5577
|
<div class="pops-folder-file-list-breadcrumb">
|
|
5578
|
-
|
|
5579
|
-
|
|
5580
|
-
|
|
5581
|
-
|
|
5582
|
-
|
|
5578
|
+
<div class="pops-folder-file-list-breadcrumb-primary">
|
|
5579
|
+
<span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
|
|
5580
|
+
<a>全部文件</a>
|
|
5581
|
+
</span>
|
|
5582
|
+
</div>
|
|
5583
5583
|
</div>
|
|
5584
5584
|
<div class="pops-folder-list-table__header-div">
|
|
5585
|
-
|
|
5586
|
-
|
|
5587
|
-
|
|
5588
|
-
|
|
5589
|
-
|
|
5590
|
-
|
|
5591
|
-
|
|
5592
|
-
|
|
5593
|
-
|
|
5594
|
-
|
|
5595
|
-
|
|
5596
|
-
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
|
|
5600
|
-
|
|
5601
|
-
|
|
5602
|
-
|
|
5603
|
-
|
|
5604
|
-
|
|
5605
|
-
|
|
5606
|
-
|
|
5607
|
-
|
|
5608
|
-
|
|
5609
|
-
|
|
5610
|
-
|
|
5611
|
-
|
|
5612
|
-
|
|
5613
|
-
|
|
5614
|
-
|
|
5615
|
-
|
|
5616
|
-
|
|
5617
|
-
|
|
5618
|
-
|
|
5619
|
-
|
|
5620
|
-
|
|
5621
|
-
|
|
5622
|
-
|
|
5623
|
-
|
|
5624
|
-
|
|
5625
|
-
|
|
5626
|
-
|
|
5627
|
-
|
|
5628
|
-
|
|
5629
|
-
|
|
5630
|
-
|
|
5631
|
-
|
|
5632
|
-
|
|
5633
|
-
|
|
5634
|
-
|
|
5635
|
-
|
|
5636
|
-
|
|
5637
|
-
|
|
5638
|
-
|
|
5639
|
-
|
|
5640
|
-
|
|
5641
|
-
|
|
5642
|
-
|
|
5643
|
-
|
|
5644
|
-
|
|
5645
|
-
|
|
5646
|
-
|
|
5647
|
-
|
|
5648
|
-
|
|
5649
|
-
|
|
5650
|
-
|
|
5651
|
-
|
|
5652
|
-
|
|
5585
|
+
<table class="pops-folder-list-table__header">
|
|
5586
|
+
<colgroup>
|
|
5587
|
+
<col width="52%">
|
|
5588
|
+
<col width="24%">
|
|
5589
|
+
<col width="16%">
|
|
5590
|
+
</colgroup>
|
|
5591
|
+
<thead>
|
|
5592
|
+
<tr class="pops-folder-list-table__header-row">
|
|
5593
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5594
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5595
|
+
<span>文件名</span>
|
|
5596
|
+
<div class="pops-folder-list-table__sort" data-sort="fileName">
|
|
5597
|
+
<div class="pops-folder-icon-arrow" data-sort="按文件名排序">
|
|
5598
|
+
<svg
|
|
5599
|
+
viewBox="0 0 1024 1024"
|
|
5600
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5601
|
+
<path
|
|
5602
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5603
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5604
|
+
<path
|
|
5605
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5606
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5607
|
+
</svg>
|
|
5608
|
+
</div>
|
|
5609
|
+
</div>
|
|
5610
|
+
</div>
|
|
5611
|
+
</th>
|
|
5612
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5613
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5614
|
+
<span>修改时间</span>
|
|
5615
|
+
<div class="pops-folder-list-table__sort" data-sort="latestTime">
|
|
5616
|
+
<div class="pops-folder-icon-arrow" title="按修改时间排序">
|
|
5617
|
+
<svg
|
|
5618
|
+
viewBox="0 0 1024 1024"
|
|
5619
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5620
|
+
<path
|
|
5621
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5622
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5623
|
+
<path
|
|
5624
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5625
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5626
|
+
</svg>
|
|
5627
|
+
</div>
|
|
5628
|
+
</div>
|
|
5629
|
+
</div>
|
|
5630
|
+
</th>
|
|
5631
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
5632
|
+
<div class="text-ellip content flex-a-i-center">
|
|
5633
|
+
<span>大小</span>
|
|
5634
|
+
<div class="pops-folder-list-table__sort" data-sort="fileSize">
|
|
5635
|
+
<div class="pops-folder-icon-arrow" title="按大小排序">
|
|
5636
|
+
<svg
|
|
5637
|
+
viewBox="0 0 1024 1024"
|
|
5638
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
5639
|
+
<path
|
|
5640
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
5641
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
5642
|
+
<path
|
|
5643
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
5644
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
5645
|
+
</svg>
|
|
5646
|
+
</div>
|
|
5647
|
+
</div>
|
|
5648
|
+
</div>
|
|
5649
|
+
</th>
|
|
5650
|
+
</tr>
|
|
5651
|
+
</thead>
|
|
5652
|
+
</table>
|
|
5653
5653
|
</div>
|
|
5654
5654
|
<div class="pops-folder-list-table__body-div">
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5655
|
+
<table class="pops-folder-list-table__body">
|
|
5656
|
+
<colgroup>
|
|
5657
|
+
${popsUtils.isPhone()
|
|
5658
5658
|
? `<col width="100%">`
|
|
5659
5659
|
: `
|
|
5660
|
-
|
|
5661
|
-
|
|
5662
|
-
|
|
5663
|
-
|
|
5664
|
-
|
|
5665
|
-
|
|
5666
|
-
|
|
5667
|
-
</tbody>
|
|
5668
|
-
</table>
|
|
5660
|
+
<col width="52%">
|
|
5661
|
+
<col width="24%">
|
|
5662
|
+
<col width="16%">`}
|
|
5663
|
+
</colgroup>
|
|
5664
|
+
<tbody></tbody>
|
|
5665
|
+
</table>
|
|
5669
5666
|
</div>
|
|
5670
5667
|
</div>
|
|
5671
5668
|
</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
|
|
@@ -5677,7 +5674,7 @@ const PopsFolder = {
|
|
|
5677
5674
|
// folderListElement,
|
|
5678
5675
|
// folderListHeaderElement,
|
|
5679
5676
|
// folderListHeaderRowElement,
|
|
5680
|
-
folderListBodyElement, folderFileListBreadcrumbPrimaryElement, headerCloseBtnElement: $btnCloseBtn, btnOkElement, btnCancelElement, btnOtherElement, folderListSortFileNameElement, folderListSortLatestTimeElement, folderListSortFileSizeElement, } = PopsHandler.handleQueryElement($anim,
|
|
5677
|
+
folderListBodyElement, folderFileListBreadcrumbPrimaryElement, headerCloseBtnElement: $btnCloseBtn, btnOkElement, btnCancelElement, btnOtherElement, folderListSortFileNameElement, folderListSortLatestTimeElement, folderListSortFileSizeElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5681
5678
|
/**
|
|
5682
5679
|
* 遮罩层元素
|
|
5683
5680
|
*/
|
|
@@ -5688,7 +5685,7 @@ const PopsFolder = {
|
|
|
5688
5685
|
let elementList = [$anim];
|
|
5689
5686
|
if (config.mask.enable) {
|
|
5690
5687
|
let _handleMask_ = PopsHandler.handleMask({
|
|
5691
|
-
type:
|
|
5688
|
+
type: popsType,
|
|
5692
5689
|
guid: guid,
|
|
5693
5690
|
config: config,
|
|
5694
5691
|
animElement: $anim,
|
|
@@ -5698,7 +5695,7 @@ const PopsFolder = {
|
|
|
5698
5695
|
elementList.push($mask);
|
|
5699
5696
|
}
|
|
5700
5697
|
/* 事件 */
|
|
5701
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
5698
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
5702
5699
|
PopsHandler.handleClickEvent("close", $btnCloseBtn, eventDetails, config.btn.close.callback);
|
|
5703
5700
|
PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok.callback);
|
|
5704
5701
|
PopsHandler.handleClickEvent("cancel", btnCancelElement, eventDetails, config.btn.cancel.callback);
|
|
@@ -5791,10 +5788,10 @@ const PopsFolder = {
|
|
|
5791
5788
|
fileSize: origin_fileSize,
|
|
5792
5789
|
isFolder: isFolder,
|
|
5793
5790
|
};
|
|
5794
|
-
fileNameElement
|
|
5795
|
-
fileTimeElement
|
|
5796
|
-
fileFormatSize
|
|
5797
|
-
folderELement
|
|
5791
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
5792
|
+
Reflect.set(fileTimeElement, "__value__", __value__);
|
|
5793
|
+
Reflect.set(fileFormatSize, "__value__", __value__);
|
|
5794
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
5798
5795
|
folderELement.appendChild(fileNameElement);
|
|
5799
5796
|
folderELement.appendChild(fileTimeElement);
|
|
5800
5797
|
folderELement.appendChild(fileFormatSize);
|
|
@@ -5861,8 +5858,8 @@ const PopsFolder = {
|
|
|
5861
5858
|
fileSize: origin_fileSize,
|
|
5862
5859
|
isFolder: isFolder,
|
|
5863
5860
|
};
|
|
5864
|
-
fileNameElement
|
|
5865
|
-
folderELement
|
|
5861
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
5862
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
5866
5863
|
folderELement.appendChild(fileNameElement);
|
|
5867
5864
|
return {
|
|
5868
5865
|
folderELement,
|
|
@@ -5872,10 +5869,13 @@ const PopsFolder = {
|
|
|
5872
5869
|
/**
|
|
5873
5870
|
* 清空每行的元素
|
|
5874
5871
|
*/
|
|
5875
|
-
function
|
|
5872
|
+
function clearFolderRow() {
|
|
5876
5873
|
PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
|
|
5877
5874
|
}
|
|
5878
|
-
|
|
5875
|
+
/**
|
|
5876
|
+
* 创建顶部导航的箭头图标
|
|
5877
|
+
*/
|
|
5878
|
+
function createHeaderArrowIcon() {
|
|
5879
5879
|
let iconArrowElement = popsDOMUtils.createElement("div", {
|
|
5880
5880
|
className: "iconArrow",
|
|
5881
5881
|
});
|
|
@@ -5883,17 +5883,16 @@ const PopsFolder = {
|
|
|
5883
5883
|
}
|
|
5884
5884
|
/**
|
|
5885
5885
|
* 添加顶部导航
|
|
5886
|
-
* @param
|
|
5887
|
-
* @param
|
|
5888
|
-
* @returns
|
|
5886
|
+
* @param folderName 文件夹名
|
|
5887
|
+
* @param folderDataConfig 文件夹配置
|
|
5889
5888
|
*/
|
|
5890
|
-
function
|
|
5889
|
+
function createHeaderFileLinkNavgiation(folderName, folderDataConfig) {
|
|
5891
5890
|
let spanElement = popsDOMUtils.createElement("span", {
|
|
5892
5891
|
className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
|
|
5893
|
-
innerHTML: `<a>${
|
|
5894
|
-
_config_:
|
|
5892
|
+
innerHTML: `<a>${folderName}</a>`,
|
|
5893
|
+
_config_: folderDataConfig,
|
|
5895
5894
|
}, {
|
|
5896
|
-
title:
|
|
5895
|
+
title: folderName,
|
|
5897
5896
|
});
|
|
5898
5897
|
return spanElement;
|
|
5899
5898
|
}
|
|
@@ -5901,10 +5900,10 @@ const PopsFolder = {
|
|
|
5901
5900
|
* 顶部导航的点击事件
|
|
5902
5901
|
* @param event
|
|
5903
5902
|
* @param isTop 是否是全部文件按钮
|
|
5904
|
-
* @param
|
|
5903
|
+
* @param folderDataConfigList 配置
|
|
5905
5904
|
*/
|
|
5906
|
-
function breadcrumbAllFilesElementClickEvent(event, isTop,
|
|
5907
|
-
|
|
5905
|
+
function breadcrumbAllFilesElementClickEvent(event, isTop, folderDataConfigList) {
|
|
5906
|
+
clearFolderRow();
|
|
5908
5907
|
/* 获取当前的导航元素 */
|
|
5909
5908
|
let $click = event.target;
|
|
5910
5909
|
let currentBreadcrumb = $click.closest("span.pops-folder-file-list-breadcrumb-allFiles");
|
|
@@ -5930,16 +5929,16 @@ const PopsFolder = {
|
|
|
5930
5929
|
},
|
|
5931
5930
|
addIndexCSS: false,
|
|
5932
5931
|
});
|
|
5933
|
-
addFolderElement(
|
|
5932
|
+
addFolderElement(folderDataConfigList);
|
|
5934
5933
|
loadingMask.close();
|
|
5935
5934
|
}
|
|
5936
5935
|
/**
|
|
5937
5936
|
* 刷新文件列表界面信息
|
|
5938
5937
|
* @param event
|
|
5939
|
-
* @param
|
|
5938
|
+
* @param folderDataConfig
|
|
5940
5939
|
*/
|
|
5941
|
-
async function refreshFolderInfoClickEvent(event,
|
|
5942
|
-
|
|
5940
|
+
async function refreshFolderInfoClickEvent(event, folderDataConfig) {
|
|
5941
|
+
clearFolderRow();
|
|
5943
5942
|
let loadingMask = PopsLoading.init({
|
|
5944
5943
|
parent: $content,
|
|
5945
5944
|
content: {
|
|
@@ -5950,12 +5949,12 @@ const PopsFolder = {
|
|
|
5950
5949
|
},
|
|
5951
5950
|
addIndexCSS: false,
|
|
5952
5951
|
});
|
|
5953
|
-
if (typeof
|
|
5954
|
-
let childConfig = await
|
|
5952
|
+
if (typeof folderDataConfig.clickEvent === "function") {
|
|
5953
|
+
let childConfig = await folderDataConfig.clickEvent(event, folderDataConfig);
|
|
5955
5954
|
/* 添加顶部导航的箭头 */
|
|
5956
|
-
folderFileListBreadcrumbPrimaryElement.appendChild(
|
|
5957
|
-
/*
|
|
5958
|
-
let breadcrumbAllFilesElement =
|
|
5955
|
+
folderFileListBreadcrumbPrimaryElement.appendChild(createHeaderArrowIcon());
|
|
5956
|
+
/* 添加顶部导航的链接文字 */
|
|
5957
|
+
let breadcrumbAllFilesElement = createHeaderFileLinkNavgiation(folderDataConfig.fileName, childConfig);
|
|
5959
5958
|
folderFileListBreadcrumbPrimaryElement.appendChild(breadcrumbAllFilesElement);
|
|
5960
5959
|
/* 设置顶部导航点击事件 */
|
|
5961
5960
|
popsDOMUtils.on(breadcrumbAllFilesElement, "click", function (event) {
|
|
@@ -6250,7 +6249,7 @@ const PopsFolder = {
|
|
|
6250
6249
|
endCallBack: config.dragEndCallBack,
|
|
6251
6250
|
});
|
|
6252
6251
|
}
|
|
6253
|
-
PopsHandler.handlePush(
|
|
6252
|
+
PopsHandler.handlePush(popsType, {
|
|
6254
6253
|
guid: guid,
|
|
6255
6254
|
animElement: $anim,
|
|
6256
6255
|
popsElement: $pops,
|
|
@@ -7342,14 +7341,14 @@ const PopsTooltip = {
|
|
|
7342
7341
|
init(details) {
|
|
7343
7342
|
const guid = popsUtils.getRandomGUID();
|
|
7344
7343
|
// 设置当前类型
|
|
7345
|
-
const
|
|
7344
|
+
const popsType = "tooltip";
|
|
7346
7345
|
let config = PopsTooltipConfig();
|
|
7347
7346
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
7348
7347
|
config = popsUtils.assign(config, details);
|
|
7349
7348
|
if (!(config.target instanceof HTMLElement)) {
|
|
7350
7349
|
throw new TypeError("config.target 必须是HTMLElement类型");
|
|
7351
7350
|
}
|
|
7352
|
-
config = PopsHandler.handleOnly(
|
|
7351
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
7353
7352
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
7354
7353
|
PopsHandler.handleInit($shadowRoot, [
|
|
7355
7354
|
{
|
|
@@ -10081,14 +10080,14 @@ const PopsPanel = {
|
|
|
10081
10080
|
init(details) {
|
|
10082
10081
|
const guid = popsUtils.getRandomGUID();
|
|
10083
10082
|
// 设置当前类型
|
|
10084
|
-
const
|
|
10083
|
+
const popsType = "panel";
|
|
10085
10084
|
let config = PopsPanelConfig();
|
|
10086
10085
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10087
10086
|
config = popsUtils.assign(config, details);
|
|
10088
10087
|
if (details && Array.isArray(details.content)) {
|
|
10089
10088
|
config.content = details.content;
|
|
10090
10089
|
}
|
|
10091
|
-
config = PopsHandler.handleOnly(
|
|
10090
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
10092
10091
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
10093
10092
|
PopsHandler.handleInit($shadowRoot, [
|
|
10094
10093
|
{
|
|
@@ -10123,21 +10122,21 @@ const PopsPanel = {
|
|
|
10123
10122
|
// 先把z-index提取出来
|
|
10124
10123
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
10125
10124
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
10126
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
10127
|
-
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
10128
|
-
let animHTML = PopsElementHandler.getAnimHTML(guid,
|
|
10125
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
10126
|
+
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(popsType, config);
|
|
10127
|
+
let animHTML = PopsElementHandler.getAnimHTML(guid, popsType, config,
|
|
10129
10128
|
/*html*/ `
|
|
10130
|
-
<div class="pops-title pops-${
|
|
10129
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
|
|
10131
10130
|
? config.title.text
|
|
10132
|
-
: `<p pops class="pops-${
|
|
10133
|
-
<div class="pops-content pops-${
|
|
10134
|
-
<aside class="pops-${
|
|
10135
|
-
<ul class="pops-${
|
|
10136
|
-
<ul class="pops-${
|
|
10131
|
+
: `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
|
|
10132
|
+
<div class="pops-content pops-${popsType}-content">
|
|
10133
|
+
<aside class="pops-${popsType}-aside">
|
|
10134
|
+
<ul class="pops-${popsType}-aside-top-container"></ul>
|
|
10135
|
+
<ul class="pops-${popsType}-aside-bottom-container"></ul>
|
|
10137
10136
|
</aside>
|
|
10138
|
-
<section class="pops-${
|
|
10139
|
-
<ul class="pops-${
|
|
10140
|
-
<ul class="pops-${
|
|
10137
|
+
<section class="pops-${popsType}-container">
|
|
10138
|
+
<ul class="pops-${popsType}-container-header-ul"></ul>
|
|
10139
|
+
<ul class="pops-${popsType}-container-main-ul"></ul>
|
|
10141
10140
|
</section>
|
|
10142
10141
|
</div>`, "", zIndex);
|
|
10143
10142
|
/**
|
|
@@ -10145,7 +10144,7 @@ const PopsPanel = {
|
|
|
10145
10144
|
*/
|
|
10146
10145
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
10147
10146
|
/* 结构元素 */
|
|
10148
|
-
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim,
|
|
10147
|
+
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
10149
10148
|
if (config.isMobile || popsUtils.isPhone()) {
|
|
10150
10149
|
popsDOMUtils.addClassName($pops, config.mobileClassName);
|
|
10151
10150
|
}
|
|
@@ -10160,7 +10159,7 @@ const PopsPanel = {
|
|
|
10160
10159
|
/* 遮罩层元素 */
|
|
10161
10160
|
if (config.mask.enable) {
|
|
10162
10161
|
let { maskElement } = PopsHandler.handleMask({
|
|
10163
|
-
type:
|
|
10162
|
+
type: popsType,
|
|
10164
10163
|
guid: guid,
|
|
10165
10164
|
config: config,
|
|
10166
10165
|
animElement: $anim,
|
|
@@ -10170,7 +10169,7 @@ const PopsPanel = {
|
|
|
10170
10169
|
isCreatedElementList.push($mask);
|
|
10171
10170
|
}
|
|
10172
10171
|
/* 处理返回的配置 */
|
|
10173
|
-
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot,
|
|
10172
|
+
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask, config);
|
|
10174
10173
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
10175
10174
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
10176
10175
|
/* 创建到页面中 */
|
|
@@ -10196,7 +10195,7 @@ const PopsPanel = {
|
|
|
10196
10195
|
$contentSectionContainer: $contentSectionContainer,
|
|
10197
10196
|
},
|
|
10198
10197
|
});
|
|
10199
|
-
PopsHandler.handlePush(
|
|
10198
|
+
PopsHandler.handlePush(popsType, {
|
|
10200
10199
|
guid: guid,
|
|
10201
10200
|
animElement: $anim,
|
|
10202
10201
|
popsElement: $pops,
|
|
@@ -10358,11 +10357,11 @@ const PopsRightClickMenu = {
|
|
|
10358
10357
|
init(details) {
|
|
10359
10358
|
const guid = popsUtils.getRandomGUID();
|
|
10360
10359
|
// 设置当前类型
|
|
10361
|
-
const
|
|
10360
|
+
const popsType = "rightClickMenu";
|
|
10362
10361
|
let config = rightClickMenuConfig();
|
|
10363
10362
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10364
10363
|
config = popsUtils.assign(config, details);
|
|
10365
|
-
config = PopsHandler.handleOnly(
|
|
10364
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
10366
10365
|
if (config.target == null) {
|
|
10367
10366
|
throw new Error("config.target 不能为空");
|
|
10368
10367
|
}
|
|
@@ -10411,7 +10410,7 @@ const PopsRightClickMenu = {
|
|
|
10411
10410
|
return;
|
|
10412
10411
|
}
|
|
10413
10412
|
let $click = event.target;
|
|
10414
|
-
if ($click.closest(`.pops-${
|
|
10413
|
+
if ($click.closest(`.pops-${popsType}`)) {
|
|
10415
10414
|
return;
|
|
10416
10415
|
}
|
|
10417
10416
|
if ($click.className &&
|
|
@@ -10430,7 +10429,7 @@ const PopsRightClickMenu = {
|
|
|
10430
10429
|
return;
|
|
10431
10430
|
}
|
|
10432
10431
|
let $click = event.target;
|
|
10433
|
-
if ($click.closest(`.pops-${
|
|
10432
|
+
if ($click.closest(`.pops-${popsType}`)) {
|
|
10434
10433
|
return;
|
|
10435
10434
|
}
|
|
10436
10435
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
@@ -10476,14 +10475,14 @@ const PopsRightClickMenu = {
|
|
|
10476
10475
|
if (config.preventDefault) {
|
|
10477
10476
|
popsDOMUtils.preventEvent(event);
|
|
10478
10477
|
}
|
|
10479
|
-
PopsHandler.handleOnly(
|
|
10478
|
+
PopsHandler.handleOnly(popsType, config);
|
|
10480
10479
|
if (PopsContextMenu.rootElement) {
|
|
10481
10480
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
10482
10481
|
}
|
|
10483
10482
|
let rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
|
|
10484
10483
|
PopsContextMenu.rootElement = rootElement;
|
|
10485
10484
|
if (config.only) {
|
|
10486
|
-
PopsHandler.handlePush(
|
|
10485
|
+
PopsHandler.handlePush(popsType, {
|
|
10487
10486
|
$shadowRoot: $shadowRoot,
|
|
10488
10487
|
$shadowContainer: $shadowContainer,
|
|
10489
10488
|
guid: guid,
|
|
@@ -10525,12 +10524,12 @@ const PopsRightClickMenu = {
|
|
|
10525
10524
|
});
|
|
10526
10525
|
element.remove();
|
|
10527
10526
|
}
|
|
10528
|
-
if (element.classList.contains(`pops-${
|
|
10527
|
+
if (element.classList.contains(`pops-${popsType}-anim-show`)) {
|
|
10529
10528
|
/* 有动画 */
|
|
10530
10529
|
popsDOMUtils.on(element, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
|
|
10531
10530
|
capture: true,
|
|
10532
10531
|
});
|
|
10533
|
-
element.classList.remove(`pops-${
|
|
10532
|
+
element.classList.remove(`pops-${popsType}-anim-show`);
|
|
10534
10533
|
}
|
|
10535
10534
|
else {
|
|
10536
10535
|
/* 无动画 */
|
|
@@ -10562,7 +10561,7 @@ const PopsRightClickMenu = {
|
|
|
10562
10561
|
*/
|
|
10563
10562
|
getMenuContainerElement(isChildren) {
|
|
10564
10563
|
let $menu = popsDOMUtils.createElement("div", {
|
|
10565
|
-
className: `pops-${
|
|
10564
|
+
className: `pops-${popsType}`,
|
|
10566
10565
|
innerHTML: /*html*/ `
|
|
10567
10566
|
<ul></ul>
|
|
10568
10567
|
`,
|
|
@@ -10576,7 +10575,7 @@ const PopsRightClickMenu = {
|
|
|
10576
10575
|
}
|
|
10577
10576
|
/* 添加动画 */
|
|
10578
10577
|
if (config.isAnimation) {
|
|
10579
|
-
popsDOMUtils.addClassName($menu, `pops-${
|
|
10578
|
+
popsDOMUtils.addClassName($menu, `pops-${popsType}-anim-grid`);
|
|
10580
10579
|
}
|
|
10581
10580
|
return $menu;
|
|
10582
10581
|
},
|
|
@@ -10716,7 +10715,7 @@ const PopsRightClickMenu = {
|
|
|
10716
10715
|
});
|
|
10717
10716
|
/* 过渡动画 */
|
|
10718
10717
|
if (config.isAnimation) {
|
|
10719
|
-
popsDOMUtils.addClassName(menuElement, `pops-${
|
|
10718
|
+
popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
|
|
10720
10719
|
}
|
|
10721
10720
|
return menuElement;
|
|
10722
10721
|
},
|
|
@@ -10756,7 +10755,7 @@ const PopsRightClickMenu = {
|
|
|
10756
10755
|
popsDOMUtils.css(menuElement, { ...offset, display: "" });
|
|
10757
10756
|
/* 过渡动画 */
|
|
10758
10757
|
if (config.isAnimation) {
|
|
10759
|
-
popsDOMUtils.addClassName(menuElement, `pops-${
|
|
10758
|
+
popsDOMUtils.addClassName(menuElement, `pops-${popsType}-anim-show`);
|
|
10760
10759
|
}
|
|
10761
10760
|
return menuElement;
|
|
10762
10761
|
},
|
|
@@ -10777,19 +10776,19 @@ const PopsRightClickMenu = {
|
|
|
10777
10776
|
if (typeof item.icon === "string" && item.icon.trim() !== "") {
|
|
10778
10777
|
let iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
|
|
10779
10778
|
let iconElement = popsDOMUtils.parseTextToDOM(
|
|
10780
|
-
/*html*/ `<i class="pops-${
|
|
10779
|
+
/*html*/ `<i class="pops-${popsType}-icon" is-loading="${item.iconIsLoading ?? false}">${iconSVGHTML}</i>`);
|
|
10781
10780
|
menuLiElement.appendChild(iconElement);
|
|
10782
10781
|
}
|
|
10783
10782
|
/* 插入文字 */
|
|
10784
10783
|
menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
|
|
10785
10784
|
/* 如果存在子数据，显示 */
|
|
10786
10785
|
if (item.item && Array.isArray(item.item)) {
|
|
10787
|
-
popsDOMUtils.addClassName(menuLiElement, `pops-${
|
|
10786
|
+
popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);
|
|
10788
10787
|
}
|
|
10789
10788
|
/* 鼠标|触摸 移入事件 */
|
|
10790
10789
|
function liElementHoverEvent() {
|
|
10791
10790
|
Array.from(menuULElement.children).forEach((liElement) => {
|
|
10792
|
-
popsDOMUtils.removeClassName(liElement, `pops-${
|
|
10791
|
+
popsDOMUtils.removeClassName(liElement, `pops-${popsType}-is-visited`);
|
|
10793
10792
|
if (!liElement.__menuData__) {
|
|
10794
10793
|
return;
|
|
10795
10794
|
}
|
|
@@ -10814,7 +10813,7 @@ const PopsRightClickMenu = {
|
|
|
10814
10813
|
index--;
|
|
10815
10814
|
}
|
|
10816
10815
|
}
|
|
10817
|
-
popsDOMUtils.addClassName(menuLiElement, `pops-${
|
|
10816
|
+
popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-is-visited`);
|
|
10818
10817
|
if (!item.item) {
|
|
10819
10818
|
return;
|
|
10820
10819
|
}
|
|
@@ -10937,7 +10936,7 @@ const PopsSearchSuggestion = {
|
|
|
10937
10936
|
init(details) {
|
|
10938
10937
|
const guid = popsUtils.getRandomGUID();
|
|
10939
10938
|
// 设置当前类型
|
|
10940
|
-
const
|
|
10939
|
+
const popsType = "searchSuggestion";
|
|
10941
10940
|
let config = searchSuggestionConfig();
|
|
10942
10941
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
10943
10942
|
config = popsUtils.assign(config, details);
|
|
@@ -11003,7 +11002,7 @@ const PopsSearchSuggestion = {
|
|
|
11003
11002
|
SearchSuggestion.changeHintULElementPosition();
|
|
11004
11003
|
SearchSuggestion.hide();
|
|
11005
11004
|
if (config.isAnimation) {
|
|
11006
|
-
SearchSuggestion.$el.root.classList.add(`pops-${
|
|
11005
|
+
SearchSuggestion.$el.root.classList.add(`pops-${popsType}-animation`);
|
|
11007
11006
|
}
|
|
11008
11007
|
$shadowRoot.appendChild(SearchSuggestion.$el.root);
|
|
11009
11008
|
parentElement.appendChild($shadowContainer);
|
|
@@ -11020,16 +11019,16 @@ const PopsSearchSuggestion = {
|
|
|
11020
11019
|
*/
|
|
11021
11020
|
getSearchSelectElement() {
|
|
11022
11021
|
let element = popsDOMUtils.createElement("div", {
|
|
11023
|
-
className: `pops pops-${
|
|
11022
|
+
className: `pops pops-${popsType}-search-suggestion`,
|
|
11024
11023
|
innerHTML: /*html*/ `
|
|
11025
11024
|
<style data-dynamic="true">
|
|
11026
11025
|
${this.getDynamicCSS()}
|
|
11027
11026
|
</style>
|
|
11028
|
-
<ul class="pops-${
|
|
11027
|
+
<ul class="pops-${popsType}-search-suggestion-hint">${config.toSearhNotResultHTML}</ul>
|
|
11029
11028
|
`,
|
|
11030
11029
|
}, {
|
|
11031
11030
|
"data-guid": guid,
|
|
11032
|
-
"type-value":
|
|
11031
|
+
"type-value": popsType,
|
|
11033
11032
|
});
|
|
11034
11033
|
if (config.className !== "" && config.className != null) {
|
|
11035
11034
|
popsDOMUtils.addClassName(element, config.className);
|
|
@@ -11039,24 +11038,24 @@ const PopsSearchSuggestion = {
|
|
|
11039
11038
|
/** 动态获取CSS */
|
|
11040
11039
|
getDynamicCSS() {
|
|
11041
11040
|
return /*css*/ `
|
|
11042
|
-
.pops-${
|
|
11041
|
+
.pops-${popsType}-animation{
|
|
11043
11042
|
-moz-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11044
11043
|
-webkit-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11045
11044
|
-o-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11046
11045
|
-ms-animation: searchSelectFalIn 0.5s 1 linear;
|
|
11047
11046
|
}
|
|
11048
|
-
.pops-${
|
|
11047
|
+
.pops-${popsType}-search-suggestion{
|
|
11049
11048
|
--search-suggestion-bg-color: #ffffff;
|
|
11050
11049
|
--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
|
|
11051
11050
|
--search-suggestion-item-color: #515a6e;
|
|
11052
11051
|
--search-suggestion-item-none-color: #8e8e8e;
|
|
11053
11052
|
--search-suggestion-item-hover-bg-color: rgba(0, 0, 0, .1);
|
|
11054
11053
|
}
|
|
11055
|
-
.pops-${
|
|
11054
|
+
.pops-${popsType}-search-suggestion{
|
|
11056
11055
|
border: initial;
|
|
11057
11056
|
overflow: initial;
|
|
11058
11057
|
}
|
|
11059
|
-
ul.pops-${
|
|
11058
|
+
ul.pops-${popsType}-search-suggestion-hint{
|
|
11060
11059
|
position: ${config.isAbsolute ? "absolute" : "fixed"};
|
|
11061
11060
|
z-index: ${PopsHandler.handleZIndex(config.zIndex)};
|
|
11062
11061
|
width: 0;
|
|
@@ -11071,14 +11070,14 @@ const PopsSearchSuggestion = {
|
|
|
11071
11070
|
box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
|
|
11072
11071
|
}
|
|
11073
11072
|
/* 建议框在上面时 */
|
|
11074
|
-
ul.pops-${
|
|
11073
|
+
ul.pops-${popsType}-search-suggestion-hint[data-top-reverse]{
|
|
11075
11074
|
display: flex;
|
|
11076
11075
|
flex-direction: column-reverse;
|
|
11077
11076
|
}
|
|
11078
|
-
ul.pops-${
|
|
11077
|
+
ul.pops-${popsType}-search-suggestion-hint[data-top-reverse] li{
|
|
11079
11078
|
flex-shrink: 0;
|
|
11080
11079
|
}
|
|
11081
|
-
ul.pops-${
|
|
11080
|
+
ul.pops-${popsType}-search-suggestion-hint li{
|
|
11082
11081
|
padding: 7px;
|
|
11083
11082
|
margin: 0;
|
|
11084
11083
|
clear: both;
|
|
@@ -11091,17 +11090,17 @@ const PopsSearchSuggestion = {
|
|
|
11091
11090
|
text-overflow: ellipsis;
|
|
11092
11091
|
width: 100%;
|
|
11093
11092
|
}
|
|
11094
|
-
ul.pops-${
|
|
11093
|
+
ul.pops-${popsType}-search-suggestion-hint li[data-none]{
|
|
11095
11094
|
text-align: center;
|
|
11096
11095
|
font-size: 12px;
|
|
11097
11096
|
color: var(--search-suggestion-item-none-color);
|
|
11098
11097
|
}
|
|
11099
|
-
ul.pops-${
|
|
11098
|
+
ul.pops-${popsType}-search-suggestion-hint li:hover{
|
|
11100
11099
|
background-color: var(--search-suggestion-item-hover-bg-color);
|
|
11101
11100
|
}
|
|
11102
11101
|
|
|
11103
11102
|
@media (prefers-color-scheme: dark){
|
|
11104
|
-
.pops-${
|
|
11103
|
+
.pops-${popsType}-search-suggestion{
|
|
11105
11104
|
--search-suggestion-bg-color: #1d1e1f;
|
|
11106
11105
|
--search-suggestion-item-color: #cfd3d4;
|
|
11107
11106
|
--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
|
|
@@ -11116,7 +11115,7 @@ const PopsSearchSuggestion = {
|
|
|
11116
11115
|
*/
|
|
11117
11116
|
getSearchItemLiElement(data, index) {
|
|
11118
11117
|
return popsDOMUtils.createElement("li", {
|
|
11119
|
-
className: `pops-${
|
|
11118
|
+
className: `pops-${popsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
|
|
11120
11119
|
"data-index": index,
|
|
11121
11120
|
"data-value": SearchSuggestion.getItemDataValue(data),
|
|
11122
11121
|
innerHTML: `${config.getItemHTML(data)}${config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""}`,
|
|
@@ -11137,7 +11136,7 @@ const PopsSearchSuggestion = {
|
|
|
11137
11136
|
popsDOMUtils.on(liElement, "click", void 0, (event) => {
|
|
11138
11137
|
popsDOMUtils.preventEvent(event);
|
|
11139
11138
|
let $click = event.target;
|
|
11140
|
-
if ($click.closest(`.pops-${
|
|
11139
|
+
if ($click.closest(`.pops-${popsType}-delete-icon`)) {
|
|
11141
11140
|
/* 点击的是删除按钮 */
|
|
11142
11141
|
if (typeof config.deleteIcon.callback === "function") {
|
|
11143
11142
|
config.deleteIcon.callback(event, liElement, liElement["data-value"]);
|
|
@@ -11329,7 +11328,7 @@ const PopsSearchSuggestion = {
|
|
|
11329
11328
|
*/
|
|
11330
11329
|
getDeleteIconHTML(size = 16, fill = "#bababa") {
|
|
11331
11330
|
return /*html*/ `
|
|
11332
|
-
<svg class="pops-${
|
|
11331
|
+
<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
|
|
11333
11332
|
<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
|
|
11334
11333
|
<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
|
|
11335
11334
|
</svg>
|
|
@@ -11340,7 +11339,7 @@ const PopsSearchSuggestion = {
|
|
|
11340
11339
|
*/
|
|
11341
11340
|
setPromptsInSearch() {
|
|
11342
11341
|
let isSearchingElement = popsDOMUtils.createElement("li", {
|
|
11343
|
-
className: `pops-${
|
|
11342
|
+
className: `pops-${popsType}-search-suggestion-hint-searching-item`,
|
|
11344
11343
|
innerHTML: config.searchingTip,
|
|
11345
11344
|
});
|
|
11346
11345
|
SearchSuggestion.$el.$hintULContainer.appendChild(isSearchingElement);
|
|
@@ -11350,7 +11349,7 @@ const PopsSearchSuggestion = {
|
|
|
11350
11349
|
*/
|
|
11351
11350
|
removePromptsInSearch() {
|
|
11352
11351
|
SearchSuggestion.$el.$hintULContainer
|
|
11353
|
-
.querySelector(`li.pops-${
|
|
11352
|
+
.querySelector(`li.pops-${popsType}-search-suggestion-hint-searching-item`)
|
|
11354
11353
|
?.remove();
|
|
11355
11354
|
},
|
|
11356
11355
|
/**
|