Skip to content

Commit 936d019

Browse files
author
Sine Jespersen
authored
Merge pull request #61 from itk-dev/feature/scroll-on-load-page
Feature/scroll on load page
2 parents 3050e61 + f8233ae commit 936d019

File tree

4 files changed

+22
-30
lines changed

4 files changed

+22
-30
lines changed

CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## Unreleased
99

10+
- [PR-61](https://github.com/itk-dev/aapodwalk/pull/61)
11+
- Remove `useScrollToLocation`
12+
- Scroll moved to `Point.jsx`, and scroll on refresh
1013
- [PR-60](https://github.com/itk-dev/aapodwalk/pull/60)
1114
- Make it possible to reevaluate ip-tracking consent and therefore permission to Open Street Map
1215
- Move `MapConsentBanner` component to be able to display on other pages that frontpage

README.md

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,30 @@ This is the frontend of a project that creates guided audio tours.
66

77
### Point of interst
88

9-
A point of interest is a geo location which plays audio.
9+
A point is a geo location which plays a piece of audio or a video.
1010

1111
### Route
1212

13-
A route consists of multiple connected points of interst.
13+
A route consists of multiple connected points.
1414

1515
### Tag
1616

17-
A tag can be connected to multiple points of interst. The tags are used to group different points of interst together.
18-
In the frontend, the entrypoint to a content is through tags. So, if the points of interest in a route are not tagged,
19-
they are not displayed.
20-
21-
A point of interest can have multiple tags. A Route can have multiple points of interest.
17+
A tag can be connected to multiple routes. The tags are used to group different routes together. A route can have
18+
multiple points and tags.
2219

2320
``` mermaid
2421
---
2522
title: Podwalk
2623
---
2724
classDiagram
28-
PointOfInterest --> Tag
29-
Route --> PointOfInterest
25+
Route --> Tag
26+
Route --> Point
3027
```
3128

3229
### Map
3330

34-
This project relies on a [Open Street Map](https://www.openstreetmap.org/), implemented with [React Leaflet](https://react-leaflet.js.org/).
31+
This project relies on a [OpenStreetMap](https://www.openstreetmap.org/), implemented with [React
32+
Leaflet](https://react-leaflet.js.org/).
3533

3634
## Development setup - running the app in docker
3735

src/components/hooks/UseScrollIntoView.jsx

Lines changed: 0 additions & 17 deletions
This file was deleted.

src/components/points/Point.jsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,27 @@ import DistanceComponent from "./DistanceComponent";
99
import OrderComponent from "./OrderComponent";
1010
import PointOverlay from "./PointOverlay";
1111
import LatLongContext from "../../context/latitude-longitude-context";
12-
import { useScrollToLocation } from "../hooks/UseScrollIntoView";
1312
import PermissionContext from "../../context/permission-context";
1413

1514
function Point({ point, order }) {
1615
const { latitude, longitude, name, image, id, subtitles, proximityToUnlock = 100 } = point;
1716
const { nextUnlockablePointId, listOfUnlocked } = useContext(RouteContext);
1817
const { openStreetMapConsent, setOpenStreetMapConsent } = useContext(PermissionContext);
1918
const { lat, long } = useContext(LatLongContext);
19+
const [hasScrolled, setHasScrolled] = useState(false);
2020
const [unlocked, setUnlocked] = useState(false);
2121
const [playThis, setPlayThis] = useState(false);
2222

23+
useEffect(() => {
24+
if (!hasScrolled && nextUnlockablePointId === id) {
25+
const elementToScrollTo = document.getElementById(id);
26+
if (elementToScrollTo) {
27+
elementToScrollTo.scrollIntoView({ behavior: "smooth" });
28+
setHasScrolled(true);
29+
}
30+
}
31+
}, [nextUnlockablePointId]);
32+
2333
useEffect(() => {
2434
if (listOfUnlocked) {
2535
// The point is not locked if the id is in the list of unlocked.
@@ -42,8 +52,6 @@ function Point({ point, order }) {
4252
return (!unlocked && nextUnlockablePointId !== id) || !(lat && long);
4353
}
4454

45-
useScrollToLocation(nextUnlockablePointId === id, id);
46-
4755
function getAriaLabelForButton() {
4856
if (isNextPointToUnlock) {
4957
return `Dette punkt er det næste på ruten der skal åbnes. Det bliver åbnet ved at indenfor ${proximityToUnlock} meter af punktet`;

0 commit comments

Comments
 (0)