Elements crop

cropped.js

$(function () {
    var container = $('.js-users-crop');

    if (container.length === 0) return;

    var config = {
        rowsCrop: (!container.attr('data-row')) ? 2 : +container.attr('data-row'), // Получаем сколько хотим видеть рядов или 2
        widthChildren: container.children().outerWidth(true),
        heightChildren: container.children().outerHeight(true),
        openText: 'Показать всех',
        closeText: 'Свернуть'
    };

    // Получаем кол-во элементов влезающих в ряд (Ширина контенйра)
    function getRowElems(maxWidth) {
        var elems = Math.trunc(maxWidth / config.widthChildren); // убираем дроби (мы работаем с кол-вом целых элементов)
        return elems;
    }

    // Получаем общее кол-во строк с элементами
    function getRows(len, unit) {
        var rows = len / unit; // общее кол-во элементов делим на кол-во элементов 1 строки
        console.log(rows);
        if ((rows ^ 0) === rows) { // Если число целое - возвращаем
            return Math.trunc(rows);
        } else { // Если число не целое - прибавляем 1
            return Math.trunc(rows) + 1;
        }

    }

    // Функция инициализации кропа
    function addCrop(box) {
        box.css({
            height: config.heightChildren * config.rowsCrop // задаем высоту блока
        });
        box.addClass('_cropped');
        if (box.next('.js-toggle-crops').length === 0) {
            box.after('<a href="javascript:;" class="js-toggle-crops btn btn--sm btn--border">'+ config.openText +'</a>');
        }
    }

    function removeCrop(box) {
        box.attr('style', '');
        box.next('.js-toggle-crops').remove();
        box.removeClass('_cropped');
    }

    function setHeightParent (el, h) {
        el.css({height: h}); // задаем высоту блока
    }

    container.each(function () {
        var $this = $(this);
        var items = $this.children();
        var maxVisible = getRowElems($this.width()) * config.rowsCrop; // Получаем максимальное кол-во элементов, которые влезут в видимую область "config.rowsCrop" рядов

        if (items.length > maxVisible) { // Хотим понять, хватит ли нам элементов на "config.rowsCrop" рядов, если да - кропим
            addCrop($this);
        }
    });

    $(document).on('click.cropped', '.js-toggle-crops', function (event) {
        event.preventDefault();

        var $this = $(this);
        var parent = $this.siblings('.js-users-crop'); // контейнер
        var items = parent.children(); // набор детей контейнера
        var row = getRowElems(parent.width()); // определяем кол-во детей в строке

        var rows = getRows(items.length, row); // определяем кол-во строк
        var fullHeight = rows * config.heightChildren; // общая высота контейнера
        var cropHeight = config.heightChildren * config.rowsCrop; // высота кропнутого контейнера

        if (parent.hasClass('_cropped')) {
            setHeightParent(parent, fullHeight);
            $this.text(config.closeText);
            parent.removeClass('_cropped');
        } else {
            setHeightParent(parent, cropHeight);
            $this.text(config.openText);
            parent.addClass('_cropped');
        }
    });

    $(window).on('resize', function () {
        container.each(function () {
            var $this = $(this);
            var items = $this.children();
            var maxVisible = getRowElems($this.width()) * config.rowsCrop; // Получаем максимальное кол-во элементов, которые влезут в видимую область "config.rowsCrop" рядов

            if (items.length <= maxVisible) { // Хотим понять, хватит ли нам элементов на "config.rowsCrop" рядов, если да - кропим
                removeCrop($this);
            } else {
                addCrop($this);
            }
        });
    });

}());