From 2d8d4b0c19bc98193e13af02f6b8369e3ddb6d51 Mon Sep 17 00:00:00 2001 From: Yanzhen Yu Date: Sun, 14 Apr 2019 16:11:37 +0800 Subject: [PATCH] fix #62 accept RegExp type block class config --- package.json | 2 +- src/record/observer.ts | 9 +++++---- src/types.ts | 6 ++++-- src/utils.ts | 18 +++++++++++++----- typings/types.d.ts | 5 +++-- typings/utils.d.ts | 4 ++-- 6 files changed, 28 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index ccd37afcd3..2ec2bf61e6 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "dependencies": { "@types/smoothscroll-polyfill": "^0.3.0", "mitt": "^1.1.3", - "rrweb-snapshot": "^0.7.6", + "rrweb-snapshot": "^0.7.8", "smoothscroll-polyfill": "^0.4.3" } } diff --git a/src/record/observer.ts b/src/record/observer.ts index 41d6604bf4..86be84bd08 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -26,6 +26,7 @@ import { hookResetter, textCursor, attributeCursor, + blockClass, } from '../types'; import { deepDelete, isParentRemoved, isParentDropped } from './collection'; @@ -48,7 +49,7 @@ import { deepDelete, isParentRemoved, isParentDropped } from './collection'; */ function initMutationObserver( cb: mutationCallBack, - blockClass: string, + blockClass: blockClass, ): MutationObserver { const observer = new MutationObserver(mutations => { const texts: textCursor[] = []; @@ -242,7 +243,7 @@ function initMousemoveObserver(cb: mousemoveCallBack): listenerHandler { function initMouseInteractionObserver( cb: mouseInteractionCallBack, - blockClass: string, + blockClass: blockClass, ): listenerHandler { const handlers: listenerHandler[] = []; const getHandler = (eventKey: keyof typeof MouseInteractions) => { @@ -274,7 +275,7 @@ function initMouseInteractionObserver( function initScrollObserver( cb: scrollCallback, - blockClass: string, + blockClass: blockClass, ): listenerHandler { const updatePosition = throttle(evt => { if (!evt.target || isBlocked(evt.target as Node, blockClass)) { @@ -317,7 +318,7 @@ const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT']; const lastInputValueMap: WeakMap = new WeakMap(); function initInputObserver( cb: inputCallback, - blockClass: string, + blockClass: blockClass, ignoreClass: string, ): listenerHandler { function eventHandler(event: Event) { diff --git a/src/types.ts b/src/types.ts index b04256411e..a17c3986b7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -98,11 +98,13 @@ export type eventWithTime = event & { delay?: number; }; +export type blockClass = string | RegExp; + export type recordOptions = { emit?: (e: eventWithTime, isCheckout?: boolean) => void; checkoutEveryNth?: number; checkoutEveryNms?: number; - blockClass?: string; + blockClass?: blockClass; ignoreClass?: string; }; @@ -113,7 +115,7 @@ export type observerParam = { scrollCb: scrollCallback; viewportResizeCb: viewportResizeCallback; inputCb: inputCallback; - blockClass: string; + blockClass: blockClass; ignoreClass: string; }; diff --git a/src/utils.ts b/src/utils.ts index ccea379360..1d0e9ba1e3 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -3,6 +3,7 @@ import { throttleOptions, listenerHandler, hookResetter, + blockClass, } from './types'; import { INode } from 'rrweb-snapshot'; @@ -113,15 +114,22 @@ export function getWindowWidth(): number { ); } -export function isBlocked(node: Node | null, blockClass: string): boolean { +export function isBlocked(node: Node | null, blockClass: blockClass): boolean { if (!node) { return false; } if (node.nodeType === node.ELEMENT_NODE) { - return ( - (node as HTMLElement).classList.contains(blockClass) || - isBlocked(node.parentNode, blockClass) - ); + let needBlock = false; + if (typeof blockClass === 'string') { + needBlock = (node as HTMLElement).classList.contains(blockClass); + } else { + (node as HTMLElement).classList.forEach(className => { + if (blockClass.test(className)) { + needBlock = true; + } + }); + } + return needBlock || isBlocked(node.parentNode, blockClass); } return isBlocked(node.parentNode, blockClass); } diff --git a/typings/types.d.ts b/typings/types.d.ts index 17f8fabee2..a26ed99b48 100644 --- a/typings/types.d.ts +++ b/typings/types.d.ts @@ -70,11 +70,12 @@ export declare type eventWithTime = event & { timestamp: number; delay?: number; }; +export declare type blockClass = string | RegExp; export declare type recordOptions = { emit?: (e: eventWithTime, isCheckout?: boolean) => void; checkoutEveryNth?: number; checkoutEveryNms?: number; - blockClass?: string; + blockClass?: blockClass; ignoreClass?: string; }; export declare type observerParam = { @@ -84,7 +85,7 @@ export declare type observerParam = { scrollCb: scrollCallback; viewportResizeCb: viewportResizeCallback; inputCb: inputCallback; - blockClass: string; + blockClass: blockClass; ignoreClass: string; }; export declare type textCursor = { diff --git a/typings/utils.d.ts b/typings/utils.d.ts index ea0c66b7cd..282376f5fe 100644 --- a/typings/utils.d.ts +++ b/typings/utils.d.ts @@ -1,4 +1,4 @@ -import { Mirror, throttleOptions, listenerHandler, hookResetter } from './types'; +import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass } from './types'; import { INode } from 'rrweb-snapshot'; export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | Window): listenerHandler; export declare const mirror: Mirror; @@ -6,5 +6,5 @@ export declare function throttle(func: (arg: T) => void, wait: number, option export declare function hookSetter(target: T, key: string | number | symbol, d: PropertyDescriptor): hookResetter; export declare function getWindowHeight(): number; export declare function getWindowWidth(): number; -export declare function isBlocked(node: Node | null, blockClass: string): boolean; +export declare function isBlocked(node: Node | null, blockClass: blockClass): boolean; export declare function isAncestorRemoved(target: INode): boolean;