tracelytics/pageguide — pull request #27 by danriti (2013-10-31 16:25:42+00:00)
Title: Page guide welcome modal displayed before events are bound

cc: @arizzitano

While doing some experimentation with pageguide, I noticed the following in the `tl.pg.init` function:

https://github.com/tracelytics/pageguide/blob/master/js/pageguide.js#L127-L134

We are displaying the welcome modal **before** we bind events. Since the event handlers don't get setup until the callback to `pg.ready` fires (which can take several seconds), this can result in a user clicking on the welcome modal buttons, without any effect.

Thus, I see 3 possible solutions to this problem:

### 1. Show welcome modal when pageguide is ready (delayed)

```javascript
pg.ready(function() {
pg.setup_handlers();
pg.$base.children(".tlypageguide_toggle").animate({ "right": "-120px" }, 250);

if (pg.preferences.show_welcome) {
pg.pop_welcome();
}
});
```

### 2. Show welcome modal immediately

```javascript
pg.ready(function() {
pg.$base.children(".tlypageguide_toggle").animate({ "right": "-120px" }, 250);
});

pg.setup_handlers();
if (pg.preferences.show_welcome) {
pg.pop_welcome();
}
```

This approach sets up event binding before pageguide is ready, so I'm not sure if this will break anything.

### 3. Isolate welcome modal event handlers

```javascript
// New method for setting up only the event handlers for the welcome modal.
tl.pg.PageGuide.prototype.setup_welcome_handlers = function () {
...
}

pg.ready(function() {
pg.setup_handlers();
pg.$base.children(".tlypageguide_toggle").animate({ "right": "-120px" }, 250);
});

if (pg.preferences.show_welcome) {
pg.setup_welcome_handlers();
pg.pop_welcome();
}
```

Assuming that the `pg.setup_handlers();` needs to be called in the `pg.ready` callback, I think option 3 is the best choice.

Thoughts?