Feat/tour events

[chrismclarke]

Description

Build on top of #194 to try and improve intro.js core functionality. Specifically:

• Add support for focusing elements that are generated dynamically
• Add support for tours triggered within farmer activity page (nested view context)
• Add support for custom event listeners to allow tour to react to element click and route change events
• Improve tour UI and layout issues (e.g. focusing large elements, ensuring element in viewport)
• Integrate changes into existing crop probability tour

closes #190

Discussion

• This feature uses a 3rd party tool to manage the process of highlighting different parts of the page. The tool is somewhat tempermental (e.g. not highlight a little too much/too little, particularly when jumping back and forth between tips), however it is limited how much we can try modify to fix (have added a lot of improvements to it already). If functionality not sufficient likely would require a larger task of developing our own tool.

• Highlighting is based on individual elements, which can also be collections of elements. E.g. can highlight a specific table, row, or cell, but not a combination of multiple rows or multiple cells. There's currently no easy way to work around this limitation

• Open to feedback on what would make most sense to highlight/state for this and subsequent tours. It should be noted that tour does not have good awareness of what is highlighted when content is dynamic - e.g. as the user can select any station it knows there will be data in the top row of the table, but doesn't know what individual values are.

• All tours will require translation

Preview

Link to app preview if relevant

Screenshots / Videos

Demo - Crop probability tour with functionality to remove next/previous buttons for specific step, pause tour and wait for user interaction with select element, allow focus on table element larger than screen and work within nested farmer activity tool

PICSA (2).webm

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 08d7b02):

https://picsa-extension-toolkit--pr194-feat-tour-events-8v8cb5vb.web.app

_{(expires Fri, 08 Dec 2023 02:05:04 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2435c4a5f2b9750fe5c819a7a14bcf9433816983}

[chrismclarke]

@FaithDaka - I think this is mostly working as expected now, if you have a chance at some point would you be able to take a look to see if the updated tour syntax makes sense to you and user experience for the crop probability tour makes sense?

I've added tour property for tourOptions - allow changing full tour options for just one step (e.g. disabling previous/next buttons) clickEvents - allow the tour to add callback functions once the target element is clicked routeEvents - allow the tour to add callback functions when the url changes customElement - allow the tour to highlight any element which is checked dynamically

I've also added various additional functions to the service to try and work around some of the limitations of intro.js

[FaithDaka]

Hi @chrismclarke I tested the crop-probability tour using the preview. And it only had one step, which was Tap here to choose a station after which the tour ended despite scrolling through the table. I don't think that is the intended behaviour. I think the table will have to be highlighted in some way to avoid breaking the tour and also to help direct the user on what exactly they should be seeing next.

I like that the Next, Done buttons have been removed for those one step prompts, was planning on removing them as well. Thanks for the work on enhancing the functionality!

[chrismclarke]

Thanks for looking into things @FaithDaka I've added a bunch more commits, and I think at this point the number of custom code workarounds is near the size of the original library! 😅

I've also split the tour into 2 (similar to how you had originally), the first tour triggers if no station is selected and just handles the station list dropdown, the 2nd tour illustrates the table (with a number of additional steps to be more explicit). See updated demo in PR description

I think I'm going to merge here for now and share with the UoR team so they can provide feedback (and because I really need to stop looking at it for now! Seriously could spend a lifetime trying to fix/tweak/improve the system)