wrap-detect.js

document.addEventListener('DOMContentLoaded', function () {
    function wrapDetect() {

        // use this class on flex and grid containers where wrap detection is needed.
        let matches = document.querySelectorAll(".wrap-detect");

        // wrap detection script
        matches.forEach((wrapper) => {

            // define variables
            let wrappables = wrapper.children;
            let wrappedCount = 0;
            let wrapTheRest = false;
            let columns = 1;
            let row = 1;
            let altColumns = 1;

            // apply "some-wrapped" to parent element containing wrapped elements, and "wrapped" class to flex and grid items that have wrapped.
            wrapper.classList.remove("some-wrapped");
            wrapper.classList.remove("all-wrapped");
            [...wrappables].forEach((element, index) => {
                element.classList.remove("wrapped");
                if (index == 0) {
                   element.classList.add("first");
                } else if (wrapTheRest == true) {
                    element.classList.add("wrapped");
                    wrappedCount += 1;
                } else if (element.offsetLeft <= element.previousElementSibling.offsetLeft) {
                    element.classList.add("wrapped");
                    wrapper.classList.add("some-wrapped");
                    wrappedCount += 1;
                    wrapTheRest = true;
                } else {
                    columns += 1;
                }
            });

            // apply "all-wrapped" class to parent container if all flex and grid items are stacked.
            if (wrappables.length - 1 == wrappedCount) {
                wrapper.classList.remove("some-wrapped");
                wrapper.classList.add("all-wrapped");
            }

            // assign column count to parent using wrap detection
            for(var i = wrapper.classList.length - 1; i >= 0; i--) {
                if(wrapper.classList[i].startsWith("cc-")) {
                    wrapper.classList.remove(wrapper.classList[i]);
                }
            }
            columnCountClassName = "cc-" + columns;
            wrapper.classList.add(columnCountClassName);

            // alternate column count using width detection
            for(var i = wrapper.classList.length - 1; i >= 0; i--) {
                if(wrapper.classList[i].startsWith("cc-alt-")) {
                    wrapper.classList.remove(wrapper.classList[i]);
                }
            }

            wrapperWidth = wrapper.getBoundingClientRect().width;
            itemWidth = wrappables[0].getBoundingClientRect().width;
            altColumns = Math.round(wrapperWidth / itemWidth);

            altColumnCountClassName = "cc-alt-" + altColumns;
            wrapper.classList.add(altColumnCountClassName);

            // assign row numbers to items
            [...wrappables].forEach((element, index) => {
                for(var i = element.classList.length - 1; i >= 0; i--) {
                    if(element.classList[i].startsWith("row-")) {
                        element.classList.remove(element.classList[i]);
                    }
                }
                row = Math.ceil((index + 1) / columns);
                element.classList.add("row-" + row);
            });
        });
    }

    // fire wrap detect script on load
    wrapDetect();

    // fire wrap detect script on screen resize
    window.addEventListener('resize', function(event) {
        wrapDetect();
    }, true);

}, false);