Skip to main content

Order on Resize

    const size = "";
    const initsize = false;

    window.addEventListener("resize", (e) => {

        if(e.currentTarget.innerWidth < 1000 && (size == "notmobile" || initsize == false)) {
            let grids = document.querySelectorAll(".grid-container");

            grids.forEach(element => {
                let images = element.querySelectorAll(".frame-type-image");
                if(images.length > 0){
                    let orderfollowup = images.length;
                    for(a=0; a<images.length; a++){
                        images[a].parentElement.style.order = a + 1;
                    }

                    let rest = element.querySelectorAll(".frame:not(.frame-type-image)");
                    for(a=0; a<rest.length; a++){
                        orderfollowup = orderfollowup + 1;
                        rest[a].parentElement.style.order = orderfollowup;
                    }
                }
            })

            size = "mobile";
            initsize = true;
        }
        if((size == "mobile" || initsize == false) && e.currentTarget.innerWidth >= 1000) {
            let grids = document.querySelectorAll(".grid-container");

            grids.forEach(element => {
                let frames = element.querySelectorAll(".frame");
                for(a=0; a<frames.length; a++){
                    frames[a].parentElement.style.order = 0;
                }
            })

            size = "notmobile";
            initsize = true;
        }

    });