@diplodoc/transform/src/js/term/index.ts

A simple transformer of text in YFM (Yandex Flavored Markdown) to HTML

import {getEventTarget, isCustom} from '../utils';

import {
    closeDefinition,
    getTermByDefinition,
    openClass,
    openDefinition,
    openDefinitionClass,
    setDefinitionPosition,
} from './utils';

if (typeof document !== 'undefined') {
    document.addEventListener('click', (event) => {
        if (getEventTarget(event) || !isCustom(event)) {
            openDefinition(getEventTarget(event) as HTMLElement);
        }
    });

    document.addEventListener('keydown', (event) => {
        const openedDefinition = document.getElementsByClassName(
            openDefinitionClass,
        )[0] as HTMLElement;

        if (event.key === 'Enter' && document.activeElement) {
            openDefinition(document.activeElement as HTMLElement);
        }

        if (event.key === 'Escape' && openedDefinition) {
            closeDefinition(openedDefinition);
            getTermByDefinition(openedDefinition)?.focus(); // Set focus back to open button after closing popup
        }
    });

    window.addEventListener('resize', () => {
        const openedDefinition = document.getElementsByClassName(
            openDefinitionClass,
        )[0] as HTMLElement;

        if (!openedDefinition) {
            return;
        }

        const termId = openedDefinition.getAttribute('term-id') || '';
        const termElement = document.getElementById(termId);

        if (!termElement) {
            openedDefinition.classList.toggle(openClass);
            return;
        }

        setDefinitionPosition(openedDefinition, termElement);
    });
}