@plannotator/web-highlighter 0.8.0

package/src/util/const.ts

@@ -0,0 +1,54 @@
+/**
+ * all constants
+ * cSpell:ignore mengshou
+ */
+
+import type HighlightSource from '@src/model/source';
+import type { ERROR } from '@src/types';
+import camel from '@src/util/camel';
+import EventEmitter from '@src/util/event.emitter';
+
+export const ID_DIVISION = ';';
+export const LOCAL_STORE_KEY = 'highlight-mengshou';
+export const STYLESHEET_ID = 'highlight-mengshou-style';
+
+export const DATASET_IDENTIFIER = 'highlight-id';
+export const DATASET_IDENTIFIER_EXTRA = 'highlight-id-extra';
+export const DATASET_SPLIT_TYPE = 'highlight-split-type';
+export const CAMEL_DATASET_IDENTIFIER = camel(DATASET_IDENTIFIER);
+export const CAMEL_DATASET_IDENTIFIER_EXTRA = camel(DATASET_IDENTIFIER_EXTRA);
+export const CAMEL_DATASET_SPLIT_TYPE = camel(DATASET_SPLIT_TYPE);
+
+const DEFAULT_WRAP_TAG = 'span';
+
+export const getDefaultOptions = () => ({
+    $root: document || document.documentElement,
+    exceptSelectors: null,
+    wrapTag: DEFAULT_WRAP_TAG,
+    verbose: false,
+    style: {
+        className: 'highlight-mengshou-wrap',
+    },
+});
+
+export const getStylesheet = () => `
+    .${getDefaultOptions().style.className} {
+        background: #ff9;
+        cursor: pointer;
+    }
+    .${getDefaultOptions().style.className}.active {
+        background: #ffb;
+    }
+`;
+
+export const ROOT_IDX = -2;
+export const UNKNOWN_IDX = -1;
+export const INTERNAL_ERROR_EVENT = 'error';
+
+interface EventHandlerMap {
+    [key: string]: (...args: any[]) => void;
+    error: (data: { type: ERROR; detail?: HighlightSource; error?: any }) => void;
+}
+class ErrorEventEmitter extends EventEmitter<EventHandlerMap> {}
+
+export const eventEmitter = new ErrorEventEmitter();

package/src/util/deferred.ts

@@ -0,0 +1,37 @@
+interface Deferred<T> {
+    promise: Promise<T>;
+    resolve: (args: T) => unknown;
+    reject: (e?: unknown) => unknown;
+}
+
+export default function getDeferred<T>(): Deferred<T> {
+    let resolve: (args: T) => unknown;
+    let reject: (e?: unknown) => unknown;
+
+    const promise = new Promise<T>((r, j) => {
+        resolve = r;
+        reject = j;
+    });
+
+    return {
+        promise,
+        resolve,
+        reject,
+    };
+}
+
+export const resolve = <T>(data: T) => {
+    const defer = getDeferred<T>();
+
+    defer.resolve(data);
+
+    return defer.promise;
+};
+
+export const reject = <T>(data: T) => {
+    const defer = getDeferred<T>();
+
+    defer.reject(data);
+
+    return defer.promise;
+};

package/src/util/dom.ts

@@ -0,0 +1,155 @@
+import type { RootElement } from '@src/types';
+import {
+    ID_DIVISION,
+    DATASET_IDENTIFIER,
+    CAMEL_DATASET_IDENTIFIER,
+    CAMEL_DATASET_IDENTIFIER_EXTRA,
+} from '@src/util/const';
+
+/**
+ * whether a wrapper node
+ */
+export const isHighlightWrapNode = ($node: HTMLElement): boolean =>
+    !!$node.dataset && !!$node.dataset[CAMEL_DATASET_IDENTIFIER];
+
+/**
+ * ===================================================================================
+ * below methods (getHighlightId/getExtraHighlightId)
+ * will check whether the node is inside a wrapper iteratively util reach the root node
+ * if the node is not inside the root, the id must be empty
+ * ====================================================================================
+ */
+
+const findAncestorWrapperInRoot = ($node: HTMLElement, $root: RootElement): HTMLElement => {
+    let isInsideRoot = false;
+    let $wrapper: HTMLElement = null;
+
+    while ($node) {
+        if (isHighlightWrapNode($node)) {
+            $wrapper = $node;
+        }
+
+        if ($node === $root) {
+            isInsideRoot = true;
+            break;
+        }
+
+        $node = $node.parentNode as HTMLElement;
+    }
+
+    return isInsideRoot ? $wrapper : null;
+};
+
+/**
+ * get highlight id by a node
+ */
+export const getHighlightId = ($node: HTMLElement, $root: RootElement): string => {
+    $node = findAncestorWrapperInRoot($node, $root);
+
+    if (!$node) {
+        return '';
+    }
+
+    return $node.dataset[CAMEL_DATASET_IDENTIFIER];
+};
+
+/**
+ * get extra highlight id by a node
+ */
+export const getExtraHighlightId = ($node: HTMLElement, $root: RootElement): string[] => {
+    $node = findAncestorWrapperInRoot($node, $root);
+
+    if (!$node) {
+        return [];
+    }
+
+    return $node.dataset[CAMEL_DATASET_IDENTIFIER_EXTRA].split(ID_DIVISION).filter(i => i);
+};
+
+/**
+ * get all highlight wrapping nodes nodes from a root node
+ */
+export const getHighlightsByRoot = ($roots: RootElement | RootElement[], wrapTag: string): HTMLElement[] => {
+    if (!Array.isArray($roots)) {
+        $roots = [$roots];
+    }
+
+    const $wraps: HTMLElement[] = [];
+
+    for (const $r of $roots) {
+        const $list = $r.querySelectorAll<HTMLElement>(`${wrapTag}[data-${DATASET_IDENTIFIER}]`);
+
+        // eslint-disable-next-line prefer-spread
+        $wraps.push.apply($wraps, $list);
+    }
+
+    return $wraps;
+};
+
+/**
+ * get all highlight wrapping nodes by highlight id from a root node
+ */
+export const getHighlightById = ($root: RootElement, id: string, wrapTag: string): HTMLElement[] => {
+    const $highlights: HTMLElement[] = [];
+    const reg = new RegExp(`(${id}\\${ID_DIVISION}|\\${ID_DIVISION}?${id}$)`);
+    const $list = $root.querySelectorAll<HTMLElement>(`${wrapTag}[data-${DATASET_IDENTIFIER}]`);
+
+    for (const $l of $list) {
+        const $n = $l;
+        const nid = $n.dataset[CAMEL_DATASET_IDENTIFIER];
+
+        if (nid === id) {
+            $highlights.push($n);
+            continue;
+        }
+
+        const extraId = $n.dataset[CAMEL_DATASET_IDENTIFIER_EXTRA];
+
+        if (reg.test(extraId)) {
+            $highlights.push($n);
+            continue;
+        }
+    }
+
+    return $highlights;
+};
+
+export const forEach = ($nodes: NodeList, cb: (n: Node, idx: number, s: NodeList) => void): void => {
+    for (let i = 0; i < $nodes.length; i++) {
+        cb($nodes[i], i, $nodes);
+    }
+};
+
+export const removeEventListener = ($el: RootElement, evt: string, fn: EventListenerOrEventListenerObject) => {
+    $el.removeEventListener(evt, fn);
+};
+
+/**
+ * maybe be need some polyfill methods later
+ * provide unified dom methods for compatibility
+ */
+export const addEventListener = ($el: RootElement, evt: string, fn: EventListenerOrEventListenerObject) => {
+    $el.addEventListener(evt, fn);
+
+    return () => {
+        removeEventListener($el, evt, fn);
+    };
+};
+
+export const addClass = ($el: HTMLElement, className: string[] | string) => {
+    if (!Array.isArray(className)) {
+        className = [className];
+    }
+
+    $el.classList.add(...className);
+};
+
+export const removeClass = ($el: HTMLElement, className: string): void => {
+    $el.classList.remove(className);
+};
+
+export const removeAllClass = ($el: HTMLElement): void => {
+    $el.className = '';
+};
+
+export const hasClass = ($el: HTMLElement, className: string): boolean => $el.classList.contains(className);

package/src/util/event.emitter.ts

@@ -0,0 +1,45 @@
+/**
+ * tiny event emitter
+ * modify from mitt
+ */
+
+type EventHandler = (...data: unknown[]) => void;
+
+type EventMap = Record<string, EventHandler>;
+type HandlersMap<T extends EventMap> = {
+    [K in keyof T]: T[K][];
+};
+
+class EventEmitter<U extends EventMap = EventMap> {
+    private handlersMap: HandlersMap<U> = Object.create(null);
+
+    on<T extends keyof U>(type: T, handler: U[T]) {
+        if (!this.handlersMap[type]) {
+            this.handlersMap[type] = [];
+        }
+
+        this.handlersMap[type].push(handler);
+
+        return this;
+    }
+
+    off<T extends keyof U>(type: T, handler: U[T]) {
+        if (this.handlersMap[type]) {
+            this.handlersMap[type].splice(this.handlersMap[type].indexOf(handler) >>> 0, 1);
+        }
+
+        return this;
+    }
+
+    emit<T extends keyof U>(type: T, ...data: Parameters<U[T]>) {
+        if (this.handlersMap[type]) {
+            this.handlersMap[type].slice().forEach(handler => {
+                handler(...data);
+            });
+        }
+
+        return this;
+    }
+}
+
+export default EventEmitter;

package/src/util/hook.ts

@@ -0,0 +1,52 @@
+/**
+ * simple hook
+ * webpack-plugin-liked api
+ */
+
+type HookCallback<T> = (...args: unknown[]) => T;
+
+class Hook<T = unknown> {
+    name = '';
+
+    private readonly ops: HookCallback<T>[] = [];
+
+    constructor(name?) {
+        this.name = name;
+    }
+
+    tap(cb: HookCallback<T>) {
+        if (this.ops.indexOf(cb) === -1) {
+            this.ops.push(cb);
+        }
+
+        return () => {
+            this.remove(cb);
+        };
+    }
+
+    remove(cb: HookCallback<T>) {
+        const idx = this.ops.indexOf(cb);
+
+        if (idx < 0) {
+            return;
+        }
+
+        this.ops.splice(idx, 1);
+    }
+
+    isEmpty() {
+        return this.ops.length === 0;
+    }
+
+    call(...args: unknown[]) {
+        let ret: T;
+
+        this.ops.forEach(op => {
+            ret = op(...args);
+        });
+
+        return ret;
+    }
+}
+
+export default Hook;

package/src/util/interaction.ts

@@ -0,0 +1,20 @@
+/**
+ * adapter for mobile and desktop events
+ */
+
+import type { IInteraction } from '@src/types';
+import { UserInputEvent } from '@src/types';
+import detectMobile from '@src/util/is.mobile';
+
+export default (): IInteraction => {
+    const isMobile = detectMobile(window.navigator.userAgent);
+
+    const interaction: IInteraction = {
+        PointerEnd: isMobile ? UserInputEvent.touchend : UserInputEvent.mouseup,
+        PointerTap: isMobile ? UserInputEvent.touchstart : UserInputEvent.click,
+        // hover and click will be the same event in mobile
+        PointerOver: isMobile ? UserInputEvent.touchstart : UserInputEvent.mouseover,
+    };
+
+    return interaction;
+};

package/src/util/is.mobile.ts

@@ -0,0 +1,7 @@
+/**
+ * is mobile device?
+ */
+
+const regMobile = /Android|iPhone|BlackBerry|BB10|Opera Mini|Phone|Mobile|Silk|Windows Phone|Mobile(?:.+)Firefox\b/i;
+
+export default (userAgent: string) => regMobile.test(userAgent);

package/src/util/tool.ts

@@ -0,0 +1,14 @@
+/**
+ * support IE 10
+ */
+export const unique = <T>(arr: T[]): T[] => {
+    const res: T[] = [];
+
+    for (const el of arr) {
+        if (res.indexOf(el) === -1) {
+            res.push(el);
+        }
+    }
+
+    return res;
+};

package/src/util/uuid.ts

@@ -0,0 +1,10 @@
+/**
+ * generate UUID
+ */
+
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
+export default function createUUID(a?): string {
+    return a
+        ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)
+        : (([1e7] as unknown as string) + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, createUUID);
+}