[Feature request] OnClick callback

[thomasthiebaud]

Hi,

is it possible to add some optional callback when one of the button (close, next, previous, done) is called ?

[alappe]

I'd love to see this – ideally with the ability to block even the selection of the next step, so one could (more easily) drive js client apps with async operations creating the elements for the next step.

[moghya]

different callback for every time next is called?

[alappe]

That would be perfect for some scenarios of mine, yes.

To illustrate with pseudocode:

driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      title: 'Welcome',
      description: 'we take you on a journey…',
      position: 'left'
    }
  }, {
    element: '#second-element-introduction',
    pre: (next) => {
      // Do some ajax calls, create nodes from results, whatever…
      const n = document.createElement('div');
      n.id = 'second-element-introduction';
      next();
    },
    popover: {
      title: 'Behold',
      description: 'the mighty div in its natural habitat…',
      position: 'right'
    }
  }
]);

As far as I played with the code for now, it seems that the selection of the elements is done on the defineSteps() call, so if an element doesn't exist at this point of time, the step fails later on. For the code above it would be necessary to select the element when the functions callback is called.

My issue could also be solved with the request of @thomasthiebaud if I understand it correctly, leading to something like:

driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      title: 'Welcome',
      description: 'we take you on a journey…',
      position: 'left'
    },
    onNext: (done) => {
      // Do some ajax calls, create nodes from results, whatever…
      const n = document.createElement('div');
      n.id = 'second-element-introduction';
      done();
    }
  }, {
    element: '#second-element-introduction',
    popover: {
      title: 'Behold',
      description: 'the mighty div in its natural habitat…',
      position: 'left'
    }
  }
]);

[bombsite]

This would be extremely useful to have! In addition to the previous, next, close and done; would it make sense to also have one for when the user decides to prematurely terminate the driver by clicking away? Possibly return the step that it was on when the termination occurred?

[jawn-ha]

That would be perfect for some scenarios of mine, yes.

To illustrate with pseudocode:

driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      title: 'Welcome',
      description: 'we take you on a journey…',
      position: 'left'
    }
  }, {
    element: '#second-element-introduction',
    pre: (next) => {
      // Do some ajax calls, create nodes from results, whatever…
      const n = document.createElement('div');
      n.id = 'second-element-introduction';
      next();
    },
    popover: {
      title: 'Behold',
      description: 'the mighty div in its natural habitat…',
      position: 'right'
    }
  }
]);

As far as I played with the code for now, it seems that the selection of the elements is done on the defineSteps() call, so if an element doesn't exist at this point of time, the step fails later on. For the code above it would be necessary to select the element when the functions callback is called.

My issue could also be solved with the request of @thomasthiebaud if I understand it correctly, leading to something like:

driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      title: 'Welcome',
      description: 'we take you on a journey…',
      position: 'left'
    },
    onNext: (done) => {
      // Do some ajax calls, create nodes from results, whatever…
      const n = document.createElement('div');
      n.id = 'second-element-introduction';
      done();
    }
  }, {
    element: '#second-element-introduction',
    popover: {
      title: 'Behold',
      description: 'the mighty div in its natural habitat…',
      position: 'left'
    }
  }
]);

Hi, Did you solve? I have same problem

[Naren-hybreeder]

@thomasthiebaud

Have you found the solution?

[thomasthiebaud]

No, I used something else. Maybe newer versions support it

[Naren-hybreeder]

@thomasthiebaud Thanks for the response, So many attempts, I have found the solution, My issue was, I have to call one function after clicking on the Done button.

Will share the solution here soon...

[kamranahmedse]

We just released v1.0 of driver.js which has been rewritten from the ground up. There are more simplified hooks which give you more control over the popover and the whole lifecycle. Please have a look at the docs and do let me know if you face any issues.