Added navigation

www/css/style.css

@@ -605,13 +605,13 @@ body
 }
 
 /* History */
-.history .item.entry
+.history .item.entry, .navigation .item.entry
 {
 	padding-right: 4.5em;
 	position:relative;
 }
 
-.history .item.entry .right
+.history .item.entry .right, .navigation .item.entry .right
 {
 	float:none;
 	position:absolute;
@@ -631,10 +631,14 @@ body
 	background-image: url("back.png");
 }*/
 
-.container.brHack > br
+.container.brHack > br, .container.brHack > div
 {
 	display:block;
 	line-height: 1;
-	content: " ";
 	min-height:1em;
+}
+
+.container.brHack > br
+{
+	content: " ";
 }

www/index.html

@@ -105,8 +105,9 @@
 			</div>
 		</div>
 		<div class="screen scrollable main menu gui">
-			<!--<div class="header">Menu</div>-->
+			<div class="header">Menu</div>
 			<div class="item back">Resume reading</div>
+			<div class="item navigation">Navigation</div>
 			<div class="item openFile">Load file
 				<input type="file"/>
 			</div>
@@ -116,7 +117,13 @@
 			<div class="item exit">Exit</div>
 		</div>
 		<div class="screen scrollable navigation menu gui" data-screen="navigation">
+			<div class="item back">Back<i></i></div>
 			<div class="header">Navigation</div>
+			<div class="item slider-control goToPosition" data-system-name="goToPosition">
+				<span class="name">Position:</span><span class="right"><span class="value"></span>%</span><br/>
+				<div class="slider" data-min="0" data-max="100" data-step="0.01"></div>
+			</div>
+			<div class="header">Chapters</div>
 		</div>
 		<div class="screen scrollable history menu gui" data-screen="settings">
 			<div class="header">History</div>
@@ -293,6 +300,7 @@
 		<script src="./js/sliderControl.js"></script>
 		<script src="./js/settings.js"></script>
 		<script src="./js/history.js"></script>
+		<script src="./js/navigation.js"></script>
 		<script src="./js/readerDocument.js"></script>
 		<script src="./js/reader.js"></script>
 		<script src="./js/app.js"></script>

www/js/navigation.js

@@ -0,0 +1,71 @@
+var Navigation = {
+	init: function()
+	{
+		var self = this;
+		self.screen = $('.screen.navigation');
+		document.addEventListener("softbackbutton", function(e)
+		{
+			if (self.screen.is(':visible'))
+			{
+				if (self.positionChanged)
+				{
+					App.reader.selectScreen('reader');
+					App.reader.scrollTo(self.position / 100.0, true);
+					e.stopImmediatePropagation();
+				}
+				else
+				{
+					App.selectScreen('.screen.main.menu');
+					e.stopImmediatePropagation();
+				}
+			}
+		}, false);
+		self.screen.on('click', '.item.entry', function()
+		{
+			var elem = $(this);
+			if(confirm('Go to "' + elem.find('.name').text() + '"?'))
+			{
+				App.selectScreen('.screen.reader');
+				App.reader.scrollTo("#" + elem.attr("data-id"), true, false);
+			}
+		});
+		self.positionChanged = false;
+		self.position = 0;
+		self.goToPositionSlider = new SliderControl(self.screen.find('.goToPosition'), function(value)
+		{
+			self.position = value;
+			self.positionChanged = true;
+		},
+		0);
+	},
+	populate: function()
+	{
+		if (App.reader.document == null || App.reader.document.navigation.length == 0)
+		{
+			return;
+		}
+		this.screen.find('.entry').remove();
+		for (var i = 0; i < App.reader.document.navigation.length; i++)
+		{
+			var entry = App.reader.document.navigation[i];
+			this.screen.append(
+			'<div class="item entry" data-id="' + entry.id + '">' +
+			'<span class="name">' + entry.name + '</span>' +
+			'<span class="right">' + (entry.progress * 100.0).toFixed(2) + '%</span>' +
+			'</div>'
+			);
+		}
+	},
+	open: function()
+	{
+		this.populate();
+		this.goToPositionSlider.slider.val(App.reader.progress * 100).change();
+		this.positionChanged = false;
+		App.selectScreen(this.screen);
+	},
+}
+// I'm being lazy and defining constructor for this is a bit of an overkill
+$(function()
+{
+	Navigation.init();
+});

www/js/reader.js

@@ -238,6 +238,11 @@ Reader.prototype = {
 			ReadingHistory.open();
 		});
 
+		menu.find('.navigation').click(function()
+		{
+			Navigation.open();
+		});
+
 		menu.find('.exit').click(function()
 		{
 			if (confirm('Close app?'))

www/js/readerDocument.js

@@ -63,8 +63,13 @@ ReaderDocument.prototype = {
 		}
 		for (var navId in self.navigation)
 		{
-			var elem = $(self.navigation[navId].elem);
-			result.push(elem.attr('data-position') / self.total);
+			var nav = self.navigation[navId];
+			if (typeof nav.progress == "undefined")
+			{
+				var elem = $(nav.elem);
+				nav.progress = elem.attr('data-position') / self.total;
+			}
+			result.push(nav.progress);
 		}
 		return result;
 	},