Mango/public/js/reader.js

$(function() {
	function bind() {
		var controller = new ScrollMagic.Controller();

		// replace history on scroll
		$('img').each(function(idx) {
			var scene = new ScrollMagic.Scene({
					triggerElement: $(this).get(),
					triggerHook: 'onEnter',
					reverse: true
				})
				.addTo(controller)
				.on('enter', function(event) {
					current = $(event.target.triggerElement()).attr('id');
					replaceHistory(current);
				})
				.on('leave', function(event) {
					var prev = $(event.target.triggerElement()).prev();
					current = $(prev).attr('id');
					replaceHistory(current);
				});
		});

		// poor man's infinite scroll
		var scene = new ScrollMagic.Scene({
				triggerElement: $('.next-url').get(),
				triggerHook: 'onEnter',
				offset: -500
			})
			.addTo(controller)
			.on('enter', function() {
				var nextURL = $('.next-url').attr('href');
				$('.next-url').remove();
				if (!nextURL) {
					console.log('No .next-url found. Reached end of page');
					var lastURL = $('img').last().attr('id');
					// load the reader URL for the last page to update reading progrss to 100%
					$.get(lastURL);
					$('#next-btn').removeAttr('hidden');
					return;
				}
				$('#hidden').load(encodeURI(nextURL) + ' .uk-container', function(res, status, xhr) {
					if (status === 'error') console.log(xhr.statusText);
					if (status === 'success') {
						console.log(nextURL + ' loaded');
						// new page loaded to #hidden, we now append it
						$('.uk-section > .uk-container').append($('#hidden .uk-container').children());
						$('#hidden').empty();
						bind();
					}
				});
			});
	}

	bind();
});
$('#page-select').change(function() {
	jumpTo(parseInt($('#page-select').val()));
});

function showControl(idx) {
	const pageCount = $('#page-select > option').length;
	const progressText = `Progress: ${idx}/${pageCount} (${(idx/pageCount * 100).toFixed(1)}%)`;
	$('#progress-label').text(progressText);
	$('#page-select').val(idx);
	UIkit.modal($('#modal-sections')).show();
}

function jumpTo(page) {
	var ary = window.location.pathname.split('/');
	ary[ary.length - 1] = page;
	ary.shift(); // remove leading `/`
	ary.unshift(window.location.origin);
	window.location.replace(ary.join('/'));
}

function replaceHistory(url) {
	history.replaceState(null, "", url);
	console.log('reading ' + url);
}

function redirect(url) {
	window.location.replace(url);
}