Inclure du javascript en Drupal 8

Drupal 8 continue son avancée et les questions se font de plus en plus pressantes quant à son utilisation.

Des pistes de réponse existent et plus récemment Bluespark a mis en ligne le status du top 100 des modules qui permet de se rendre compte de la situation de la contribution.

Le rapport avec javascript vous me direz ? Et bien, il se trouve que pas mal de modules servant à intégrer des librairies tierces sont absents (Views slideshow, Lightbox, Superfish, jCarousel). Alors comment s'en servir quand même dans Drupal 8 ?

Pour l'exemple j'ai voulu utiliser Masonry sur une vue.

Comme précisé dans notre liste des changements en Drupal 8, la solution de remplacement à drupal_add_js est "d'attacher" son fichier à un render array.

Mais on peut aussi passer par la déclaration d'une librairie en créant un fichier <mondulename>.libraries.yml à la racine de son module.

jquery.masonry: # the machine name of library.
  version: 2.1 # the version of the library.
  js:
    /libraries/masonry/jquery.masonry.min.js: {} # path to js the source with additional parameters.
  dependencies:
    - core/jquery # required dependencies.

Ensuite il suffit "d'attacher" la librairie à un render array de la page (ici celui de la vue).

function happyculture_views_pre_render($view) {
  if ($view->storage->id == 'realisations') {
    $view->element['#attached']['library'][] = 'happyculture/jquery.masonry';
    $view->element['#attached']['library'][] = 'happyculture/happyculture.masonry';
  }
}

Cela à l'avantage de permettre la déclaration de dépendances et facilite une inclusion plus fine des librairies dans les pages nécessaires. De plus, cela rend plus simple la suppression de l'injection d'une librairie en cas de besoin.

Ensuite, on peut faire de même avec son code javascript en rajoutant son fichier custom dans le fichier <mondulename>.libraries.yml.

happyculture.masonry:
  version: 1.0
  js:
    happyculture.masonry.js: {}
  dependencies:
    - happyculture/jquery.masonry

Et le code en fonction de la librairie dans le fichier déclaré, ici happyculture.masonry.js qui sera placé à la racine de mon module.

(function ($) {
  "use strict";
  Drupal.behaviors.masonViews = {
    attach: function (context) {
      $('.view-realisations .view-content').masonry({
        itemSelector : '.views-row'
      });
    }
  };
})(jQuery);

Pour plus d'informations voir la doc officielle sur : https://www.drupal.org/node/2274843 et le change record associé https://www.drupal.org/node/2169605