PNF/open/scripts/DragResizeClose.js

class DragResizeClose {
    constructor() {
        this.zIndex = 4;
        this.drag();
        this.setDraggables();
        this.setZindex();
        this.handleCursor();
        this.closeBtn();
    }

    drag() {
        $('.draggable').draggable({ containment: "window" });
    }

    setDraggables() {
        const w = window.innerWidth;
        const h = window.innerHeight;

        const randomCorrectedWidth = (sizeWindow, sizeBox) => {
            const corrected = sizeWindow - parseInt(sizeBox);
            return Math.floor(Math.random() * corrected)
        }
        
        const randomCorrectedHeight = (sizeWindow, sizeBox) => {
            const corrected = sizeWindow - parseInt(sizeBox);
            return getRndInteger(105, corrected-150)
        }
        
        const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;

        $( ".draggable" ).each(function() {
            const rw = getRndInteger(w/2-500, w/2)

            //setDimension
            $(this).css("width",rw);
            $(this).css("height", 'auto');

            //setPosition
            if (this.id != 'program'){
                const wBox = $(this).css('width');
                const hBox = $(this).css('height');
                const rX =  randomCorrectedHeight(h, hBox);
                const rY =  randomCorrectedWidth(w, wBox);
                $(this).css("top", rX);
                $(this).css("left", rY);
            } else {
                $(this).css("top", '20px');
                $(this).css("right", '20px');
            }

        });
    }

    setZindex() {
        let thatZindex = this.zIndex;
        $('#dragZone div').mousedown(function() {                         // Setup z-index handler
            $(this).addClass('top').removeClass('bottom');
            $(this).siblings().removeClass('top').addClass('bottom');
            $(this).css("z-index", thatZindex++);
        });
    }

    handleCursor() {
        $('.draggable')
            .on("mousedown", () => $('.draggable').css('cursor', 'grabbing'))
            .on("mouseup mouseleave", () => $('.draggable').css('cursor', 'grab'));
    }

    resize() {
        $(".resizable").resizable({ aspectRatio: true, maxHeight: 900, minHeight: 10 });
        $(".resizableOriz").resizable({ aspectRatio: true, maxHeight: 500, minHeight: 10 });
    }

    closeBtn() {
        $(".closable").click(function() { 
            $(this).parent().fadeOut(); 
        })
        .hover(
            function() { $( this ).addClass( "hover" ); }, 
            function() { $( this ).removeClass( "hover");}
        );
    }
}