ui-lit/sidebar/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators';
import { styles } from './style';
let LitSidebar = class LitSidebar extends LitElement {
    constructor() {
        super(...arguments);
        this._opened = false;
        this._touchX = 0;
        this._positionBeforeMove = 0;
        this._position = -270;
        this._touchID = 0;
        this._touchStart = (e) => {
            var _a, _b;
            const touch = e.changedTouches[0];
            this._touchID = touch.identifier;
            (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
            this._down(touch.clientX);
        };
        this._touchMove = (e) => {
            const touch = [...e.changedTouches].filter(it => this._touchID === it.identifier)[0];
            this._move(touch.clientX);
        };
        this._touchEnd = () => {
            this._end();
        };
        this._mouseDown = (e) => {
            this._down(e.clientX);
        };
        this._mouseMove = (e) => {
            this._move(e.clientX);
        };
        this._mouseUp = (e) => {
            this._end();
        };
        this._requestAnimation = () => {
            this.style.setProperty('--position', `${this._position}px`);
        };
        this._down = (x) => {
            this.setAttribute('moving', '');
            this._touchX = x;
            this._positionBeforeMove = this._position;
        };
        this._move = (x) => {
            if (!this.hasAttribute("moving"))
                return;
            const diff = (x - this._touchX);
            this._setPosition(Math.max(Math.min(this._positionBeforeMove + diff, 0), -270));
        };
        this._end = () => {
            this.removeAttribute('moving');
            this.opened = this._position > -100;
            this._dispatch();
        };
        this._trackTouch = () => {
            document.addEventListener('touchstart', this._touchStart);
            document.addEventListener('touchmove', this._touchMove);
            document.addEventListener('touchend', this._touchEnd);
            document.addEventListener('mousedown', this._mouseDown);
            document.addEventListener('mouseup', this._mouseUp);
            document.addEventListener('mousemove', this._mouseMove);
        };
        this._unTrackTouch = () => {
            document.removeEventListener('touchstart', this._touchStart);
            document.removeEventListener('touchmove', this._touchMove);
            document.removeEventListener('touchend', this._touchEnd);
            document.removeEventListener('mousedown', this._mouseDown);
            document.removeEventListener('mouseup', this._mouseUp);
            document.removeEventListener('mousemove', this._mouseMove);
        };
    }
    static get properties() {
        return {
            opened: { type: Boolean }
        };
    }
    get opened() {
        return this._opened;
    }
    set opened(value) {
        this._opened = value;
        if (value) {
            this.setAttribute('opened', '');
            this._setPosition(0);
            this._trackTouch();
        }
        else {
            this.removeAttribute('opened');
            this._setPosition(-270);
            this._unTrackTouch();
        }
    }
    render() {
        return html `
        <div id = "arrow" >
            <slot name = "arrow">
                <lit-icon 
                    @click = "${this._hide}"
                    icon = "back"></lit-icon>
            </slot>
        </div>
        <slot></slot>`;
    }
    _setPosition(position) {
        if (position === this._position)
            return;
        this._position = position;
        requestAnimationFrame(this._requestAnimation);
    }
    _hide() {
        this.opened = false;
        this._dispatch();
    }
    _dispatch() {
        this.dispatchEvent(new CustomEvent("openChanged", {
            bubbles: true,
            composed: true,
            detail: this.opened
        }));
    }
};
LitSidebar.styles = styles;
LitSidebar = __decorate([
    customElement("lit-sidebar")
], LitSidebar);
export { LitSidebar };