@gemx-dev/clarity-js 0.8.39

package/src/dynamic/agent/livechat.ts

@@ -0,0 +1,58 @@
+import {
+  Action,
+  Visibility,
+  Availability,
+  VisibilityEvent,
+  AvailabilityEvent,
+  NewEvent,
+  AuthorType,
+} from "@clarity-types/agent";
+import encode from "./encode";
+
+function visible(event: VisibilityEvent): void {
+  const visibility = event.visibility;
+  switch (visibility) {
+    case Visibility.Maximized:
+      encode(Action.AgentMaximized);
+      break;
+    case Visibility.Minimized:
+      encode(Action.AgentMinimized);
+      break;
+    case Visibility.Hidden:
+      encode(Action.AgentHidden);
+      break;
+  }
+}
+
+function avail(event: AvailabilityEvent): void {
+  const isOnline = event.availability === Availability.Online;
+  encode(isOnline ? Action.AgentOnline : Action.AgentOffline);
+}
+
+function message(event: NewEvent): void {
+  if (event.author.type === AuthorType.Agent) {
+    encode(Action.AgentMessage);
+  } else {
+    encode(Action.HumanMessage);
+  }
+}
+
+export function start(): void {
+  if (window.LiveChatWidget) {
+    window.LiveChatWidget.on("visibility_changed", visible);
+    window.LiveChatWidget.on("new_event", message);
+    window.LiveChatWidget.on("availability_changed", avail);
+  }
+  // Register stop callback with main Clarity
+  if (typeof window !== "undefined" && (window as any).clarity) {
+    (window as any).clarity("register", stop);
+  }
+}
+
+export function stop(): void {
+  if (window.LiveChatWidget) {
+    window.LiveChatWidget.off("visibility_changed", visible);
+    window.LiveChatWidget.off("availability_changed", avail);
+    window.LiveChatWidget.off("new_event", message);
+  }
+}

package/src/dynamic/agent/tidio.ts

@@ -0,0 +1,44 @@
+import { Action } from "@clarity-types/agent";
+import encode from "./encode";
+
+let isActive = false;
+
+function open() {
+  if (!isActive) return;
+  encode(Action.AgentMaximized);
+}
+
+function close() {
+  if (!isActive) return;
+  encode(Action.AgentMinimized);
+}
+
+function human() {
+  if (!isActive) return;
+  encode(Action.HumanMessage);
+}
+
+function agent() {
+  if (!isActive) return;
+  encode(Action.AgentMessage);
+}
+
+export function start(): void {
+  if (window.tidioChatApi) {
+    window.tidioChatApi.on("open", open);
+    window.tidioChatApi.on("close", close);
+    window.tidioChatApi.on("messageFromVisitor", human);
+    window.tidioChatApi.on("messageFromOperator", agent);
+    isActive = true;
+  }
+  // Register stop callback with main Clarity
+  if (typeof window !== "undefined" && (window as any).clarity) {
+    (window as any).clarity("register", stop);
+  }
+}
+
+export function stop(): void {
+  if (window.tidioChatApi) {
+    isActive = false;
+  }
+}

package/src/global.ts

@@ -0,0 +1,6 @@
+import * as queue from "@src/queue";
+
+// Process anything that was queued up before the script loaded
+(function(): void {
+    queue.process();
+})();

package/src/index.ts

@@ -0,0 +1,9 @@
+import * as clarity from "./clarity";
+import hash from "./core/hash";
+import * as selector from "./layout/selector";
+import { get, getNode, lookup } from "./layout/dom";
+
+const helper = { hash, selector, get, getNode, lookup };
+const version = clarity.version;
+
+export { clarity, version, helper };

package/src/insight/blank.ts

@@ -0,0 +1,14 @@
+export let state = [];
+export let sheetAdoptionState = [];
+export let sheetUpdateState = [];
+export let data = null;
+
+/* Intentionally blank module with empty code */
+
+export function start(): void {}
+export function reset(): void {}
+export function stop(): void {}
+export function log(): void {}
+export function observe(): void {}
+export function compute(): void {}
+export function checkDocumentStyles(_d: Document): void {}

package/src/insight/encode.ts

@@ -0,0 +1,61 @@
+import { Privacy } from "@clarity-types/core";
+import { Event, Token } from "@clarity-types/data";
+import { Constant, NodeInfo } from "@clarity-types/layout";
+import * as scrub from "@src/core/scrub";
+import { time } from "@src/core/time";
+import * as baseline from "@src/data/baseline";
+import tokenize from "@src/data/token";
+import { queue } from "@src/data/upload";
+import * as snapshot from "@src/insight/snapshot";
+import * as doc from "@src/layout/document";
+
+export default async function (type: Event): Promise<void> {
+    let eventTime = time()
+    let tokens: Token[] = [eventTime, type];
+    switch (type) {
+        case Event.Document:
+            let d = doc.data;
+            tokens.push(d.width);
+            tokens.push(d.height);
+            baseline.track(type, d.width, d.height);
+            queue(tokens);
+            break;
+        case Event.Snapshot:
+            let values = snapshot.values;
+            // Only encode and queue DOM updates if we have valid updates to report back
+            if (values.length > 0) {
+                for (let value of values) {
+                    let privacy = value.metadata.privacy;
+                    let data: NodeInfo = value.data;
+                    for (let key of ["tag", "attributes", "value"]) {
+                        if (data[key]) {
+                            switch (key) {
+                                case "tag":
+                                    tokens.push(value.id);
+                                    if (value.parent) { tokens.push(value.parent); }
+                                    if (value.previous) { tokens.push(value.previous); }
+                                    tokens.push(data[key]);
+                                    break;
+                                case "attributes":
+                                    for (let attr in data[key]) {
+                                        if (data[key][attr] !== undefined) {
+                                            tokens.push(attribute(attr, data[key][attr], privacy));
+                                        }
+                                    }
+                                    break;
+                                case "value":
+                                    tokens.push(scrub.text(data[key], data.tag, privacy));
+                                    break;
+                            }
+                        }
+                    }
+                }
+                queue(tokenize(tokens), true);
+            }
+            break;
+    }
+}
+
+function attribute(key: string, value: string, privacy: Privacy): string {
+    return `${key}=${scrub.text(value, key.indexOf(Constant.DataAttribute) === 0 ? Constant.DataAttribute : key, privacy)}`;
+}

package/src/insight/snapshot.ts

@@ -0,0 +1,115 @@
+import { OffsetDistance, Privacy } from "@clarity-types/core";
+import { Event } from "@clarity-types/data";
+import { Constant, NodeInfo, NodeValue, TargetMetadata } from "@clarity-types/layout";
+import * as doc from "@src/layout/document";
+import encode from "@src/insight/encode";
+import * as interaction from "@src/interaction";
+import config from "@src/core/config";
+export let values: NodeValue[] = [];
+let index: number = 1;
+let idMap: WeakMap<Node, number> = null; // Maps node => id.
+
+export function start(): void {
+    reset();
+    doc.start();
+    getId(document.documentElement); // Pre-discover ID for page root
+    interaction.observe(document);
+}
+
+export function stop(): void {
+    reset();
+    doc.stop();
+}
+
+export function compute(): void { /* Intentionally Blank */ }
+export function iframe(): boolean { return false; }
+export function offset(): OffsetDistance { return { x: 0, y: 0 }; }
+export function hashText(): void { /* Intentionally Blank */ }
+
+export function target(evt: UIEvent): Node {
+    let path = evt.composed && evt.composedPath ? evt.composedPath() : null;
+    let node = (path && path.length > 0 ? path[0] : evt.target) as Node;
+    return node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
+}
+
+export function metadata(node: Node): TargetMetadata {
+    let output: TargetMetadata = { id: 0, hash: null, privacy: config.conversions ? Privacy.Sensitive : Privacy.Snapshot };
+    if (node) { output.id = idMap.has(node) ? idMap.get(node) : getId(node); }
+    return output;
+}
+
+export function snapshot(): void {
+    values = [];
+    traverse(document);
+    encode(Event.Snapshot);
+}
+
+function reset(): void {
+    idMap = new WeakMap();
+}
+
+function traverse(root: Node): void {
+    let queue = [root];
+    while (queue.length > 0) {
+        let attributes = null, tag = null, value = null;
+        let node = queue.shift();
+        let next = node.firstChild;
+        let parent = node.parentElement ? node.parentElement : (node.parentNode ? node.parentNode : null);
+
+        while (next) {
+            queue.push(next);
+            next = next.nextSibling;
+        }
+
+        // Process the node
+        let type = node.nodeType;
+        switch (type) {
+            case Node.DOCUMENT_TYPE_NODE:
+                let doctype = node as DocumentType;
+                tag = Constant.DocumentTag;
+                attributes = { name: doctype.name, publicId: doctype.publicId, systemId: doctype.systemId }
+                break;
+            case Node.TEXT_NODE:
+                value = node.nodeValue;
+                tag = idMap.get(parent) ? Constant.TextTag : tag;
+                break;
+            case Node.ELEMENT_NODE:
+                let element = node as HTMLElement;
+                attributes = getAttributes(element);
+                tag = ["NOSCRIPT", "SCRIPT", "STYLE"].indexOf(element.tagName) < 0 ? element.tagName : tag;
+                break;
+        }
+        add(node, parent, { tag, attributes, value });
+    }
+}
+
+/* Helper Functions - Snapshot Traversal */
+function getAttributes(element: HTMLElement): { [key: string]: string } {
+    let output = {};
+    let attributes = element.attributes;
+    if (attributes && attributes.length > 0) {
+        for (let i = 0; i < attributes.length; i++) {
+            output[attributes[i].name] = attributes[i].value;
+        }
+    }
+    return output;
+}
+
+function getId(node: Node): number {
+    if (node === null) { return null; }
+    if (idMap.has(node)) { return idMap.get(node); }
+    idMap.set(node, index);
+    return index++;
+}
+
+function add(node: Node, parent: Node, data: NodeInfo): void {
+    if (node && data && data.tag) {
+        let id = getId(node);
+        let parentId = parent ? idMap.get(parent) : null;
+        let previous = node.previousSibling ? idMap.get(node.previousSibling) : null;
+        let metadata = { active: true, suspend: false, privacy: Privacy.Snapshot, position: null, fraud: null, size: null };
+        values.push({ id, parent: parentId, previous, children: [], data, selector: null, hash: null, region: null, metadata });
+    }
+}
+
+export function get(_node: Node): NodeValue { return null; }

package/src/interaction/change.ts

@@ -0,0 +1,38 @@
+import { Constant, Event, Setting } from "@clarity-types/data";
+import { ChangeState } from "@clarity-types/interaction";
+import config from "@src/core/config";
+import { bind } from "@src/core/event";
+import hash from "@src/core/hash";
+import { schedule } from "@src/core/task";
+import { time } from "@src/core/time";
+import { target } from "@src/layout/target";
+import encode from "./encode";
+import { Mask } from "@clarity-types/layout";
+
+export let state: ChangeState[] = [];
+
+export function start(): void {
+    reset();
+}
+
+export function observe(root: Node): void {
+    bind(root, "change", recompute, true);
+}
+
+function recompute(evt: UIEvent): void {
+    let element = target(evt) as HTMLInputElement;
+    if (element) {
+        let value = element.value;
+        let checksum = value && value.length >= Setting.WordLength && config.fraud && Mask.Exclude.indexOf(element.type) === -1 ? hash(value, Setting.ChecksumPrecision) : Constant.Empty;
+        state.push({ time: time(evt), event: Event.Change, data: { target: target(evt), type: element.type, value, checksum } });
+        schedule(encode.bind(this, Event.Change));
+    }    
+}
+
+export function reset(): void {
+    state = [];
+}
+
+export function stop(): void {
+    reset();
+}

package/src/interaction/click.ts

@@ -0,0 +1,163 @@
+import { BooleanFlag, Constant, Event, Setting } from "@clarity-types/data";
+import { BrowsingContext, ClickState, TextInfo } from "@clarity-types/interaction";
+import { Box } from "@clarity-types/layout";
+import { bind } from "@src/core/event";
+import { schedule } from "@src/core/task";
+import { time } from "@src/core/time";
+import { iframe } from "@src/layout/dom";
+import { offset } from "@src/layout/offset";
+import { target } from "@src/layout/target";
+import encode from "./encode";
+
+const UserInputTags = ["input", "textarea", "radio", "button", "canvas", "select"];
+export let state: ClickState[] = [];
+
+export function start(): void {
+    reset();
+}
+
+export function observe(root: Node): void {
+    bind(root, "click", handler.bind(this, Event.Click, root), true);
+    bind(root, "contextmenu", handler.bind(this, Event.ContextMenu, root), true);
+}
+
+function handler(event: Event, root: Node, evt: MouseEvent): void {
+    let frame = iframe(root);
+    let d = frame && frame.contentDocument ? frame.contentDocument.documentElement : document.documentElement;
+    let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
+    let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
+    // In case of iframe, we adjust (x,y) to be relative to top parent's origin
+    if (frame) {
+        let distance = offset(frame);
+        x = x ? x + Math.round(distance.x) : x;
+        y = y ? y + Math.round(distance.y) : y;
+    }
+
+    let t = target(evt);
+    // Find nearest anchor tag (<a/>) parent if current target node is part of one
+    // If present, we use the returned link element to populate text and link properties below
+    let a = link(t);
+
+    // Get layout rectangle for the target element
+    let l = layout(t as Element);
+
+    // Reference: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+    // This property helps differentiate between a keyboard navigation vs. pointer click
+    // In case of a keyboard navigation, we use center of target element as (x,y)
+    if (evt.detail === 0 && l) {
+        x = Math.round(l.x + (l.w / 2));
+        y = Math.round(l.y + (l.h / 2));
+    }
+
+    let eX = l ? Math.max(Math.floor(((x - l.x) / l.w) * Setting.ClickPrecision), 0) : 0;
+    let eY = l ? Math.max(Math.floor(((y - l.y) / l.h) * Setting.ClickPrecision), 0) : 0;
+
+    // Check for null values before processing this event
+    if (x !== null && y !== null) {
+        const textInfo = text(t);
+        state.push({
+            time: time(evt), event, data: {
+                target: t,
+                x,
+                y,
+                eX,
+                eY,
+                button: evt.button,
+                reaction: reaction(t),
+                context: context(a),
+                text: textInfo.text,
+                link: a ? a.href : null,
+                hash: null,
+                trust: evt.isTrusted ? BooleanFlag.True : BooleanFlag.False,
+                isFullText: textInfo.isFullText,
+                w: l ? l.w : 0,
+                h: l ? l.h : 0
+            }
+        });
+        schedule(encode.bind(this, event));
+    }
+}
+
+function link(node: Node): HTMLAnchorElement {
+    while (node && node !== document) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            let element = node as HTMLElement;
+            if (element.tagName === "A") {
+                return element as HTMLAnchorElement;
+            }
+        }
+        node = node.parentNode;
+    }
+    return null;
+}
+
+function text(element: Node): TextInfo {
+    let output = null;
+    let isFullText = false;
+    if (element) {
+        // Grab text using "textContent" for most HTMLElements, however, use "value" for HTMLInputElements and "alt" for HTMLImageElement.
+        let t = element.textContent || String((element as HTMLInputElement).value || '') || (element as HTMLImageElement).alt;
+        if (t) {
+            // Replace multiple occurrence of space characters with a single white space
+            // Also, trim any spaces at the beginning or at the end of string
+            const trimmedText =  t.replace(/\s+/g, Constant.Space).trim();
+            // Finally, send only first few characters as specified by the Setting
+            output = trimmedText.substring(0, Setting.ClickText);
+            isFullText = output.length === trimmedText.length;
+        }
+    }
+
+    return { text: output, isFullText: isFullText ? BooleanFlag.True : BooleanFlag.False };
+}
+
+function reaction(element: Node): BooleanFlag {
+    if (element.nodeType === Node.ELEMENT_NODE) {
+        let tag = (element as HTMLElement).tagName.toLowerCase();
+        if (UserInputTags.indexOf(tag) >= 0) {
+            return BooleanFlag.False;
+        }
+    }
+    return BooleanFlag.True;
+}
+
+function layout(element: Element): Box {
+    let box: Box = null;
+    let de = document.documentElement;
+    if (typeof element.getBoundingClientRect === "function") {
+        // getBoundingClientRect returns rectangle relative positioning to viewport
+        let rect = element.getBoundingClientRect();
+
+        if (rect && rect.width > 0 && rect.height > 0) {
+            // Add viewport's scroll position to rectangle to get position relative to document origin
+            // Also: using Math.floor() instead of Math.round() because in Edge,
+            // getBoundingClientRect returns partial pixel values (e.g. 162.5px) and Chrome already
+            // floors the value (e.g. 162px). This keeps consistent behavior across browsers.
+            box = {
+                x: Math.floor(rect.left + ("pageXOffset" in window ? window.pageXOffset : de.scrollLeft)),
+                y: Math.floor(rect.top + ("pageYOffset" in window ? window.pageYOffset : de.scrollTop)),
+                w: Math.floor(rect.width),
+                h: Math.floor(rect.height)
+            };
+        }
+    }
+    return box;
+}
+
+function context(a: HTMLAnchorElement): BrowsingContext {
+    if (a && a.hasAttribute(Constant.Target)) {
+        switch (a.getAttribute(Constant.Target)) {
+            case Constant.Blank: return BrowsingContext.Blank;
+            case Constant.Parent: return BrowsingContext.Parent;
+            case Constant.Top: return BrowsingContext.Top;
+        }
+    }
+    return BrowsingContext.Self;
+}
+
+export function reset(): void {
+    state = [];
+}
+
+export function stop(): void {
+    reset();
+}

package/src/interaction/clipboard.ts

@@ -0,0 +1,32 @@
+import { Event } from "@clarity-types/data";
+import { Clipboard, ClipboardState } from "@clarity-types/interaction";
+import { bind } from "@src/core/event";
+import { schedule } from "@src/core/task";
+import { time } from "@src/core/time";
+import encode from "./encode";
+import { target } from "@src/layout/target";
+
+export let state: ClipboardState[] = [];
+
+export function start(): void {
+    reset();
+}
+
+export function observe(root: Node): void {
+    bind(root, "cut", recompute.bind(this, Clipboard.Cut), true);
+    bind(root, "copy", recompute.bind(this, Clipboard.Copy), true);
+    bind(root, "paste", recompute.bind(this, Clipboard.Paste), true);
+}
+
+function recompute(action: Clipboard, evt: UIEvent): void {
+    state.push({ time: time(evt), event: Event.Clipboard, data: { target: target(evt), action } });
+    schedule(encode.bind(this, Event.Clipboard));
+}
+
+export function reset(): void {
+    state = [];
+}
+
+export function stop(): void {
+    reset();
+}