@whitesev/pops 3.3.1 → 3.3.3
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 +123 -52
- package/dist/index.amd.js.map +1 -1
- package/dist/index.amd.min.js +1 -1
- package/dist/index.amd.min.js.map +1 -1
- package/dist/index.cjs.js +123 -52
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.cjs.min.js.map +1 -1
- package/dist/index.esm.js +123 -52
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +123 -52
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +1 -1
- package/dist/index.iife.min.js.map +1 -1
- package/dist/index.system.js +123 -52
- package/dist/index.system.js.map +1 -1
- package/dist/index.system.min.js +1 -1
- package/dist/index.system.min.js.map +1 -1
- package/dist/index.umd.js +123 -52
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/dist/types/src/Pops.d.ts +24 -10
- package/dist/types/src/utils/PopsDOMUtils.d.ts +71 -21
- package/dist/types/src/utils/PopsUtils.d.ts +13 -0
- package/package.json +2 -1
- package/src/components/iframe/index.ts +2 -3
- package/src/handler/PopsHandler.ts +2 -2
- package/src/utils/PopsDOMUtils.ts +189 -67
- package/src/utils/PopsUtils.ts +17 -0
package/dist/index.iife.js
CHANGED
|
@@ -294,6 +294,13 @@ var pops = (function () {
|
|
|
294
294
|
isDOM(target) {
|
|
295
295
|
return target instanceof Node;
|
|
296
296
|
}
|
|
297
|
+
/**
|
|
298
|
+
* 判断是否是元素列表
|
|
299
|
+
* @param $ele
|
|
300
|
+
*/
|
|
301
|
+
isNodeList($ele) {
|
|
302
|
+
return Array.isArray($ele) || $ele instanceof NodeList;
|
|
303
|
+
}
|
|
297
304
|
/**
|
|
298
305
|
* 删除对象上的属性
|
|
299
306
|
* @param target
|
|
@@ -478,9 +485,18 @@ var pops = (function () {
|
|
|
478
485
|
result = addType ? result + resultType.toString() : parseFloat(result.toString());
|
|
479
486
|
return result;
|
|
480
487
|
}
|
|
488
|
+
/**
|
|
489
|
+
* https://github.com/any86/any-touch/blob/master/README.CN.md
|
|
490
|
+
*/
|
|
481
491
|
AnyTouch = () => {
|
|
482
492
|
return i;
|
|
483
493
|
};
|
|
494
|
+
/**
|
|
495
|
+
* `any-touch`的`doubletap`事件插件
|
|
496
|
+
*/
|
|
497
|
+
AnyTouchDoubleTapPlugin = () => {
|
|
498
|
+
return e;
|
|
499
|
+
};
|
|
484
500
|
/**
|
|
485
501
|
* 通过navigator.userAgent判断是否是手机访问
|
|
486
502
|
* @param userAgent
|
|
@@ -1017,7 +1033,7 @@ var pops = (function () {
|
|
|
1017
1033
|
*/
|
|
1018
1034
|
emit(element, eventType, details, useDispatchToEmitEvent = true) {
|
|
1019
1035
|
if (typeof element === "string") {
|
|
1020
|
-
element =
|
|
1036
|
+
element = this.selector(element);
|
|
1021
1037
|
}
|
|
1022
1038
|
if (element == null) {
|
|
1023
1039
|
return;
|
|
@@ -1079,18 +1095,18 @@ var pops = (function () {
|
|
|
1079
1095
|
* })
|
|
1080
1096
|
* */
|
|
1081
1097
|
click(element, handler, details, useDispatchToEmitEvent) {
|
|
1082
|
-
const DOMUtilsContext = this;
|
|
1083
1098
|
if (typeof element === "string") {
|
|
1084
|
-
element =
|
|
1099
|
+
element = this.selector(element);
|
|
1085
1100
|
}
|
|
1086
1101
|
if (element == null) {
|
|
1087
1102
|
return;
|
|
1088
1103
|
}
|
|
1089
1104
|
if (handler == null) {
|
|
1090
|
-
|
|
1105
|
+
this.emit(element, "click", details, useDispatchToEmitEvent);
|
|
1091
1106
|
}
|
|
1092
1107
|
else {
|
|
1093
|
-
|
|
1108
|
+
const listener = this.on(element, "click", handler);
|
|
1109
|
+
return listener;
|
|
1094
1110
|
}
|
|
1095
1111
|
}
|
|
1096
1112
|
/**
|
|
@@ -1108,18 +1124,18 @@ var pops = (function () {
|
|
|
1108
1124
|
* })
|
|
1109
1125
|
* */
|
|
1110
1126
|
blur(element, handler, details, useDispatchToEmitEvent) {
|
|
1111
|
-
const DOMUtilsContext = this;
|
|
1112
1127
|
if (typeof element === "string") {
|
|
1113
|
-
element =
|
|
1128
|
+
element = this.selector(element);
|
|
1114
1129
|
}
|
|
1115
1130
|
if (element == null) {
|
|
1116
1131
|
return;
|
|
1117
1132
|
}
|
|
1118
1133
|
if (handler === null) {
|
|
1119
|
-
|
|
1134
|
+
this.emit(element, "blur", details, useDispatchToEmitEvent);
|
|
1120
1135
|
}
|
|
1121
1136
|
else {
|
|
1122
|
-
|
|
1137
|
+
const listener = this.on(element, "blur", handler);
|
|
1138
|
+
return listener;
|
|
1123
1139
|
}
|
|
1124
1140
|
}
|
|
1125
1141
|
/**
|
|
@@ -1137,18 +1153,18 @@ var pops = (function () {
|
|
|
1137
1153
|
* })
|
|
1138
1154
|
* */
|
|
1139
1155
|
focus(element, handler, details, useDispatchToEmitEvent) {
|
|
1140
|
-
const DOMUtilsContext = this;
|
|
1141
1156
|
if (typeof element === "string") {
|
|
1142
|
-
element =
|
|
1157
|
+
element = this.selector(element);
|
|
1143
1158
|
}
|
|
1144
1159
|
if (element == null) {
|
|
1145
1160
|
return;
|
|
1146
1161
|
}
|
|
1147
1162
|
if (handler == null) {
|
|
1148
|
-
|
|
1163
|
+
this.emit(element, "focus", details, useDispatchToEmitEvent);
|
|
1149
1164
|
}
|
|
1150
1165
|
else {
|
|
1151
|
-
|
|
1166
|
+
const listener = this.on(element, "focus", handler);
|
|
1167
|
+
return listener;
|
|
1152
1168
|
}
|
|
1153
1169
|
}
|
|
1154
1170
|
/**
|
|
@@ -1166,15 +1182,39 @@ var pops = (function () {
|
|
|
1166
1182
|
* })
|
|
1167
1183
|
*/
|
|
1168
1184
|
onHover(element, handler, option) {
|
|
1169
|
-
const
|
|
1185
|
+
const that = this;
|
|
1170
1186
|
if (typeof element === "string") {
|
|
1171
|
-
element =
|
|
1187
|
+
element = that.selectorAll(element);
|
|
1172
1188
|
}
|
|
1173
1189
|
if (element == null) {
|
|
1174
1190
|
return;
|
|
1175
1191
|
}
|
|
1176
|
-
|
|
1177
|
-
|
|
1192
|
+
if (popsUtils.isNodeList(element)) {
|
|
1193
|
+
// 设置
|
|
1194
|
+
const listenerList = [];
|
|
1195
|
+
element.forEach(($ele) => {
|
|
1196
|
+
const listener = that.onHover($ele, handler, option);
|
|
1197
|
+
listenerList.push(listener);
|
|
1198
|
+
});
|
|
1199
|
+
return {
|
|
1200
|
+
off() {
|
|
1201
|
+
listenerList.forEach((listener) => {
|
|
1202
|
+
if (!listener) {
|
|
1203
|
+
return;
|
|
1204
|
+
}
|
|
1205
|
+
listener.off();
|
|
1206
|
+
});
|
|
1207
|
+
},
|
|
1208
|
+
};
|
|
1209
|
+
}
|
|
1210
|
+
const mouseenter_listener = that.on(element, "mouseenter", null, handler, option);
|
|
1211
|
+
const mouseleave_listener = that.on(element, "mouseleave", null, handler, option);
|
|
1212
|
+
return {
|
|
1213
|
+
off() {
|
|
1214
|
+
mouseenter_listener.off();
|
|
1215
|
+
mouseleave_listener.off();
|
|
1216
|
+
},
|
|
1217
|
+
};
|
|
1178
1218
|
}
|
|
1179
1219
|
/**
|
|
1180
1220
|
* 当按键松开时触发事件
|
|
@@ -1192,14 +1232,14 @@ var pops = (function () {
|
|
|
1192
1232
|
* })
|
|
1193
1233
|
*/
|
|
1194
1234
|
onKeyup(target, handler, option) {
|
|
1195
|
-
const DOMUtilsContext = this;
|
|
1196
1235
|
if (target == null) {
|
|
1197
1236
|
return;
|
|
1198
1237
|
}
|
|
1199
1238
|
if (typeof target === "string") {
|
|
1200
|
-
target =
|
|
1239
|
+
target = this.selector(target);
|
|
1201
1240
|
}
|
|
1202
|
-
|
|
1241
|
+
const listener = this.on(target, "keyup", handler, option);
|
|
1242
|
+
return listener;
|
|
1203
1243
|
}
|
|
1204
1244
|
/**
|
|
1205
1245
|
* 当按键按下时触发事件
|
|
@@ -1217,14 +1257,14 @@ var pops = (function () {
|
|
|
1217
1257
|
* })
|
|
1218
1258
|
*/
|
|
1219
1259
|
onKeydown(target, handler, option) {
|
|
1220
|
-
const DOMUtilsContext = this;
|
|
1221
1260
|
if (target == null) {
|
|
1222
1261
|
return;
|
|
1223
1262
|
}
|
|
1224
1263
|
if (typeof target === "string") {
|
|
1225
|
-
target =
|
|
1264
|
+
target = this.selector(target);
|
|
1226
1265
|
}
|
|
1227
|
-
|
|
1266
|
+
const listener = this.on(target, "keydown", handler, option);
|
|
1267
|
+
return listener;
|
|
1228
1268
|
}
|
|
1229
1269
|
/**
|
|
1230
1270
|
* 当按键按下时触发事件
|
|
@@ -1242,38 +1282,69 @@ var pops = (function () {
|
|
|
1242
1282
|
* })
|
|
1243
1283
|
*/
|
|
1244
1284
|
onKeypress(target, handler, option) {
|
|
1245
|
-
const DOMUtilsContext = this;
|
|
1246
1285
|
if (target == null) {
|
|
1247
1286
|
return;
|
|
1248
1287
|
}
|
|
1249
1288
|
if (typeof target === "string") {
|
|
1250
|
-
target =
|
|
1289
|
+
target = this.selector(target);
|
|
1251
1290
|
}
|
|
1252
|
-
|
|
1291
|
+
const listener = this.on(target, "keypress", handler, option);
|
|
1292
|
+
return listener;
|
|
1253
1293
|
}
|
|
1254
|
-
preventEvent(
|
|
1255
|
-
|
|
1256
|
-
|
|
1294
|
+
preventEvent(...args) {
|
|
1295
|
+
/**
|
|
1296
|
+
* 阻止事件的默认行为发生,并阻止事件传播
|
|
1297
|
+
*/
|
|
1298
|
+
const stopEvent = (event, onlyStopPropagation) => {
|
|
1299
|
+
if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
|
|
1300
|
+
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1301
|
+
event?.stopPropagation();
|
|
1302
|
+
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1303
|
+
event?.stopImmediatePropagation();
|
|
1304
|
+
return;
|
|
1305
|
+
}
|
|
1306
|
+
// 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字
|
|
1257
1307
|
event?.preventDefault();
|
|
1258
|
-
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1259
|
-
event?.stopPropagation();
|
|
1260
|
-
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1261
|
-
event?.stopImmediatePropagation();
|
|
1262
1308
|
return false;
|
|
1263
|
-
}
|
|
1264
|
-
if (
|
|
1309
|
+
};
|
|
1310
|
+
if (args[0] instanceof Event) {
|
|
1265
1311
|
// 直接阻止事件
|
|
1266
|
-
|
|
1267
|
-
return stopEvent(
|
|
1312
|
+
const onlyStopPropagation = args[1];
|
|
1313
|
+
return stopEvent(args[0], onlyStopPropagation);
|
|
1268
1314
|
}
|
|
1269
1315
|
else {
|
|
1316
|
+
const $el = args[0];
|
|
1317
|
+
let eventNameList = args[1];
|
|
1318
|
+
let selector = void 0;
|
|
1319
|
+
let capture = false;
|
|
1320
|
+
let onlyStopPropagation = false;
|
|
1270
1321
|
// 添加对应的事件来阻止触发
|
|
1271
1322
|
if (typeof eventNameList === "string") {
|
|
1272
1323
|
eventNameList = [eventNameList];
|
|
1273
1324
|
}
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1325
|
+
let option = void 0;
|
|
1326
|
+
if (typeof args[2] === "string" || Array.isArray(args[2])) {
|
|
1327
|
+
// selector
|
|
1328
|
+
selector = args[2];
|
|
1329
|
+
if (typeof args[3] === "object" && args[3] != null) {
|
|
1330
|
+
option = args[3];
|
|
1331
|
+
}
|
|
1332
|
+
}
|
|
1333
|
+
else if (typeof args[2] === "object" && args[2] != null && !Array.isArray(args[2])) {
|
|
1334
|
+
// option
|
|
1335
|
+
option = args[2];
|
|
1336
|
+
}
|
|
1337
|
+
else {
|
|
1338
|
+
throw new TypeError("Invalid argument");
|
|
1339
|
+
}
|
|
1340
|
+
if (option) {
|
|
1341
|
+
capture = Boolean(option.capture);
|
|
1342
|
+
onlyStopPropagation = Boolean(option.onlyStopPropagation);
|
|
1343
|
+
}
|
|
1344
|
+
const listener = this.on($el, eventNameList, selector, (evt) => {
|
|
1345
|
+
return stopEvent(evt, onlyStopPropagation);
|
|
1346
|
+
}, { capture: capture });
|
|
1347
|
+
return listener;
|
|
1277
1348
|
}
|
|
1278
1349
|
}
|
|
1279
1350
|
selector(selector) {
|
|
@@ -1459,7 +1530,7 @@ var pops = (function () {
|
|
|
1459
1530
|
width(element, isShow = false, parent) {
|
|
1460
1531
|
const DOMUtilsContext = this;
|
|
1461
1532
|
if (typeof element === "string") {
|
|
1462
|
-
element =
|
|
1533
|
+
element = this.selector(element);
|
|
1463
1534
|
}
|
|
1464
1535
|
if (element == null) {
|
|
1465
1536
|
return;
|
|
@@ -1510,7 +1581,7 @@ var pops = (function () {
|
|
|
1510
1581
|
return PopsCore.window.document.documentElement.clientHeight;
|
|
1511
1582
|
}
|
|
1512
1583
|
if (typeof element === "string") {
|
|
1513
|
-
element =
|
|
1584
|
+
element = this.selector(element);
|
|
1514
1585
|
}
|
|
1515
1586
|
if (element == null) {
|
|
1516
1587
|
return;
|
|
@@ -1558,7 +1629,7 @@ var pops = (function () {
|
|
|
1558
1629
|
return PopsCore.window.innerWidth;
|
|
1559
1630
|
}
|
|
1560
1631
|
if (typeof element === "string") {
|
|
1561
|
-
element =
|
|
1632
|
+
element = this.selector(element);
|
|
1562
1633
|
}
|
|
1563
1634
|
if (element == null) {
|
|
1564
1635
|
return;
|
|
@@ -1583,7 +1654,7 @@ var pops = (function () {
|
|
|
1583
1654
|
return PopsCore.window.innerHeight;
|
|
1584
1655
|
}
|
|
1585
1656
|
if (typeof element === "string") {
|
|
1586
|
-
element =
|
|
1657
|
+
element = this.selector(element);
|
|
1587
1658
|
}
|
|
1588
1659
|
element = element;
|
|
1589
1660
|
if (isShow || (!isShow && popsDOMUtils.isShow(element))) {
|
|
@@ -2005,12 +2076,12 @@ var pops = (function () {
|
|
|
2005
2076
|
* @param content 子元素或HTML字符串
|
|
2006
2077
|
* @example
|
|
2007
2078
|
* // 元素a.xx的内部末尾添加一个元素
|
|
2008
|
-
* DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
|
|
2079
|
+
* DOMUtils.append(document.querySelector("a.xx"), document.querySelector("b.xx"))
|
|
2009
2080
|
* DOMUtils.append("a.xx","'<b class="xx"></b>")
|
|
2010
2081
|
* */
|
|
2011
2082
|
append(element, content) {
|
|
2012
2083
|
if (typeof element === "string") {
|
|
2013
|
-
element =
|
|
2084
|
+
element = this.selector(element);
|
|
2014
2085
|
}
|
|
2015
2086
|
if (element == null) {
|
|
2016
2087
|
return;
|
|
@@ -2146,7 +2217,7 @@ var pops = (function () {
|
|
|
2146
2217
|
* */
|
|
2147
2218
|
before(element, content) {
|
|
2148
2219
|
if (typeof element === "string") {
|
|
2149
|
-
element =
|
|
2220
|
+
element = this.selector(element);
|
|
2150
2221
|
}
|
|
2151
2222
|
if (element == null) {
|
|
2152
2223
|
return;
|
|
@@ -2169,7 +2240,7 @@ var pops = (function () {
|
|
|
2169
2240
|
* */
|
|
2170
2241
|
after(element, content) {
|
|
2171
2242
|
if (typeof element === "string") {
|
|
2172
|
-
element =
|
|
2243
|
+
element = this.selector(element);
|
|
2173
2244
|
}
|
|
2174
2245
|
if (element == null) {
|
|
2175
2246
|
return;
|
|
@@ -3534,14 +3605,14 @@ var pops = (function () {
|
|
|
3534
3605
|
element.hasAttribute("anim"));
|
|
3535
3606
|
}
|
|
3536
3607
|
// 判断按下的元素是否是pops-anim
|
|
3537
|
-
popsDOMUtils.on(config.animElement,
|
|
3608
|
+
popsDOMUtils.on(config.animElement, "pointerup", (event) => {
|
|
3538
3609
|
const $click = event.composedPath()[0];
|
|
3539
3610
|
isMaskClick = isAnimElement($click);
|
|
3540
3611
|
});
|
|
3541
3612
|
// 如果有动画层,在动画层上监听点击事件
|
|
3542
3613
|
popsDOMUtils.on(config.animElement, "click", (event) => {
|
|
3543
3614
|
const $click = event.composedPath()[0];
|
|
3544
|
-
if (isAnimElement($click)
|
|
3615
|
+
if (isMaskClick && isAnimElement($click)) {
|
|
3545
3616
|
return clickEvent(event);
|
|
3546
3617
|
}
|
|
3547
3618
|
});
|
|
@@ -5820,7 +5891,7 @@ var pops = (function () {
|
|
|
5820
5891
|
*/
|
|
5821
5892
|
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
5822
5893
|
const { $pops: $pops, $headerBtnClose: headerCloseBtnElement, $headerControls: headerControlsElement, $title: $title, $iframe: $iframe, $loading: loadingElement, $contentLoading: $contentLoading, $headerBtnMin: headerMinBtnElement, $headerBtnMax: headerMaxBtnElement, $headerBtnMise: headerMiseBtnElement, } = PopsHandler.handleQueryElement($anim, popsType);
|
|
5823
|
-
let $iframeContainer =
|
|
5894
|
+
let $iframeContainer = popsDOMUtils.selector(".pops-iframe-container");
|
|
5824
5895
|
if (!$iframeContainer) {
|
|
5825
5896
|
$iframeContainer = popsDOMUtils.createElement("div", {
|
|
5826
5897
|
className: "pops-iframe-container",
|
|
@@ -13298,7 +13369,7 @@ var pops = (function () {
|
|
|
13298
13369
|
},
|
|
13299
13370
|
};
|
|
13300
13371
|
|
|
13301
|
-
const version = "3.3.
|
|
13372
|
+
const version = "3.3.3";
|
|
13302
13373
|
|
|
13303
13374
|
class Pops {
|
|
13304
13375
|
/** 配置 */
|