@whitesev/domutils 1.2.0 → 1.3.1

package/src/DOMUtilsEvent.ts

@@ -1,7 +1,7 @@
 import { DOMUtilsCommonUtils } from "./DOMUtilsCommonUtils";
-import { DOMUtilsCore } from "./DOMUtilsCore";
 import { DOMUtilsData } from "./DOMUtilsData";
 import { OriginPrototype } from "./DOMUtilsOriginPrototype";
+import { UtilsWindowApiOption, WindowApi } from "./WindowApi";
 
 export type DOMUtilsEventObject<T extends Node> = Event & {
 	target: T;
@@ -242,7 +242,11 @@ export declare type DOMUtilsElementEventType =
 	| ChildNode
 	| Node;
 
-class DOMUtilsEvent {
+export class DOMUtilsEvent {
+	windowApi: UtilsWindowApiOption;
+	constructor(windowApiOption?: UtilsWindowApiOption) {
+		this.windowApi = new WindowApi(windowApiOption);
+	}
 	/**
 	 * 绑定事件
 	 * @param element 需要绑定的元素|元素数组|window
@@ -404,7 +408,7 @@ class DOMUtilsEvent {
 		let DOMUtilsContext = this;
 		let args = arguments;
 		if (typeof element === "string") {
-			element = DOMUtilsCore.document.querySelectorAll(element);
+			element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
 		}
 		if (element == null) {
 			return;
@@ -459,7 +463,7 @@ class DOMUtilsEvent {
 				if (_selector_) {
 					/* 存在自定义子元素选择器 */
 					let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
-						? DOMUtilsCore.document.documentElement
+						? DOMUtilsContext.windowApi.document.documentElement
 						: elementItem;
 					if (target.matches(_selector_)) {
 						/* 当前目标可以被selector所匹配到 */
@@ -658,10 +662,10 @@ class DOMUtilsEvent {
 			}
 			return option;
 		}
-
+		let DOMUtilsContext = this;
 		let args = arguments;
 		if (typeof element === "string") {
-			element = DOMUtilsCore.document.querySelectorAll(element);
+			element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
 		}
 		if (element == null) {
 			return;
@@ -768,8 +772,9 @@ class DOMUtilsEvent {
 		element: DOMUtilsElementEventType,
 		eventType?: DOMUtils_EventType | DOMUtils_EventType[] | string
 	) {
+		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsCore.document.querySelectorAll(element);
+			element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
 		}
 		if (element == null) {
 			return;
@@ -827,15 +832,17 @@ class DOMUtilsEvent {
 		if (typeof callback !== "function") {
 			return;
 		}
+		let DOMUtilsContext = this;
 		/**
 		 * 检测文档是否加载完毕
 		 */
 		function checkDOMReadyState() {
 			try {
 				if (
-					DOMUtilsCore.document.readyState === "complete" ||
-					(DOMUtilsCore.document.readyState !== "loading" &&
-						!(DOMUtilsCore.document.documentElement as any).doScroll)
+					DOMUtilsContext.windowApi.document.readyState === "complete" ||
+					(DOMUtilsContext.windowApi.document.readyState !== "loading" &&
+						!(DOMUtilsContext.windowApi.document.documentElement as any)
+							.doScroll)
 				) {
 					return true;
 				} else {
@@ -855,12 +862,12 @@ class DOMUtilsEvent {
 
 		let targetList = [
 			{
-				target: DOMUtilsCore.document,
+				target: DOMUtilsContext.windowApi.document,
 				eventType: "DOMContentLoaded",
 				callback: completed,
 			},
 			{
-				target: DOMUtilsCore.window,
+				target: DOMUtilsContext.windowApi.window,
 				eventType: "load",
 				callback: completed,
 			},
@@ -951,8 +958,11 @@ class DOMUtilsEvent {
 		details?: object,
 		useDispatchToTriggerEvent: boolean = true
 	) {
+		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsCore.document.querySelector(element) as HTMLElement;
+			element = DOMUtilsContext.windowApi.document.querySelector(
+				element
+			) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1019,7 +1029,9 @@ class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsCore.document.querySelector(element) as HTMLElement;
+			element = DOMUtilsContext.windowApi.document.querySelector(
+				element
+			) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1057,7 +1069,9 @@ class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsCore.document.querySelector(element) as HTMLElement;
+			element = DOMUtilsContext.windowApi.document.querySelector(
+				element
+			) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1100,7 +1114,9 @@ class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsCore.document.querySelector(element) as HTMLElement;
+			element = DOMUtilsContext.windowApi.document.querySelector(
+				element
+			) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1137,7 +1153,9 @@ class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsCore.document.querySelector(element) as HTMLElement;
+			element = DOMUtilsContext.windowApi.document.querySelector(
+				element
+			) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1170,7 +1188,9 @@ class DOMUtilsEvent {
 			return;
 		}
 		if (typeof target === "string") {
-			target = DOMUtilsCore.document.querySelector(target) as HTMLElement;
+			target = DOMUtilsContext.windowApi.document.querySelector(
+				target
+			) as HTMLElement;
 		}
 		DOMUtilsContext.on(target, "keyup", null, handler, option);
 	}
@@ -1199,7 +1219,9 @@ class DOMUtilsEvent {
 			return;
 		}
 		if (typeof target === "string") {
-			target = DOMUtilsCore.document.querySelector(target) as HTMLElement;
+			target = DOMUtilsContext.windowApi.document.querySelector(
+				target
+			) as HTMLElement;
 		}
 		DOMUtilsContext.on(target, "keydown", null, handler, option);
 	}
@@ -1228,10 +1250,114 @@ class DOMUtilsEvent {
 			return;
 		}
 		if (typeof target === "string") {
-			target = DOMUtilsCore.document.querySelector(target) as HTMLElement;
+			target = DOMUtilsContext.windowApi.document.querySelector(
+				target
+			) as HTMLElement;
 		}
 		DOMUtilsContext.on(target, "keypress", null, handler, option);
 	}
-}
 
-export { DOMUtilsEvent };
+	/**
+     * 监听某个元素键盘按键事件或window全局按键事件
+     * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
+     * @param target 需要监听的对象，可以是全局Window或者某个元素
+     * @param eventName 事件名，默认keypress
+     * @param callback 自己定义的回调事件，参数1为当前的key，参数2为组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
+	 * @param options 监听事件的配置
+     * @example 
+        Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
+            if(keyName === "Enter"){
+                console.log("回车按键的值是："+keyValue)
+            }
+            if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
+                console.log("Ctrl和回车键");
+          }
+        })
+     * @example
+    字母和数字键的键码值(keyCode)
+      按键	键码	按键	键码	按键	键码	按键	键码
+      A	65	J	74	S	83	1	49
+      B	66	K	75	T	84	2	50
+      C	67	L	76	U	85	3	51
+      D	68	M	77	V	86	4	52
+      E	69	N	78	W	87	5	53
+      F	70	O	79	X	88	6	54
+      G	71	P	80	Y	89	7	55
+      H	72	Q	81	Z	90	8	56
+      I	73	R	82	0	48	9	57
+  
+      数字键盘上的键的键码值(keyCode)	
+      功能键键码值(keyCode)
+      按键	键码	按键  	键码	按键	键码	按键	键码
+      0	96	8	104	F1	112	F7	118
+      1	97	9	105	F2	113	F8	119
+      2	98	*	106	F3	114	F9	120
+      3	99	+	107	F4	115	F10	121
+      4	100	Enter	108	F5	116	F11	122
+      5	101	-	109	F6	117	F12	123
+      6	102	.	110	 	 	 	 
+      7	103	/	111	 	 
+      
+      控制键键码值(keyCode)
+      按键		键码	按键		键码	按键		键码	按键		键码
+      BackSpace	8	Esc		27	→		39	-_		189
+      Tab		9	Spacebar	32	↓		40	.>		190
+      Clear		12	Page Up		33	Insert		45	/?		191
+      Enter		13	Page Down	34	Delete		46	`~		192
+      Shift		16	End		35	Num Lock	144	[{		219
+      Control		17	Home		36	;:		186	\|		220
+      Alt		18	←		37	=+		187	]}		221
+      Cape Lock	20	↑		38	,<		188	'"		222
+  
+      多媒体键码值(keyCode)
+      按键		键码
+      音量加		175
+      音量减		174
+      停止		179
+      静音		173
+      浏览器		172
+      邮件		180
+      搜索		170
+      收藏		171
+     **/
+	listenKeyboard(
+		target: Window | Node | HTMLElement | typeof globalThis,
+		eventName: "keyup" | "keypress" | "keydown" = "keypress",
+		callback: (
+			keyName: string,
+			keyValue: string,
+			otherCodeList: string[],
+			event: KeyboardEvent
+		) => void,
+		options?: AddEventListenerOptions | boolean
+	): {
+		removeListen(): void;
+	} {
+		let keyboardEventCallBack = function (event: KeyboardEvent) {
+			let keyName = event.key || event.code;
+			let keyValue = event.charCode || event.keyCode || event.which;
+			let otherCodeList = [];
+			if (event.ctrlKey) {
+				otherCodeList.push("ctrl");
+			}
+			if (event.altKey) {
+				otherCodeList.push("alt");
+			}
+			if (event.metaKey) {
+				otherCodeList.push("meta");
+			}
+			if (event.shiftKey) {
+				otherCodeList.push("shift");
+			}
+			if (typeof callback === "function") {
+				callback(keyName, keyValue.toString(), otherCodeList, event);
+			}
+		};
+		this.on(target, eventName, keyboardEventCallBack as any, options);
+		return {
+			removeListen: () => {
+				this.off(target, eventName, keyboardEventCallBack, options);
+			},
+		};
+	}
+}

package/src/WindowApi.ts

@@ -0,0 +1,44 @@
+/**
+ * 配置类型
+ */
+export type UtilsWindowApiOption = {
+	document: Document;
+	window: Window & typeof globalThis;
+	globalThis: typeof globalThis | Window;
+	self: Window & typeof globalThis;
+	top: Window;
+};
+
+export class WindowApi {
+	/** 默认的配置 */
+	private defaultApi: UtilsWindowApiOption = {
+		document: document,
+		window: window,
+		globalThis: globalThis,
+		self: self,
+		top: top!,
+	};
+	/** 使用的配置 */
+	private api: UtilsWindowApiOption;
+	constructor(option?: UtilsWindowApiOption) {
+		if (!option) {
+			option = Object.assign({}, this.defaultApi);
+		}
+		this.api = Object.assign({}, option);
+	}
+	get document() {
+		return this.api.document;
+	}
+	get window() {
+		return this.api.window;
+	}
+	get globalThis() {
+		return this.api.globalThis;
+	}
+	get self() {
+		return this.api.self;
+	}
+	get top() {
+		return this.api.top;
+	}
+}

package/dist/types/src/DOMUtilsCore.d.ts

@@ -1,15 +0,0 @@
-export interface DOMUtilsCoreOption {
-    document: Document;
-    window: Window | typeof globalThis;
-    globalThis: Window | typeof globalThis;
-    self: Window | typeof globalThis;
-    top: Window | typeof globalThis;
-}
-declare const DOMUtilsCore: {
-    init(option?: DOMUtilsCoreOption): void;
-    readonly document: Document;
-    readonly window: typeof globalThis | Window;
-    readonly globalThis: typeof globalThis | Window;
-    readonly self: typeof globalThis | Window;
-};
-export { DOMUtilsCore };

package/src/DOMUtilsCore.ts

@@ -1,45 +0,0 @@
-export interface DOMUtilsCoreOption {
-	document: Document;
-	window: Window | typeof globalThis;
-	globalThis: Window | typeof globalThis;
-	self: Window | typeof globalThis;
-	top: Window | typeof globalThis;
-}
-
-const DOMUtilsCoreDefaultEnv: DOMUtilsCoreOption = {
-	document: document,
-	window: window,
-	globalThis: globalThis,
-	self: self,
-	top: top!,
-};
-const DOMUtilsCoreEnv: DOMUtilsCoreOption = {
-	document: document,
-	window: window,
-	globalThis: globalThis,
-	self: self,
-	top: top!,
-};
-
-const DOMUtilsCore = {
-	init(option?: DOMUtilsCoreOption) {
-		if (!option) {
-			option = Object.assign({}, DOMUtilsCoreDefaultEnv);
-		}
-		Object.assign(DOMUtilsCoreEnv, option);
-	},
-	get document() {
-		return DOMUtilsCoreEnv.document;
-	},
-	get window() {
-		return DOMUtilsCoreEnv.window;
-	},
-	get globalThis() {
-		return DOMUtilsCoreEnv.globalThis;
-	},
-	get self() {
-		return DOMUtilsCoreEnv.self;
-	},
-};
-
-export { DOMUtilsCore };