How to close the menu collapse when bootstrap tour starts?

Question

I have a site built with "Drupal 8" and "Bootstrap 3".

How to close the menu collapse when bootstrap "Tour" starts ?

https://www.s1biose.com

"Tour" starts by clicking on "Commencer la visite" in the left menu.

I want the left and right menu to close automatically when the "Commencer la visite" button is clicked.

Here are the two menus :

id="navbar-collapse-first"
id="navbar-collapse-second"

Here is the contents of my file tour.js :

(function ($, _, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.bsTour = {
    attach: function (context, settings) {
      $(window).on('load', function (event) {
        try
        {
          var tourOptions = $(drupalSettings.bs_tour.tour)[0];
          var tips = tourOptions.steps;
          var keyboard = tourOptions.keyboard;
          var debug = tourOptions.debug;
          var steps = [];

          for (var i = 0; i < tips.length; i++) {
            if ($(tips[i].element).length > 0) {
              tips[i].backdropPadding.top = parseInt(tips[i].backdropPadding.top);
              tips[i].backdropPadding.right = parseInt(tips[i].backdropPadding.right);
              tips[i].backdropPadding.bottom = parseInt(tips[i].backdropPadding.bottom);
              tips[i].backdropPadding.left = parseInt(tips[i].backdropPadding.left);

              switch (tips[i].backdrop) {
                case "0":
                  tips[i].backdrop = false;
                  break;

                case "1":
                  tips[i].backdrop = true;
                  break;
              }

              steps.push(tips[i]);
            }
          }

          if (steps.length) {
            var tour = new Tour({
              debug: debug,
              keyboard: keyboard,
              template: "<div class='popover tour'>\
              <div class='arrow'></div>\
              <h3 class='popover-title'></h3>\
              <div class='popover-content'></div>\
              <div class='popover-navigation'>\
              <button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\
              <span data-role='separator'>|</span>\
              <button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
              <button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
              </div>\
              </div>",
            });

            // Add steps to the tour
            tour.addSteps(steps);

            // Initialize the tour
            tour.init();

            // Start the tour
            tour.start();

            $('#bs-tour-restart').click(function () {
                // Restart the tour
                tour.init();
                tour.restart();
            });

            // Add tour object to drupalSettings to allow manipulating tour from other modules.
            // Example: drupalSettings.bs_tour.currentTour.end();
            drupalSettings.bs_tour.currentTour = tour;
          }

        } catch (e) {
          // catch any fitvids errors
          window.console && console.warn('Bootstrap tour stopped with the following exception');
          window.console && console.error(e);
        }
      });
    }
  };

})(window.jQuery, window._, window.Drupal, window.drupalSettings);

score 1 · Accepted Answer · answered Jan 20 '18 at 23:17

1

Can you try with this js code instead yours :

        $('#bs-tour-restart').click(function () {

            $('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
            // Restart the tour
            tour.init();
            tour.restart();
        });

answered Jan 20 '18 at 23:17

BENARD Patrick

30,363
16
99
105

Thank you. But the display is very weird. Can you watch https://www.s1biose.com the "Commencer la visite" button in the left menu. The planar plane is black, whereas it should be dark with transparency. When I click on next, the area of the "Tour" is not visible. When I finish the "Tour" this bug. – 3cfe5693 Jan 20 '18 at 23:42
do you see the problem with "Tour"? Before it works well. If you delete cookies from your browser, "Tour" is displayed with the automatic start. If you run "Tour" manually with the left menu button, that bug. – 3cfe5693 Jan 21 '18 at 19:41
Great. I erased all the navigation cookies and it works. Where to get the problem? If a user visits my site again, he will have the same problem. How to force cookies to expire? Thank you – 3cfe5693 Jan 21 '18 at 19:48
Thank you. I have another problem with "Tour" https://stackoverflow.com/questions/48406273/bootstrap-tour-bug-when-i-start-it – 3cfe5693 Jan 23 '18 at 21:35

How to close the menu collapse when bootstrap tour starts?

1 Answers1

Linked