Add a optional tour on startup. [#31] #57
Conversation
| const [run, setRun] = useState(false); | ||
| const [tour, setTour] = useState(!(localStorage.getItem("tour") === "true")); | ||
| const [open, setOpen] = useState(tour); | ||
| const [mapEntity, setMapEntity] = useState({}); |
There was a problem hiding this comment.
Extracting the mapEntity state allows for an easy implementation of the inspector panel demo.
site/src/Map.jsx
Outdated
| const [pmTilesReady, setPmTilesReady] = useState(false) | ||
| const [cursor, setCursor] = useState('auto'); | ||
| const [mapEntity, setMapEntity] = useState({}); | ||
| export default function Map({ mode, mapEntity, setMapEntity }) { |
There was a problem hiding this comment.
Only contentful change: extracting the mapEntity state. All else is formatting changes
| interactiveLayers(layers); | ||
| }, [buildings, places, transportation, interactiveLayers]); | ||
|
|
||
| return ( | ||
| <div className="dropdown dropdown--hoverable theme-selector"> | ||
| <div className="dropdown dropdown--hoverable theme-selector tour-layers"> |
There was a problem hiding this comment.
Only contentful change. This was added so the tour has a 'target'. All else is formatting changes.
| if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(event.type)) { | ||
| const nextStepIndex = | ||
| event.index + (event.action === ACTIONS.PREV ? -1 : 1); | ||
| if ( |
There was a problem hiding this comment.
Switching from step 4 to 5 means we need to open the inspector panel. This also requires a slight delay of the tour so that the target exists when the tour attempts to advance.
| setTimeout(() => { | ||
| setStepIndex(nextStepIndex); | ||
| }, 100); | ||
| } else if ( |
There was a problem hiding this comment.
Closing the inspector panel. If other steps are added, it should be noted that the constants 4 and 5 might have to be updated, depending on where the steps are placed.
site/src/nav/DownloadButton.jsx
Outdated
| @@ -87,7 +87,7 @@ function DownloadButton() { | |||
| className={`button button--primary ${loading ? "disabled" : ""}`} | |||
| onClick={handleDownloadClick} | |||
| > | |||
| <div className="wrapper"> | |||
| <div className="wrapper tour-download"> | |||
There was a problem hiding this comment.
Added as tour target
| </div> | ||
| <b className="navbar__title">Overture Maps</b> | ||
| <b className="navbar__title tour-homepage">Overture Maps</b> |
There was a problem hiding this comment.
Added as tour target. All other changes are formatting
site/src/App.css
Outdated
There was a problem hiding this comment.
These changes are a result of prettier formatting.
Each part of a tour is called a step. I did my best to cover what item does in each step, but if someone has a more succinct description, please let me know. Below is a quick demo of the tour.
Screen.Recording.2024-05-30.at.11.15.46.AM.mov