Skip to content
Snippets Groups Projects
Commit 04d3bd91 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Moved JavaScript to it's own file

parent 8907f783
No related branches found
No related tags found
1 merge request!11Resolve "As a user, I want to see all trails across a town and seamlessly move between them."
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/scripts/allTrails.js
+ 18
− 2
View file @ 04d3bd91
/* Functions taken from https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css*/
function updateOutputTrail(id) {
/* Updates the trail being shown on screen to the one requested by ID */
$.get("/allTrails/" + id).done(function (fragment) {
$("#trailInfoBox").html(fragment)
});
updateSelectedTrail(id);
}
function updateSelectedTrail(id) {
/* Updates the trail bar, so that it highlights the selected trail */
let list = document.getElementsByClassName('trailsImages')
for (let i = 0; i < list.length; i++) {
if (list[i].classList.contains('selected')) {
list[i].classList.remove('selected')
break
}
}
document.getElementById("img" + id).classList.add("selected")
}
\ No newline at end of file
src/main/resources/templates/allTrails/allTrails.html
+ 8
− 26
View file @ 04d3bd91
......@@ -4,12 +4,15 @@
<meta charset="UTF-8">
<title>All Trails</title>
<link rel="stylesheet" th:href="@{css/allTrails.css}">
<link rel="stylesheet" th:href="@{css/banners.css}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<div id="allTrailsBar" class="centerFlex">
<header th:replace="towns/templates.server/Templating.html :: headerBlock"></header>
<main>
<section id="allTrailsBar" class="centerFlex">
<!--TODO add rest of page-->
<img class="trailsImages"
th:each="trail : ${trails}"
......@@ -17,34 +20,13 @@
th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
>
</div>
</header>
<main>
</section>
<section id="trailInfoBox"></section>
</main>
<footer th:replace="towns/templates.server/Templating.html:: footerBlock"></footer>
<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
<script th:inline="javascript">
function updateOutputTrail(id) {
/* Updates the trail being shown on screen to the one requested by ID */
$.get("/allTrails/" + id).done(function (fragment) {
$("#trailInfoBox").html(fragment)
});
updateSelectedTrail(id);
}
function updateSelectedTrail(id) {
/* Updates the trail bar, so that it highlights the selected trail */
let list = document.getElementsByClassName('trailsImages')
for (let i = 0; i < list.length; i++) {
if (list[i].classList.contains('selected')) {
list[i].classList.remove('selected')
break
}
}
document.getElementById("img" + id).classList.add("selected")
}
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment