У меня есть условный оператор if / else, основанный на $(window).width
, который обернут в функцию отладки Drupal 8 .Идея здесь состоит в том, чтобы учесть устройства, которые переходят между двумя размерами области просмотра, определенными в условном выражении, когда пользователь поворачивает свое устройство.
Что должно произойти, если окно с размером выше 767px, метод добавления / удаления классоввыполняется, в противном случае добавляются методы slideToggle и методы добавления / удаления классов.
Проблема заключается в том, что в то время как запускается debounce, методы из любого условного выражения вызываются при изменении размера страницы.Насколько я понимаю, в Debounce следует изменить размер страницы в условном коде.Обратите внимание, что при обновлении страницы код выполняется так, как ожидается.
(function($) {
'use strict';
Drupal.globalInit = {
init: false,
};
Drupal.behaviors.resizeEvent = {
attach: function(context, settings) {
var updatePageElements = function() {
var windowWith = $(window).width();
// Tabs
if ($(window).width() > 767) {
// Show/ hide text .tabs__text
$('.tabs__tab:first').addClass('js-active');
$('.tabs__tab').once().on('click', function() {
$('.tabs__tab').removeClass('js-active');
$(this).addClass('js-active');
});
console.log('greater than 767: ', windowWith)
}
else if ($(window).width() <= 767) {
$('.tabs__tab').removeClass('js-active active');
$('.tabs__inner').css('height', 'auto');
$('.tabs__title').once().on('click', function() {
$(this).
parent().
toggleClass('active').
find('.tabs__text').
slideToggle('fast');
$('.tabs__title').
not(this).
parent().
removeClass('active').
find('.tabs__text').
slideUp();
});
console.log('less than 768: ', windowWith)
}
};
if (!Drupal.globalInit.init) {
// Initial page call.
updatePageElements();
// Bind on every resize.
$(window).
on('resize', Drupal.debounce(updatePageElements, 250));
Drupal.globalInit.init = true;
}
}
};
}(jQuery));