banner.html

<div class="row">
	<div class="col-md-12">
		<img class="banner" id="banner" src="/assets/banners/banner000.jpg" />
		<a href="/" class="logo-container">
			<img class="logo" src="/assets/logos/or_logo.png" alt="Logo for Open Rails" />
			<span class="logo_text">Open Rails</span>
		</a>
		<a href="#" title="Click for another picture" id="show-another-image">
			<span class="glyphicon glyphicon-chevron-right next_banner"></span>
		</a>
		<script type="text/javascript">
			(async function () {
				const banner = document.getElementById('banner');
				const another = document.getElementById('show-another-image');
				let session;
				try {
					session = sessionStorage;
				} catch {
					session = undefined;
				}

				const show = () => {
					if (session === undefined) return false;
					const curImage = session.getItem('or_banner_image');
					const curTitle = session.getItem('or_banner_title');
					const curSupplier = session.getItem('or_banner_supplier');
					if ([curImage, curTitle, curSupplier].some((x) => x === null)) return false;
					banner.src = curImage;
					banner.title = `${curTitle}\nposted by ${curSupplier}`;
					return true;
				};
				const loadJson = async (url) =>
					new Promise((resolve, reject) => {
						const req = new XMLHttpRequest();
						req.open('GET', url);
						req.addEventListener('load', (e) => {
							resolve(req.response);
						});
						req.addEventListener('error', reject);
						req.addEventListener('abort', reject);
						req.responseType = 'json';
						req.send();
					});

				/* Load the current banner, as stored in the cookies, immediately.
				 * It takes a visibly long time for the browser to load the banner list,
				 * even when it's already cached. */
				const showAgain = !show();
				const list = await loadJson('/assets/banners/banner_list.json');

				const pick = (l) => l[Math.floor(Math.random() * l.length)];
				const next = () => {
					if (session === undefined) return;
					const b = pick(list);
					const path = `/assets/banners/${b['image']}`;
					session.setItem('or_banner_image', path);
					session.setItem('or_banner_title', b['title']);
					session.setItem('or_banner_supplier', b['supplier']);

					// Preload the next banner.
					new Image().src = path;
				};

				another.addEventListener('click', (e) => {
					show();
					next();
					e.preventDefault();
				});

				next();
				if (showAgain) {
					show();
					next();
				}
			})();
		</script>
	</div>
</div>