introJS - ignore hidden or DOM elements that don't exist

Question

I am using introJS in Angular 7. I have the following set up option:

introJS = introJs();

this.introJS.setOptions({
          tooltipPosition: 'auto',
          positionPrecedence: ['left', 'right', 'top', 'bottom'],
          showBullets: true,
          showStepNumbers:true,
          steps: [
            {
              element: '#step1',
              intro: "This is step1."
            },
            {
              element: '#step2',
              intro: "This is step 2, but is hidden in DOM."
            },
            {
              element: '#step3',
              intro: "This is step3, but it does not exist in DOM."
            },
            {
              element: '#step4',
              intro: "This is step 4",
            }
          ]
        });

        this.introJS.start();

This step Options are static and it is possible, that the steps may be hidden or don't exist in the DOM. In this case, I would like the tour to ignore those steps and move forward, if a DOM element with that ID is not visible or does not exist in DOM.

I came across a JQuery alternative, for this, but no clue how to adjust it for Angular.

score 2 · Accepted Answer · answered Jun 26 '19 at 03:58

You can use document.querySelector to check if the element is in DOM.

var steps = [
  {
    element: '#step1',
    intro: "This is step1."
  },
  {
    element: '#step2',
    intro: "This is step 2, but is hidden in DOM."
  },
  {
    element: '#step3',
    intro: "This is step3, but it does not exist in DOM."
  },
  {
    element: '#step4',
    intro: "This is step 4",
  }
].filter(function (obj) {
  return document.querySelector(obj.element) !== null;
});

console.log(steps);

<div id="step1"></div>

<div id="step2"></div>

<div id="step4"></div>

score 0 · Answer 2 · answered Jun 25 '20 at 23:13

@pindev answer won't allow steps that are not attached to a page element. I.e. a step that is general and appears in the center of the page. Leaving the step.element property set to null will achieve this. This works for me to filter out steps that have their html elements hidden.

var steps = steps.filter(function (obj) {   // filter out any steps for hidden elements
    var useElement = true;

    if (obj.element !== null) {
        if ($(obj.element).is(':visible') === false) {
            useElement = false;
        }
    }

    return useElement;
});

introJS - ignore hidden or DOM elements that don't exist

2 Answers2