@codedoc/core/dist/es6/components/code/line-ref/component.js

Create beautiful modern documentation websites.

import { Subject, BehaviorSubject, fromEvent, of } from 'rxjs';
import { map, filter, debounceTime, mergeMap, switchMap, delay, sample, startWith } from 'rxjs/operators';
import { rl, toggleList, ref } from '@connectv/html';
import { RefBoxStyle } from './style';
import { getConfig } from '../../../transport/config';
export function RefBox(_, renderer) {
    const classes = this.theme.classes(RefBoxStyle);
    const target$ = this.expose.in('target', new Subject());
    const latest$ = new BehaviorSubject(undefined);
    target$.pipe(filter(el => !!el)).subscribe(latest$);
    const box = ref();
    const active$ = target$.pipe(debounceTime(10), map(el => !!el));
    let hover = false;
    const top$ = target$.pipe(switchMap(el => el ? of(el) : of(el).pipe(delay(300))), filter(() => !hover), mergeMap(el => el ?
        of(el.getBoundingClientRect().top + 18) :
        of(-1000)));
    const left$ = fromEvent(document, 'mousemove').pipe(filter(() => !hover), map(e => e.clientX + 12), sample(active$.pipe(filter(_ => _))));
    const link$ = target$.pipe(filter(el => !!el), map(el => (el === null || el === void 0 ? void 0 : el.getAttribute('data-ref')) || ''), map(l => {
        if (l.startsWith('/')) {
            const conf = getConfig();
            if (conf)
                return conf.namespace + l;
        }
        return l;
    }));
    const text$ = target$.pipe(filter(el => !!el), map(el => {
        if (el === null || el === void 0 ? void 0 : el.hasAttribute('data-ref-text'))
            return el.getAttribute('data-ref-text') || '';
        else {
            const _text = (el === null || el === void 0 ? void 0 : el.getAttribute('data-ref')) || '';
            if (_text.startsWith('tab:'))
                return _text.substr(4);
            else
                return _text;
        }
    }));
    return renderer.create("div", { _ref: box, class: rl `${classes.refbox} ${toggleList({ active: active$.pipe(startWith(false)) })}`, style: rl `top: ${top$}px;left: ${left$}px`, onmouseenter: () => hover = true, onmouseleave: () => { hover = false; target$.next(undefined); }, onclick: event => {
            var _a, _b;
            let ref = (_a = latest$.value) === null || _a === void 0 ? void 0 : _a.getAttribute('data-ref');
            if (ref === null || ref === void 0 ? void 0 : ref.startsWith('tab:')) {
                ref = ref.substr(4);
                let tab$ = latest$.value;
                while (tab$ && !(tab$ === null || tab$ === void 0 ? void 0 : tab$.hasAttribute('data-tab-id')))
                    tab$ = (tab$ === null || tab$ === void 0 ? void 0 : tab$.parentElement) || undefined;
                if (tab$) {
                    const btn$ = (_b = tab$.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector(`.selector>button[data-tab-id="${ref}"]`);
                    if (btn$) {
                        btn$.click();
                        event.stopPropagation();
                        event.preventDefault();
                    }
                }
            }
            hover = false;
            target$.next(undefined);
            box.$.style.top = '-1000px';
        } },
        renderer.create("span", { class: "icon-font" }, "touch_app"),
        renderer.create("a", { href: link$, target: "_blank" },
            "See ",
            text$));
}
export { RefBoxStyle } from './style';
//# sourceMappingURL=component.js.map