# presentation/widgets/cite.widget.ts

> 29 lines of code and 8 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-widgets-cite-widget-ts
Source text: https://banes-lab.com/assets/sources/source.37252ae67023b103f10945704fc116d8fc4aacbceb96db3fe4db63ff0f3a898c.generated.txt

## Definitions

- `citedPanelOf` (lexical_declaration, line 9)
- `onEnter` (lexical_declaration, line 16, exported)
- `onLeave` (lexical_declaration, line 19, exported)
- `NONE` (lexical_declaration, line 6)
- `CITE_LINK_SELECTOR` (lexical_declaration, line 7)
- `link` (lexical_declaration, line 10)
- `href` (lexical_declaration, line 11)
- `mountCite` (lexical_declaration, line 15, exported)

## Source

```typescript
import { CITED_PANEL_CLASS, CITE_CLASS } from "#configuration/constants/chapter.constants";
import { ANCHOR_PREFIX } from "#configuration/constants/document.constants";
import type { Disposer } from "#types/base.types";
import { HREF_ATTRIBUTE } from "#configuration/constants/element.constants";

const NONE = "";
const CITE_LINK_SELECTOR = `a.${CITE_CLASS}`;

const citedPanelOf = function citedPanelOf(node: EventTarget | null): HTMLElement | null {
    const link = node instanceof Element ? node.closest(CITE_LINK_SELECTOR) : null;
    const href = link?.getAttribute(HREF_ATTRIBUTE) ?? NONE;
    return href.startsWith(ANCHOR_PREFIX) ? document.getElementById(href.slice(ANCHOR_PREFIX.length)) : null;
};

export const mountCite = function mountCite(): Disposer {
    const onEnter = function onEnter(event: Event): void {
        citedPanelOf(event.target)?.classList.add(CITED_PANEL_CLASS);
    };
    const onLeave = function onLeave(event: Event): void {
        citedPanelOf(event.target)?.classList.remove(CITED_PANEL_CLASS);
    };
    document.addEventListener("mouseover", onEnter);
    document.addEventListener("mouseout", onLeave);
    document.addEventListener("focusin", onEnter);
    document.addEventListener("focusout", onLeave);
    return () => {
        document.removeEventListener("mouseover", onEnter);
        document.removeEventListener("mouseout", onLeave);
        document.removeEventListener("focusin", onEnter);
        document.removeEventListener("focusout", onLeave);
    };
};
```