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
function updateOutputTrail(id) {
/* Functions taken from https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css*/ /* 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 @@ ...@@ -4,12 +4,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>All Trails</title> <title>All Trails</title>
<link rel="stylesheet" th:href="@{css/allTrails.css}"> <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> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head> </head>
<body> <body>
<header> <header th:replace="towns/templates.server/Templating.html :: headerBlock"></header>
<div id="allTrailsBar" class="centerFlex">
<main>
<section id="allTrailsBar" class="centerFlex">
<!--TODO add rest of page--> <!--TODO add rest of page-->
<img class="trailsImages" <img class="trailsImages"
th:each="trail : ${trails}" th:each="trail : ${trails}"
...@@ -17,34 +20,13 @@ ...@@ -17,34 +20,13 @@
th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'" th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}" th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
> >
</div> </section>
</header>
<main>
<section id="trailInfoBox"></section> <section id="trailInfoBox"></section>
</main> </main>
<footer th:replace="towns/templates.server/Templating.html:: footerBlock"></footer>
<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script> <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> </body>
</html> </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