ohloh.html

<a href="#" title="Click for another snippet" id="next-snippet-btn"><span class="glyphicon glyphicon-chevron-right next_snippet"></span></a>
<iframe
	src="https://www.openhub.net/p/or/widgets/project_factoids"
	id="openhub-iframe"
	seamless
	style="width: 100%; height: 100%; border: none; border-radius: 0.5em; background-color: white"
>
</iframe>

<script type="text/javascript">
	(function () {
		const nextSnippetBtn = document.getElementById('next-snippet-btn');
		const iframe = document.getElementById('openhub-iframe');

		let session;
		try {
			session = sessionStorage;
		} catch {
			session = undefined;
		}

		const current = () => {
			if (session == undefined) {
				return 0;
			} else {
				const v = session.getItem('or_ohloh_snippet');
				return v === null ? 0 : parseInt(v);
			}
		};

		const widgetTypes = ['factoids', 'basic_stats', 'cocomo'];

		const show = () => {
			iframe.src = `https://www.openhub.net/p/or/widgets/project_${widgetTypes[current()]}`;
		};

		const next = () => {
			if (session !== undefined) session.setItem('or_ohloh_snippet', (current() + 1) % 3);
		};

		// Events beside "click" needed for mobile (https://stackoverflow.com/a/22799137)
		['click', 'tap', 'touchstart'].forEach((event) => {
			nextSnippetBtn.addEventListener(event, (e) => {
				show();
				next();
				e.preventDefault();
			});
		});

		show();
		next();
	})();
</script>