be-selectable/be-selectable.js

Adds class 'selected' to anchor element when the current route matches the href.

import { define } from 'be-decorated/be-decorated.js';
import { register } from 'be-hive/register.js';
export class BeSelectableController {
    emitEvents = ['selected'];
    intro(proxy, target, bdp) {
        //window.addEventListener('popstate', this.handlePopState);
        appHistory.addEventListener('navigate', this.handleNavigate);
        this.checkLink();
    }
    handleNavigate = (e) => {
        this.checkLink();
    };
    checkLink() {
        const verb = this.proxy.href === location.href ? 'add' : 'remove';
        this.proxy.selected = verb === 'add';
        this.proxy.classList[verb]('selected');
    }
}
const tagName = 'be-selectable';
const ifWantsToBe = 'selectable';
const upgrade = 'a';
define({
    config: {
        tagName,
        propDefaults: {
            ifWantsToBe,
            upgrade,
            intro: 'intro',
            virtualProps: ['selected'],
            proxyPropDefaults: {
                selected: false,
            },
        },
    },
    complexPropDefaults: {
        controller: BeSelectableController,
    }
});
register(ifWantsToBe, upgrade, tagName);