app_js/glightbox/src/js/glightbox.js
/**
     * Handle resize
     * Create only to handle
     * when the height of the screen
     * is lower than the slide content
     * this helps to resize videos vertically
     * and images with description
     */
Handle resize
Create only to handle
when the height of the screen
is lower than the slide content
this helps to resize videos vertically
and images with description
Handle resize Create only to handle when the height of the screen is lower than the slide content this helps to resize videos vertically and images with description
resize(slide = null) {
        slide = (!slide ? this.activeSlide : slide);
        document.body.style.width = ``;
        document.body.style.width = `${document.body.offsetWidth}px`;
        if (!slide || hasClass(slide, 'zoomed')) {
            return;
        }
        const winSize = windowSize();
        const video = slide.querySelector('.gvideo-wrapper');
        const image = slide.querySelector('.gslide-image');
        const description = this.slideDescription;
        let winWidth = winSize.width;
        let winHeight = winSize.height;
        if (winWidth <= 768) {
            addClass(document.body, 'glightbox-mobile');
        } else {
            removeClass(document.body, 'glightbox-mobile');
        }
        if (!video && !image) {
            return;
        }
        let descriptionResize = false;
        if (description && (hasClass(description, 'description-bottom') || hasClass(description, 'description-top')) && !hasClass(description, 'gabsolute')) {
            descriptionResize = true;
        }
        if (image) {
            if (winWidth <= 768) {
                let imgNode = image.querySelector('img');
                imgNode.setAttribute('style', '')
            } else if (descriptionResize) {
                let descHeight = description.offsetHeight;
                let maxWidth = this.slidesData[this.index].width;
                maxWidth = (maxWidth <= winWidth ? maxWidth + 'px' : '100%')
                let imgNode = image.querySelector('img');
                imgNode.setAttribute('style', `max-height: calc(100vh - ${descHeight}px)`)
                description.setAttribute('style', `max-width: ${imgNode.offsetWidth}px;`)
            }
        }
        if (video) {
            let videoRatio = this.settings.plyr.ratio.split(':');
            let maxWidth = this.slidesData[this.index].width;
            let maxHeight = maxWidth / (parseInt(videoRatio[0]) / parseInt(videoRatio[1]));
                maxHeight = Math.floor(maxHeight);
            if (descriptionResize) {
                winHeight = winHeight - description.offsetHeight;
            }
            if (winHeight < maxHeight && winWidth > maxWidth) {
                let vwidth = video.offsetWidth;
                let vheight = video.offsetHeight;
                let ratio = winHeight / vheight;
                let vsize = { width: vwidth * ratio, height: vheight * ratio };
                video.parentNode.setAttribute('style', `max-width: ${vsize.width}px`)
                if (descriptionResize) {
                    description.setAttribute('style', `max-width: ${vsize.width}px;`)
                }
            } else {
                video.parentNode.style.maxWidth = `${maxWidth}px`;
                if (descriptionResize) {
                    description.setAttribute('style', `max-width: ${maxWidth}px;`)
                }
            }
        }
    }
resize ( slide = null ) { slide = ( ! slide ? this . activeSlide : slide ) ; document . body . style . width = ` ` ; document . body . style . width = ` ${ document . body . offsetWidth } ` ; if ( ! slide || hasClass ( slide , 'zoomed' ) ) { return ; } const winSize = windowSize ( ) ; const video = slide . querySelector ( '.gvideo-wrapper' ) ; const image = slide . querySelector ( '.gslide-image' ) ; const description = this . slideDescription ; let winWidth = winSize . width ; let winHeight = winSize . height ; if ( winWidth <= 768 ) { addClass ( document . body , 'glightbox-mobile' ) ; } else { removeClass ( document . body , 'glightbox-mobile' ) ; } if ( ! video && ! image ) { return ; } let descriptionResize = false ; if ( description && ( hasClass ( description , 'description-bottom' ) || hasClass ( description , 'description-top' ) ) && ! hasClass ( description , 'gabsolute' ) ) { descriptionResize = true ; } if ( image ) { if ( winWidth <= 768 ) { let imgNode = image . querySelector ( 'img' ) ; imgNode . setAttribute ( 'style' , '' ) } else if ( descriptionResize ) { let descHeight = description . offsetHeight ; let maxWidth = this . slidesData [ this . index ] . width ; maxWidth = ( maxWidth <= winWidth ? maxWidth + 'px' : '100%' ) let imgNode = image . querySelector ( 'img' ) ; imgNode . setAttribute ( 'style' , ` ${ descHeight } ` ) description . setAttribute ( 'style' , ` ${ imgNode . offsetWidth } ` ) } } if ( video ) { let videoRatio = this . settings . plyr . ratio . split ( ':' ) ; let maxWidth = this . slidesData [ this . index ] . width ; let maxHeight = maxWidth / ( parseInt ( videoRatio [ 0 ] ) / parseInt ( videoRatio [ 1 ] ) ) ; maxHeight = Math . floor ( maxHeight ) ; if ( descriptionResize ) { winHeight = winHeight - description . offsetHeight ; } if ( winHeight < maxHeight && winWidth > maxWidth ) { let vwidth = video . offsetWidth ; let vheight = video . offsetHeight ; let ratio = winHeight / vheight ; let vsize = { width : vwidth * ratio , height : vheight * ratio } ; video . parentNode . setAttribute ( 'style' , ` ${ vsize . width } ` ) if ( descriptionResize ) { description . setAttribute ( 'style' , ` ${ vsize . width } ` ) } } else { video . parentNode . style . maxWidth = ` ${ maxWidth } ` ; if ( descriptionResize ) { description . setAttribute ( 'style' , ` ${ maxWidth } ` ) } } } }
Handle resize
 Create only to handle
 when the height of the screen
 is lower than the slide content
 this helps to resize videos vertically
 and images with description
Handle resize Create only to handle when the height of the screen is lower than the slide content this helps to resize videos vertically and images with description