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

Moved JavaScript to it's own file

parent d02182f5
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 @ ead56d8d
/* 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 @ ead56d8d
......@@ -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.
Finish editing this message first!
Please register or to comment