preventing interaction with elements other than those being the current trip focus (e.g. nextClickSelector)

[Philippe Mathieu]

While working on a guided tour on an application, I found myseld wanting to stop users from clicking anywhere else but on the current step - either using the navigation or the nextClickSelector.

Google adwords guided tours allow such interaction - and they interact with the user asking if they really want to get out of the tour - but it seems to me that it would be much more complicated to implement and potentially get users off the trip. I might be too much of a control freak.

I've been working on that but I wanted to get early feedback (if any).

[Ryu | Chia-Lung Chen]

So for this case, what you are going to do to prevent them do any other things. To kidnap all window's click, keydown, mousedown ... events ? I think there must be such use case in the world, and I think there can be a funny option called controlFreak: true (just kidding) to enable this mode !

[Philippe Mathieu]

I find your option name is good! ;)

This is one where I wanted to initiate a discussion. I'm not sure about which way to go. I think Trip.js should either be aware of events changing the state of the applications which prevents the tour to proceed, or stop all but relevant events from being processed. I will think about it some more...

[Ryu | Chia-Lung Chen]

I think the role of Trip.js is here is quite simple, it only do guided tours when needed, so if there is any interaction with other components, developers should handle that part.

For example :

When trip starts, everything related to window events should be disabled but component A and component B should be able to receive these events because they still need that.

so this kind of integration should be handled on system-wise instead.

BTW, right now how you handle this part in your application ? Any technical details that can be shared here ?

[Philippe Mathieu]

The way I decided to proceed is to prevent all pointer events (pointer-events: none;) on the body, enabling them only on the trip-block and the nextClickSelector when set. This does not handle keyboard interaction which I'm taking care of in the application. I created 2 new classes in the default theme which I add/remove to the DOM as needed. I'm not proposing this as an official fix but it helped a lot on our side.

.trip-unclickable {
  pointer-events: none;
}

.trip-clickable {
  pointer-events: initial;
}

[Ryu | Chia-Lung Chen]

lol ok, that sounds crazy but i like the way you handle that ! Let's close this first and see whether there is any further discussion needed :) thanks man