diff options
Diffstat (limited to 'smarttv-client/Javascript/OverlayMenu.js')
| -rw-r--r-- | smarttv-client/Javascript/OverlayMenu.js | 202 |
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);
+ }
+};
|