Element is focused before highlight moves, using callbacks correctly. about driver.js HOT 3 CLOSED

Thanks @rouilj for the feedback. Now that you mentioned it, I think the documentation does need some improvement in the way hooks mechanism is working. I will improve it this week. Thanks!

from driver.js.

Instead of registering listeners for Tab key, why not simply listen to focus and blur outside the driver lifecycle and control it simply using highlight instead of using tour so you don't have to worry about moveNext and movePrevious.

I would recommend you to get rid of your old logic and rethink according to the latest version. Most of what you have been doing, you can do it using simple highlight and pre-existing hooks. For example here is a sample implementation for the form similar to what you have been building.

Also, please look at the documentation for the configuration details.

from driver.js.

Hello Kamran:

Thanks for your reply.

I chose tour to make sure that the user goes through every form element. Using tab/shift-tab was a response to users expecting to tab to the next field. Because driver can't make the underlying page inert, using tab caused the focus to shift, but tour's highlight/popup did not change.

Your rewrite includes a progress indicator. This is something that was missing before and that I want to keep. From what I can see there is no progress indicator (nor can there be) in the example you recommend.

I read and re-read the documentation of the configuration details and I still don't understand why some of them have Started forms and other's don't. E.G. There is an onHighlightStarted but no onDeselectStarted. Also I don't understand what should be done in a Started versus a non-started callback. The config file documentation:

  // Hooks to run before and after highlighting
  // each step. Each hook receives the following
  // parameters:
  //   - element: The target DOM element of the step
  //   - step: The step object configured for the step
  //   - options.config: The current configuration options
  //   - options.state: The current state of the driver

doesn't explain what happens between onHighlightStarted and onHighlighted and why I would use one over the other. Similarly for onDestroyStarted and onDestroy.

I also don't understand the exact order of the events/callbacks/hooks. There is no explanation of when onPopoverRender is run compared to the onHighlight* callbacks. So I set up a possible call sequence for you to verify.

As I mentioned, it seems like there is a missing hook that is the opposite of onDestroyed.

I could:

• define each callback and log them to try to discover the order, or
• read all the code and try to figure out what the difference is between the onXStarted and onX callbacks.

Even if I were to expend that effort, I have no confidence that I am using them correctly without documentation. Without documentation, I could be relying on a bug in the code that will be changed by some future development.

Thanks again for writing driver.js.

from driver.js.