alienzhou / web-highlighter / 67

pending completion

Build # 67

Build Type

Pull #40

travis-ci

Committed by

web-flow

Commit Message

<a href="https://github.com/alienzhou/web-highlighter/commit/<a class=hub.com/alienzhou/web-highlighter/commit/3912488be1c27cc09f38b54e3cd7c9423ed98c60">3912488be<a href="https://github.com/alienzhou/web-highlighter/commit/3912488be1c27cc09f38b54e3cd7c9423ed98c60">">Merge </a><a class="double-link" href="https://github.com/alienzhou/web-highlighter/commit/<a class="double-link" href="https://github.com/alienzhou/web-highlighter/commit/261d81f7dfb8f75bd75082fcde61016bcd060f95">261d81f7d</a>">261d81f7d</a><a href="https://github.com/alienzhou/web-highlighter/commit/3912488be1c27cc09f38b54e3cd7c9423ed98c60"> into d910c4c28">d910c4c28</a>

Pull Request Pull Request #40: Test

Run Details

197 of 224 branches covered (87.95%)

Branch coverage included in aggregate %.

57 of 57 new or added lines in 8 files covered. (100.0%)

599 of 622 relevant lines covered (96.3%)

76.56 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

95.8

/src/index.ts

// import '@src/util/dataset.polyfill';
import EventEmitter from '@src/util/event.emitter';
import HighlightRange from '@src/model/range';
import HighlightSource from '@src/model/source';
import uuid from '@src/util/uuid';
import Hook from '@src/util/hook';
import getInteraction from '@src/util/interaction';
import Cache from '@src/data/cache';
import Painter from '@src/painter';
import {
    eventEmitter,
    getDefaultOptions,
    INTERNAL_ERROR_EVENT
} from '@src/util/const';
import {
    ERROR,
    DomNode,
    DomMeta,
    HookMap,
    EventType,
    CreateFrom,
    HighlighterOptions
} from './types';
import {
    addClass,
    removeClass,
    isHighlightWrapNode,
    getHighlightById,
    getHighlightsByRoot,
    getHighlightId,
    addEventListener,
    removeEventListener
} from '@src/util/dom';

export default class Highlighter extends EventEmitter {
    static event = EventType;
    static isHighlightSource = (d: any) => {
        return !!d.__isHighlightSource;
    }
    static isHighlightWrapNode = isHighlightWrapNode;

    private _hoverId: string;
    private event = getInteraction();
    options: HighlighterOptions;
    hooks: HookMap;
    painter: Painter;
    cache: Cache;

    constructor(options?: HighlighterOptions) {
        super();
        this.options = getDefaultOptions();
        this.hooks = this._getHooks(); // initialize hooks
        this.setOption(options);
        this.cache = new Cache(); // initialize cache
        const $root = this.options.$root;
        addEventListener($root, this.event.PointerOver, this._handleHighlightHover); // initialize event listener
        addEventListener($root, this.event.PointerTap, this._handleHighlightClick); // initialize event listener
        eventEmitter.on(INTERNAL_ERROR_EVENT, this._handleError);
    }

    private _getHooks = (): HookMap => ({
        Render: {
            UUID: new Hook('Render.UUID'),
            SelectedNodes: new Hook('Render.SelectedNodes'),
            WrapNode: new Hook('Render.WrapNode')
        },
        Serialize: {
            RecordInfo: new Hook('Serialize.RecordInfo')
        },
        Remove: {
            UpdateNodes: new Hook('Remove.UpdateNodes')
        }
    });

    private _highlightFromHRange = (range: HighlightRange): HighlightSource => {
        const source: HighlightSource = range.serialize(this.options.$root, this.hooks);
        const $wraps = this.painter.highlightRange(range);
        if ($wraps.length === 0) {
            eventEmitter.emit(INTERNAL_ERROR_EVENT, {
                type: ERROR.DOM_SELECTION_EMPTY
            });
            return null;
        }
        this.cache.save(source);
        this.emit(EventType.CREATE, {sources: [source], type: CreateFrom.INPUT}, this);
        return source;
    }

    private _highlightFromHSource(sources: HighlightSource[] | HighlightSource = []) {
        const renderedSources: Array<HighlightSource> = this.painter.highlightSource(sources);;
        this.emit(EventType.CREATE, {sources: renderedSources, type: CreateFrom.STORE}, this);
        this.cache.save(sources);
    }

    private _handleSelection = (e?: Event) => {
        const range = HighlightRange.fromSelection(this.hooks.Render.UUID);
        if (range) {
            this._highlightFromHRange(range);
            HighlightRange.removeDomRange();
        }
    }

    private _handleHighlightHover = e => {
        const $target = e.target as HTMLElement;
        if (!isHighlightWrapNode($target)) {
            this._hoverId && this.emit(EventType.HOVER_OUT, {id: this._hoverId}, this, e);
            this._hoverId = null;
            return;
        }

        const id = getHighlightId($target);
        // prevent trigger in the same highlight range
        if (this._hoverId === id) {
            return;
        }

        // hover another highlight range, need to trigger previous highlight hover out event
        if (this._hoverId) {
            this.emit(EventType.HOVER_OUT, {id: this._hoverId}, this, e);
        }
        this._hoverId = id;
        this.emit(EventType.HOVER, {id: this._hoverId}, this, e);
    }

    private _handleError = (type: string, detail?) => {
        if(this.options.verbose) {
            console.warn(type);
        }
    }

    private _handleHighlightClick = (e): void => {
        const $target = e.target as HTMLElement;
        if (isHighlightWrapNode($target)) {
            const id = getHighlightId($target);
            this.emit(EventType.CLICK, {id}, this, e);
        }
    }

    run = () => addEventListener(this.options.$root, this.event.PointerEnd, this._handleSelection);
    stop = () => removeEventListener(this.options.$root, this.event.PointerEnd, this._handleSelection);

    addClass = (className: string, id?: string) => this.getDoms(id).forEach($n => addClass($n, className));
    removeClass = (className: string, id?: string) => this.getDoms(id).forEach($n => removeClass($n, className));

    getIdByDom = ($node: HTMLElement): string => getHighlightId($node);
    getDoms = (id?: string): Array<HTMLElement> => id
        ? getHighlightById(this.options.$root, id, this.options.wrapTag)
        : getHighlightsByRoot(this.options.$root, this.options.wrapTag);

    dispose = () => {
        const $root = this.options.$root;
        removeEventListener($root, this.event.PointerOver, this._handleHighlightHover);
        removeEventListener($root, this.event.PointerEnd, this._handleSelection);
        removeEventListener($root, this.event.PointerTap, this._handleHighlightClick);
        this.removeAll();
    }

    setOption = (options?: HighlighterOptions) => {
        this.options = {
            ...this.options,
            ...options
        };
        this.painter = new Painter({
            $root: this.options.$root,
            wrapTag: this.options.wrapTag,
            className: this.options.style.className,
            exceptSelectors: this.options.exceptSelectors
        }, this.hooks);
    }

    fromRange = (range: Range): HighlightSource => {
        const start: DomNode = {
            $node: range.startContainer,
            offset: range.startOffset
        };
        const end: DomNode = {
            $node: range.endContainer,
            offset: range.endOffset
        }

        const text = range.toString();
        let id = this.hooks.Render.UUID.call(start, end, text);
        id = id !== undefined && id !== null ? id : uuid();
        const hRange = new HighlightRange(start, end, text, id);
        if (!hRange) {
            eventEmitter.emit(INTERNAL_ERROR_EVENT, {
                type: ERROR.RANGE_INVALID
            });
            return null;
        }
        return this._highlightFromHRange(hRange);
    }

    fromStore = (start: DomMeta, end: DomMeta, text, id): HighlightSource => {
        try {
            const hs = new HighlightSource(start, end, text, id);
            this._highlightFromHSource(hs);
            return hs;
        }
        catch (err) {
            eventEmitter.emit(INTERNAL_ERROR_EVENT, {
                type: ERROR.HIGHLIGHT_SOURCE_RECREATE,
                detail: { err, id, text, start, end }
            });
            return null;
        }
    }

    remove(id: string) {
        if (!id) {
            return;
        }
        const doseExist = this.painter.removeHighlight(id);
        this.cache.remove(id);
        // only emit REMOVE event when highlight exist
        if (doseExist) {
            this.emit(EventType.REMOVE, {ids: [id]}, this);
        }
    }

    removeAll() {
        this.painter.removeAllHighlight();
        const ids = this.cache.removeAll();
        this.emit(EventType.REMOVE, {ids: ids}, this);
    }
}

1	// import '@src/util/dataset.polyfill';
2	import EventEmitter from '@src/util/event.emitter';	1✔
3	import HighlightRange from '@src/model/range';	1✔
4	import HighlightSource from '@src/model/source';	1✔
5	import uuid from '@src/util/uuid';	1✔
6	import Hook from '@src/util/hook';	1✔
7	import getInteraction from '@src/util/interaction';	1✔
8	import Cache from '@src/data/cache';	1✔
9	import Painter from '@src/painter';	1✔
10	import {	1✔
11	eventEmitter,
12	getDefaultOptions,
13	INTERNAL_ERROR_EVENT
14	} from '@src/util/const';
15	import {	1✔
16	ERROR,
17	DomNode,
18	DomMeta,
19	HookMap,
20	EventType,
21	CreateFrom,
22	HighlighterOptions
23	} from './types';
24	import {	1✔
25	addClass,
26	removeClass,
27	isHighlightWrapNode,
28	getHighlightById,
29	getHighlightsByRoot,
30	getHighlightId,
31	addEventListener,
32	removeEventListener
33	} from '@src/util/dom';
34
35	export default class Highlighter extends EventEmitter {	1✔
36	static event = EventType;	1✔
37	static isHighlightSource = (d: any) => {	1✔
38	return !!d.__isHighlightSource;	3✔
39	}
40	static isHighlightWrapNode = isHighlightWrapNode;	1✔
41
42	private _hoverId: string;
43	private event = getInteraction();	78✔
44	options: HighlighterOptions;
45	hooks: HookMap;
46	painter: Painter;
47	cache: Cache;
48
49	constructor(options?: HighlighterOptions) {
50	super();	78✔
51	this.options = getDefaultOptions();	78✔
52	this.hooks = this._getHooks(); // initialize hooks	78✔
53	this.setOption(options);	78✔
54	this.cache = new Cache(); // initialize cache	78✔
55	const $root = this.options.$root;	78✔
56	addEventListener($root, this.event.PointerOver, this._handleHighlightHover); // initialize event listener	78✔
57	addEventListener($root, this.event.PointerTap, this._handleHighlightClick); // initialize event listener	78✔
58	eventEmitter.on(INTERNAL_ERROR_EVENT, this._handleError);	78✔
59	}
60
61	private _getHooks = (): HookMap => ({	78✔
62	Render: {
63	UUID: new Hook('Render.UUID'),
64	SelectedNodes: new Hook('Render.SelectedNodes'),
65	WrapNode: new Hook('Render.WrapNode')
66	},
67	Serialize: {
68	RecordInfo: new Hook('Serialize.RecordInfo')
69	},
70	Remove: {
71	UpdateNodes: new Hook('Remove.UpdateNodes')
72	}
73	});
74
75	private _highlightFromHRange = (range: HighlightRange): HighlightSource => {	78✔
76	const source: HighlightSource = range.serialize(this.options.$root, this.hooks);	32✔
77	const $wraps = this.painter.highlightRange(range);	32✔
78	if ($wraps.length === 0) {	32✔
79	eventEmitter.emit(INTERNAL_ERROR_EVENT, {	6✔
80	type: ERROR.DOM_SELECTION_EMPTY
81	});
82	return null;	6✔
83	}
84	this.cache.save(source);	26✔
85	this.emit(EventType.CREATE, {sources: [source], type: CreateFrom.INPUT}, this);	26✔
86	return source;	26✔
87	}
88
89	private _highlightFromHSource(sources: HighlightSource[] \| HighlightSource = []) {	103!
90	const renderedSources: Array<HighlightSource> = this.painter.highlightSource(sources);;	103✔
91	this.emit(EventType.CREATE, {sources: renderedSources, type: CreateFrom.STORE}, this);	102✔
92	this.cache.save(sources);	102✔
93	}
94
95	private _handleSelection = (e?: Event) => {	78✔
96	const range = HighlightRange.fromSelection(this.hooks.Render.UUID);	5✔
97	if (range) {	5✔
98	this._highlightFromHRange(range);	4✔
99	HighlightRange.removeDomRange();	4✔
100	}
101	}
102
103	private _handleHighlightHover = e => {	78✔
104	const $target = e.target as HTMLElement;	12✔
105	if (!isHighlightWrapNode($target)) {	12✔
106	this._hoverId && this.emit(EventType.HOVER_OUT, {id: this._hoverId}, this, e);	2✔
107	this._hoverId = null;	2✔
108	return;	2✔
109	}
110
111	const id = getHighlightId($target);	10✔
112	// prevent trigger in the same highlight range
113	if (this._hoverId === id) {	10✔
114	return;	2✔
115	}
116
117	// hover another highlight range, need to trigger previous highlight hover out event
118	if (this._hoverId) {	8✔
119	this.emit(EventType.HOVER_OUT, {id: this._hoverId}, this, e);	1✔
120	}
121	this._hoverId = id;	8✔
122	this.emit(EventType.HOVER, {id: this._hoverId}, this, e);	8✔
123	}
124
125	private _handleError = (type: string, detail?) => {	78✔
126	if(this.options.verbose) {	396!
127	console.warn(type);	×
128	}
129	}
130
131	private _handleHighlightClick = (e): void => {	78✔
132	const $target = e.target as HTMLElement;	3✔
133	if (isHighlightWrapNode($target)) {	3✔
134	const id = getHighlightId($target);	2✔
135	this.emit(EventType.CLICK, {id}, this, e);	2✔
136	}
137	}
138
139	run = () => addEventListener(this.options.$root, this.event.PointerEnd, this._handleSelection);	78✔
140	stop = () => removeEventListener(this.options.$root, this.event.PointerEnd, this._handleSelection);	78✔
141
142	addClass = (className: string, id?: string) => this.getDoms(id).forEach($n => addClass($n, className));	78✔
143	removeClass = (className: string, id?: string) => this.getDoms(id).forEach($n => removeClass($n, className));	78✔
144
145	getIdByDom = ($node: HTMLElement): string => getHighlightId($node);	78✔
146	getDoms = (id?: string): Array<HTMLElement> => id	78✔
147	? getHighlightById(this.options.$root, id, this.options.wrapTag)	49✔
148	: getHighlightsByRoot(this.options.$root, this.options.wrapTag);
149
150	dispose = () => {	78✔
151	const $root = this.options.$root;	4✔
152	removeEventListener($root, this.event.PointerOver, this._handleHighlightHover);	4✔
153	removeEventListener($root, this.event.PointerEnd, this._handleSelection);	4✔
154	removeEventListener($root, this.event.PointerTap, this._handleHighlightClick);	4✔
155	this.removeAll();	4✔
156	}
157
158	setOption = (options?: HighlighterOptions) => {	78✔
159	this.options = {	78✔
160	...this.options,
161	...options
162	};
163	this.painter = new Painter({	78✔
164	$root: this.options.$root,
165	wrapTag: this.options.wrapTag,
166	className: this.options.style.className,
167	exceptSelectors: this.options.exceptSelectors
168	}, this.hooks);
169	}
170
171	fromRange = (range: Range): HighlightSource => {	78✔
172	const start: DomNode = {	28✔
173	$node: range.startContainer,
174	offset: range.startOffset
175	};
176	const end: DomNode = {	28✔
177	$node: range.endContainer,
178	offset: range.endOffset
179	}
180
181	const text = range.toString();	28✔
182	let id = this.hooks.Render.UUID.call(start, end, text);	28✔
183	id = id !== undefined && id !== null ? id : uuid();	28✔
184	const hRange = new HighlightRange(start, end, text, id);	28✔
185	if (!hRange) {	28!
186	eventEmitter.emit(INTERNAL_ERROR_EVENT, {	×
187	type: ERROR.RANGE_INVALID
188	});
189	return null;	×
190	}
191	return this._highlightFromHRange(hRange);	28✔
192	}
193
194	fromStore = (start: DomMeta, end: DomMeta, text, id): HighlightSource => {	78✔
195	try {	103✔
196	const hs = new HighlightSource(start, end, text, id);	103✔
197	this._highlightFromHSource(hs);	103✔
198	return hs;	102✔
199	}
200	catch (err) {
201	eventEmitter.emit(INTERNAL_ERROR_EVENT, {	1✔
202	type: ERROR.HIGHLIGHT_SOURCE_RECREATE,
203	detail: { err, id, text, start, end }
204	});
205	return null;	1✔
206	}
207	}
208
209	remove(id: string) {	1✔
210	if (!id) {	7✔
211	return;	1✔
212	}
213	const doseExist = this.painter.removeHighlight(id);	6✔
214	this.cache.remove(id);	6✔
215	// only emit REMOVE event when highlight exist
216	if (doseExist) {	6✔
217	this.emit(EventType.REMOVE, {ids: [id]}, this);	4✔
218	}
219	}
220
221	removeAll() {	1✔
222	this.painter.removeAllHighlight();	45✔
223	const ids = this.cache.removeAll();	45✔
224	this.emit(EventType.REMOVE, {ids: ids}, this);	45✔
225	}
226	}	1✔

alienzhou / web-highlighter / 67

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous