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

Question

[Алёша]

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

• Пример дестроя на jq https://codepen.io/desandro/pen/pcjgk
  
• Пример дестроя на js https://codepen.io/desandro/pen/EogCw
  

У меня это не работает. Ссылка на код(js код init'a библиотеки в самом низу)
Оно дестроиться, но потом в dom дереве сразу же добавляются стили и по сути крашиться.

Причем дестрой на jq у меня тоже работает. Но грузить ради этого jq, не комильфо

Comments

[Алёша]

скрин

[Алёша]

Почему-то к елементам даже при дестрое заного инитятся стили.

Answer 1

[rejjer]

Там есть параметр columnWidth, в котором можно установить либо ширину значением, либо класс, у которого это значение будет адаптивно считаться в процентах. percentPosition разрешает использование этих процентов.

$('.grid').isotope({
  percentPosition: true,
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: '.grid-sizer'
  }
})

При инициализации/дестрое неплохо было бы добавить переменную, которая сообщала бы что инициализация/дестрой уже были, сейчас инициализация запускается 100500 раз при ресайзе.

Comments

[Алёша]

Из за того что инитилось 500 раз

Answer 2

[Алёша]

Да из за того что оно инититься 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();
});

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

Comments

[rejjer]

Ответ можно найти в методе инициализации библиотеки