react-graph-grid 0.1.4 → 0.1.6

package/src/Modal.jsx

@@ -1,511 +0,0 @@
-import { useState, useEffect } from 'react';
-import { BaseComponent, log } from './Base';
-import { Overlay, OverlayClass } from './Overlay';
-import { renderToStaticMarkup } from 'react-dom/server';
-// ==================================================================================================================================================================
-export function Modal(props) {
-    let wnd = null;
-
-    const [wndState, setState] = useState({ wnd: wnd, ind: 0 });
-
-    const oldWnd = wndState.wnd;
-
-    wnd = oldWnd && oldWnd.uid === props.uid ? oldWnd : new ModalClass(props);
-
-    if (props.init) {
-        props.init(wnd);
-    }
-
-    wnd.refreshState = function () {
-        setState({ wnd: wnd, ind: wnd.stateind++ });
-    }
-
-    useEffect(() => {
-        wnd.setupEvents();
-
-        return () => {
-            //log(' 0.11 Clear ModalEvents');
-
-            wnd.clearEvents();
-        }
-    }, [wnd])
-
-    return (wnd.render());
-}
-// -------------------------------------------------------------------------------------------------------------------------------------------------------------
-export class ModalClass extends BaseComponent {
-    constructor(props) {
-        super(props);
-
-        const wnd = this;
-        wnd.uid = props.uid;
-
-        wnd.opt = {};
-
-        wnd.id = ModalClass._seq++;
-
-        wnd.opt.keyAdd = props.keyAdd;
-
-        wnd.opt.zInd = props.zInd || ++OverlayClass._zInd;
-
-        wnd.opt.pos = props.pos || { x: 0, y: 0, w: '100%', h: '100%' };
-
-        wnd.opt.isModal = props.isModal != null ? props.isModal : true;
-
-        wnd.opt.closeWhenClick = props.closeWhenClick;
-        wnd.opt.closeWhenEscape = props.closeWhenEscape;
-        wnd.opt.closeWhenMiss = props.closeWhenMiss && wnd.opt.isModal;
-        //wnd.opt.closeWhenMiss = (props.closeWhenMiss || props.closeWhenMouseLeave == false) && wnd.opt.isModal;
-        wnd.opt.closeWhenMouseLeave = props.closeWhenMouseLeave;
-
-        wnd.opt.onMouseEnter = props.onMouseEnter;
-        wnd.opt.onMouseLeave = props.onMouseLeave;
-
-        wnd.opt.resizable = props.resizable != null ? props.resizable : true;
-        wnd.opt.draggable = props.draggable != null ? props.draggable : true;
-
-        wnd.opt.hiddenOverlay = props.hiddenOverlay;
-
-        wnd.opt.noHeader = props.noHeader;
-        wnd.opt.noFooter = props.noFooter;
-        wnd.opt.noPadding = props.noPadding;
-        wnd.opt.noBodyOverflow = props.noBodyOverflow;
-
-        wnd.opt.margin = props.margin;
-        wnd.opt.padding = props.padding;
-
-        wnd.opt.windowClass = props.windowClass;
-        wnd.opt.bodyClass = props.bodyClass || BaseComponent.theme.modalBodyClass || 'modal-window-body';
-        wnd.opt.headerClass = props.headerClass || BaseComponent.theme.modalHeaderClass || 'modal-window-header';
-        wnd.opt.footerClass = props.footerClass || BaseComponent.theme.modalFooterClass || 'modal-window-footer';
-        wnd.opt.footerButtonClass = props.footerButtonClass || BaseComponent.theme.modalFooterButtonClass || 'modal-window-footer-button'
-        wnd.opt.titleClass = props.titleClass || BaseComponent.theme.modalTitleClass || 'modal-window-header-title';
-        wnd.opt.title = props.title;
-
-        wnd.opt.pos.x = !isNaN(wnd.opt.pos.x) ? wnd.opt.pos.x + 'px' : wnd.opt.pos.x;
-        wnd.opt.pos.y = !isNaN(wnd.opt.pos.y) ? wnd.opt.pos.y + 'px' : wnd.opt.pos.y;
-        wnd.opt.pos.w = !isNaN(wnd.opt.pos.w) ? wnd.opt.pos.w + 'px' : wnd.opt.pos.w;
-        wnd.opt.pos.h = !isNaN(wnd.opt.pos.h) ? wnd.opt.pos.h + 'px' : wnd.opt.pos.h;
-        wnd.opt.pos.minW = !isNaN(wnd.opt.pos.minW) ? wnd.opt.pos.minW + 'px' : wnd.opt.pos.minW;
-        wnd.opt.pos.minH = !isNaN(wnd.opt.pos.minH) ? wnd.opt.pos.minH + 'px' : wnd.opt.pos.minH;
-        wnd.opt.pos.maxW = !isNaN(wnd.opt.pos.maxW) ? wnd.opt.pos.maxW + 'px' : wnd.opt.pos.maxW;
-        wnd.opt.pos.maxH = !isNaN(wnd.opt.pos.maxH) ? wnd.opt.pos.maxH + 'px' : wnd.opt.pos.maxH;
-
-        wnd.onClose = props.onClose;
-
-        wnd.opt.dimensionsByContent = props.dimensionsByContent;
-
-        wnd.renderContent = props.renderContent || function () { return null };
-
-        wnd.buttons = [];
-        if (props.footerButtons) {
-            wnd.buttonsDict = {};
-            let seq = 0;
-            for (let btn of props.footerButtons) {
-                btn._ind = seq++;
-                wnd.buttonsDict[btn._ind] = btn;
-                wnd.buttons.push(btn);
-            }
-        }
-
-        wnd.visible = props.visible != null ? props.visible : true;
-
-        wnd.stateind = 0;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    static _isFake = false;
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    static _seq = 0;
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    render() {
-        const wnd = this;
-        if (!wnd.visible) {
-            return <></>;
-        }
-
-        if (wnd.opt.dimensionsByContent) {
-            const rect = wnd.getDimensionsByContent(wnd.opt.margin, wnd.opt.padding);
-            wnd.opt.pos.w = rect.w || wnd.opt.pos.w;
-            wnd.opt.pos.h = rect.h || wnd.opt.pos.h;
-            if (wnd.opt.pos.maxX != null && parseInt(wnd.opt.pos.x) > wnd.opt.pos.maxX) {
-                wnd.opt.pos.x = (wnd.opt.pos.maxX - Math.max(wnd.opt.pos.w, parseInt(wnd.opt.pos.minW) || 0)) + 'px';
-            }
-        }
-
-        if (wnd.opt.isModal || wnd.opt.closeWhenMiss) {
-            return (
-                <>
-                    <Overlay
-                        renderChild={(zInd) => { return wnd.renderSelf(zInd++) }} closeWhenClick={wnd.opt.closeWhenMiss}
-                        init={(ovl) => ovl.visible = wnd.visible}
-                        onClose={() => wnd.close()}
-                        isHidden={wnd.opt.hiddenOverlay}
-                    >
-                    </Overlay>
-                </>
-            )
-        }
-
-        return wnd.renderSelf();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderSelf(zInd) {
-        const wnd = this;
-        return (
-            <>
-                <div
-                    id={`window_${wnd.id}_`}
-                    key={`window_${wnd.id}_${wnd.opt.keyAdd != null ? wnd.opt.keyAdd : ''}_`}
-                    style={
-                        {
-                            width: wnd.opt.pos.w,
-                            height: wnd.opt.pos.h,
-                            top: wnd.opt.pos.y,
-                            left: wnd.opt.pos.x,
-                            minWidth: wnd.opt.pos.minW || '',
-                            minHeight: wnd.opt.pos.minH || '',
-                            maxWidth: wnd.opt.pos.maxW || '',
-                            maxHeight: wnd.opt.pos.maxH || '',
-                            zIndex: zInd || wnd.opt.zInd,
-                            display: "flex",
-                            flexDirection: "column",
-                            justifyContent: "space-between",
-                            position: "fixed",
-                            overflow: 'hidden',
-                            backgroundColor: 'white',
-                            border: '1px solid',
-                        }
-                    }
-                    className={`modal-window-wnd ${wnd.opt.windowClass || ''}`}
-                    onMouseLeave={(e) => wnd.onMouseLeave(e)}
-                    onMouseEnter={(e) => wnd.onMouseEnter(e)}
-                >
-                    {wnd.opt.noHeader ? <></> : wnd.renderHeader()}
-                    <div
-                        key={`window_${wnd.id}_body_`}
-                        wnd-body={1}
-                        className={wnd.opt.bodyClass}
-                        style={{ padding: wnd.opt.noPadding ? '0' : '', overflow: wnd.opt.noBodyOverflow ? 'hidden' : 'auto', height: '100%' }}
-                    >
-                        {wnd.renderContent(wnd)}
-                    </div>
-                    {wnd.opt.noFooter ? <></> : wnd.renderFooter()}
-                    {!wnd.opt.resizable ? <></> : wnd.renderResizables()}
-                </div>
-            </>
-        );
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderHeader() {
-        const wnd = this;
-        return (
-            <div
-                key={`window_${wnd.id}_header_`}
-                wnd-header={1}
-                className={wnd.opt.headerClass}
-                style={{ display: 'flex', flexWrap: 'nowrap', justifyContent: 'space-between' }}
-                onMouseDown={(e) => wnd.mouseDownDrag(e)}
-            >
-                <h4 className={wnd.opt.titleClass} style={{ margin: '0.5em 0 0.5em 1.5em' }}>
-                    {wnd.opt.title || ''}
-                </h4>
-                <button wnd-btn={`close_${wnd.id}_`} type="button" className="close" style={{ color: "black", lineHeight: '1', fontWeight: '21px', border: 'none' }} onClick={() => wnd.close()}>×</button>
-            </div>
-        )
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderFooter() {
-        const wnd = this;
-        return (
-            <div
-                key={`window_${wnd.id}_footer_`}
-                wnd-footer={1}
-                className={wnd.opt.footerClass}
-                onMouseDown={(e) => wnd.mouseDownDrag(e)}
-                style={
-                    {
-                        display: "flex",
-                        flexWrap: "nowrap",
-                        justifyContent: "space-between",
-                        alignItems: "center"
-                    }
-                } >
-                {wnd.buttons.map((btn, ind) => {
-                    return (
-                        <button
-                            key={`window_${wnd.id}_${btn._ind}_${ind}_button_`}
-                            wnd-btn={`button_${wnd.id}_${btn._ind}_`}
-                            className={wnd.opt.footerButtonClass}
-                            title={btn.title}
-                            onClick={btn.onClick ? (e) => btn.onClick(e) : null}
-                            disabled={btn.getDisabled ? btn.getDisabled() : false}
-                        >
-                            <i className={btn.imageClass}></i>
-                            {btn.title}
-                        </button>
-                    )
-                })}
-            </div>
-        )
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderResizables() {
-        const wnd = this;
-
-        return (
-            <>
-                <div wnd-rsz-y={wnd.id}
-                    key={`wnd-rsz-y_${wnd.id}_`}
-                    style={
-                        {
-                            position: "absolute",
-                            left: "-1px",
-                            bottom: "-6px",
-                            cursor: "s-resize",
-                            height: "12px",
-                            width: "calc(100% - 10px)",
-                            zIndex: wnd.opt.zInd + 5
-                        }
-                    }
-                    onMouseDown={(e) => wnd.mouseDownResize(e)}
-                >
-                </div>
-                <div wnd-rsz-x={wnd.id}
-                    key={`wnd-rsz-x_${wnd.id}_`}
-                    style={
-                        {
-                            position: "absolute",
-                            right: "-6px",
-                            top: "-1px",
-                            cursor: "e-resize",
-                            height: "calc(100% - 10px)",
-                            width: "12px",
-                            zIndex: wnd.opt.zInd + 5
-                        }
-                    }
-                    onMouseDown={(e) => wnd.mouseDownResize(e)}
-                >
-                </div>
-                <div wnd-rsz-xy={wnd.id}
-                    key={`wnd-rsz-xy_${wnd.id}_`}
-                    style={
-                        {
-                            position: "absolute",
-                            right: "-5px",
-                            bottom: "-5px",
-                            cursor: "se-resize",
-                            height: "16px",
-                            width: "16px",
-                            zIndex: wnd.opt.zInd + 5
-                        }
-                    }
-                    onMouseDown={(e) => wnd.mouseDownResize(e)}
-                >
-                </div>
-            </>
-        )
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    close() {
-        const wnd = this;
-
-        if (wnd.onClose) {
-            const ev = { self: wnd };
-            wnd.onClose(ev);
-            if (ev.cancel) return;
-        }
-
-        wnd.visible = false;
-        wnd.refreshState();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    show(e) {
-        const wnd = this;
-        wnd.visible = true;
-
-        if (e) {
-            wnd.opt.pos.x = e.clientX;
-            wnd.opt.pos.y = e.clientY;
-        }
-
-        wnd.refreshState();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    getDimensionsByContent(margin, padding) {
-        const wnd = this;
-        const renderFake = function () {
-            return (
-                <div>
-                    {wnd.opt.noHeader ? <></> : wnd.renderHeader()}
-                    <div
-                        key={`window_${wnd.id}_body_`}
-                        wnd-body={1}
-                        className={wnd.opt.bodyClass}
-                        style={{ padding: wnd.opt.noPadding ? '0' : '' }}
-                    >
-                        {wnd.renderContent(wnd, 'fake')}
-                    </div>
-                    {wnd.opt.noFooter ? <></> : wnd.renderFooter()}
-                    {!wnd.opt.resizable ? <></> : wnd.renderResizables()}
-                </div>
-            )
-        }
-
-        const res = { w: 0, h: 0 };
-
-        ModalClass._isFake = true;
-
-        const fakeDiv = document.createElement('div');
-        fakeDiv.style.opacity = 0;
-        fakeDiv.style.position = 'fixed';
-        fakeDiv.style.height = 'auto';
-        fakeDiv.style.margin = margin || '';
-        fakeDiv.style.padding = padding || '';
-        fakeDiv.innerHTML = renderToStaticMarkup(renderFake());
-        document.body.append(fakeDiv);
-        const rect = getComputedStyle(fakeDiv);
-        res.w = parseInt(rect.width) + 2;
-        res.h = parseInt(rect.height) + 2;
-        fakeDiv.remove();
-
-        ModalClass._isFake = false;
-
-        return res;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    setupEvents() {
-        const wnd = this;
-
-        function onKeyDown(e) {
-            const key = e && e.key ? e.key.toLowerCase() : '';
-
-            if ((key === 'esc' || key === 'escape') && wnd.opt.closeWhenEscape === true) {
-                wnd.close();
-            }
-        }
-
-        document.addEventListener('keydown', onKeyDown);
-
-        wnd.clearEvents = function () {
-            document.removeEventListener('keydown', onKeyDown);
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    onMouseLeave() {
-        const wnd = this;
-
-        if (wnd.opt.onMouseLeave) {
-            wnd.opt.onMouseLeave(wnd);
-        }
-
-        if (wnd.opt.closeWhenMouseLeave) {
-            wnd.close();
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    onMouseEnter(e) {
-        const wnd = this;
-        if (wnd.opt.onMouseEnter) {
-            wnd.opt.onMouseEnter(e);
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    mouseDownDrag(e) {
-        const wnd = this;
-        if (!wnd.visible || !wnd.opt.draggable) return;
-
-        if (e.target.tagName !== 'DIV') return;
-
-        const pos = wnd.opt.pos;
-
-        const elem = document.getElementById(`window_${wnd.id}_`);
-        if (!elem) {
-            log(`Elem window_${wnd.id}_  not found!`);
-            return;
-        }
-
-        const rect = elem.getBoundingClientRect();
-        const shiftX = e.pageX - rect.left;
-        const shiftY = e.pageY - rect.top;
-
-        moveAt(e.pageX, e.pageY);
-
-        // переносит окно на координаты (pageX, pageY), дополнительно учитывая изначальный сдвиг относительно указателя мыши
-        function moveAt(pageX, pageY) {
-            pos.x = pageX - shiftX;
-            pos.y = pageY - shiftY;
-
-            elem.style.left = pos.x + 'px';
-            elem.style.top = pos.y + 'px';
-        }
-
-        function onMouseMove(e) {
-            moveAt(e.pageX, e.pageY);
-        }
-
-        // передвигаем окно при событии mousemove
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
-        // отпустить окно, удалить ненужные обработчики
-        function onMouseUp() {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-            elem.ondragstart = null;
-        };
-
-        elem.ondragstart = function () {
-            return false;
-        };
-    };
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    mouseDownResize(e) {
-        const wnd = this;
-        if (!wnd.visible || !wnd.opt.resizable) return;
-
-        const pos = wnd.opt.pos;
-
-        const elem = document.getElementById(`window_${wnd.id}_`);
-
-        const cs = getComputedStyle(elem);
-        const [initW, initH] = [parseInt(cs.width), parseInt(cs.height)];
-
-        const shiftX = e.target.hasAttribute('wnd-rsz-x') || e.target.hasAttribute('wnd-rsz-xy') ? e.pageX : -1;
-        const shiftY = e.target.hasAttribute('wnd-rsz-y') || e.target.hasAttribute('wnd-rsz-xy') ? e.pageY : -1;
-
-        resize(e.pageX, e.pageY);
-        // -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
-        function resize(pageX, pageY) {
-            if (shiftX > 0) {
-                const w = initW + pageX - shiftX;
-
-                pos.w = (!pos.maxW || w <= pos.maxW) && (!pos.minW || w >= pos.minW) ? w : pos.w;
-                elem.style.width = pos.w + 'px';
-            }
-            if (shiftY > 0) {
-                const h = initH + pageY - shiftY;
-
-                pos.h = (!pos.maxH || h <= pos.maxH) && (!pos.minH || h >= pos.minH) ? h : pos.h;
-                elem.style.height = pos.h + 'px';
-            }
-        }
-        // -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
-        function onMouseMove(e) {
-            resize(e.pageX, e.pageY);
-        }
-        // -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
-        // -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
-        elem.ondragstart = function () {
-            return false;
-        };
-        // -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
-        function onMouseUp() {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-            elem.ondragstart = null;
-        };
-    };
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-}
-// ==================================================================================================================================================================

package/src/Overlay.jsx

@@ -1,140 +0,0 @@
-import { useState, useEffect } from 'react';
-import { BaseComponent } from './Base';
-// ==================================================================================================================================================================
-export function Overlay(props) {
-    let ovl = null;
-
-    const [ovlState, setState] = useState({ ovl: ovl, ind: 0 });
-
-    if (ovlState.ovl) {
-        ovl = ovlState.ovl;
-        if (ovlState.ovl.closing) {
-            ovl.closing = false;
-        }
-    }
-    else {
-        ovl = new OverlayClass(props);
-    }
-
-    ovl.onClose = props.onClose;
-
-    if (props.init) {
-        props.init(ovl);
-    }
-
-    ovl.refreshState = function () {
-        setState({ ovl: ovl, ind: ovl.stateind++ });
-    }
-
-    useEffect(() => {
-        ovl.setupEvents();
-
-        return () => {
-            ovl.clearEvents();
-        }
-    }, [ovl])
-
-    return (ovl.render());
-}
-// -------------------------------------------------------------------------------------------------------------------------------------------------------------
-export class OverlayClass extends BaseComponent {
-    constructor(props) {
-        super(props);
-
-        const ovl = this;
-        ovl.opt = {};
-
-        ovl.id = OverlayClass._seq++;
-        ovl.uid = props.uid;
-
-        ovl.opt.zInd = props.zInd || ++OverlayClass._zInd;
-
-        ovl.opt.pos = props.pos || { x: 0, y: 0, w: '100%', h: '100%' };
-
-        ovl.opt.isHidden = props.isHidden;
-        ovl.opt.closeWhenClick = props.closeWhenClick;
-        ovl.opt.closeWhenEscape = props.closeWhenEscape;
-
-        ovl.opt.pos.x = !isNaN(ovl.opt.pos.x) ? ovl.opt.pos.x + 'px' : ovl.opt.pos.x;
-        ovl.opt.pos.y = !isNaN(ovl.opt.pos.y) ? ovl.opt.pos.y + 'px' : ovl.opt.pos.y;
-        ovl.opt.pos.w = !isNaN(ovl.opt.pos.w) ? ovl.opt.pos.w + 'px' : ovl.opt.pos.w;
-        ovl.opt.pos.h = !isNaN(ovl.opt.pos.h) ? ovl.opt.pos.h + 'px' : ovl.opt.pos.h;
-
-        ovl.renderChild = props.renderChild || function () { return null };
-
-        ovl.visible = props.visible != null ? props.visible : true;
-
-        ovl.stateind = 0;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    static _seq = 0;
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    static _zInd = 999;
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    render() {
-        const ovl = this;
-        if (!ovl.visible) return <></>;
-
-        return (
-            <>
-                <div
-                    key={`overlay_${ovl.id}_`}
-                    onClick={(e) => ovl.onClick(e)}
-                    style={
-                        {
-                            width: ovl.opt.pos.w,
-                            height: ovl.opt.pos.h,
-                            top: ovl.opt.pos.y,
-                            left: ovl.opt.pos.x,
-                            opacity: ovl.opt.opacity ? ovl.opt.opacity : ovl.opt.isHidden ? 0 : 0.2,
-                            zIndex: ovl.opt.zInd,
-                            backgroundColor: !ovl.opt.isHidden ? 'black' : '',
-                            display: 'flex',
-                            position: 'fixed',
-                        }
-                    }
-                    className="overlay-default"
-                >
-                </div>
-                {ovl.renderChild(ovl.opt.zInd + 1)}
-            </>
-        );
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    close() {
-        const ovl = this;
-        ovl.visible = false;
-        if (ovl.onClose) {
-            ovl.onClose();
-        }
-        ovl.closing = true;
-
-        ovl.refreshState();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    onClick() {
-        const ovl = this;
-
-        if (ovl.opt && ovl.opt.closeWhenClick) {
-            ovl.close();
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    setupEvents = function () {
-        const ovl = this;
-        function onKeyDown(e) {
-            const key = e && e.key ? e.key.toLowerCase() : '';
-
-            if ((key === 'esc' || key === 'escape') && ovl.opt && ovl.opt.closeWhenEscape) {
-                ovl.close();
-            }
-        }
-
-        document.addEventListener('keydown', onKeyDown);
-
-        ovl.clearEvents = function () {
-            document.removeEventListener('keydown', onKeyDown);
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-}