Repository: shipshapecode/shepherd (language: javascript)

Issue:
Can't add progress indicator per example in Typescript
I'm trying to use the progress indicator example in my Typescript code, and I get an undefined variable error on global `shepherd` in the `show()` method (tsc shows the error but if you try to run anyway, the var `shepherd` is undefined at runtime too). I'm not sure how to get to the global current tour object with Typescript.

Here's a codesandbox to repro: https://codesandbox.io/s/peaceful-andras-u0ein?file=/src/index.ts




Discussion / hints:
I did get it working using my `myTour` object instance, using `myTour.getCurrentStep()` instead of the global `shepherd` object.
@garyo does this work for you? `Shepherd.activeTour.getCurrentStep().el` I think we need to update the docs perhaps.
Yup, almost -- `const currentStep = Shepherd.activeTour?.getCurrentStep()` -- need the `?.` because `activeTour` can be null. And you need `.getElement()` too rather than `.el`.
So:
```typescript
    when: {
      show() {
        const currentStep = Shepherd.activeTour?.getCurrentStep()
        if (!currentStep)
          return
        const currentStepElement = currentStep.getElement()
        if (!currentStepElement)
          return
        const header = currentStepElement.querySelector('.shepherd-header')
        if (!header)
          return
        const progress = document.createElement('span')
        progress.style['marginRight'] = '10px'
        progress.style['color'] = '#888'
        progress.innerText = `[${tour.steps.indexOf(currentStep) + 1}/${tour.steps.length}]`
        header.insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'))
      }
    }
```
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

We need to update the docs around this. @xiwcx mind taking a look? We should just need to update https://shepherdjs.dev/docs/tutorial-04-cookbook.html with the correct code to get a progress indicator. Perhaps we should also build one and write tests around it to make sure it continues to work?
I already have done this 
![image](https://user-images.githubusercontent.com/12818541/108917788-9679bb00-7630-11eb-930b-93a643b61a76.png)

i don't know if it could helo you, i will give a brief descripition, 
i created a Step class which has the step structure,
in the service i am initing the steps with the deseired options, and pass the progressIndicator to the when.show row function, and it works perfectly, 

this is done on angular 8. 
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.


Fix patch:
diff --git a/docs-src/tutorials/04-cookbook.md b/docs-src/tutorials/04-cookbook.md
index af9990003..2d1e6bef7 100644
--- a/docs-src/tutorials/04-cookbook.md
+++ b/docs-src/tutorials/04-cookbook.md
@@ -43,7 +43,7 @@ popperOptions: {
 
 ### Progress Indicator
 
-Using the already exposed API, you could add a progress indicator of your chosing 
+Using the already exposed API, you could add a progress indicator of your choosing 
 for each step to let your users know how far into a tour they may be.
 
 The example below uses the [Step](https://shepherdjs.dev/docs/Step.html) `options` 
@@ -54,12 +54,13 @@ being show.
 ```javascript
 when: {
   show() {
-    const currentStepElement = shepherd.currentStep.el;
-    const header = currentStepElement.querySelector('.shepherd-header');
+    const currentStep = Shepherd.activeTour?.getCurrentStep();
+    const currentStepElement = currentStep?.getElement();
+    const header = currentStepElement?.querySelector('.shepherd-header');
     const progress = document.createElement('span');
     progress.style['margin-right'] = '315px';
-    progress.innerText = `${shepherd.steps.indexOf(shepherd.currentStep) + 1}/${shepherd.steps.length}`;
-    header.insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));        
+    progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
+    header?.insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));        
   }
 }
 ```
@@ -69,12 +70,13 @@ Another example, for anyone who wants to add progress indicators to the footer.
 ```javascript
 when: {
   show() {
-    const currentStepElement = shepherd.currentStep.el;
-    const footer = currentStepElement.querySelector('.shepherd-footer');
+    const currentStep = Shepherd.activeTour?.getCurrentStep();
+    const currentStepElement = currentStep?.getElement();
+    const footer = currentStepElement?.querySelector('.shepherd-footer');
     const progress = document.createElement('span');
     progress.className = 'shepherd-progress';
-    progress.innerText = `${shepherd.steps.indexOf(shepherd.currentStep) + 1} of ${shepherd.steps.length}`;
-    footer.insertBefore(progress, currentStepElement.querySelector('.shepherd-button:last-child'));
+    progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1} of ${Shepherd.activeTour?.steps.length}`;
+    footer?.insertBefore(progress, currentStepElement.querySelector('.shepherd-button:last-child'));
   }
 }
 ```


Test patch: