@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.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 = PopsCore.document.querySelector(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 = PopsCore.document.querySelector(element);
1096
+ element = this.selector(element);
1091
1097
  }
1092
1098
  if (element == null) {
1093
1099
  return;
1094
1100
  }
1095
1101
  if (handler == null) {
1096
- DOMUtilsContext.emit(element, "click", details, useDispatchToEmitEvent);
1102
+ this.emit(element, "click", details, useDispatchToEmitEvent);
1097
1103
  }
1098
1104
  else {
1099
- DOMUtilsContext.on(element, "click", null, handler);
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 = PopsCore.document.querySelector(element);
1125
+ element = this.selector(element);
1120
1126
  }
1121
1127
  if (element == null) {
1122
1128
  return;
1123
1129
  }
1124
1130
  if (handler === null) {
1125
- DOMUtilsContext.emit(element, "blur", details, useDispatchToEmitEvent);
1131
+ this.emit(element, "blur", details, useDispatchToEmitEvent);
1126
1132
  }
1127
1133
  else {
1128
- DOMUtilsContext.on(element, "blur", null, handler);
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 = PopsCore.document.querySelector(element);
1154
+ element = this.selector(element);
1149
1155
  }
1150
1156
  if (element == null) {
1151
1157
  return;
1152
1158
  }
1153
1159
  if (handler == null) {
1154
- DOMUtilsContext.emit(element, "focus", details, useDispatchToEmitEvent);
1160
+ this.emit(element, "focus", details, useDispatchToEmitEvent);
1155
1161
  }
1156
1162
  else {
1157
- DOMUtilsContext.on(element, "focus", null, handler);
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 DOMUtilsContext = this;
1182
+ const that = this;
1176
1183
  if (typeof element === "string") {
1177
- element = PopsCore.document.querySelector(element);
1184
+ element = that.selectorAll(element);
1178
1185
  }
1179
1186
  if (element == null) {
1180
1187
  return;
1181
1188
  }
1182
- DOMUtilsContext.on(element, "mouseenter", null, handler, option);
1183
- DOMUtilsContext.on(element, "mouseleave", null, handler, option);
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 = PopsCore.document.querySelector(target);
1236
+ target = this.selector(target);
1207
1237
  }
1208
- DOMUtilsContext.on(target, "keyup", null, handler, option);
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 = PopsCore.document.querySelector(target);
1261
+ target = this.selector(target);
1232
1262
  }
1233
- DOMUtilsContext.on(target, "keydown", null, handler, option);
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 = PopsCore.document.querySelector(target);
1286
+ target = this.selector(target);
1257
1287
  }
1258
- DOMUtilsContext.on(target, "keypress", null, handler, option);
1288
+ const listener = this.on(target, "keypress", handler, option);
1289
+ return listener;
1259
1290
  }
1260
- preventEvent(element, eventNameList = [], capture) {
1261
- function stopEvent(event) {
1262
- // 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL
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 (arguments.length === 1) {
1306
+ };
1307
+ if (args[0] instanceof Event) {
1271
1308
  // 直接阻止事件
1272
- // eslint-disable-next-line prefer-rest-params
1273
- return stopEvent(arguments[0]);
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
- eventNameList.forEach((eventName) => {
1281
- this.on(element, eventName, stopEvent, { capture: Boolean(capture) });
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 = PopsCore.document.querySelector(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 = PopsCore.document.querySelector(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 = PopsCore.document.querySelector(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 = PopsCore.document.querySelector(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 = PopsCore.document.querySelector(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 = PopsCore.document.querySelector(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 = PopsCore.document.querySelector(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 = PopsCore.document.querySelector(".pops-iframe-container");
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.2";
13369
+ const version = "3.3.3";
13308
13370
 
13309
13371
  class Pops {
13310
13372
  /** 配置 */