From 611fd0079284be330812e9eb44a43304c42387fe Mon Sep 17 00:00:00 2001
From: thlo <smarttv640@gmail.com>
Date: Tue, 27 Aug 2013 22:08:08 +0200
Subject: New Overlay Menu for RecCmd Handling Make YouTube entry optional
 (Select Screen option is configurable through widget.conf) First 3D iter
 function for 3D TVs and 3D BDs.

---
 smarttv-client/Javascript/OverlayMenu.js | 202 +++++++++++++++++++++++++++----
 1 file changed, 180 insertions(+), 22 deletions(-)

(limited to 'smarttv-client/Javascript/OverlayMenu.js')

diff --git a/smarttv-client/Javascript/OverlayMenu.js b/smarttv-client/Javascript/OverlayMenu.js
index 14d237a..64a7eba 100644
--- a/smarttv-client/Javascript/OverlayMenu.js
+++ b/smarttv-client/Javascript/OverlayMenu.js
@@ -1,21 +1,18 @@
 var OverlayMenu = {
-	menu : []	
+	menu : [],
+	scrollDur : 300,
+	scrollFlip : 100
 };
 
 OverlayMenu.init = function () {
-	// initiate the overlay menue
-	
-	// should get an Array with Title and Command as input
-//	OverlayMenu.menu.push ({title: "Teefax", func : undefined});
-//	OverlayMenu.menu.push ({title: "Verleihnix", func : undefined});
-
+	// initiate the overlay menu
 	OverlayMenu.createStyleSheet();
-	
 
 	this.elmName = "#olm-";
 	this.masterElm = "#overlayMenu";
 	this.inputElm = "#overlayMenu-anchor";
 	this.btnSelected = 0;
+	this.scrolling = false;
 	
 	var elem = document.getElementById('overlayMenu-anchor');
 	elem.setAttribute('onkeydown', 'OverlayMenu.onInput();');
@@ -26,14 +23,16 @@ OverlayMenu.init = function () {
 
 OverlayMenu.show = function() {
 	Main.log("***** OverlayMenu.show *****");
+	this.scrolling = false;
 	OverlayMenu.createMenu();
 //	this.menuHandler.show();
 	
 	Main.log("OverlayMenu.show(): masterElm= " +this.masterElm + " inputElm= " + this.inputElm);
 	$(this.masterElm).show();
+	OverlayMenu.tuneMenu();
+
 	$(this.inputElm).focus();
 	this.reset ();
-
 };
 
 OverlayMenu.hide = function() {
@@ -50,7 +49,7 @@ OverlayMenu.createStyleSheet = function () {
 	var sheet = $("<style>");
 	sheet.attr({type : 'text/css',
 		innerHTML : '\
-		#overlayMenu { width:40%; height: 30%; position: absolute; text-align:center; border-width:1px;\
+		#overlayMenu { width:40%; position: absolute; text-align:center; border-width:1px;\
 		            background:rgba(0,0,139, 0.8);border-style:solid;border-width:1px;border-radius:15px;\
 			       -webkit-box-shadow:3px 3px 7px 4px rgba(0,0,0, 0.5);z-index:50;}\
 		.ovl-itm { margin-left: 10px; \
@@ -73,7 +72,7 @@ OverlayMenu.createStyleSheet = function () {
 
 	$('body').append(sheet);
 };
-
+/*
 OverlayMenu.createMenu= function () {	
 	var p_width = $("body").outerWidth();
 	var p_height = $("body").outerHeight();
@@ -112,11 +111,67 @@ OverlayMenu.createEntry = function(name, id) {
 
 	return row;
 };
+*/
 
-OverlayMenu.createHelpbarRow = function() {
-	var res  = $("<tr>", {style: "width:100%; align:center"});
-	var outer_cell = $("<td>", {style: "width:100%; align:center"});
+OverlayMenu.tuneMenu = function () {
+	var p_width = $("body").outerWidth();
+	var p_height = $("body").outerHeight();
+
+	var tgt = p_height * 0.6;
+	
+	if ($("#overlayMenu").outerHeight() > tgt) {
+		this.scrolling = true;
+		var tgt_height_delta = ($("#overlayMenu").outerHeight() -tgt);
+		Main.log("tgt_height_delta= " + tgt_height_delta);
+		var tgt_height = $("#ovlBody").height() - tgt_height_delta;
+		Main.log("tgt_height= " + tgt_height);
+	
+		$("#ovlBody").css({"height":tgt_height+"px"});	
+	}
+	$("#overlayMenu").css({"left": ((p_width - $("#overlayMenu").outerWidth()) /2) +"px", 
+		"top": ((p_height - $("#overlayMenu").outerHeight()) /2) +"px"});
+
+	Main.log("ovlOuterHeight=" + $("#overlayMenu").outerHeight() );
+	Main.log("ovlBodyOuterHeight=" + $("#ovlBody").outerHeight() );
+		
+};
+
+OverlayMenu.createMenu= function () {	
+	var p_width = $("body").outerWidth();
+	var p_height = $("body").outerHeight();
+
+	var table = $("<div>", {style:"height:100%;width:100%;", id:"ovlTable"});
+	$("#overlayMenu").append(table);
+//	var table = $("overlayMenu");
+	
+	var tbody = $("<div>", {style:"width:100%;overflow-y: scroll;margin-top:3px;", id:"ovlBody"});
+	for (var i = 0; i < OverlayMenu.menu.length; i++) {
+		var row = OverlayMenu.createEntry(OverlayMenu.menu[i].title, i);
+		tbody.append(row);
+	}
+
+	table.append(tbody);
+	
+	var row = OverlayMenu.createHelpbarRow();
+	table.append(row);
+
+	$("#overlayMenu").css({"left": ((p_width - $("#overlayMenu").outerWidth()) /2) +"px", 
+		"top": ((p_height - $("#overlayMenu").outerHeight()) /2) +"px"});
+
+};
+
+
+OverlayMenu.createEntry = function(name, id) {	
+	var cell = $("<div>", {style: "width:100%; align:center;"});
+	Main.log("OverlayMenu.createEntry: " +"olm-"+id);
+	$("<button>", {id : "olm-"+id, text: name, class: "ovl-itm"}).appendTo(cell);
+	return cell;
+};
 
+OverlayMenu.createHelpbarRow = function() {
+//	var res  = $("<tr>", {style: "width:100%; align:center"});
+//	var outer_cell = $("<td>", {style: "width:100%; align:center"});
+	var outer_cell = $("<div>", {style: "width:100%; align:center"});
 	var h_table = $("<table>", {style:"height:100%;width:100%;"});
 
 	var tbody = $("<tbody>", {style:"height:100%;width:100%;"});
@@ -133,9 +188,9 @@ OverlayMenu.createHelpbarRow = function() {
 	row.append(cell);
 
 	outer_cell.append(h_table);
-	res.append(outer_cell);
-
-	return res;
+	return outer_cell;
+//	res.append(outer_cell);
+//	return res;
 };
 
 OverlayMenu.createHelpItem = function(url, msg) {
@@ -167,21 +222,54 @@ OverlayMenu.selectBtnUp = function () {
 	var btnname = this.elmName+this.btnSelected;
 	Main.log(this.hndlName + "-BtnLeft: Old: " +this.btnSelected + " btn= "+btnname);
 	$(btnname).removeClass('ovlmn-itm-selected').addClass('ovl-itm'); 
-	if (this.btnSelected == 0)
+	if (this.btnSelected == 0) {
 		this.btnSelected = (OverlayMenu.menu.length-1);
-	else
+//		$("#ovlBody").scrollTop($(this.elmName + this.btnSelected).parent().position().top);
+		$("#ovlBody").animate ({scrollTop: $(this.elmName + this.btnSelected).parent().position().top}, this.scrollFlip);
+
+		}
+	else {
 		this.btnSelected--;
+		if (this.scrolling) {
+			var pos = $(this.elmName + this.btnSelected).parent().position().top;
+			Main.log("pos= " + pos + " ovlBodyHeight= " + $("#ovlBody").height() + " scrollTop= " + $("#ovlBody").scrollTop());
+			if (pos < 0) {
+//				$("#ovlBody").scrollTop($("#ovlBody").scrollTop() + pos);	
+				$("#ovlBody").animate ({scrollTop: $("#ovlBody").scrollTop() + pos}, this.scrollDur);
+				Main.log("New scrollTop= " +$("#ovlBody").scrollTop() +" new pos= " + $(this.elmName + this.btnSelected).parent().position().top);
+			}
+		}
+	}
 	$(this.elmName + this.btnSelected).removeClass('ovl-itm').addClass('ovlmn-itm-selected'); 
 	Main.log(this.hndlName+"-BtnUp: New: " +this.btnSelected);
 };
 
 OverlayMenu.selectBtnDown = function () {
 	$(this.elmName + this.btnSelected).removeClass('ovlmn-itm-selected').addClass('ovl-itm'); 
-	if (this.btnSelected == (OverlayMenu.menu.length-1))
+	if (this.btnSelected == (OverlayMenu.menu.length-1)) {
 		this.btnSelected = 0;
-	else
+		if (this.scrolling)
+//			$("#ovlBody").scrollTop(0);
+			$("#ovlBody").animate ({scrollTop: 0}, this.scrollFlip);
+	}
+	else {
 		this.btnSelected++;
+		if (this.scrolling) {
+			var pos = $(this.elmName + this.btnSelected).parent().position().top;
+			var height = $(this.elmName + this.btnSelected).parent().height();
+			Main.log("pos= " + pos + " height= " + height + " ovlBodyHeight= " + $("#ovlBody").height() + " scrollTop= " + $("#ovlBody").scrollTop());
+			if ((pos + height) > $("#ovlBody").height()) {
+				$("#ovlBody").animate ({scrollTop: $("#ovlBody").scrollTop() + (pos + height) - $("#ovlBody").height()}, this.scrollDur); 
+//				$("#ovlBody").scrollTop($("#ovlBody").scrollTop() + (pos + height) - $("#ovlBody").height());
+				Main.log("New scrollTop= " +$("#ovlBody").scrollTop() +" new pos= " + $(this.elmName + this.btnSelected).parent().position().top);
+			}
+
+		}		
+	}
+
 	$(this.elmName + this.btnSelected).removeClass('ovl-itm').addClass('ovlmn-itm-selected'); 
+	
+	
 };
 
 OverlayMenu.onInput = function () {
@@ -213,6 +301,76 @@ OverlayMenu.onInput = function () {
 
 	}
 	widgetAPI.blockNavigation(event);
-	};
+};
+	
+//-----------------------------------------------------------------------
+var TestHandler = {
+		
+};
+
+TestHandler.showMenu = function (no) {
+	OverlayMenu.reset();
+	OverlayMenu.menu = [];	
+
+	for (var i = 0; i < no; i++) {
+		var self = this;
+		OverlayMenu.menu.push ({title: ("Test Title " +i), func : function (idx) { self.selectCallback(idx); } });
+	}
+
+	OverlayMenu.show();
+};
+
+TestHandler.selectCallback = function (idx) {
+	Main.log("TestHandler.selectCallback idx= " + idx );
+};
+
+//-----------------------------------------------------------------------
+var RecCmdHandler = {
+	guid : ""
+};
+
+
+RecCmdHandler.showMenu = function (guid) {
+	this.guid = guid;
+	RecCmds.reset();
+	Server.fetchRecCmdsList();   // calls RecCmdHandler.createRecCmdOverlay() when finished
+	OverlayMenu.reset();
+	OverlayMenu.menu = [];		
+};
+
+RecCmdHandler.fillMenuArray = function () {
+	for (var i = 0; i < RecCmds.getVideoCount(); i++) {
+		var self = this;
+		OverlayMenu.menu.push ({title: RecCmds.getCurrentItem().childs[i].title, func : function (idx) { self.selectCallback(idx); } });
+	}
 	
+};
 
+RecCmdHandler.createRecCmdOverlay = function () {
+	//called, when Server.fetchRecCmdsList() is finished.
+	Main.log("RecCmdHandler.createRecCmdOverlay for guid " + RecCmdHandler.guid);
+	Main.logToServer("RecCmdHandler.createRecCmdOverlay for guid " + RecCmdHandler.guid);
+	if (RecCmds.getVideoCount()== 0) {
+		Main.log("RecCmdHandler.createRecCmdOverlay: RecCmds is empty" );
+		Main.logToServer("RecCmdHandler.createRecCmdOverlay: RecCmds is empty" );
+		return;		
+	}
+	RecCmdHandler.fillMenuArray();
+	OverlayMenu.show();
+};
+	
+RecCmdHandler.selectCallback = function (idx) {
+	Main.logToServer("RecCmdHandler.selectCallback idx= " + idx + " t= " + RecCmds.getCurrentItem().childs[idx].title);
+	if (RecCmds.getCurrentItem().childs[idx].isFolder == true) {
+		Main.logToServer("RecCmdHandler.selectCallback isFolder");
+		RecCmds.selectFolder(idx, 0);
+
+		OverlayMenu.reset();
+		OverlayMenu.menu = [];		
+		RecCmdHandler.fillMenuArray();	
+	}
+	else {
+		Main.logToServer("RecCmdHandler.selectCallback idx= " + idx + " cmd= " + RecCmds.getCurrentItem().childs[idx].payload.cmd);
+		Server.execRecCmd(RecCmds.getCurrentItem().childs[idx].payload.cmd, RecCmdHandler.guid);
+	}
+};
-- 
cgit v1.2.3