Question about Detached Tours, Can the tour auto-skip :hidden items

[Deklin]

I am using the exact versions of the following:

• Browser: [Chome|Firefox|IE|Safari] Version: x.x
• AngularJS: 1.6.5
• Angular Bootstrap: 1.3.3
• Angular UI Tour: 0.8.2

I have installed this library via: (NPM, Bower, or downloaded package)

I have observed the following behavior:
This is more a question than an observation. I have tried various tour based utilities and trying to find one that fits our needs.

Is it possible to have a tour step automatically be skipped if display:none is on the item. In jquery this would be :visible as part of the filter to ensure it is actually visible to the user.

As stated in another PR question, we have some elements which only appear under certain resolutions. I'm trying to avoid the view controller needing to be aware of $window width and instead have the tool skip elements which are hidden from the user in the tour.

So far the detached tour seems to be working well, any thoughts on this?

This is how I expected it to behave:

Here is my tour config, and all related step configs:

var tourConfig = {};

<div ui-tour></div>

<div tour-step></div>

Additional notes/code:

[Deklin]

@benmarch thank you, will continue conversation here. I do have a working implementation using a dynamically generated tour based on visible elements that does appear to be working ok.

[benmarch]

Nice! Would you mind sharing some of your code so I can look into incorporating it into the app? (Or at least for my knowledge to help others.)

[Deklin]

Absolutely;

1. We updated the tour template for localization

<div>
    <div class="popover-content tour-step-content" bind-html-compile="tourStep.trustedContent || tourStep.content"></div>
    <div class="popover-navigation tour-step-navigation">
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isPrev()" ng-click="tour.prev()">&laquo; {{'cloud-composer-ui.tour.steps.previous'|translate}}</button>
            <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isNext()" ng-click="tour.next()">{{'cloud-composer-ui.tour.steps.next'|translate}} &raquo;</button>
            <!--<button type="button" class="btn btn-sm btn-default" ng-click="tour.pause()">{{'cloud-composer-ui.tour.steps.pause'|translate}}</button>-->
        </div>
        <button type="button" class="btn btn-sm btn-secondary pull-right" ng-click="tour.end()">{{'cloud-composer-ui.tour.steps.end-tour'|translate}}</button>
    </div>
</div>

Minor change but also adjusted a bit of the look and feel.

We have a quick tour button
Here is what happens onclick

 vm.assistanceModel.addButtonItem({
                id: 'desc2',
                displayName: $translate.instant('cloud-composer-ui.images.assistance.quick_tour'),
                style: 'secondary',
                callback: function () {
                    var element;
                    uiTourService.endAllTours().then(function () {

                        var tour = uiTourService.createDetachedTour('images-tour', {
                            name: 'images-tour',
                            backdrop: false,
                            debug: true,
                            appendToBody: true,
                            templateUrl: 'js/tour/tour-step-template.html'
                        });

                        tour.createStep({
                            element: angular.element('#header'),
                            stepId: 'search',
                            order: 1,
                            title: $translate.instant('cloud-composer-ui.images.tour.searching.header'),
                            content: $translate.instant('cloud-composer-ui.images.tour.searching.description'),
                            placement: 'bottom',
                            backdrop: true
                        });

                        element = angular.element('#filter:visible');
                        if (element.length) {
                            tour.createStep({
                                element: element,
                                stepId: 'filter',
                                order: 1,
                                title: $translate.instant('cloud-composer-ui.images.tour.filtering.header'),
                                content: $translate.instant('cloud-composer-ui.images.tour.filtering.description'),
                                placement: 'right',
                                backdrop: true
                            });
                        }

                        element = angular.element('#header button[name="action_filter"]:visible');
                        if (element.length) {
                            tour.createStep({
                                element: element,
                                stepId: 'filter',
                                order: 1,
                                title: $translate.instant('cloud-composer-ui.images.tour.filtering.header'),
                                content: $translate.instant('cloud-composer-ui.images.tour.filtering.description'),
                                placement: 'bottom',
                                backdrop: true
                            });
                        }

                        tour.createStep({
                            element: angular.element('#images_list'),
                            stepId: 'imagesList',
                            order: 2,
                            title: $translate.instant('cloud-composer-ui.images.tour.images.header'),
                            content: $translate.instant('cloud-composer-ui.images.tour.images.description'),
                            orphan: true,
                            backdrop: true
                        });

                        // Image
                        element = angular.element('#images_list a[name="list-group-item"]:first-child');
                        if (element.length) {
                            tour.createStep({
                                element: element,
                                stepId: 'imagesList',
                                scrollParentId: 'images_list_scrollable_container',
                                order: 3,
                                title: $translate.instant('cloud-composer-ui.images.tour.image.header'),
                                content: $translate.instant('cloud-composer-ui.images.tour.image.description'),
                                placement: 'right',
                                backdrop: true
                            });
                        }

                        //                    trustedContent: $sce.trustAsHtml('<strong>This can contain HTML, and will override `step.content` if set.</strong>')
                        tour.on('ended', function () {
                            angular.element('.ui-tour-popup').remove(); // Remove all windows. 
                            //angular.element('.ui-tour-backdrop').parent().remove(); // Remove all brackdrops
                        });
                        tour.start();
                    });
                }
            });

For some reason the ui-tour-popups were not being cleaned up, so I on ended do that.

Ideally I would be able to use elementId where I am currently doing some more complex jquery locator searches, but I couldn't get that to work so I went w/ this approach

This handles missing elements, as well as some changes when in responsive mode