From 7bf2c6531576c2a042913ede042b30c14e4825de Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 15 Feb 2017 20:34:47 +0100 Subject: [PATCH] Fixed menu (submenus still somewhat broken) --- js/uw.js | 87 +++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 76 insertions(+), 11 deletions(-) diff --git a/js/uw.js b/js/uw.js index 250c695..212d9ed 100644 --- a/js/uw.js +++ b/js/uw.js @@ -89,6 +89,7 @@ var UW_UI_BUTTONS = { text: "Settings", has_submenu: true, submenu: [ "fitw","fith","reset","zoom","unzoom","autoar","ar" ], + top_level: true, submenu_id: "uw_settings_menu", onclick: function(){ showMenu("uw_settings_menu"); } }, @@ -202,6 +203,17 @@ function init(force_reload){ if(debugmsg) console.log("uw::init | starting init"); + var el; + for (key in UW_UI_BUTTONS){ + el = UW_UI_BUTTONS[key]; + if(el.submenu_id){ + // We defined submenus. Now let's add parent info to each submenu. + for(var i = 0; i < el.submenu.length; i++){ + UW_UI_BUTTONS[el.submenu[i]].parent = key; + } + } + } + //Youtube: if(page_url.indexOf("youtu") != -1){ if(debugmsg) @@ -773,9 +785,14 @@ function buildUInative(){ * */ + if(ui_anchor) + return; + if(!ui_anchor) mkanchor(); + + if(debugmsg || debugmsg_ui ) console.log("uw::buildUInative | starting to build UI"); @@ -827,27 +844,30 @@ function mkmenuitem(key){ if(el.has_submenu){ item.appendChild(mksubmenu(el)); - $(item).on("mouseenter", function(){showMenu(el.submenu_id)}); + +// if(debugmsg){ +// console.log("uw::mkmenuitem | do we have parent?",el.parent,"parent id:",UI_UW_BUTTONS[el.parent].submenu_id); +// } +// if(el.parent) +// $(item).on("mouseenter", function(){showMenu(el.submenu_id)}); +// else + $(item).on("mouseenter", function(){showMenu(el.submenu_id)}); + $(item).on("mouseleave", function(){hideMenu(el.submenu_id)}); } return item; } + function mkbutton(el){ if(debugmsg | debugmsg_ui) console.log("uw::mkbutton | trying to make a button", el.text); var button = document.createElement("div"); button.style.backgroundImage = 'url(' + resourceToUrl(el.icon) + ')'; -// button.style.width = (button_width * 0.75) + "px"; -// button.style.height = (button_width) + "px"; -// button.style.width = 0; -// button.style.marginLeft = (button_width * 0.3) + "px"; -// button.style.paddingLeft = (button_width *0.15 ) + "px"; -// button.style.paddingRight = (button_width * 0.15) + "px"; button.className += " uw_button uw_element"; - button.onclick = function(event) { event.stopPropagation(); el.onclick }; + button.onclick = function(event) {event.stopPropagation(); el.onclick() }; if(debugmsg | debugmsg_ui) console.log("uw::mkbutton | button completed"); @@ -855,8 +875,18 @@ function mkbutton(el){ return button; } +function hideAllMenus(){ + var el; + for(key in UW_UI_BUTTONS){ + el = UW_UI_BUTTONS[key]; + if( el.submenu_id ) + hideMenu(el.submenu_id); + } +} + function updateUICSS(){ - //BEGIN update buttons + + //BEGIN INIT var buttons = document.getElementsByClassName("uw_button"); var button_width = getBaseButtonWidth(); @@ -874,10 +904,12 @@ function updateUICSS(){ console.log("uw::updateUICSS | checks passed. Starting to resize ..."); console.log("uw::updateUICSS | we have this many elements:",buttons.length, buttons); } + //END INIT + //BEGIN update buttons + for (var i = 0; i < buttons.length; i++){ buttons[i].style.width = (button_width * 0.75) + "px"; buttons[i].style.height = (button_width) + "px"; -// buttons[i].style.width = 0; buttons[i].style.marginLeft = (button_width * 0.3) + "px"; buttons[i].style.paddingLeft = (button_width *0.15 ) + "px"; buttons[i].style.paddingRight = (button_width * 0.15) + "px"; @@ -885,7 +917,32 @@ function updateUICSS(){ //END update buttons + //BEGIN update menus + var el; + var div; + for(key in UW_UI_BUTTONS){ + el = UW_UI_BUTTONS[key]; + if( el.submenu_id ){ + div = document.getElementById(el.submenu_id); + if( el.top_level) { + if( alignToBottom() ){ + div.style.bottom = button_width * 1.2 + "px"; + } + + + } + else{ + if( alignToBottom() ) { + div.style.bottom = "0px"; + } + + // this is tricky. We need to find the best place to put the (sub)menu. + } + } + } + + //END menus } function getBaseButtonWidth(){ @@ -908,6 +965,8 @@ function getBaseButtonWidth(){ } } + + var align_to = "bottom"; //TODO — unhardcode function alignToBottom(){ return align_to == "bottom"; @@ -1864,12 +1923,18 @@ function resourceToUrl(img){ return chrome.extension.getURL(img); } -function showMenu(id){ +function showMenu(id, parent){ if(debugmsg){ console.log("uw::showMenu | showing menu with id ", id, "\n\n", document.getElementById(id)); } document.getElementById(id).classList.add("show"); + if(parent){ + if(debugmsg) + console.log("uw::showMenu | this menu has a parent:", parent, document.getElementById(parent)); + } } + + function toggleMenu(id){ if(debugmsg || debugmsg_click) console.log("uw::toggleMenu | toggling menu with id", id, "\n\n", document.getElementById(id));