peichins
commented
4 years ago Question: why do viewed items need to be tracked per-item in local storage?
Don't we just need to know if the onboarding needs to be done or not? ("user cancelled" is equivalent to done)
Yes, we do only need to know if it has been done or not. But, there may be more than one onboarding tours that exist. E.g. one for each of the two current citizen science interfaces, maybe more for future interfaces, maybe we will extend it to other pages, like listen, visualise, library etc. Some of these may share some of their steps.
The current setup solves this. An alternative way would be to name each tour and track that, which would probably be simpler. The main reason for doing it this was was because originally I wanted to record when I they had finished the tour, not started it.
I don't think it really hurts to leave it working the way it is and it's more flexible.
If the user has seen all the steps of onboarding or if they have exited early, onboarding will not autoplay. This is recorded using local storage - so it will be true for the device, not the user. Because the onboarding service/component may potentially be shared by different pages, it records when the user has seen each step, and checks to see whether the user has previouslyseen (or exited before seeing) all the steps currently loaded. Another screen that involvesonboarding with different steps will still autoplay.
For onboarding to work, it needs to know when all the elements that are in the tour have finished loading. Some of those elements may not exist before xhr responses have been received. The spectrogram image may exist but not be displayed properly while it is loading. To allow for this, the onboarding service can be registered with messages that it must wait for before being considered "ready".
These ready messages are sent in the success handler of a http request. For the spectrogram, a new directive was created that broadcasts an event when the spectrogram has finished loading.
The info button - used to manually launch the tour - now draws attention to itself after the tour is ready and when it closes. If the tour autoplays and is closed, the button draws attention to itself to show how to reopen it if needed. This is done through css animation.
An change was also made to allow more than one event handler for the same event, e.g. many onExit handlers. This allows event handlers to be registered with the service from anywhere independently. In this case, it was needed since the animation on the button is triggered on exit, and the label examples are also closed on exit.