How to reinitialize hopscotch about hopscotch HOT 13 CLOSED

Based on Turbolinks description on github it seems that the framework is completely wiping out DOM between "page loads" :

"Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head."

At that point HopscotchBubble DOM element will be destroyed as well. So when hopscotch.start tour is called again, there is no DOM element for the hopscotch step to show.

We could go two ways about fixing this:

1. Internally, before starting the tour, check if HopscotchBubble element exists. If it does not re-create the element
2. Provide an API that will allow re-initing hopscotch.

I prefer first solution. It seems like something hopscotch should be able to handle internally.

from hopscotch.

Were you able to resolve this?

from hopscotch.

@xenophane

I added a patch to the hopscotch file at the end before the }(window, 'hopscotch'));

  /*
  *
  *  Needed a way to reinitialize hopscotch for use with turbo links 
  *
  */
  context['getNewHopscotch'] = function(){
    winHopscotch = new Hopscotch();
    return winHopscotch;
  };

and then in my app I can call window.hopscotch = window.getNewHopscotch() to reinitalize

from hopscotch.

@kev-omniata-com's patch worked for us when using Turbolinks. We were running into this same issue as well. Note: You'll want to add hopscotch.removeCallbacks() before invoking window.getNewHopscotch() to clean up previous event callbacks.

from hopscotch.

+1 For fixing this issue. I would prefer solution 2) Once a walkthrough completes I want to dynamically start a new tour if conditions are met. Currently aside from the hotfix suggested above there is no way to do that.

from hopscotch.

@rezen... sorry, trying to get a sense of what use case you're working with. If it's a new tour on the same page, hopscotch.startTour() with your new tour data should work, correct? Or would this use case would require a complete re-instantiation of the hopscotch library?

from hopscotch.

@zimmi88 I'm tried to hit hopscotch.startTour() with a followup tour but it doesn't work.and I have a feeling it's related to this issue.

from hopscotch.

@rezen Do you see any errors in console log when this happens?

from hopscotch.

I have two different tour config objects. Both are setup appropriately. Once I finish the first tour I try to run startTour again with the second tour as the config and nothing happens. The bubble element is not on the page anymore and doesn't restore itself.

Edit: I got it working by using the onEnd callback to start the next tour.

from hopscotch.

Unfortunately #187 doesn't fix the problem (at least with turbolinks-classic).

bubble && bubble.element && bubble.element.parentNode are all true on page:change though the node itself is obliterated from the page.

I think the solution is to add an external method that forces the creation of a new bubble so that we can do that from our page:change callback. Alternatively, is there another check we can add that would prove that the bubble is gone by this time?

from hopscotch.

My solution was this:

--- a/vendor/assets/javascripts/hopscotch/hopscotch.js
+++ b/vendor/assets/javascripts/hopscotch/hopscotch.js
@@ -1308,9 +1308,8 @@
      * @returns {Object} HopscotchBubble
      */
     getBubble = function getBubble(setOptions) {
-      if (!bubble || !bubble.element || !bubble.element.parentNode) {
-        bubble = new HopscotchBubble(opt);
-      }
+      self.initializeBubble();
+
       if (setOptions) {
         utils.extend(bubble.opt, {
           bubblePadding: getOption('bubblePadding'),
@@ -1923,6 +1922,23 @@
     };
 
     /**
+     * initializeBubble
+     *
+     * Initialize the bubble associated with Hopscotch.
+     *
+     * @param {Boolean} force Force reinitialization even if a bubble exists.
+     * @returns {Object} Hopscotch
+     *
+     */
+    this.initializeBubble = function(force) {
+      if (force || !(bubble && bubble.element && bubble.element.parentNode)) {
+        bubble = new HopscotchBubble(opt);
+      }
+
+      return this;
+    };
+
+    /**
      * showStep
      *
      * Skips to a specific step and renders the corresponding bubble.

I can then call

$(document).on 'page:change', ->
  hopscotch.initializeBubble true

and the bubble is forcibly added.

I'd be happy to do a PR for this, but I suspect new PR's aren't being accepted into this version given the re-write? Also, there might be a better way to detect the missing bubble that takes turbolinks into account?

from hopscotch.

This is closed, but I'm experiencing the exact same issue. Using the latest version of Hopscotch. I also tried the fix by @brendon but that doesn't seem to work (at least on 0.3.1).

from hopscotch.

not sure if this package is still being maintained but for what its worth I ran into a similar issue when calling startTour from the end of tour.

My solution was to add a setTimeout() function before calling the next tour.

  id: "app-setup-hopscotch",
    steps: [
        {
            id: "Step One",
            title: "Step One",
            placement: "top",
            content: 'content'
            target: document.querySelector('#app'),
        },
    ],
    showPrevButton: true,
    showCloseButton: false,
    onEnd: function() {
        init.nextTour(tour.default)
    },

nextTour function

nextTour: (tour) => {
        var mgr = hopscotch.getCalloutManager()
        setTimeout(() => {
            mgr.removeAllCallouts();
            hopscotch.startTour(tour);
        }, 1000)
    }

from hopscotch.