https://assets.manchester.ac.uk/shared/js/banner-block-01.js

1window.addEventListener("DOMContentLoaded", () => {
2	const tabList = document.querySelector('[role="tablist"]');
3
4	//console.log(tabList);
5
6	if (tabList != null) {
7		const tabs = document.querySelectorAll('[role="tab"]');
8
9		// Add a click event handler to each tab
10		tabs.forEach((tab) => {
11			tab.addEventListener("click", changeTabs);
12		});
13
14		// Enable arrow navigation between tabs in the tab list
15		let tabFocus = 0;
16
17		tabList.addEventListener("keydown", (e) => {
18			if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
19				tabs[tabFocus].setAttribute("tabindex", -1);
20
21				if (e.key === "ArrowRight") {
22					tabFocus++;
23
24					// If we're at the end, go to the start
25					if (tabFocus >= tabs.length) {
26						tabFocus = 0;
27					}
28				} else if (e.key === "ArrowLeft") {
29					tabFocus--;
30
31					// If we're at the start, move to the end
32					if (tabFocus < 0) {
33						tabFocus = tabs.length - 1;
34					}
35				}
36
37				tabs[tabFocus].setAttribute("tabindex", 0);
38				tabs[tabFocus].focus();
39			}
40		});
41	}
42});
43
44function changeTabs(e) {
45	const target = e.target;
46	const parent = target.parentNode;
47	const grandparent = parent.parentNode;
48	const greatgrandparent = grandparent.parentNode;
49
50	// Remove all current selected tabs
51	grandparent
52		.querySelectorAll('[aria-selected="true"]')
53		.forEach((t) => t.setAttribute("aria-selected", false));
54
55	// Set this tab as selected
56	target.setAttribute("aria-selected", true);
57
58	// Hide all tab panels
59	greatgrandparent
60		.querySelectorAll('[role="tabpanel"]')
61		.forEach((p) => p.setAttribute("hidden", true));
62
63	// Show the selected panel
64	greatgrandparent.parentNode
65		.querySelector(`#${target.getAttribute("aria-controls")}`)
66		.removeAttribute("hidden");
67}
68
69$(document).ready(function() {
70	"use strict";
71
72	var stickyNavWideSelector = ".sticky-nav.wide";
73
74	$(".banner-block a.cta.in-page").on("click tap", function(e) {
75		var $this = $(this);
76		var destinationId = $this.attr("href").substr(1).replace("d.en.", "");
77		e.preventDefault();
78
79		var anchorScrollOffset = 10;
80
81		if ($this.closest(".sticky-nav").hasClass("wide")) {
82			anchorScrollOffset += $(stickyNavWideSelector).height() + 9;
83		} else {
84			$(".sticky-nav.narrow button").attr("aria-expanded", false);
85			$this.closest("ul").prop("hidden", true);
86		}
87
88		const targetElement = document.getElementById("d.en." + destinationId);
89		targetElement.focus({ preventScroll: true });
90
91		if ($(targetElement).hasClass("banner-bg")) anchorScrollOffset = 0;
92
93		$("html, body").animate({
94			scrollTop: $("#d\\.en\\." + destinationId).offset().top - anchorScrollOffset
95		}, 500, function() {});
96	});
97});