tjmtmmnk/locations.html Secret

## locations.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>EPUB.js Spreads Example</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
	<script src="../dist/epub.js"></script>

	<link rel="stylesheet" type="text/css" href="examples.css">

</head>
<body>
	<div id="title"></div>
	<div id="viewer"></div>
	<a id="prev" href="#prev" class="arrow">‹</a>
	<a id="next" href="#next" class="arrow">›</a>
	<div id="controls">
			<input id="current-percent" size="3" value="0" /> %
	</div>
	<script>

		var controls = document.getElementById("controls");
		var currentPage = document.getElementById("current-percent");
		var slider = document.createElement("input");
		var slide = function(){
				var cfi = book.locations.cfiFromPercentage(slider.value / 100);
				rendition.display(cfi);
		};
		var mouseDown = false;

		// Load the opf
		var book = ePub("mymedia_lite.epub");
		var rendition = book.renderTo("viewer", {
			width: "100%",
			height: "90vh",
			spread: 'none',
			allowScriptedContent: true,
		});

		var displayed = rendition.display();

		var title = document.getElementById("title");

		var next = document.getElementById("next");
		next.addEventListener("click", function(e){
			rendition.next();
			e.preventDefault();
		}, false);

		var prev = document.getElementById("prev");
		prev.addEventListener("click", function(e){
			rendition.prev();
			e.preventDefault();
		}, false);

		var keyListener = function(e){

			// Left Key
			if ((e.keyCode || e.which) == 37) {
				rendition.prev();
			}

			// Right Key
			if ((e.keyCode || e.which) == 39) {
				rendition.next();
			}

		};

		rendition.on("keyup", keyListener);
		document.addEventListener("keyup", keyListener, false);

		book.ready.then(async function(){
			return book.locations.generate(1024);
		})
		.then(function(locations){
				controls.style.display = "block";
				slider.setAttribute("type", "range");
				slider.setAttribute("min", 0);
				slider.setAttribute("max", 100);
				// slider.setAttribute("max", book.locations.total+1);
				slider.setAttribute("step", 1);
				slider.setAttribute("value", 0);

				slider.addEventListener("change", slide, false);
				slider.addEventListener("mousedown", function(){
						mouseDown = true;
				}, false);
				slider.addEventListener("mouseup", function(){
						mouseDown = false;
				}, false);

				// Wait for book to be rendered to get current page
				displayed.then(function(){
						// Get the current CFI
						var currentLocation = rendition.currentLocation();
						// Get the Percentage (or location) from that CFI
						var currentPage = book.locations.percentageFromCfi(currentLocation.start.cfi);
						slider.value = currentPage;
						currentPage.value = currentPage;
				});

				controls.appendChild(slider);

				currentPage.addEventListener("change", function(){
					var cfi = book.locations.cfiFromPercentage(currentPage.value/100);
					rendition.display(cfi);
				}, false);

				// Listen for location changed event, get percentage from CFI
				rendition.on('relocated', function(location){
						var percent = book.locations.percentageFromCfi(location.start.cfi);
						var percentage = Math.floor(percent * 100);
						if(!mouseDown) {
								slider.value = percentage;
						}
						currentPage.value = percentage;
						console.log(location);
				});

				// Save out the generated locations to JSON
				localStorage.setItem(book.key()+'-locations', book.locations.save());

		});

	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>EPUB.js Spreads Example</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
	<script src="../dist/epub.js"></script>

	<link rel="stylesheet" type="text/css" href="examples.css">

	</head>
	<body>
	<div id="title"></div>
	<div id="viewer"></div>
	<a id="prev" href="#prev" class="arrow">‹</a>
	<a id="next" href="#next" class="arrow">›</a>
	<div id="controls">
	<input id="current-percent" size="3" value="0" /> %
	</div>
	<script>

	var controls = document.getElementById("controls");
	var currentPage = document.getElementById("current-percent");
	var slider = document.createElement("input");
	var slide = function(){
	var cfi = book.locations.cfiFromPercentage(slider.value / 100);
	rendition.display(cfi);
	};
	var mouseDown = false;

	// Load the opf
	var book = ePub("mymedia_lite.epub");
	var rendition = book.renderTo("viewer", {
	width: "100%",
	height: "90vh",
	spread: 'none',
	allowScriptedContent: true,
	});

	var displayed = rendition.display();

	var title = document.getElementById("title");

	var next = document.getElementById("next");
	next.addEventListener("click", function(e){
	rendition.next();
	e.preventDefault();
	}, false);

	var prev = document.getElementById("prev");
	prev.addEventListener("click", function(e){
	rendition.prev();
	e.preventDefault();
	}, false);

	var keyListener = function(e){

	// Left Key
	if ((e.keyCode \|\| e.which) == 37) {
	rendition.prev();
	}

	// Right Key
	if ((e.keyCode \|\| e.which) == 39) {
	rendition.next();
	}

	};

	rendition.on("keyup", keyListener);
	document.addEventListener("keyup", keyListener, false);

	book.ready.then(async function(){
	return book.locations.generate(1024);
	})
	.then(function(locations){
	controls.style.display = "block";
	slider.setAttribute("type", "range");
	slider.setAttribute("min", 0);
	slider.setAttribute("max", 100);
	// slider.setAttribute("max", book.locations.total+1);
	slider.setAttribute("step", 1);
	slider.setAttribute("value", 0);

	slider.addEventListener("change", slide, false);
	slider.addEventListener("mousedown", function(){
	mouseDown = true;
	}, false);
	slider.addEventListener("mouseup", function(){
	mouseDown = false;
	}, false);

	// Wait for book to be rendered to get current page
	displayed.then(function(){
	// Get the current CFI
	var currentLocation = rendition.currentLocation();
	// Get the Percentage (or location) from that CFI
	var currentPage = book.locations.percentageFromCfi(currentLocation.start.cfi);
	slider.value = currentPage;
	currentPage.value = currentPage;
	});

	controls.appendChild(slider);

	currentPage.addEventListener("change", function(){
	var cfi = book.locations.cfiFromPercentage(currentPage.value/100);
	rendition.display(cfi);
	}, false);

	// Listen for location changed event, get percentage from CFI
	rendition.on('relocated', function(location){
	var percent = book.locations.percentageFromCfi(location.start.cfi);
	var percentage = Math.floor(percent * 100);
	if(!mouseDown) {
	slider.value = percentage;
	}
	currentPage.value = percentage;
	console.log(location);
	});

	// Save out the generated locations to JSON
	localStorage.setItem(book.key()+'-locations', book.locations.save());

	});

	</script>

	</body>
	</html>