lichess-pgn-viewer/dist/view/menu.js

PGN viewer widget, designed to be embedded in content pages.

import { h } from 'snabbdom';
import { bind, bindMobileMousedown, onInsert } from './util';
import { eventRepeater } from '../events';
export const renderMenu = (ctrl) => h('div.lpv__menu.lpv__pane', [
    h('button.lpv__menu__entry.lpv__menu__flip.lpv__fbt', {
        hook: bind('click', ctrl.flip),
    }, ctrl.translate('flipTheBoard')),
    h('a.lpv__menu__entry.lpv__menu__analysis.lpv__fbt', {
        attrs: {
            href: ctrl.analysisUrl(),
            target: '_blank',
        },
    }, ctrl.translate('analysisBoard')),
    h('a.lpv__menu__entry.lpv__menu__practice.lpv__fbt', {
        attrs: {
            href: ctrl.practiceUrl(),
            target: '_blank',
        },
    }, ctrl.translate('practiceWithComputer')),
    ctrl.opts.menu.getPgn.enabled
        ? h('button.lpv__menu__entry.lpv__menu__pgn.lpv__fbt', {
            hook: bind('click', ctrl.togglePgn),
        }, ctrl.translate('getPgn'))
        : undefined,
    renderExternalLink(ctrl),
]);
const renderExternalLink = (ctrl) => {
    const link = ctrl.game.metadata.externalLink;
    return (link &&
        h('a.lpv__menu__entry.lpv__fbt', {
            attrs: {
                href: link,
                target: '_blank',
            },
        }, ctrl.translate(ctrl.game.metadata.isLichess ? 'viewOnLichess' : 'viewOnSite')));
};
export const renderControls = (ctrl) => h('div.lpv__controls', [
    ctrl.pane == 'board' ? undefined : dirButton(ctrl, 'first', 'step-backward'),
    dirButton(ctrl, 'prev', 'left-open'),
    h('button.lpv__fbt.lpv__controls__menu.lpv__icon', {
        class: {
            active: ctrl.pane != 'board',
            'lpv__icon-ellipsis-vert': ctrl.pane == 'board',
        },
        hook: bind('click', ctrl.toggleMenu),
    }, ctrl.pane == 'board' ? undefined : 'X'),
    dirButton(ctrl, 'next', 'right-open'),
    ctrl.pane == 'board' ? undefined : dirButton(ctrl, 'last', 'step-forward'),
]);
const dirButton = (ctrl, to, icon) => h(`button.lpv__controls__goto.lpv__controls__goto--${to}.lpv__fbt.lpv__icon.lpv__icon-${icon}`, {
    class: { disabled: ctrl.pane == 'board' && !ctrl.canGoTo(to) },
    hook: onInsert(el => bindMobileMousedown(el, e => eventRepeater(() => ctrl.goTo(to), e))),
});
//# sourceMappingURL=menu.js.map