# presentation/renderers/element.renderer.ts

> 22 lines of code and 5 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-renderers-element-renderer-ts
Source text: https://banes-lab.com/assets/sources/source.b8fdf270a2ecc94cb37d267d95dd0cdfd297b8115e51f39aecec889c373a0625.generated.txt

## Definitions

- `animated` (lexical_declaration, line 16, exported)
- `contextOf` (lexical_declaration, line 8, exported)
- `CONTEXT_CLASS` (lexical_declaration, line 6)
- `namedFor` (lexical_declaration, line 12, exported)
- `element` (lexical_declaration, line 22, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)

## Used by

- [presentation/components/link.component.ts](https://banes-lab.com/source/tree/presentation/components/link.component.ts.md)
- [presentation/renderers/card.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/card.renderer.ts.md)
- [presentation/renderers/home.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/home.renderer.ts.md)
- [presentation/renderers/section.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/section.renderer.ts.md)
- [presentation/renderers/site.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/site.renderer.ts.md)
- [presentation/renderers/tab.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/tab.renderer.ts.md)
- [presentation/views/home.view.ts](https://banes-lab.com/source/tree/presentation/views/home.view.ts.md)

## Source

```typescript
import { ANIMATE_ATTRIBUTE, ANIMATE_DELAY_ATTRIBUTE } from "#configuration/constants/element.constants";
import type { ElementSpec, ElementTag } from "#types/element.types";
import { TITLE_SEPARATOR } from "#configuration/strings/page.strings";
import { createElement } from "#core/factories/element.factory";

const CONTEXT_CLASS = "visually-hidden";

export const contextOf = function contextOf(context: string): HTMLElement {
    return createElement("span", { className: CONTEXT_CLASS, text: TITLE_SEPARATOR + context });
};

export const namedFor = function namedFor(label: string, context: string): string {
    return label + TITLE_SEPARATOR + context;
};

export const animated = function animated<T extends ElementTag>(
    tag: T,
    spec: ElementSpec,
    effect: string,
    delay = 0,
): HTMLElementTagNameMap[T] {
    const element = createElement(tag, spec);
    element.setAttribute(ANIMATE_ATTRIBUTE, effect);
    element.setAttribute(ANIMATE_DELAY_ATTRIBUTE, String(delay));
    return element;
};
```