From 04d3bd919b1d9cff8c6bff923b3387ad2ad2a318 Mon Sep 17 00:00:00 2001 From: Gabriel Copat <copatg@cardiff.ac.uk> Date: Wed, 29 Nov 2023 11:35:41 +0000 Subject: [PATCH] Moved JavaScript to it's own file --- .../resources/static/scripts/allTrails.js | 20 +++++++++-- .../templates/allTrails/allTrails.html | 34 +++++-------------- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js index ea21bb4e..d04eed9d 100644 --- a/src/main/resources/static/scripts/allTrails.js +++ b/src/main/resources/static/scripts/allTrails.js @@ -1,2 +1,18 @@ - -/* 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 diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html index a05cf5ff..1179d272 100644 --- a/src/main/resources/templates/allTrails/allTrails.html +++ b/src/main/resources/templates/allTrails/allTrails.html @@ -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 -- GitLab