label-3d-points/public/js/popup_dialog.js

class MovableView
{
    mouseDown = false;
    mouseDownPos = null;

    // move starts in dragableUi, 
    // movable in movableUi,
    // the pos of posUi is set.
    constructor(dragableUi, posUi, funcOnMove)
    {

        let movableUi = document.getElementById("move-handle-wrapper");

        dragableUi.addEventListener("mousedown", (event)=>{
            if (event.which == 1 && event.currentTarget == event.target)
            {
                
                this.mouseDown = true;
                this.mouseDownPos = {x: event.clientX, y:event.clientY};

                movableUi.style.display="inherit";
            }
        });

        movableUi.addEventListener("mouseup", (event)=>{
            if (this.mouseDown){
                dragableUi.style.cursor = "";
                event.stopPropagation();
                event.preventDefault();
                this.mouseDown = false;          
                
                movableUi.style.display="none";
            }
        });

        movableUi.addEventListener("mousemove", (event)=>{

            if (this.mouseDown){
                let posDelta = {
                    x: event.clientX - this.mouseDownPos.x,
                    y: event.clientY - this.mouseDownPos.y 
                };
                    
                dragableUi.style.cursor = "move";

                this.mouseDownPos = {x: event.clientX, y:event.clientY};

                let left = posUi.offsetLeft;
                let top  = posUi.offsetTop;

                posUi.style.left = Math.max(0, (left + posDelta.x)) + 'px';
                posUi.style.top = Math.max(0, (top + posDelta.y)) + 'px';

                if (funcOnMove)
                    funcOnMove();
            }

        });
    }
}


class PopupDialog extends MovableView
{
    constructor(ui)
    {
        super(ui.querySelector("#header"), ui.querySelector("#view"));

        this.ui = ui;  //wrapper
        this.viewUi = this.ui.querySelector("#view");
        this.headerUi = this.ui.querySelector("#header");        
        this.titleUi = this.ui.querySelector("#title");
        
        this.ui.onclick = ()=>{
            this.hide();
        };
        
        this.ui.addEventListener("keydown", (event)=>{

            if (event.key == 'Escape'){
                this.hide();
                
                event.preventDefault();
            }
            event.stopPropagation();              
        });

        this.viewUi.onclick = function(event){
            //event.preventDefault();
            event.stopPropagation();             
        };

        this.titleUi.onclick = function(event){
            //event.preventDefault();
            event.stopPropagation();  
        };

        this.titleUi.addEventListener("mousedown", (event)=>{
            //event.preventDefault();
            event.stopPropagation();
        });

        this.titleUi.addEventListener("contextmenu", (event)=>{
            event.stopPropagation();
        })

        // this.viewUi.addEventListener("contextmenu", (e)=>{
        //     e.stopPropagation();
        //     e.preventDefault();
        // });


        



        // this.ui.querySelector("#info-view").onclick = function(event){
        //     event.preventDefault();
        //     event.stopPropagation();             
        // };
        

        this.ui.querySelector("#btn-exit").onclick = (event)=>{
            this.hide();
        }

        this.maximizeButton = this.ui.querySelector("#btn-maximize")

        if (this.maximizeButton)
        {
            this.maximizeButton.onclick = (event)=>{
                let v = this.viewUi;
                v.style.top = "0%";
                v.style.left = "0%";
                v.style.width = "100%";
                v.style.height = "100%";
                v.style["z-index"] = 5;

                event.currentTarget.style.display = 'none';
                this.ui.querySelector("#btn-restore").style.display = "inherit";
            };
        }

        this.restoreButton = this.ui.querySelector("#btn-restore");
        
        if (this.restoreButton) {
            this.restoreButton.onclick = (event)=>{
                let v = this.viewUi;
                v.style.top = "20%";
                v.style.left = "20%";
                v.style.width = "60%";
                v.style.height = "60%";
                event.currentTarget.style.display = 'none';
                this.ui.querySelector("#btn-maximize").style.display = "inherit";
            };
        }

    }



    hide(msg)
    {
        this.ui.style.display = 'none';

        if (this.onExit)
        {
            this.onExit(msg);
        }
    }
    
    show(onexit)
    {
        this.ui.style.display = 'inherit';
        this.onExit = onexit;
        //this.ui.focus();
    }

    
}


export {PopupDialog, MovableView}