Возможно ли использовать конструктор new ResizeSensor более чем с одним элементом?

290

07 октября 2021, 06:40

Есть два блока, необходимо их сравнивать и в зависимости от ширины и высоты совершать определенные манипуляции.

Нашел такую библиотеку JS, в том числе поддерживающую Jquery (хотя на Jquery иногда и неверно вычисляющую размеры), но на JS вычисляет всегда правильно. Вот репозиторий на github.

Собственно вопрос. Возможно ли изменить следующую функцию (конструктор) чтобы работать в ней сразу с двумя (как минимум) или более селекторами?

Вот так работает только с одним.

var element1 = document.querySelector(".div-resize1");
var element2 = document.querySelector(".div-resize2");
new ResizeSensor(element1, function(size){
    console.log('Ширина: ' + size.width + 'px');
    console.log('Высота: ' + size.height + 'px');
    console.log('размер содержимого изменен');
});

Необходимо чтобы работало с element1 и element2 одновременно.

Заранее, благодарю!

Answer 1

Поскольку данная библиотека не передает в колбеке информацию о элементе, который меняется, придется немного костыльно написать.

В данном примере, когда дивы будут равны, вы увидите два сообщения:

The second is bigger
They are equal

Это происходит потому что, два события не могут происходить одновременно. Сначала срабатывает событие изменения первого (становится меньше), затем второго (становится меньше) элементов.

var items = document.querySelectorAll('.item-for-resize-tracking'); 
var itemSizes = {}; 
 
// Setup ResizeSensor on target item 
items.forEach(item => { 
  new ResizeSensor(item, function(e) { 
    itemSizes[item.id] = e; 
 
    compareSizes(); 
  }); 
}); 
 
 
function compareSizes() { 
  const size1 = itemSizes['item-1']; 
  const size2 = itemSizes['item-2']; 
  if (size1 && size2) { 
    if (size1.width === size2.width) { 
      console.log('They are equal'); 
    } else if (size1.width > size2.width) { 
      console.log('The first is bigger'); 
    } else { 
      console.log('The second is bigger'); 
    } 
  } 
}

#item-1 { 
  background-color: yellow; 
} 
 
#item-2 { 
  background-color: red; 
  max-width: 600px; 
}

<script type='text/javascript' src="https://rawgit.com/marcj/css-element-queries/master/src/ResizeSensor.js"> 
</script> 
 
 
<div class="container"> 
  <div id="item-1" class="item-for-resize-tracking"> 
    <span>Hello world!</span> 
  </div> 
  <div id="item-2" class="item-for-resize-tracking"> 
    <span>Hello world! 2</span> 
  </div> 
</div>

В данном примере мы "синхронизируем" события, функция compareSizes будет вызвана только тогда, когда все элементы изменят свой размер.

const items = document.querySelectorAll('.item-for-resize-tracking'); 
const itemSizes = {}; 
const sizeChanges = {}; 
 
// Setup ResizeSensor on target item 
items.forEach(item => { 
  sizeChanges[item.id] = false; 
  new ResizeSensor(item, function(e) { 
    itemSizes[item.id] = e; 
    sizeChanges[item.id] = true; 
    if (!Object.values(sizeChanges).some(a => !a)) { 
      compareSizes(); 
      Object.keys(sizeChanges).forEach(f => sizeChanges[f] = false); 
    } 
  }); 
}); 
 
 
function compareSizes() { 
  const size1 = itemSizes['item-1']; 
  const size2 = itemSizes['item-2']; 
  if (size1 && size2) { 
    if (size1.width === size2.width) { 
      console.log('They are equal'); 
    } else if (size1.width > size2.width) { 
      console.log('The first is bigger'); 
    } else { 
      console.log('The second is bigger'); 
    } 
  } 
}

#item-1 { 
  background-color: yellow; 
} 
 
#item-2 { 
  background-color: red; 
  max-width: 600px; 
}

<script type='text/javascript' src="https://rawgit.com/marcj/css-element-queries/master/src/ResizeSensor.js"> 
</script> 
 
 
<div class="container"> 
  <div id="item-1" class="item-for-resize-tracking"> 
    <span>Hello world!</span> 
  </div> 
  <div id="item-2" class="item-for-resize-tracking"> 
    <span>Hello world! 2</span> 
  </div> 
</div>