Sync update demo5

karl-chanel · Aug 8, 2017 · 210aca0 · 210aca0
1 parent addb80c
commit 210aca0
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 7 deletions.
diff --git a/demo/javascript/demo4.html b/demo/javascript/demo4.html
@@ -8,9 +8,9 @@
 	<script src="scripts/util.js"></script>
 	<script src="scripts/demo4.js"></script>
 	<script>
-	  function playProgram(startTime)
+	  function playProgram(program)
 	  {
-		  alert("Seeking Program...");
+		  alert("Seeking Program..." + program.startTime);
 	  }
     var curIdx = -1;
     function initUIActions()

diff --git a/demo/javascript/demo5.html b/demo/javascript/demo5.html
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="UTF-8">
 	<title>EPGList: JavaScript Object</title>
+	<link rel="stylesheet" href="styles/epg.css">
 	<script src="scripts/config.js"></script>
 	<script src="scripts/util.js"></script>
 	<script src="scripts/demo5.js"></script>
@@ -11,16 +12,40 @@
 	  {
 		  alert("Seeking Program..." + program.startTime);
 	  }
+	  var curIdx = -1;
+	  function initUIActions()
+	  {
+		  document.getElementById("prevProgram").onclick = function ()
+		  {
+			  if (curIdx >= 0)
+			  {
+				  epgList.setActiveProgram(--curIdx);
+			  }
+		  };
+		  document.getElementById("nextProgram").onclick = function ()
+		  {
+			  if (curIdx <= epgList.getProgramLength() - 1)
+			  {
+				  epgList.setActiveProgram(++curIdx);
+			  }
+		  };
+	  }
+	</script>
+	<script>
+		var epgList;
 	  window.onload = function ()
 	  {
-		  var epgList = new EPGList("epgContainer", {
+		  epgList = new EPGList("epgContainer", {
 		    epgFeed: EPG_FEED,
 		    onPlayCallback: playProgram
 	    });
+	    initUIActions();
 	  }
 	</script>
 </head>
 <body>
+<input type="button" value="&lt" id="prevProgram"/>
+<input type="button" value="&gt" id="nextProgram"/>
 <div id="epgContainer">
 	<!--
 	<ul>

diff --git a/demo/javascript/scripts/demo4.js b/demo/javascript/scripts/demo4.js
@@ -16,7 +16,6 @@ var epgList = {
 		this.loadFeed();
 	},
 
-	// Entry
 	loadFeed: function()
 	{
 		var self = this;
@@ -50,12 +49,12 @@ var epgList = {
 		var prevSelectedEl = container.querySelectorAll(".selected");
 		if (prevSelectedEl.length > 0)
 		{
-			removeClass(container.querySelectorAll(".selected")[0], "selected");
+			window.removeClass(container.querySelectorAll(".selected")[0], "selected");
 		}
 		var elements = container.querySelectorAll(".item");
 		if (index >= 0 && index < this.getProgramLength())
 		{
-			addClass(elements[index], "selected");
+			window.addClass(elements[index], "selected");
 		}
 	},
 	getProgramLength: function()

diff --git a/demo/javascript/scripts/demo5.js b/demo/javascript/scripts/demo5.js
@@ -6,7 +6,12 @@ function EPGList(domId, options)
 			+ '  <a href="javascript:void(0);" class="play" data-starttime="{{startTime}}">Play</a>'
 			+ '</li>';
 
-	loadEPGFeed();
+	init();
+
+	function init()
+	{
+		loadEPGFeed();
+	}
 
 	function loadEPGFeed()
 	{
@@ -49,6 +54,29 @@ function EPGList(domId, options)
 		}
 	}
 
+	// Public APIs
+	this.setActiveProgram = function (index)
+	{
+		var container = document.getElementById(domId);
+		var prevSelectedEl = container.querySelectorAll(".selected");
+		if (prevSelectedEl.length > 0)
+		{
+			window.removeClass(container.querySelectorAll(".selected")[0], "selected");
+		}
+		var elements = container.querySelectorAll(".item");
+		if (index >= 0 && index < this.getProgramLength())
+		{
+			window.addClass(elements[index], "selected");
+		}
+	};
+
+	this.getProgramLength = function()
+	{
+		var container = document.getElementById(domId);
+		return container.querySelectorAll(".item").length;
+	};
+
+	// Utils	
 	// yyyy/MM/dd
 	function formatDate(date)
 	{