Highlight and scroll to current page on TOC window. Close #47

thexerteproject · Jun 4, 2015 · d3113e7 · d3113e7
1 parent 280f384
commit d3113e7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js b/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
@@ -1285,6 +1285,10 @@ function x_openDialog(type, title, close, position, load) {
                     x_dialogInfo[i].built.show(); // don't reset size / position for language dialogs
                     language.turnOnKeyEvents();
                 }
+
+				if (type == "menu") {
+					menu.showCurrent();
+				}
 
             } else {
                 $x_body.append('<div id="x_' + type + '" class="x_popupDialog"></div>');

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/menu.html b/modules/xerte/parent_templates/Nottingham/models_html5/menu.html
@@ -55,11 +55,6 @@
 				$thisItem.html((i+1) + ") " + x_pages[i+numOffset].getAttribute("name"));
 			}
 
-			// First attempt at setting current page...
-			// problem is that this needs to change each time page is changed so needs to go there...
-			//$menuItems = $("#menuItems")[x_currentPage].addClass("current");
-
-
 			$("#menuItems .menuItem")
 				.button()
 				.click(function() {
@@ -115,9 +110,17 @@
 
 			} else { // menu is in dialog
 				$("#menuHolder").removeClass("splitScreen");
+				this.showCurrent();
 			}
 		}
 
+		// function called from xenith every time menu in popup appears - highlights current page in list
+		this.showCurrent = function() {
+			$("#menuItems").find(".current").removeClass("current");
+			var $thisItem = $("#menuItems .menuItem:eq(" + x_currentPage + ")").addClass("current");
+			$thisItem[0].scrollIntoView();
+		}
+
 		// function sets up full screen bg image
 		this.setUpBg = function(firstLoad) {
 			var $pageBg = $('<img id="pageBg"/>');
@@ -158,7 +161,8 @@
 	}
 
 	#menuItems .menuItem.current {
-		color:	white;
+		border: 2px solid #FF9900;
+		font-weight: bold;
 	}
 
 </style>