@GIBRID21
...

Как дестроить isotop библиотеку, через ванильный js?

Ссылка на код(js код init'a библиотеки в самом низу)
Собственно проблема:
Есть хедер, в меню при наведении на первый элемент, ховериться подменю. В нем элементы кастомно расположены, поэтому используется библиотека isotope.
При ресайзе в точке меньшей 768px нужно библиотеку дестроить в api есть инструкции для jq, и vanilla js https://isotope.metafizzy.co/methods.html#destroy
Есть даже примеры:

У меня это не работает. Ссылка на код(js код init'a библиотеки в самом низу)
Оно дестроиться, но потом в dom дереве сразу же добавляются стили и по сути крашиться.
Причем дестрой на jq у меня тоже работает. Но грузить ради этого jq, не комильфо
  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
@rejjer
Там есть параметр columnWidth, в котором можно установить либо ширину значением, либо класс, у которого это значение будет адаптивно считаться в процентах. percentPosition разрешает использование этих процентов.
$('.grid').isotope({
  percentPosition: true,
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: '.grid-sizer'
  }
})

При инициализации/дестрое неплохо было бы добавить переменную, которая сообщала бы что инициализация/дестрой уже были, сейчас инициализация запускается 100500 раз при ресайзе.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@GIBRID21 Автор вопроса
...
Да из за того что оно инититься 500 раз при ресайзе, оно начинает глючить вставил проверку:
var elem = document.querySelector('.nav-bot__nav__nav-lvl2'),
        iso;

    function isotopefunc() {
        if (window.innerWidth > 768) {
                if(!elem.classList.contains("init")) {
                    iso = new Isotope( elem, {
                      // options
                      itemSelector: '.nav-bot__nav__nav-lvl2__list',
                    });
                    elem.classList.toggle("init");
                    console.log('init')
                }


        }
        if (window.innerWidth < 768) {
            if(elem.classList.contains("init")) {
                iso.destroy();
                elem.classList.toggle("init")
                console.log('destroy');
            }

            // document.querySelector('.nav-bot__nav__nav-lvl2').removeAttribute('style');
            // for (var elements = document.querySelectorAll('.nav-bot__nav__nav-lvl2 ul'), i = 0; i < elements.length; i++) {
            //     elements[i].removeAttribute('style');
            // }
        }
    }
isotopefunc();
window.addEventListener( 'resize', function() {
    isotopefunc();
});

работает как надо.
Почему при множественном ините такое происходит? Где почитать? Создает много одинаковых обьектов? Элемент же один. Не должно же.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы