This PR adds a modal that deploys on initial page load. It has welcome text and allows the user to either take a tour, view an example analysis, or just use the tool. If they are loading a saved state, it does not show them the example analysis option and replaces it with a button to view the saved analysis (this just closes the modal, since the saved analysis is being loaded regardless).
If the user closes the modal before the page is ready to use, it opens a page dimmer with a "loading" spinner until the filterViewLoaded event occurs (which is not 100% at the end of the load process but it is close).
The example analysis button is disabled until the page is finished loading, to avoid triggering the state change before the app can handle it.
The 'tour' functionality is not yet implemented.
This replaces the 'loading saved state' dimmer used previously. The dimmer is only shown on map view - when loading a saved specific project in the project-view, no 'loading' page is shown anymore (the page loads quickly enough that I don't think we need it in that context).
…ch button is clicked. - Starting to add a 'loading' dimmer underneath
…welcome modal is cleared TODO: Still need to get proper behavior working when a saved state is loaded
Removes the old 'loading saved state' dimmer TODO - Need to get example to actually work, probably w/ router - Need to make sure that clicking the example button too soon doesn't mess things up or get lost
- Disabled the 'example analysis' button until the page is ready to accept the decode request - Added spinner to show loading of button.
@ostermanj the one thing that would be useful for you to QA (besides an overall test drive) is the way that I implemented the loading of an example. I used the decodeState to do this, so that the proper setState AND UI updates would occur. I did this by triggering the window history, and then telling the router to decode.
My question was whether I'm ok using the (useless) object that I put into the first parameter of the
I will be adding the tour to this next, can merge either before or after this.
…e is loading - Adds the 'shepherd' feature tour plugin and style sheet - Sets up basic intro tour of some key features (needs some more thought as to what is most important to communicate to users).
You're right that router.js passes in router.stateObj but that's not really doing the work. The work is all in the paths. My early attempts in router.js tried using the stateObj and
Hopefully that's true :)
You have to pass in an object, so I left it, but I think it could just be
Looks really great! There's one weird thing: when I load the page without my developer tools open, the modal extends below my screen (1280x800) and won't scroll.
When I open the tools, the modal will scroll; when I close it again, the modal is fully visible.
The tour is really cool.
One thought: should we provide a "don't show again" option? Would require setting a cookie.
Thanks @ostermanj. I had a surprising amount of trouble getting the modal to behave as expected - maybe there's some bootstrap/semantic ui conflicts as they both have 'modal' classed objects. I'll mess with the modal to get it viewable.
I figured it's easier to not set the 'don't show again' option because it won't improve performance - they still have to wait the same amount of time for the page to load. I did verify that using both the in-app back and the back button after viewing a project page only display the modal the first time you see the map view and not again (unless you refresh the page)