@exadel/esl/modules/esl-anchornav/core/esl-anchornav-sticked.js

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { ESLMixinElement } from '../../esl-mixin-element/core';
import { listen } from '../../esl-utils/decorators';
import { ESLIntersectionTarget, ESLResizeObserverTarget } from '../../esl-event-listener/core';
import { getViewportForEl } from '../../esl-utils/dom/scroll';
import { ESLAnchornav } from './esl-anchornav';
/**
 * ESLAnchornavSticked - custom mixin element for sticky positioned of {@link ESLAnchornav} element
 *
 * Use example:
 * `<div esl-anchornav-sticked><esl-anchornav></esl-anchornav></div>`
 */
export class ESLAnchornavSticked extends ESLMixinElement {
    constructor() {
        super(...arguments);
        this._sticked = false;
    }
    /** The height of this anchornav container */
    get anchornavHeight() {
        return this.$host.getBoundingClientRect().height;
    }
    /** Sticked state */
    get sticked() {
        return this._sticked;
    }
    set sticked(value) {
        if (this._sticked === value)
            return;
        this._sticked = value;
        this.$$cls(`${ESLAnchornavSticked.is}-active`, value);
        this._onStateChange();
    }
    /** Childs anchornav element */
    get $anchornav() {
        return this.$host.querySelector(ESLAnchornav.is);
    }
    /** Handles changing sticky state */
    _onStateChange() {
        if (!this.$anchornav)
            return;
        this.$anchornav.offset = this.sticked ? this.anchornavHeight : 0;
    }
    _onIntersection(e) {
        this.sticked = e.intersectionRect.y > e.boundingClientRect.y;
    }
    _onResize(e) {
        this._onStateChange();
    }
}
ESLAnchornavSticked.is = 'esl-anchornav-sticked';
__decorate([
    listen({
        event: 'intersects',
        target: (that) => ESLIntersectionTarget.for(that.$host, {
            root: getViewportForEl(that.$host),
            rootMargin: '-1px 0px 0px 0px',
            threshold: [0.99, 1]
        })
    })
], ESLAnchornavSticked.prototype, "_onIntersection", null);
__decorate([
    listen({ event: 'resize', target: (that) => ESLResizeObserverTarget.for(that.$host) })
], ESLAnchornavSticked.prototype, "_onResize", null);