Delay backdrop change until popupDelay finishes

[joecoolish]

In the case of animation between frames, the backdrop will instantly appear, which might bind to the elements while they are animating. By waiting until the popupDelay has finished to create the backdrop, this can be avoided.

TODO: Maybe hide the previous backdrop?

[benmarch]

Thanks, @joecoolish, I will test this out locally.

[benmarch]

Hey @joecoolish, I tested this out locally and it doesn't exactly work as expected. Since the backdrop promise doesn't resolve until after the backdrop delay, the popup also delays after the backdrop shows. For example, if the popup delay is set to 1 second, the backdrop will show up after 1 second, and then the popup will show up 1 second after that. The following modification addresses that:

return handleEvent(step.config('onShow')).then(function () {

    if (!step.config('backdrop')) {
        return dispatchEvent(step, 'uiTourShow');
    }

    return $q(function (resolve) {
        dispatchEvent(step, 'uiTourShow');
        $timeout(function () {
            uiTourBackdrop.createForElement(step.element, step.config('preventScrolling'), step.config('fixed'));
            resolve();
        }, step.config('popupDelay'));
    });

}).then(function () {

    step.element.addClass('ui-tour-active-step');

})
.....