html5: fixed line breaks bug, fixed bugs on newWindow, embedDiv and t…

…itle pages, completed textVideo page, new xerteModel page added git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@495 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
thexerteproject · Nov 14, 2012 · e0beab9 · e0beab9
1 parent 711926f
commit e0beab9
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 56 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
@@ -111,7 +111,7 @@ $(document).ready(function() {
 				} else {
 					newString += text.substring(indexAttr[i - 1].end, indexAttr[i].start);
 				}
-				newString += text.substring(indexAttr[i].start, indexAttr[i].end).replace(/\n/g, "&#10;");
+				newString += text.substring(indexAttr[i].start, indexAttr[i].end).replace(/(\n|\r|\r\n)/g, "&#10;");
 				if (i == indexAttr.length - 1) {
 					newString += text.substring(indexAttr[i].end, text.length);
 				}
@@ -191,7 +191,7 @@ function x_setUp() {
 	$x_nextBtn		= $("#x_nextBtn");
 	$x_background	= $("#x_background");
 
-	$x_body.css("font-size", Number(x_params.textSize) + "pt");
+	$x_body.css("font-size", Number(x_params.textSize) - 2 + "pt");
 
 	if (screen.width <= 550) {
 		x_browserInfo.mobile = true;
@@ -922,7 +922,7 @@ function x_scaleImg(img, maxW, maxH, scale, firstScale, setH) {
 
 // function swaps line breaks in xml text attributes and CDATA to br tags
 function x_addLineBreaks(text) {
-	return text.replace(/\n/g, "<br />");
+	return text.replace(/(\n|\r|\r\n)/g, "<br />");
 }
 
 function x_addPageLinks(pageText, returnMethod) {

diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/mediaelement/mediaPlayer.js b/modules/xerte/parent_templates/Nottingham/common_html5/mediaelement/mediaPlayer.js
@@ -3,9 +3,7 @@
 	$.fn.mediaPlayer = function(options) {
 		var defaults = {
 			type			:"audio",
-			source			:"",
-			autoPlay		:false,
-			autoNavigate	:false
+			source			:""
 		};
 		var opts = $.extend({}, defaults, options);
 
@@ -26,14 +24,14 @@
 		}
 
 		opts.source = eval(opts.source);
-
 		var fileType = opts.type + "/" + opts.source.substring(opts.source.indexOf(".")+1);
 		this.append('<' + opts.type + ' preload="metadata"' + dimensionsString + '><source type="' + fileType + '" src="' + opts.source + '" /></' + opts.type + '>');
+
 		this.find(opts.type).mediaelementplayer({
 			startVolume:		x_volume,
 			alwaysShowControls:	true,
 			pauseOtherPlayers:	true,
-			success: 		function (mediaElement, domObject) {
+			success:	function (mediaElement, domObject) {
 				if (opts.autoNavigate == "true" && x_currentPage + 1 != x_pages.length) { // go to next page when media played to end
 					mediaElement.addEventListener("ended", function() {
 						$x_nextBtn.trigger("click");
@@ -65,7 +63,25 @@
 				if (opts.autoPlay == "true") { // autoplay media (won't work on iOS on 1st load)
 					mediaElement.play();
 				}
+
+				if (opts.startEndFrame != undefined) { // start / end playing video at specified frame
+					var startFrame	= opts.startEndFrame[0];
+					var endFrame	= opts.startEndFrame[1];
+					if (startFrame != 0) {
+						mediaElement.addEventListener("canplay", function() {
+							mediaElement.setCurrentTime(startFrame);
+						});
+					}
+					if (endFrame != 0) {
+						mediaElement.addEventListener("timeupdate", function(e) {
+							if (mediaElement.currentTime > endFrame) {
+								mediaElement.pause();
+							}
+						}, false);
+					}
+				}
 			}
 		});
 	}
+
 })(jQuery);
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/embedDiv.html b/modules/xerte/parent_templates/Nottingham/models_html5/embedDiv.html
@@ -31,6 +31,7 @@
 	} else { // use iframe to load web page
 		var iFrameTag = '<iframe id="iFrame" src="' + pageSrc + '" width="100%" height="' + embedDiv.calcHeight() + '"></iframe>';
 		$pageContents.html(iFrameTag);
+		$pageContents.addClass("centerAlign");
 	}
 
 	// call this function in every model once everything's loaded
@@ -39,10 +40,6 @@
 </script>
 
 <style type="text/css">
-
-	#pageContents {
-		text-align:	center;
-	}
 
 </style>
 

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/newWindow.html b/modules/xerte/parent_templates/Nottingham/models_html5/newWindow.html
@@ -1,6 +1,4 @@
 <script type="text/javascript">
-
-	// ** html optional attribute to be added **
 
 	// pageChanged & sizeChanged functions are needed in every model file
 	// other functions for model should also be in here to avoid conflicts
@@ -37,9 +35,6 @@
 			popupWindow.focus();
 		} else {
 			var src = x_currentPageXML.getAttribute("url");
-			if (x_currentPageXML.getAttribute("html") != "" && x_currentPageXML.getAttribute("url") != undefined) {
-				// ** need to display html info instead of url ** is url the correct attribute name? **
-			}
 			window.open(src, "_blank", "width=" + x_currentPageXML.getAttribute("windowWidth") + ", height=" + x_currentPageXML.getAttribute("windowHeight"));
 		}
 	});

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/textVideo.html b/modules/xerte/parent_templates/Nottingham/models_html5/textVideo.html
@@ -1,18 +1,5 @@
 <script type="text/javascript">
 
-	/*
-	** NOT FINISHED **
-	need to add functionality for these attributes:
-	
-	tip="Breaking up christmas video"
-	reset="true"
-	
-	optional:
-	endFrame="15"
-	startFrame="10"
-	
-	*/
-
 	// pageChanged & sizeChanged functions are needed in every model file
 	// other functions for model should also be in here to avoid conflicts
 	var textVideo = new function() {
@@ -28,22 +15,13 @@
 
 		this.loadVideo = function(firstLoad) {
 			var $video = $("#pageVideo");
-			var videoDimensions = $video.data("dimensions", videoDimensions);
-			if (videoDimensions != undefined) {
-				$video.mediaPlayer({
-					type			:"video",
-					source			:$video.data("src"),
-					width			:videoDimensions[0],
-					height			:videoDimensions[1],
-					startEndFrame	:$video.data("startEndFrame")
-				});
-			} else {
-				$video.mediaPlayer({
-					type			:"video",
-					source			:$video.data("src"),
-					startEndFrame	:$video.data("startEndFrame")
-				});
-			}
+			$video.mediaPlayer({
+				type			:"video",
+				source			:$video.data("src"),
+				width			:$video.data("dimensions")[0],
+				height			:$video.data("dimensions")[1],
+				startEndFrame	:$video.data("startEndFrame")
+			});
 			if (firstLoad == true) {
 				x_pageLoaded(); // call this function in every model once everything's loaded
 			}
@@ -99,18 +77,21 @@
 	}
 
 	var $pageVideo = $("#pageVideo");
-	var videoDimensions = [];
+	var videoDimensions = [320,240];
 	if (x_currentPageXML.getAttribute("movieSize") != "" && x_currentPageXML.getAttribute("movieSize") != undefined) {
-		videoDimensions = x_currentPageXML.getAttribute("movieSize").split(",");
-		if (videoDimensions[0] == 0 || videoDimensions[1] == 0) {
-			videoDimensions = undefined;
+		var dimensions = x_currentPageXML.getAttribute("movieSize").split(",");
+		if (dimensions[0] != 0 && dimensions[1] != 0) {
+			videoDimensions = dimensions;
 		}
 	}
-	$pageVideo.data({
-		"src"			:x_currentPageXML.getAttribute("url"),
-		"dimensions"	:videoDimensions,
-		"startEndFrame"	:[x_currentPageXML.getAttribute("startFrame"), x_currentPageXML.getAttribute("endFrame")]
-	});
+	$pageVideo
+		.data({
+			"src"			:x_currentPageXML.getAttribute("url"),
+			"dimensions"	:videoDimensions,
+			"startEndFrame"	:[Number(x_currentPageXML.getAttribute("startFrame")), Number(x_currentPageXML.getAttribute("endFrame"))]
+		})
+		.attr("title", x_currentPageXML.getAttribute("tip"));
+
 	textVideo.loadVideo(true);
 
 </script>

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/title.html b/modules/xerte/parent_templates/Nottingham/models_html5/title.html
@@ -18,7 +18,7 @@
 				var vConstrain = x_currentPageXML.getAttribute("bgImageVConstrain");
 				var hConstrain = x_currentPageXML.getAttribute("bgImageHConstrain");
 
-				var alpha = 50;
+				var alpha = 100;
 				if (x_currentPageXML.getAttribute("bgImageAlpha") != undefined) {
 					alpha = x_currentPageXML.getAttribute("bgImageAlpha");
 				}

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/xerteModel.html b/modules/xerte/parent_templates/Nottingham/models_html5/xerteModel.html
@@ -0,0 +1,35 @@
+<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 xerteModel = new function() {
+		// function called every time the page is viewed after it has initially loaded
+		this.pageChanged = function() {
+
+		}
+
+		// function called every time the size of the LO is changed
+		this.sizeChanged = function() {
+
+		}
+	}
+
+	console.log(eval(x_currentPageXML.getAttribute("modelFile")));
+	if (x_currentPageXML.getAttribute("modelFile").toLowerCase().indexOf(".html") >= 0) {
+		$("#pageContents").load(eval(x_currentPageXML.getAttribute("modelFile")));
+	} else {
+		$("#x_pageDiv div").html("You can not view this type of content in the HTML5 viewer"); // ** need translated error message for if trying to load xerte model
+	}
+
+	// call this function in every model once everything's loaded
+	x_pageLoaded();
+
+</script>
+
+<style type="text/css">
+
+</style>
+
+<div id="pageContents">
+
+</div>