Element reinitialization after cloning element

[Nincha]

Hi!

First off, thanks for this huge work! It's clearly the future of CSS. :)

I've been using the plugin in many situations, and encountered some issues when recreating/moving elements with jQuery. A lot of them have been solved but one - yet which is not really blocking the navigation because its use in that case is supposed to add minor improvments in the case - is still giving me trouble. x)

Some carousel plugins like http://kenwheeler.github.io/slick/ have an "infinite" option which creates a loop for left/right navigation. I've tried a lot of options, but it seems (not sure about that but it's the only idea I've got left in mind) that when the script both clones and moves (in DOM) an element, the script has trouble reloading.

There's my example here in case it can help : https://www.vs-league.com/app/season/players/14 ; you can see that when you drag the window to desktop size multiple times, you may have differents font sizes in the carousel.

I've been trying things like that:

  $('.sesasonPrizesCarousel').on('reInit', function(slick, currentSlide){
      ElementQueries.init();
  });

  $('.sesasonPrizesCarousel').on('afterChange', function(slick, currentSlide){
      ElementQueries.init();
  }); 

Do you have information about that type of case?

Cheers,
Charlie

[marcj]

Interesting. Things to find out: How does the library clone the elements and what implication does this have to the ResizeSensor. I assume the ResizeSensors is cloned as well but it's callbacks are empty, thus stays uninitialized or simply uses cloned callbacks for the wrong element. One idea is to check here additionally for || element.resizedAttached.length() == 0
https://github.com/marcj/css-element-queries/blob/master/src/ElementQueries.js#L174
another idea would be to check here for || element.elementQueriesSetupInformation.element != element)
https://github.com/marcj/css-element-queries/blob/master/src/ElementQueries.js#L170