@whitesev/pops 3.3.2 → 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 +112 -50
- 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 +112 -50
- 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 +112 -50
- 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 +112 -50
- 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 +112 -50
- 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 +112 -50
- 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 +23 -10
- package/dist/types/src/utils/PopsDOMUtils.d.ts +71 -21
- package/dist/types/src/utils/PopsUtils.d.ts +5 -0
- package/package.json +1 -1
- package/src/components/iframe/index.ts +2 -3
- package/src/utils/PopsDOMUtils.ts +189 -67
- package/src/utils/PopsUtils.ts +7 -0
package/dist/index.esm.js
CHANGED
|
@@ -291,6 +291,13 @@ class PopsUtils {
|
|
|
291
291
|
isDOM(target) {
|
|
292
292
|
return target instanceof Node;
|
|
293
293
|
}
|
|
294
|
+
/**
|
|
295
|
+
* 判断是否是元素列表
|
|
296
|
+
* @param $ele
|
|
297
|
+
*/
|
|
298
|
+
isNodeList($ele) {
|
|
299
|
+
return Array.isArray($ele) || $ele instanceof NodeList;
|
|
300
|
+
}
|
|
294
301
|
/**
|
|
295
302
|
* 删除对象上的属性
|
|
296
303
|
* @param target
|
|
@@ -1023,7 +1030,7 @@ class PopsDOMUtilsEvent {
|
|
|
1023
1030
|
*/
|
|
1024
1031
|
emit(element, eventType, details, useDispatchToEmitEvent = true) {
|
|
1025
1032
|
if (typeof element === "string") {
|
|
1026
|
-
element =
|
|
1033
|
+
element = this.selector(element);
|
|
1027
1034
|
}
|
|
1028
1035
|
if (element == null) {
|
|
1029
1036
|
return;
|
|
@@ -1085,18 +1092,18 @@ class PopsDOMUtilsEvent {
|
|
|
1085
1092
|
* })
|
|
1086
1093
|
* */
|
|
1087
1094
|
click(element, handler, details, useDispatchToEmitEvent) {
|
|
1088
|
-
const DOMUtilsContext = this;
|
|
1089
1095
|
if (typeof element === "string") {
|
|
1090
|
-
element =
|
|
1096
|
+
element = this.selector(element);
|
|
1091
1097
|
}
|
|
1092
1098
|
if (element == null) {
|
|
1093
1099
|
return;
|
|
1094
1100
|
}
|
|
1095
1101
|
if (handler == null) {
|
|
1096
|
-
|
|
1102
|
+
this.emit(element, "click", details, useDispatchToEmitEvent);
|
|
1097
1103
|
}
|
|
1098
1104
|
else {
|
|
1099
|
-
|
|
1105
|
+
const listener = this.on(element, "click", handler);
|
|
1106
|
+
return listener;
|
|
1100
1107
|
}
|
|
1101
1108
|
}
|
|
1102
1109
|
/**
|
|
@@ -1114,18 +1121,18 @@ class PopsDOMUtilsEvent {
|
|
|
1114
1121
|
* })
|
|
1115
1122
|
* */
|
|
1116
1123
|
blur(element, handler, details, useDispatchToEmitEvent) {
|
|
1117
|
-
const DOMUtilsContext = this;
|
|
1118
1124
|
if (typeof element === "string") {
|
|
1119
|
-
element =
|
|
1125
|
+
element = this.selector(element);
|
|
1120
1126
|
}
|
|
1121
1127
|
if (element == null) {
|
|
1122
1128
|
return;
|
|
1123
1129
|
}
|
|
1124
1130
|
if (handler === null) {
|
|
1125
|
-
|
|
1131
|
+
this.emit(element, "blur", details, useDispatchToEmitEvent);
|
|
1126
1132
|
}
|
|
1127
1133
|
else {
|
|
1128
|
-
|
|
1134
|
+
const listener = this.on(element, "blur", handler);
|
|
1135
|
+
return listener;
|
|
1129
1136
|
}
|
|
1130
1137
|
}
|
|
1131
1138
|
/**
|
|
@@ -1143,18 +1150,18 @@ class PopsDOMUtilsEvent {
|
|
|
1143
1150
|
* })
|
|
1144
1151
|
* */
|
|
1145
1152
|
focus(element, handler, details, useDispatchToEmitEvent) {
|
|
1146
|
-
const DOMUtilsContext = this;
|
|
1147
1153
|
if (typeof element === "string") {
|
|
1148
|
-
element =
|
|
1154
|
+
element = this.selector(element);
|
|
1149
1155
|
}
|
|
1150
1156
|
if (element == null) {
|
|
1151
1157
|
return;
|
|
1152
1158
|
}
|
|
1153
1159
|
if (handler == null) {
|
|
1154
|
-
|
|
1160
|
+
this.emit(element, "focus", details, useDispatchToEmitEvent);
|
|
1155
1161
|
}
|
|
1156
1162
|
else {
|
|
1157
|
-
|
|
1163
|
+
const listener = this.on(element, "focus", handler);
|
|
1164
|
+
return listener;
|
|
1158
1165
|
}
|
|
1159
1166
|
}
|
|
1160
1167
|
/**
|
|
@@ -1172,15 +1179,39 @@ class PopsDOMUtilsEvent {
|
|
|
1172
1179
|
* })
|
|
1173
1180
|
*/
|
|
1174
1181
|
onHover(element, handler, option) {
|
|
1175
|
-
const
|
|
1182
|
+
const that = this;
|
|
1176
1183
|
if (typeof element === "string") {
|
|
1177
|
-
element =
|
|
1184
|
+
element = that.selectorAll(element);
|
|
1178
1185
|
}
|
|
1179
1186
|
if (element == null) {
|
|
1180
1187
|
return;
|
|
1181
1188
|
}
|
|
1182
|
-
|
|
1183
|
-
|
|
1189
|
+
if (popsUtils.isNodeList(element)) {
|
|
1190
|
+
// 设置
|
|
1191
|
+
const listenerList = [];
|
|
1192
|
+
element.forEach(($ele) => {
|
|
1193
|
+
const listener = that.onHover($ele, handler, option);
|
|
1194
|
+
listenerList.push(listener);
|
|
1195
|
+
});
|
|
1196
|
+
return {
|
|
1197
|
+
off() {
|
|
1198
|
+
listenerList.forEach((listener) => {
|
|
1199
|
+
if (!listener) {
|
|
1200
|
+
return;
|
|
1201
|
+
}
|
|
1202
|
+
listener.off();
|
|
1203
|
+
});
|
|
1204
|
+
},
|
|
1205
|
+
};
|
|
1206
|
+
}
|
|
1207
|
+
const mouseenter_listener = that.on(element, "mouseenter", null, handler, option);
|
|
1208
|
+
const mouseleave_listener = that.on(element, "mouseleave", null, handler, option);
|
|
1209
|
+
return {
|
|
1210
|
+
off() {
|
|
1211
|
+
mouseenter_listener.off();
|
|
1212
|
+
mouseleave_listener.off();
|
|
1213
|
+
},
|
|
1214
|
+
};
|
|
1184
1215
|
}
|
|
1185
1216
|
/**
|
|
1186
1217
|
* 当按键松开时触发事件
|
|
@@ -1198,14 +1229,14 @@ class PopsDOMUtilsEvent {
|
|
|
1198
1229
|
* })
|
|
1199
1230
|
*/
|
|
1200
1231
|
onKeyup(target, handler, option) {
|
|
1201
|
-
const DOMUtilsContext = this;
|
|
1202
1232
|
if (target == null) {
|
|
1203
1233
|
return;
|
|
1204
1234
|
}
|
|
1205
1235
|
if (typeof target === "string") {
|
|
1206
|
-
target =
|
|
1236
|
+
target = this.selector(target);
|
|
1207
1237
|
}
|
|
1208
|
-
|
|
1238
|
+
const listener = this.on(target, "keyup", handler, option);
|
|
1239
|
+
return listener;
|
|
1209
1240
|
}
|
|
1210
1241
|
/**
|
|
1211
1242
|
* 当按键按下时触发事件
|
|
@@ -1223,14 +1254,14 @@ class PopsDOMUtilsEvent {
|
|
|
1223
1254
|
* })
|
|
1224
1255
|
*/
|
|
1225
1256
|
onKeydown(target, handler, option) {
|
|
1226
|
-
const DOMUtilsContext = this;
|
|
1227
1257
|
if (target == null) {
|
|
1228
1258
|
return;
|
|
1229
1259
|
}
|
|
1230
1260
|
if (typeof target === "string") {
|
|
1231
|
-
target =
|
|
1261
|
+
target = this.selector(target);
|
|
1232
1262
|
}
|
|
1233
|
-
|
|
1263
|
+
const listener = this.on(target, "keydown", handler, option);
|
|
1264
|
+
return listener;
|
|
1234
1265
|
}
|
|
1235
1266
|
/**
|
|
1236
1267
|
* 当按键按下时触发事件
|
|
@@ -1248,38 +1279,69 @@ class PopsDOMUtilsEvent {
|
|
|
1248
1279
|
* })
|
|
1249
1280
|
*/
|
|
1250
1281
|
onKeypress(target, handler, option) {
|
|
1251
|
-
const DOMUtilsContext = this;
|
|
1252
1282
|
if (target == null) {
|
|
1253
1283
|
return;
|
|
1254
1284
|
}
|
|
1255
1285
|
if (typeof target === "string") {
|
|
1256
|
-
target =
|
|
1286
|
+
target = this.selector(target);
|
|
1257
1287
|
}
|
|
1258
|
-
|
|
1288
|
+
const listener = this.on(target, "keypress", handler, option);
|
|
1289
|
+
return listener;
|
|
1259
1290
|
}
|
|
1260
|
-
preventEvent(
|
|
1261
|
-
|
|
1262
|
-
|
|
1291
|
+
preventEvent(...args) {
|
|
1292
|
+
/**
|
|
1293
|
+
* 阻止事件的默认行为发生,并阻止事件传播
|
|
1294
|
+
*/
|
|
1295
|
+
const stopEvent = (event, onlyStopPropagation) => {
|
|
1296
|
+
if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
|
|
1297
|
+
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1298
|
+
event?.stopPropagation();
|
|
1299
|
+
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1300
|
+
event?.stopImmediatePropagation();
|
|
1301
|
+
return;
|
|
1302
|
+
}
|
|
1303
|
+
// 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字
|
|
1263
1304
|
event?.preventDefault();
|
|
1264
|
-
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1265
|
-
event?.stopPropagation();
|
|
1266
|
-
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1267
|
-
event?.stopImmediatePropagation();
|
|
1268
1305
|
return false;
|
|
1269
|
-
}
|
|
1270
|
-
if (
|
|
1306
|
+
};
|
|
1307
|
+
if (args[0] instanceof Event) {
|
|
1271
1308
|
// 直接阻止事件
|
|
1272
|
-
|
|
1273
|
-
return stopEvent(
|
|
1309
|
+
const onlyStopPropagation = args[1];
|
|
1310
|
+
return stopEvent(args[0], onlyStopPropagation);
|
|
1274
1311
|
}
|
|
1275
1312
|
else {
|
|
1313
|
+
const $el = args[0];
|
|
1314
|
+
let eventNameList = args[1];
|
|
1315
|
+
let selector = void 0;
|
|
1316
|
+
let capture = false;
|
|
1317
|
+
let onlyStopPropagation = false;
|
|
1276
1318
|
// 添加对应的事件来阻止触发
|
|
1277
1319
|
if (typeof eventNameList === "string") {
|
|
1278
1320
|
eventNameList = [eventNameList];
|
|
1279
1321
|
}
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1322
|
+
let option = void 0;
|
|
1323
|
+
if (typeof args[2] === "string" || Array.isArray(args[2])) {
|
|
1324
|
+
// selector
|
|
1325
|
+
selector = args[2];
|
|
1326
|
+
if (typeof args[3] === "object" && args[3] != null) {
|
|
1327
|
+
option = args[3];
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1330
|
+
else if (typeof args[2] === "object" && args[2] != null && !Array.isArray(args[2])) {
|
|
1331
|
+
// option
|
|
1332
|
+
option = args[2];
|
|
1333
|
+
}
|
|
1334
|
+
else {
|
|
1335
|
+
throw new TypeError("Invalid argument");
|
|
1336
|
+
}
|
|
1337
|
+
if (option) {
|
|
1338
|
+
capture = Boolean(option.capture);
|
|
1339
|
+
onlyStopPropagation = Boolean(option.onlyStopPropagation);
|
|
1340
|
+
}
|
|
1341
|
+
const listener = this.on($el, eventNameList, selector, (evt) => {
|
|
1342
|
+
return stopEvent(evt, onlyStopPropagation);
|
|
1343
|
+
}, { capture: capture });
|
|
1344
|
+
return listener;
|
|
1283
1345
|
}
|
|
1284
1346
|
}
|
|
1285
1347
|
selector(selector) {
|
|
@@ -1465,7 +1527,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1465
1527
|
width(element, isShow = false, parent) {
|
|
1466
1528
|
const DOMUtilsContext = this;
|
|
1467
1529
|
if (typeof element === "string") {
|
|
1468
|
-
element =
|
|
1530
|
+
element = this.selector(element);
|
|
1469
1531
|
}
|
|
1470
1532
|
if (element == null) {
|
|
1471
1533
|
return;
|
|
@@ -1516,7 +1578,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1516
1578
|
return PopsCore.window.document.documentElement.clientHeight;
|
|
1517
1579
|
}
|
|
1518
1580
|
if (typeof element === "string") {
|
|
1519
|
-
element =
|
|
1581
|
+
element = this.selector(element);
|
|
1520
1582
|
}
|
|
1521
1583
|
if (element == null) {
|
|
1522
1584
|
return;
|
|
@@ -1564,7 +1626,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1564
1626
|
return PopsCore.window.innerWidth;
|
|
1565
1627
|
}
|
|
1566
1628
|
if (typeof element === "string") {
|
|
1567
|
-
element =
|
|
1629
|
+
element = this.selector(element);
|
|
1568
1630
|
}
|
|
1569
1631
|
if (element == null) {
|
|
1570
1632
|
return;
|
|
@@ -1589,7 +1651,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1589
1651
|
return PopsCore.window.innerHeight;
|
|
1590
1652
|
}
|
|
1591
1653
|
if (typeof element === "string") {
|
|
1592
|
-
element =
|
|
1654
|
+
element = this.selector(element);
|
|
1593
1655
|
}
|
|
1594
1656
|
element = element;
|
|
1595
1657
|
if (isShow || (!isShow && popsDOMUtils.isShow(element))) {
|
|
@@ -2011,12 +2073,12 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2011
2073
|
* @param content 子元素或HTML字符串
|
|
2012
2074
|
* @example
|
|
2013
2075
|
* // 元素a.xx的内部末尾添加一个元素
|
|
2014
|
-
* DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
|
|
2076
|
+
* DOMUtils.append(document.querySelector("a.xx"), document.querySelector("b.xx"))
|
|
2015
2077
|
* DOMUtils.append("a.xx","'<b class="xx"></b>")
|
|
2016
2078
|
* */
|
|
2017
2079
|
append(element, content) {
|
|
2018
2080
|
if (typeof element === "string") {
|
|
2019
|
-
element =
|
|
2081
|
+
element = this.selector(element);
|
|
2020
2082
|
}
|
|
2021
2083
|
if (element == null) {
|
|
2022
2084
|
return;
|
|
@@ -2152,7 +2214,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2152
2214
|
* */
|
|
2153
2215
|
before(element, content) {
|
|
2154
2216
|
if (typeof element === "string") {
|
|
2155
|
-
element =
|
|
2217
|
+
element = this.selector(element);
|
|
2156
2218
|
}
|
|
2157
2219
|
if (element == null) {
|
|
2158
2220
|
return;
|
|
@@ -2175,7 +2237,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
2175
2237
|
* */
|
|
2176
2238
|
after(element, content) {
|
|
2177
2239
|
if (typeof element === "string") {
|
|
2178
|
-
element =
|
|
2240
|
+
element = this.selector(element);
|
|
2179
2241
|
}
|
|
2180
2242
|
if (element == null) {
|
|
2181
2243
|
return;
|
|
@@ -5826,7 +5888,7 @@ const PopsIframe = {
|
|
|
5826
5888
|
*/
|
|
5827
5889
|
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
5828
5890
|
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);
|
|
5829
|
-
let $iframeContainer =
|
|
5891
|
+
let $iframeContainer = popsDOMUtils.selector(".pops-iframe-container");
|
|
5830
5892
|
if (!$iframeContainer) {
|
|
5831
5893
|
$iframeContainer = popsDOMUtils.createElement("div", {
|
|
5832
5894
|
className: "pops-iframe-container",
|
|
@@ -13304,7 +13366,7 @@ const PopsSearchSuggestion = {
|
|
|
13304
13366
|
},
|
|
13305
13367
|
};
|
|
13306
13368
|
|
|
13307
|
-
const version = "3.3.
|
|
13369
|
+
const version = "3.3.3";
|
|
13308
13370
|
|
|
13309
13371
|
class Pops {
|
|
13310
13372
|
/** 配置 */
|