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.

1 files changed, 180 insertions, 22 deletions

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);

+	}

+};