@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
|
@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../GlobalConfig";
|
|
|
2
2
|
import { PopsElementHandler } from "../../handler/PopsElementHandler";
|
|
3
3
|
import { PopsHandler } from "../../handler/PopsHandler";
|
|
4
4
|
import { PopsCSS } from "../../PopsCSS";
|
|
5
|
+
import type { PopsType } from "../../types/main";
|
|
5
6
|
import { popsDOMUtils } from "../../utils/PopsDOMUtils";
|
|
6
7
|
import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
|
|
7
8
|
import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
|
|
@@ -15,12 +16,12 @@ export const PopsFolder = {
|
|
|
15
16
|
init(details: PopsFolderDetails) {
|
|
16
17
|
const guid = popsUtils.getRandomGUID();
|
|
17
18
|
// 设置当前类型
|
|
18
|
-
const PopsType = "folder";
|
|
19
|
+
const popsType: PopsType = "folder";
|
|
19
20
|
|
|
20
21
|
let config = PopsFolderConfig();
|
|
21
22
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
22
23
|
config = popsUtils.assign(config, details);
|
|
23
|
-
config = PopsHandler.handleOnly(
|
|
24
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
24
25
|
|
|
25
26
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
26
27
|
PopsHandler.handleInit($shadowRoot, [
|
|
@@ -107,20 +108,16 @@ export const PopsFolder = {
|
|
|
107
108
|
let androidIconList = ["apk", "apkm", "xapk"];
|
|
108
109
|
|
|
109
110
|
zipIconList.forEach((keyName) => {
|
|
110
|
-
|
|
111
|
-
Folder_ICON[keyName] = Folder_ICON.zip;
|
|
111
|
+
Folder_ICON[keyName as keyof typeof Folder_ICON] = Folder_ICON.zip;
|
|
112
112
|
});
|
|
113
113
|
imageIconList.forEach((keyName) => {
|
|
114
|
-
|
|
115
|
-
Folder_ICON[keyName] = Folder_ICON.png;
|
|
114
|
+
Folder_ICON[keyName as keyof typeof Folder_ICON] = Folder_ICON.png;
|
|
116
115
|
});
|
|
117
116
|
codeLanguageIconList.forEach((keyName) => {
|
|
118
|
-
|
|
119
|
-
Folder_ICON[keyName] = Folder_ICON.html;
|
|
117
|
+
Folder_ICON[keyName as keyof typeof Folder_ICON] = Folder_ICON.html;
|
|
120
118
|
});
|
|
121
119
|
androidIconList.forEach((keyName) => {
|
|
122
|
-
|
|
123
|
-
Folder_ICON[keyName] = Folder_ICON.apk;
|
|
120
|
+
Folder_ICON[keyName as keyof typeof Folder_ICON] = Folder_ICON.apk;
|
|
124
121
|
});
|
|
125
122
|
|
|
126
123
|
if (details?.folder) {
|
|
@@ -132,122 +129,119 @@ export const PopsFolder = {
|
|
|
132
129
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
133
130
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
|
|
134
131
|
|
|
135
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
136
|
-
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(
|
|
132
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
133
|
+
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
|
|
137
134
|
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
138
|
-
|
|
135
|
+
popsType,
|
|
139
136
|
config
|
|
140
137
|
);
|
|
141
138
|
let animHTML = PopsElementHandler.getAnimHTML(
|
|
142
139
|
guid,
|
|
143
|
-
|
|
140
|
+
popsType,
|
|
144
141
|
config,
|
|
145
142
|
/*html*/ `
|
|
146
|
-
<div class="pops-title pops-${
|
|
143
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${
|
|
147
144
|
config.title.position
|
|
148
145
|
};${headerStyle}">${
|
|
149
146
|
config.title.html
|
|
150
147
|
? config.title.text
|
|
151
|
-
: `<p pops class="pops-${
|
|
148
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
|
|
152
149
|
}${headerBtnHTML}</div>
|
|
153
|
-
<div class="pops-content pops-${
|
|
150
|
+
<div class="pops-content pops-${popsType}-content ${
|
|
154
151
|
popsUtils.isPhone() ? "pops-mobile-folder-content" : ""
|
|
155
152
|
}">
|
|
156
153
|
<div class="pops-folder-list">
|
|
157
154
|
<div class="pops-folder-file-list-breadcrumb">
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
155
|
+
<div class="pops-folder-file-list-breadcrumb-primary">
|
|
156
|
+
<span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
|
|
157
|
+
<a>全部文件</a>
|
|
158
|
+
</span>
|
|
159
|
+
</div>
|
|
163
160
|
</div>
|
|
164
161
|
<div class="pops-folder-list-table__header-div">
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
162
|
+
<table class="pops-folder-list-table__header">
|
|
163
|
+
<colgroup>
|
|
164
|
+
<col width="52%">
|
|
165
|
+
<col width="24%">
|
|
166
|
+
<col width="16%">
|
|
167
|
+
</colgroup>
|
|
168
|
+
<thead>
|
|
169
|
+
<tr class="pops-folder-list-table__header-row">
|
|
170
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
171
|
+
<div class="text-ellip content flex-a-i-center">
|
|
172
|
+
<span>文件名</span>
|
|
173
|
+
<div class="pops-folder-list-table__sort" data-sort="fileName">
|
|
174
|
+
<div class="pops-folder-icon-arrow" data-sort="按文件名排序">
|
|
175
|
+
<svg
|
|
176
|
+
viewBox="0 0 1024 1024"
|
|
177
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
178
|
+
<path
|
|
179
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
180
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
181
|
+
<path
|
|
182
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
183
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
184
|
+
</svg>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</th>
|
|
189
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
190
|
+
<div class="text-ellip content flex-a-i-center">
|
|
191
|
+
<span>修改时间</span>
|
|
192
|
+
<div class="pops-folder-list-table__sort" data-sort="latestTime">
|
|
193
|
+
<div class="pops-folder-icon-arrow" title="按修改时间排序">
|
|
194
|
+
<svg
|
|
195
|
+
viewBox="0 0 1024 1024"
|
|
196
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
197
|
+
<path
|
|
198
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
199
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
200
|
+
<path
|
|
201
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
202
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
203
|
+
</svg>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
</th>
|
|
208
|
+
<th class="pops-folder-list-table__header-th cursor-p">
|
|
209
|
+
<div class="text-ellip content flex-a-i-center">
|
|
210
|
+
<span>大小</span>
|
|
211
|
+
<div class="pops-folder-list-table__sort" data-sort="fileSize">
|
|
212
|
+
<div class="pops-folder-icon-arrow" title="按大小排序">
|
|
213
|
+
<svg
|
|
214
|
+
viewBox="0 0 1024 1024"
|
|
215
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
216
|
+
<path
|
|
217
|
+
d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
|
|
218
|
+
class="pops-folder-icon-arrow-up"></path>
|
|
219
|
+
<path
|
|
220
|
+
d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
|
|
221
|
+
class="pops-folder-icon-arrow-down"></path>
|
|
222
|
+
</svg>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</th>
|
|
227
|
+
</tr>
|
|
228
|
+
</thead>
|
|
229
|
+
</table>
|
|
233
230
|
</div>
|
|
234
231
|
<div class="pops-folder-list-table__body-div">
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
</tbody>
|
|
250
|
-
</table>
|
|
232
|
+
<table class="pops-folder-list-table__body">
|
|
233
|
+
<colgroup>
|
|
234
|
+
${
|
|
235
|
+
popsUtils.isPhone()
|
|
236
|
+
? `<col width="100%">`
|
|
237
|
+
: `
|
|
238
|
+
<col width="52%">
|
|
239
|
+
<col width="24%">
|
|
240
|
+
<col width="16%">`
|
|
241
|
+
}
|
|
242
|
+
</colgroup>
|
|
243
|
+
<tbody></tbody>
|
|
244
|
+
</table>
|
|
251
245
|
</div>
|
|
252
246
|
</div>
|
|
253
247
|
</div>${bottomBtnHTML}`,
|
|
@@ -262,11 +256,8 @@ export const PopsFolder = {
|
|
|
262
256
|
popsElement: $pops,
|
|
263
257
|
titleElement: $title,
|
|
264
258
|
contentElement: $content,
|
|
265
|
-
|
|
266
259
|
// folderListElement,
|
|
267
|
-
|
|
268
260
|
// folderListHeaderElement,
|
|
269
|
-
|
|
270
261
|
// folderListHeaderRowElement,
|
|
271
262
|
folderListBodyElement,
|
|
272
263
|
folderFileListBreadcrumbPrimaryElement,
|
|
@@ -277,7 +268,7 @@ export const PopsFolder = {
|
|
|
277
268
|
folderListSortFileNameElement,
|
|
278
269
|
folderListSortLatestTimeElement,
|
|
279
270
|
folderListSortFileSizeElement,
|
|
280
|
-
} = PopsHandler.handleQueryElement($anim,
|
|
271
|
+
} = PopsHandler.handleQueryElement($anim, popsType);
|
|
281
272
|
|
|
282
273
|
/**
|
|
283
274
|
* 遮罩层元素
|
|
@@ -290,7 +281,7 @@ export const PopsFolder = {
|
|
|
290
281
|
|
|
291
282
|
if (config.mask.enable) {
|
|
292
283
|
let _handleMask_ = PopsHandler.handleMask({
|
|
293
|
-
type:
|
|
284
|
+
type: popsType,
|
|
294
285
|
guid: guid,
|
|
295
286
|
config: config,
|
|
296
287
|
animElement: $anim,
|
|
@@ -304,7 +295,7 @@ export const PopsFolder = {
|
|
|
304
295
|
guid,
|
|
305
296
|
$shadowContainer,
|
|
306
297
|
$shadowRoot,
|
|
307
|
-
|
|
298
|
+
popsType,
|
|
308
299
|
$anim,
|
|
309
300
|
$pops,
|
|
310
301
|
$mask!,
|
|
@@ -441,13 +432,11 @@ export const PopsFolder = {
|
|
|
441
432
|
isFolder: isFolder,
|
|
442
433
|
};
|
|
443
434
|
|
|
444
|
-
(fileNameElement
|
|
435
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
436
|
+
Reflect.set(fileTimeElement, "__value__", __value__);
|
|
437
|
+
Reflect.set(fileFormatSize, "__value__", __value__);
|
|
438
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
445
439
|
|
|
446
|
-
(fileTimeElement as any)["__value__"] = __value__;
|
|
447
|
-
|
|
448
|
-
(fileFormatSize as any)["__value__"] = __value__;
|
|
449
|
-
|
|
450
|
-
(folderELement as any)["__value__"] = __value__;
|
|
451
440
|
folderELement.appendChild(fileNameElement);
|
|
452
441
|
folderELement.appendChild(fileTimeElement);
|
|
453
442
|
folderELement.appendChild(fileFormatSize);
|
|
@@ -523,10 +512,8 @@ export const PopsFolder = {
|
|
|
523
512
|
fileSize: origin_fileSize,
|
|
524
513
|
isFolder: isFolder,
|
|
525
514
|
};
|
|
526
|
-
|
|
527
|
-
(
|
|
528
|
-
|
|
529
|
-
(folderELement as any)["__value__"] = __value__;
|
|
515
|
+
Reflect.set(fileNameElement, "__value__", __value__);
|
|
516
|
+
Reflect.set(folderELement, "__value__", __value__);
|
|
530
517
|
folderELement.appendChild(fileNameElement);
|
|
531
518
|
return {
|
|
532
519
|
folderELement,
|
|
@@ -536,10 +523,13 @@ export const PopsFolder = {
|
|
|
536
523
|
/**
|
|
537
524
|
* 清空每行的元素
|
|
538
525
|
*/
|
|
539
|
-
function
|
|
526
|
+
function clearFolderRow() {
|
|
540
527
|
PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
|
|
541
528
|
}
|
|
542
|
-
|
|
529
|
+
/**
|
|
530
|
+
* 创建顶部导航的箭头图标
|
|
531
|
+
*/
|
|
532
|
+
function createHeaderArrowIcon() {
|
|
543
533
|
let iconArrowElement = popsDOMUtils.createElement("div", {
|
|
544
534
|
className: "iconArrow",
|
|
545
535
|
});
|
|
@@ -547,24 +537,22 @@ export const PopsFolder = {
|
|
|
547
537
|
}
|
|
548
538
|
/**
|
|
549
539
|
* 添加顶部导航
|
|
550
|
-
* @param
|
|
551
|
-
* @param
|
|
552
|
-
* @returns
|
|
540
|
+
* @param folderName 文件夹名
|
|
541
|
+
* @param folderDataConfig 文件夹配置
|
|
553
542
|
*/
|
|
554
|
-
function
|
|
555
|
-
|
|
556
|
-
|
|
543
|
+
function createHeaderFileLinkNavgiation(
|
|
544
|
+
folderName: string,
|
|
545
|
+
folderDataConfig: PopsFolderDataConfig
|
|
557
546
|
) {
|
|
558
547
|
let spanElement = popsDOMUtils.createElement(
|
|
559
548
|
"span",
|
|
560
549
|
{
|
|
561
550
|
className: "pops-folder-file-list-breadcrumb-allFiles cursor-p",
|
|
562
|
-
innerHTML: `<a>${
|
|
563
|
-
|
|
564
|
-
_config_: _config_,
|
|
551
|
+
innerHTML: `<a>${folderName}</a>`,
|
|
552
|
+
_config_: folderDataConfig,
|
|
565
553
|
},
|
|
566
554
|
{
|
|
567
|
-
title:
|
|
555
|
+
title: folderName,
|
|
568
556
|
}
|
|
569
557
|
);
|
|
570
558
|
return spanElement;
|
|
@@ -573,15 +561,15 @@ export const PopsFolder = {
|
|
|
573
561
|
* 顶部导航的点击事件
|
|
574
562
|
* @param event
|
|
575
563
|
* @param isTop 是否是全部文件按钮
|
|
576
|
-
* @param
|
|
564
|
+
* @param folderDataConfigList 配置
|
|
577
565
|
*/
|
|
578
566
|
|
|
579
567
|
function breadcrumbAllFilesElementClickEvent(
|
|
580
568
|
event: Event,
|
|
581
569
|
isTop: boolean,
|
|
582
|
-
|
|
570
|
+
folderDataConfigList: PopsFolderDataConfig[]
|
|
583
571
|
) {
|
|
584
|
-
|
|
572
|
+
clearFolderRow();
|
|
585
573
|
/* 获取当前的导航元素 */
|
|
586
574
|
let $click = event.target as HTMLElement;
|
|
587
575
|
let currentBreadcrumb = $click.closest<HTMLSpanElement>(
|
|
@@ -608,22 +596,21 @@ export const PopsFolder = {
|
|
|
608
596
|
},
|
|
609
597
|
addIndexCSS: false,
|
|
610
598
|
});
|
|
611
|
-
addFolderElement(
|
|
599
|
+
addFolderElement(folderDataConfigList);
|
|
612
600
|
loadingMask.close();
|
|
613
601
|
}
|
|
614
602
|
/**
|
|
615
603
|
* 刷新文件列表界面信息
|
|
616
604
|
* @param event
|
|
617
|
-
* @param
|
|
605
|
+
* @param folderDataConfig
|
|
618
606
|
*/
|
|
619
607
|
async function refreshFolderInfoClickEvent(
|
|
620
608
|
event: MouseEvent | PointerEvent,
|
|
621
|
-
|
|
609
|
+
folderDataConfig: PopsFolderDataConfig
|
|
622
610
|
) {
|
|
623
|
-
|
|
611
|
+
clearFolderRow();
|
|
624
612
|
let loadingMask = PopsLoading.init({
|
|
625
613
|
parent: $content,
|
|
626
|
-
|
|
627
614
|
content: {
|
|
628
615
|
text: "获取文件列表中...",
|
|
629
616
|
},
|
|
@@ -633,16 +620,18 @@ export const PopsFolder = {
|
|
|
633
620
|
},
|
|
634
621
|
addIndexCSS: false,
|
|
635
622
|
});
|
|
636
|
-
if (typeof
|
|
637
|
-
let childConfig = await
|
|
623
|
+
if (typeof folderDataConfig.clickEvent === "function") {
|
|
624
|
+
let childConfig = await folderDataConfig.clickEvent(
|
|
625
|
+
event,
|
|
626
|
+
folderDataConfig
|
|
627
|
+
);
|
|
638
628
|
/* 添加顶部导航的箭头 */
|
|
639
|
-
|
|
640
629
|
folderFileListBreadcrumbPrimaryElement.appendChild(
|
|
641
|
-
|
|
630
|
+
createHeaderArrowIcon()
|
|
642
631
|
);
|
|
643
|
-
/*
|
|
644
|
-
let breadcrumbAllFilesElement =
|
|
645
|
-
|
|
632
|
+
/* 添加顶部导航的链接文字 */
|
|
633
|
+
let breadcrumbAllFilesElement = createHeaderFileLinkNavgiation(
|
|
634
|
+
folderDataConfig.fileName,
|
|
646
635
|
childConfig as any
|
|
647
636
|
);
|
|
648
637
|
|
|
@@ -658,12 +647,12 @@ export const PopsFolder = {
|
|
|
658
647
|
breadcrumbAllFilesElementClickEvent(
|
|
659
648
|
event,
|
|
660
649
|
false,
|
|
661
|
-
childConfig as
|
|
650
|
+
childConfig as PopsFolderDataConfig[]
|
|
662
651
|
);
|
|
663
652
|
}
|
|
664
653
|
);
|
|
665
654
|
|
|
666
|
-
addFolderElement(childConfig as
|
|
655
|
+
addFolderElement(childConfig as PopsFolderDataConfig[]);
|
|
667
656
|
}
|
|
668
657
|
loadingMask.close();
|
|
669
658
|
}
|
|
@@ -1047,7 +1036,7 @@ export const PopsFolder = {
|
|
|
1047
1036
|
endCallBack: config.dragEndCallBack,
|
|
1048
1037
|
});
|
|
1049
1038
|
}
|
|
1050
|
-
PopsHandler.handlePush(
|
|
1039
|
+
PopsHandler.handlePush(popsType, {
|
|
1051
1040
|
guid: guid,
|
|
1052
1041
|
animElement: $anim,
|
|
1053
1042
|
popsElement: $pops,
|
|
@@ -10,12 +10,13 @@ import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
|
|
|
10
10
|
import { popsUtils } from "../../utils/PopsUtils";
|
|
11
11
|
import { PopsIframeConfig } from "./config";
|
|
12
12
|
import type { PopsIframeDetails } from "./types";
|
|
13
|
+
import type { PopsType } from "../../types/main";
|
|
13
14
|
|
|
14
15
|
export const PopsIframe = {
|
|
15
16
|
init(details: PopsIframeDetails) {
|
|
16
17
|
const guid = popsUtils.getRandomGUID();
|
|
17
18
|
// 设置当前类型
|
|
18
|
-
const PopsType = "iframe";
|
|
19
|
+
const popsType: PopsType = "iframe";
|
|
19
20
|
|
|
20
21
|
let config = PopsIframeConfig();
|
|
21
22
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
@@ -23,7 +24,7 @@ export const PopsIframe = {
|
|
|
23
24
|
if (config.url == null) {
|
|
24
25
|
throw new Error("config.url不能为空");
|
|
25
26
|
}
|
|
26
|
-
config = PopsHandler.handleOnly(
|
|
27
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
27
28
|
|
|
28
29
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
29
30
|
PopsHandler.handleInit($shadowRoot, [
|
|
@@ -63,28 +64,28 @@ export const PopsIframe = {
|
|
|
63
64
|
let zIndex = PopsHandler.handleZIndex(config.zIndex);
|
|
64
65
|
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
|
|
65
66
|
|
|
66
|
-
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(
|
|
67
|
+
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
|
|
67
68
|
let iframeLoadingHTML = '<div class="pops-loading"></div>';
|
|
68
69
|
let titleText =
|
|
69
70
|
config.title!.text!.trim() !== "" ? config.title.text : config.url;
|
|
70
71
|
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
|
|
71
|
-
|
|
72
|
+
popsType,
|
|
72
73
|
config
|
|
73
74
|
);
|
|
74
75
|
let animHTML = PopsElementHandler.getAnimHTML(
|
|
75
76
|
guid,
|
|
76
|
-
|
|
77
|
+
popsType,
|
|
77
78
|
config,
|
|
78
79
|
/*html*/ `
|
|
79
|
-
<div class="pops-title pops-${
|
|
80
|
+
<div class="pops-title pops-${popsType}-title" style="text-align: ${
|
|
80
81
|
config.title.position
|
|
81
82
|
};${headerStyle}">${
|
|
82
83
|
config.title.html
|
|
83
84
|
? titleText
|
|
84
|
-
: `<p pops class="pops-${
|
|
85
|
+
: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`
|
|
85
86
|
}${headerBtnHTML}</div>
|
|
86
|
-
<div class="pops-content pops-${
|
|
87
|
-
<div class="pops-${
|
|
87
|
+
<div class="pops-content pops-${popsType}-content">
|
|
88
|
+
<div class="pops-${popsType}-content-global-loading"></div>
|
|
88
89
|
<iframe src="${config.url}" pops ${
|
|
89
90
|
config.sandbox
|
|
90
91
|
? "sandbox='allow-forms allow-same-origin allow-scripts'"
|
|
@@ -111,7 +112,7 @@ export const PopsIframe = {
|
|
|
111
112
|
headerMinBtnElement,
|
|
112
113
|
headerMaxBtnElement,
|
|
113
114
|
headerMiseBtnElement,
|
|
114
|
-
} = PopsHandler.handleQueryElement($anim,
|
|
115
|
+
} = PopsHandler.handleQueryElement($anim, popsType);
|
|
115
116
|
let $iframeContainer = PopsCore.document.querySelector<HTMLDivElement>(
|
|
116
117
|
".pops-iframe-container"
|
|
117
118
|
);
|
|
@@ -133,7 +134,7 @@ export const PopsIframe = {
|
|
|
133
134
|
|
|
134
135
|
if (config.mask.enable) {
|
|
135
136
|
let _handleMask_ = PopsHandler.handleMask({
|
|
136
|
-
type:
|
|
137
|
+
type: popsType,
|
|
137
138
|
guid: guid,
|
|
138
139
|
|
|
139
140
|
config: config,
|
|
@@ -148,7 +149,7 @@ export const PopsIframe = {
|
|
|
148
149
|
guid,
|
|
149
150
|
$shadowContainer,
|
|
150
151
|
$shadowRoot,
|
|
151
|
-
|
|
152
|
+
popsType,
|
|
152
153
|
$anim,
|
|
153
154
|
|
|
154
155
|
$pops!,
|
|
@@ -333,7 +334,7 @@ export const PopsIframe = {
|
|
|
333
334
|
}
|
|
334
335
|
);
|
|
335
336
|
|
|
336
|
-
PopsHandler.handlePush(
|
|
337
|
+
PopsHandler.handlePush(popsType, {
|
|
337
338
|
guid: guid,
|
|
338
339
|
animElement: $anim,
|
|
339
340
|
|