From b49bf7dbda15ef11ecabd09cff764a0a0dd2243e Mon Sep 17 00:00:00 2001
From: Fay Cross <cross.fay@gmail.com>
Date: Fri, 16 Nov 2012 16:03:01 +0000
Subject: [PATCH] HTML5 - New transcriptReader page

git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@509 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
---
 .../Nottingham/common_html5/js/xenith.js      |   2 +-
 .../models_html5/transcriptReader.html        | 127 ++++++++++++++++++
 .../Nottingham/models_html5/videoSynch.html   |   2 +-
 3 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 modules/xerte/parent_templates/Nottingham/models_html5/transcriptReader.html

diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js b/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
index ef355665b4..a3f123bea6 100644
--- a/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
+++ b/modules/xerte/parent_templates/Nottingham/common_html5/js/xenith.js
@@ -780,7 +780,7 @@ function x_updateCss(updatePage) {
 	if (updatePage == true) {
 		// calls function in current page model which does anything needed on size change
 		if (x_pageInfo[x_currentPage].type == "text") {
-			simpleText.sizeChanged(); // errors if you just call text.pageChanged()
+			simpleText.sizeChanged(); // errors if you just call text.sizeChanged()
 		} else {
 			eval(x_pageInfo[x_currentPage].type).sizeChanged();
 		}
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/transcriptReader.html b/modules/xerte/parent_templates/Nottingham/models_html5/transcriptReader.html
new file mode 100644
index 0000000000..a5c7338bc3
--- /dev/null
+++ b/modules/xerte/parent_templates/Nottingham/models_html5/transcriptReader.html
@@ -0,0 +1,127 @@
+<script type="text/javascript">
+	
+	// pageChanged & sizeChanged functions are needed in every model file
+	// other functions for model should also be in here to avoid conflicts
+	var transcriptReader = new function() {
+		// function called every time the page is viewed after it has initially loaded
+		this.pageChanged = function() {
+			$("#infoHolder").scrollTop(0);
+			$("#infoHolder .highlight").removeClass("highlight");
+			this.loadAudio();
+		}
+		
+		// function called every time the size of the LO is changed
+		this.sizeChanged = function(pageChg) {
+			if (x_browserInfo.mobile == false) {
+				var $panel = $("#pageContents .panel");
+				$panel.height($x_pageHolder.height() - parseInt($x_pageDiv.css("padding-top")) * 2 - parseInt($panel.css("padding-top")) * 2 - 5);
+				$("#infoHolder").height($panel.height() - x_audioBarH);
+			}
+			$("#infoHolder").scrollTop(0);
+			$("#infoHolder div").each(function() {
+				var $caption = $(this);
+				$caption.data("scrollPos", $caption.position().top);
+			});
+			
+			this.loadAudio();
+		}
+		
+		this.loadAudio = function() {
+			var soundFile = x_currentPageXML.getAttribute("sound");
+			$("#pageAudio").mediaPlayer({
+				type		:"audio",
+				source		:soundFile,
+				pageName	:"transcriptReader"
+			});
+			if ($("#pageContents").data("loaded") != true) {
+				$("#pageContents").data("loaded", true);
+				x_pageLoaded(); // call this function in every model once everything's loaded
+			}
+		}
+		
+		// function called from mediaPlayer.js when video player has been set up
+		this.mediaFunct = function(mediaElement) {
+			var $captions 	= $($("#pageContents").data("captions"));
+			mediaElement.addEventListener("timeupdate", function(e) {
+				var currentTime = mediaElement.currentTime;
+				$captions.each(function(){
+					var $thisCaption = $(this);
+					if (currentTime > $thisCaption.data("synch")) {
+						$("#infoHolder .highlight").removeClass("highlight");
+						$thisCaption.addClass("highlight");
+						// ** this isn't always scrolling to correct position when full screen **
+						$("#infoHolder").scrollTop($thisCaption.data("scrollPos") - parseInt($("#pageContents .panel").css("padding-top")) - 1);
+					} else {
+						$thisCaption.removeClass("highlight");
+					}
+				});
+			});
+		}
+	}
+	
+	$("#textHolder").html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));	
+	
+	var panelWidth = x_currentPageXML.getAttribute("panelWidth");
+	if (panelWidth == "Full") {
+		$("#pageContents .panel").appendTo($("#pageContents"));
+		$("#pageContents .splitScreen").remove();
+	} else {
+		$("#textHolder").html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));
+		if (panelWidth == "Small") {
+			$("#pageContents .splitScreen").addClass("large"); // make text area on left large so panel on right is small
+		} else if (panelWidth == "Large") {
+			$("#pageContents .splitScreen").addClass("small");
+		} else {
+			$("#pageContents .splitScreen").addClass("medium");
+		} 
+	}
+	
+	var $infoHolder = $("#infoHolder");
+	var captions = new Array();
+	$(x_currentPageXML).children().each(function(){
+		var $caption = $("<div>" + x_addLineBreaks($(this).attr("text")) + "</div>").data("synch", $(this).attr("synch"));
+		$infoHolder.append($caption);
+		$caption.data("scrollPos", $caption.position().top);
+		captions.push($caption[0]);
+	});
+	$("#pageContents").data("captions", captions);
+	
+	if (x_currentPage != 0) {
+		setTimeout(function () { // audio won't load properly without a delay here
+			transcriptReader.sizeChanged();
+		},1);
+	}
+	
+</script>
+
+<style type="text/css">
+	
+	#infoHolder {
+		overflow:	auto;
+	}
+	
+	#infoHolder div {
+		padding:		10px;
+	}
+	
+</style>
+
+<div id="pageContents">
+	
+	<div class="splitScreen">
+		
+		<div id="textHolder" class="left">
+			
+		</div>
+		
+		<div class="right">
+			<div class="panel">
+				<div id="infoHolder">
+				</div>
+				<div id="pageAudio"></div>
+			</div>
+		</div>
+		
+	</div>
+	
+</div>
\ No newline at end of file
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.html b/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.html
index fd7a0f543d..9cd9684aad 100644
--- a/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.html
+++ b/modules/xerte/parent_templates/Nottingham/models_html5/videoSynch.html
@@ -74,7 +74,7 @@
 	var $infoHolder = $("#infoHolder");
 	var captions = new Array();
 	$(x_currentPageXML).children().each(function(){
-		var $caption = $("<div>" + $(this).attr("text") + "</div>")
+		var $caption = $("<div>" + x_addLineBreaks($(this).attr("text")) + "</div>")
 			.hide()
 			.data("synch", $(this).attr("synch"));