view infinite scroll: how to exec a js function after loading items ?

Question

I have the module "views infinite scrolling" installed on my site and it works. Now I want to exec a function when all loaded (Via ajax) items are loaded and showed to the user. How can I do this ? Thanks.

Answer 1

You should be able to use Drupal JS Behaviors. Views Infinite Scroll should fire off Drupal behaviors on an AJAX request. You would need to add custom JS to your pages that use infinite scrolling.

Here's an example where someone uses this to add a class to views rows loaded from Views Infinite Scroll.

Drupal.behaviors.myBehaviorName = {
  attach: function (context, settings) {
    // run your code here
  }
};

Answer 2

As @romain-ni says, the latest dev version supports raising a trigger when new items are loaded, however there are patches for previous version if for some reason you can't update to the latest version of the views_infinite_scroll package

v8.x-1.6 https://www.drupal.org/project/views_infinite_scroll/issues/3227982

Once this is in place you can listen for that event in your own Javascript:

$(document).on('views_infinite_scroll.new_content', function (evt) {
  // Your code here
});

Answer 3

This code will show a visually-hidden button after all items have loaded.

Drupal.behaviors.infiniteScrollShowButton= {
  attach: function (context, settings) {
    // If all items have loaded, display the "show all" button
    if ($('.view-taxonomy-term .js-pager__items a').length === 0) {
      $('.view-taxonomy-term .view-footer a.button').removeClass('visually-hidden');
    }
  }
};

Answer 4

Un patch existe pour l'ajout d'un évènement jQuery au chargement de contenu : https://www.drupal.org/project/views_infinite_scroll/issues/3164903

On y ajoute deux triggers :

• "views_infinite_scroll.new_content" : au chargement des éléments
• "views_infinite_scroll.new_content.appended" : une fois que les éléments sont présents dans le DOM

Le premier trigger devrait intégrer la prochaine version stable 8.x-1.8, puisqu'il est déjà disponible dans la version 8.x-1.x-dev

Ensuite pour détecter l'évènement :

$(document).on('views_infinite_scroll.new_content', (e) => {...})