Сворачивание панели фильтров

[moroz-aleksey-95]

Не знаю как у других. Но у меня очень много фильтров в сущностях.
На пк пользоваться нормально. Но вот на мобильном


но вот на мобильном это превращается в длинный список, который прям неудобно листать

при свайпе и попадании на поле одного из фильтров, он тут же раскрывается.

Я себе по быстрому добавил кнопку, которая сворачивает эти фильтры


файл /includes/classes/reports/filters_panels.php

Добавлена кнопка

Код: Выделить всё

$html = '<button class="btn btn-primary" onclick="toggleDiv()">Панель фильтров</button><div id="myDiv" class="filters-panels horizontal-filters-panels">';

и JS

Код: Выделить всё

<script>
        // Функция для переключения видимости div блока
        function toggleDiv() {
            var div = document.getElementById("myDiv"); // Получаем элемент div по ID
            // Проверяем текущее состояние display
            if (div.style.display === "none") {
                div.style.display = "block"; // Показываем div
            } else {
                div.style.display = "none"; // Скрываем div
            }
        }
    </script>

Хотелось бы в системе подобный функционал для сворачивания и разворачивания панелей фильnров.

[nruslan2]

была тема на форуме
плюс если очень надо есть платная доработка viewtopic.php?p=27005#p27005

[tax]

Спасибо за код. Добавлю в копилку.
Но у меня вопрос, как вы потом с такого плана доработками обновляетесь?
Я делал себе штук 4-5 доработок в коде движка и запарился потом их переносить после обновлений. Просто интересно, может я не тем путём шёл...

[nruslan2]

все просто:
файлы каждой доработки лежат точно в такой же структуре папок, те видно какие файлы были изменены
а сам код внутри файла заключен между уникальным комментарием (любой текст, которого нет в системе), те легко визуально найти место изменения.

Сложность наступает только когда при обновлении то место куда был внедрен код сильно меняется, тогда приходится менять код иногда целиком, иногда частично!

[tax]

Спасибо за ответ.
Я примерно тоже так делал. И камменты добавлял, но в какой-то момент это надоедает и оставляю проект дальше без обновлений.

[nruslan2]

Тут еще надо понимать, что менять код через строчку не вариант - а то получаем на выходе файл весь в комментариях - поэтому надо искать более оптимальные варианты.

[Parazit00]

Я думаю, что этот вариант тоже может быть полезен, если кто-то не хочет вносить изменения в скрипт.

CSS

Код: Выделить всё

/* Стили для скрытия/отображения фильтров */
ul[class*="list-inline filters-panels"] {
    transition: max-height 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    max-height: 500px; /* Установить максимальную высоту для видимых фильтров */
}

ul[class*="list-inline filters-panels"].collapsed {
    max-height: 0;
    padding: 0;
    margin: 0;
}

/* Стили кнопки "Панель фильтров" */
#toggle-all-filters {
    background-color: #337ab7;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 20px; /* Увеличено значение для более закругленных углов */
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}

JS

Код: Выделить всё

<script>
document.addEventListener("DOMContentLoaded", function () {
    const filterGroups = document.querySelectorAll('ul[class*="list-inline filters-panels"]');

    if (filterGroups.length > 0) {
        const filtersContainer = filterGroups[0].parentNode;

        // Создаем кнопку
        const button = document.createElement("button");
        button.id = "toggle-all-filters";
        button.textContent = "Панель фильтров";

        // Вставляем кнопку перед первым фильтром
        filtersContainer.insertBefore(button, filterGroups[0]);

        // Проверка состояния сворачивания из localStorage
        const collapsedState = localStorage.getItem('filtersCollapsed');
        if (collapsedState === 'true') {
            filterGroups.forEach(group => group.classList.add("collapsed"));
        } else {
            filterGroups.forEach(group => group.classList.remove("collapsed"));
        }

        // Обработчик для кнопки
        button.addEventListener("click", function () {
            const isCollapsed = [...filterGroups].every(group => group.classList.contains("collapsed"));

            filterGroups.forEach(group => {
                group.classList.toggle("collapsed", !isCollapsed);
            });

            // Сохраняем текущее состояние в localStorage
            localStorage.setItem('filtersCollapsed', !isCollapsed);
        });
    }
});
</script>

[Fait]

Я как-то делал такую штуку в виде плагина, который отдельно можно прицепить.
Если интересует, сделаю и вам)

[nruslan2]

Я как-то делал такую штуку в виде плагина, который отдельно можно прицепить.
Если интересует, сделаю и вам)

А смысл этого плагина если он все равно работать будет через JS) В родной функционал изменения можно внести только через правку исходников. Конечно можно намутить собственный алгоритм такой же функции как в исходниках, только через плагин, но он все равно должен будет вставляться через JS в место родного блока фильтров, да и смысл городить такой огород!)
у JS момент там не во всех ипостасях четко работает, не то что с php)

[Fait]

Да я и не претендую на идеальное решение)
Просто в моём случае нет никакой зависимости от обновлений конструктора
Хотя у меня столько уже доработок куплено, что хочешь не хочешь, а зависимость имеется