sjmc11 / tourguide-js Goto Github PK

If I have a page that has a complex dialog / modal, is there a way to have a different tour when the user opens the modal? It looks like I can pass in tourSteps instead of relying on the dom tags. Is target a string or do I need to write my own find element function?

https://tourguidejs.com/docs/steps.html#steps-array

I just discovered tourguide.js on the TL;DR newsletter and I'm really looking forward to use it.
The only manko I have found so far is the dialog leaving the visibility area on mobile devices if it's pointing on an area/element bigger than the screen itself.
So I wonder if you @sjmc11 or some co-creator is already onto it,
otherwise I might consider fixing it by myself ✌️

Is there a way to make the content inside the target clickable? Right now the opposite is true. The content outside of the target is clickable and the content inside is not clickable.
This is counter intuitive to the user because they should be able to easily click inside the target so that they can practice using the product through the interactive tutorial.

Besides that great library!!

Hello,

I noticed that the back button always disabled 🙃

Example: https://stackblitz.com/edit/vue-92nhbv

Thanks!

Is it possible to connect a button on the page to trigger the next step? In my testing, I noticed that the backdrop highlights the element but it's then not clickable.

I'd love to target a button (or button container), click the button, then trigger the next step in the tour.

Anyone seen this error before when trying to run start?

I have tried to set debug to true / false in the client settings, and with it unset. I tried adding a dummy debug function the client object.

I am trying to get the simplest demo, using only one data-tg-tour "Welcome to the tour"

I noticed that I have to click the 'Finish' button twice to close the tour modal if 'tg_tours_complete' isn't set yet, but only once if it is.

Am I correct in thinking that exit() should be called before the first return statement here?

if(this.options.completeOnFinish) {
    if (!localStorage.tg_tours_complete) {
        localStorage.tg_tours_complete = [tourGroup]
        return
    }
    const storageTours = (localStorage.tg_tours_complete as string).split(',')
    storageTours.push(tourGroup)
    localStorage.tg_tours_complete = storageTours
}
if(exit) await this.exit()
this.activeStep = 0
return true

While using the beforeEnter event in a TourGuideStep, the tour will exit if the promise is not resolved before the Promise's function finishes executing. The backdrop is removed and users can interact with the page. Once the Promise is resolved, the tour starts up again at that step, and the backdrop comes back.

For example:

beforeEnter() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {  resolve(); }, 10000);
        //the tour exits until the Promise is resolved
    });
}

I would expect the tour to not exit and instead wait for the promise to resolve. In this case, it should continue to show the backdrop while waiting. If the user clicks anywhere during the wait, the tour should exit and not start up again once the Promise is resolved.

I am using TourGuideJs v0.0.10 in Chrome.

As the title suggests, there is a rather substantial flickering happening of the backdrop when the dialog modal is initialising, or if there is a static dialog transitioning to being non-static when following elements as targets on the step.

Would it to be possible to add the ability to skip steps? Two helpful functionalities for our application would be:

1. The ability to skip a step in its beforeEnter event. Maybe if false is returned in the event, the step would be skipped?
   • For example, if the first step of a tour is to show how to open a UI and the second step is to show the opened UI, it would be useful to skip the first step if the UI is already open.
2. The ability to change which step is next in the beforeEnter/afterLeave events.
   • Using the same idea from the example above, if there are multiple steps showing how to open the UI, it would be useful to jump to the step that shows the UI if the UI is already open.
   • I tried using the visitStep method inside the beforeEnter event to jump to a later step, but that obviously didn't work.

The general idea is to be able to have a dynamic tour that can change depending on the state of the application, and maybe even have branching paths if necessary.

How to use it in react or nextjs framework?

The rotation and size need to be adapted in those cases.

Here's how it looks at the moment:

First of all, thank you so much for this library. It works amazingly well.

I did run into the issue that "autoScrollOffset' does not work. It does not seem to do anything. This could be a really powerful feature as by default the library does not center the elements when it scrolls to them.

-> https://tourguidejs.com/docs/options.html#option-autoscrolloffset

Let me know if there are any examples of this feature working and/or of this can be fixed in the next release!

I am currently working with the Tour Guide component and have encountered an issue regarding the functionality of the hidePrev property. My goal is to remove the back button only from the first step of the tour guide, while ensuring it appears in subsequent steps.

As per the documentation, I understand that setting hidePrev to true should remove the back button. However, when I apply this property, it removes the back button from all steps of the tour guide rather than just the first one.

Additionally, I attempted to add hidePrev selectively for the first step alone, but unfortunately, it did not yield the expected outcome.

Could you please provide guidance on how to achieve the desired behavior, where the back button is removed only from the initial step of the tour guide while appearing in subsequent steps?

tourguide cdn often throws http 520 error

After the dialog is loaded we are in first step so there is no prev step, in that situation if the previous button id by default disabled then it will make better in ux.

dialogPlacement option doesn't work, cause autoPlacement middleware rewrites position

When I use incognito window of Google Chrome, completeOnFinish does not work. It looks like no access permission to window.localStorage in incognito window.

Also, it does not work in Safari, too.

On initial import of lib

import "@sjmc11/tourguidejs/src/scss/tour.scss" // Styles
import {TourGuideClient} from "@sjmc11/tourguidejs/src/Tour"

const tour = new TourGuideClient()

ERROR in node_modules/@sjmc11/tourguidejs/src/core/dialog.ts:242:20

TS18048: 'arrowMiddlewareData' is possibly 'undefined'.
    240 |  */
    241 | function arrowStyles(arrowMiddlewareData: MiddlewareData["arrow"], placement: Placement, dialog: TourGuideClient["dialog"]) : object {
  > 242 |     const arrowX = arrowMiddlewareData.x || 0;
        |                    ^^^^^^^^^^^^^^^^^^^
    243 |     const arrowY = arrowMiddlewareData.y || 0;
    244 |     const arrowSize = 10;
    245 |


ERROR in node_modules/@sjmc11/tourguidejs/src/core/dialog.ts:243:20

TS18048: 'arrowMiddlewareData' is possibly 'undefined'.
    241 | function arrowStyles(arrowMiddlewareData: MiddlewareData["arrow"], placement: Placement, dialog: TourGuideClient["dialog"]) : object {
    242 |     const arrowX = arrowMiddlewareData.x || 0;
  > 243 |     const arrowY = arrowMiddlewareData.y || 0;
        |                    ^^^^^^^^^^^^^^^^^^^
    244 |     const arrowSize = 10;
    245 |
    246 |     const staticSide = {

ERROR in node_modules/@sjmc11/tourguidejs/src/core/dialog.ts:261:24

TS18048: 'arrowMiddlewareData' is possibly 'undefined'.
    259 |     const isAtMinWidth = Math.abs(arrowX) <= arrowSize;
    260 |
  > 261 |     const isInCorner = arrowMiddlewareData.centerOffset !== 0 || (
        |                        ^^^^^^^^^^^^^^^^^^^
    262 |         (isAtMinWidth || isAtMaxWidth) &&
    263 |         (isAtMinHeight || isAtMaxHeight)
    264 |     );


ERROR in node_modules/@sjmc11/tourguidejs/src/handlers/handleVisitStep.ts:99:12

TS2774: This condition will always return true since this function is always defined. Did you mean to call it instead?
     97 |         /** Before callbacks **/
     98 |         // If any callbacks exist, set loading state
  >  99 |         if(tgInstance._globalBeforeChangeCallback && stepIndex !== currentStepIndex || currentStep.beforeLeave || nextStep.beforeEnter){
        |            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    100 |             tgInstance._promiseWaiting = true
    101 |             tgInstance.dialog.classList.add('tg-dialog-loading')
    102 |         }

I've checked the activeStep property and it's updating but not stored on localStorage. Should I call anything aside from .start()?

PS: Also isFinished() when called on onAfterExit() always returns false.

Thanks!

Hello just have a problem with the positioning of the dialog.

Unfortunately I can't give an alignment to a single step here. Therefore I wanted to try it with the tour option dialogPlacement.

Now I assumed, if set

{
dialogPlacement: 'bottom
}

all dialogs are shown below?

Example:

After noticing that only 'tour' is ever added to the 'tg_tours_complete' item in localStorage, I came across this in handleVisitStep.ts:

/**
 * Do completion if end of tour
 */
if(stepIndex >= this.tourSteps.length){
    await this.finishTour(true)
    return
}

Should tourGroup be passed to finishTour() here, or am I supposed to hook into onFinish() (or call finishTour()) myself if I want the tourGroup to be added to localStorage? The docs give the impression that it should be the former.

I really like the tourGroup functionality - it's much cleaner than some libs which require multiple tour instances to achieve the same thing - so hopefully this has a simple answer.

Thanks for this library! Cheers

Nextjs14 and pnpm got babel error.

  ⨯ ../../node_modules/.pnpm/@[email protected]/node_modules/@sjmc11/tourguidejs/src/Tour.ts
Module parse failed: Unexpected token (37:13)
: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
 |      * Primary elements
 |      */
 >     backdrop : HTMLElement
 |     dialog : HTMLElement
| 
 Import trace for requested module:../../node_modules/.pnpm/@[email protected]/node_modules/@sjmc11/tourguidejs/src/Tour.ts
./src/utils/tourguide.tsx

As the documentation is quite light, can you dist a development version ?
I tried to compile it but I'm really not familiar with typescript and how to build it with webpack.

Thank you very much :)

More of a question than an issue, but I have target elements for many of my tour steps which don't exist at the time of initialisation. I'm currently handling these steps programatically with addSteps() when the target elements are added to the DOM, but it's quite cumbersome and it would be nice to have a way to check for the element's existence within the step itself.

The issue appears to be that the target element gets set to body if it isn't found when the tour is initialised. I thought refresh() might help but it doesn't semm to use the target value I initially provided.

Other libraries I've tried account for this by permitting target elements that don't exist, and then providing an async step method similar to beforeEnter() where you can wait for the element to exist before executing the rest of the step's code.

I could manually update each step's target using beforeEnter() e.g. tg.tourSteps[0].target = document.querySelector('#my-target'), but that is also a lot more code if I need to do it for several steps.

Do you have any suggestions, or have I missed some easier way to do it? Otherwise, would you be open to providing an option to override the default behaviour of setting target to body in computeTourSteps()?

Cheers