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