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

Create beautiful modern documentation websites.

import { Subject, fromEvent, combineLatest } from 'rxjs';
import { map, filter, startWith } from 'rxjs/operators';
import { toggleList, rl } from '@connectv/html';
import { HintBoxStyle } from './style';
export function HintBox(_, renderer) {
    const classes = this.theme.classes(HintBoxStyle);
    const target$ = this.expose.in('target', new Subject());
    const active$ = target$.pipe(map(el => !!el));
    const top$ = combineLatest(target$
        .pipe(map(el => el ? el.getBoundingClientRect().top : undefined)), fromEvent(document, 'mousemove')
        .pipe(map(e => e.clientY))).pipe(map(([top, mouseY]) => (top || mouseY) + 24));
    const left$ = fromEvent(document, 'mousemove').pipe(map(e => e.clientX + 24));
    return renderer.create("div", { class: rl `${classes.hintbox} ${toggleList({ 'active': active$.pipe(startWith(false)) })}`, style: rl `top: ${top$}px;left: ${left$}px` },
        renderer.create("span", { class: "icon-font outline" }, "wb_incandescent"),
        target$.pipe(filter(el => !!el), map(el => el === null || el === void 0 ? void 0 : el.getAttribute('data-hint'))));
}
export { HintBoxStyle } from './style';
//# sourceMappingURL=component.js.map