0

On this page :

https://dev.s1biose.com/profil

There is a menu at the top right. It flashes green when the .views-exposed-form class is found with this JS code:

  if ($("#navbar-collapse-second .views-exposed-form").length) {
       $("#block-togglenavigationsecond .icon-navbar-second-alert").removeClass("icon-navbar-second-alert-disable");
  };

When the BigPipe module is installed, the animation does not work (under dev domain).

Here is my site with BigPipe uninstalled (under www domain):

https://www.s1biose.com/profil

The problem is that I do not see any difference in the HTML code.

Why does not the animation work with BigPipe ?

It must work on all browsers. But BigPipe creates problems on some web browser.

Thank you

enter image description here

Here is the complete JS file for my animation:

(function ($) {
  'use strict';

  $('#navbar-collapse-first').on('show.bs.collapse', function () {
       $('#navbar-collapse-second').collapse('hide');
  });

  $('#navbar-collapse-second').on('show.bs.collapse', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

  $('#navbar-collapse-first').on('show.bs.collapse', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#navbar-collapse-first').on('hide.bs.collapse', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

  $('#navbar-collapse-second').on('show.bs.collapse', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#navbar-collapse-second').on('hide.bs.collapse', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

  $('#navbar-collapse-first .form-submit').on('click', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

  $('#navbar-collapse-second .form-submit').on('click', function () {
       $('#navbar-collapse-second').collapse('hide');
  });

  $('#navbar-collapse-first .navbar-nav .dropdown').on('shown.bs.dropdown', function () {
       $(this).find('.dropdown-toggle svg').removeClass("fa-plus-circle").addClass("fa-minus-circle");
  });

  $('#navbar-collapse-first .navbar-nav .dropdown').on('hidden.bs.dropdown', function () {
       $(this).find('.dropdown-toggle svg').removeClass("fa-minus-circle").addClass("fa-plus-circle");
  });

  $('.collapse').on('shown.bs.collapse', function () {
       $(this).parent().find('.panel-heading .collapse-change-icon svg').removeClass("fa-plus-circle").addClass("fa-minus-circle");
  });

  $('.collapse').on('hidden.bs.collapse', function () {
       $(this).parent().find('.panel-heading .collapse-change-icon svg').removeClass("fa-minus-circle").addClass("fa-plus-circle");
  });

  $('.bs-tour-action-trigger').on('click', function () {
       $('#comment-ca-marche').modal('hide');
  });

  $('#block-boutonimportant').on('click', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

  $('#block-boutoncharte').on('click', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

  if ($("#navbar-collapse-first .views-manage-menu").length) {
       $("#block-togglenavigationfirst .icon-navbar-first-alert").removeClass("icon-navbar-first-alert-disable");
  };

  if ($("#navbar-collapse-second .views-exposed-form").length) {
       $("#block-togglenavigationsecond .icon-navbar-second-alert").removeClass("icon-navbar-second-alert-disable");
  };

  $('#navbar-collapse-first').on('shown.bs.collapse', function () { 
       $(this).find("#block-menuprincipal .dropdown-toggle").dropdown("toggle");
  });

  $('#navbar-collapse-first').on('shown.bs.collapse', function () { 
       $(this).find(".views-manage-menu .dropdown-toggle").dropdown("toggle");
  });

}(jQuery));
1
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Clive
    Sep 7, 2018 at 7:21

1 Answer 1

3

Bigpipe's purpose is to load dynamic/uncachable blocks of content (e.g. forms) in via javascript. This is so that the rest of the site can remain cached and just the dynamic parts get loaded in separate.

So the issue here is probably your own javascript is triggering before big pipe has loaded the targeted content in. Have you got your JS in window.load or something like that? You should place it into a Drupal behaviour which will get called each time something dynamic is loaded in by drupal.

3
  • Thank you for the information. I updated my question with my full JS file.
    – user89255
    Sep 7, 2018 at 15:43
  • Is my JS file correct ?
    – user89255
    Sep 9, 2018 at 22:42
  • Take a look at this which goes through the behaviours. that should set you on the right track lullabot.com/articles/…
    – Leigh
    Sep 10, 2018 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.