banner.html

<!--  Banner JavaScript by SSB April 2024 -->

<script type="text/javascript" charset="UTF-8" nonce="">

	var config;

	function getCookie(name) {
		const value = " " + document.cookie;
		console.log("value", `==${value}==`);
		const parts = value.split(" " + name + "=");
		return parts.length < 2 ? undefined : parts.pop().split(";").shift();
	}

	function setCookie(name, value, expiryDays, domain, path, secure) {
		const exdate = new Date();
		exdate.setHours(
			exdate.getHours() +
			(typeof expiryDays !== "number" ? 365 : expiryDays) * 24
		);
		document.cookie =
			name +
			"=" +
			value +
			";expires=" +
			exdate.toUTCString() +
			";path=" +
			(path || "/") +
			(domain ? ";domain=" + domain : "") +
			(secure ? ";secure" : "");
	}

	function read_config() {
		fetch('./banner.json')
			.then(response => {
				if (!response.ok) {
					throw new Error("HTTP error " + response.status);
				}
				return response.json();
			})
			.then(json => {
				this.config = json;
				console.log(this.config);
				setup_banner();
			})
			.catch(function () {
				this.dataError = true;
			})
	}

	//Define type colours here
	function bannerColour(type) {
		var colour;
		switch (type) {
			case "alert":
				colour = "#f99";
				break;
			case "warning":
				colour = "#ff9";
				break;
			case "information":
				colour = "#9f9";
				break;
			default:
				colour = "#77f";
				break;
		}
		return colour;
	}

	function setup_banner() {
		const $cookiesBanner = $(".mood-banner");
		const cookieName = "moodBanner";
		const hasCookie = getCookie(cookieName);
		var ban;

		var $cookiesBannerButton;

		for (i = 0; i < config.length; i++) {
			if (!ban &&
				new Date().getTime() > new Date(config[i].start).getTime() &&
				new Date().getTime() < new Date(config[i].end).getTime()) {
				console.info("time is now for " + config[i].text);
				ban = config[i];
			}
		}

		if (!hasCookie && ban) {
			console.info("We need to show a banner, and a cookie was not found");
			$cookiesBanner.html("<b>" + ban.title + "</b>&nbsp;" + ban.text);
			$cookiesBanner.css("background-color", bannerColour(ban.type));
			$cookiesBanner.append("<button>" + ban.button + "</button>");
			$cookiesBannerButton = $(".mood-banner button");
			$cookiesBanner.removeClass("hidden");
		}

		if ($cookiesBannerButton)
			$cookiesBannerButton.click(() => {
				setCookie(cookieName, "closed");
				$cookiesBanner.remove();
			});
	}

	function add_banner() {
		if ($("body div.mood-banner").length == 0) {
			$("body").append("<div class=\"mood-banner hidden\"> By clicking \"OK\", you agree to the storing of cookies on your device to " +
				"enhance site navigation, analyze site usage, and improve marketing.<button>Accept</button></div>");
		}
	}


	Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
		console.log("ready!");
		add_banner();
		read_config();
	});

</script>