diff --git a/js/uw.js b/js/uw.js index 9b685f7..318c6fc 100644 --- a/js/uw.js +++ b/js/uw.js @@ -1,5 +1,34 @@ // Autogenerated using buildext. This file should not be modified — modify source files instead. +//BEGIN included from lib/debuginit.js + var debugmsg = true; + var debugmsg_click = false; + var debugmsg_message = false; + var debugmsg_autoar = false; + var debugmsg_periodic = false; + var debugmsg_ui = true; + var force_conf_reload = true; + if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){ + console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); + console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n"); + + if(debugmsg) + console.log("Logging all"); + + if(debugmsg_click) + console.log("Logging debugmsg_click"); + + if(debugmsg_message) + console.log("Logging debugmsg_message"); + + if(debugmsg_autoar) + console.log("Logging autoar"); + + console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); + } +//END included from lib/debuginit.js + + //BEGIN included from conf/uiconf.js var UW_UI_BUTTONS = { fitw: { @@ -134,15 +163,24 @@ var UW_SITES = { name: "player", isClass: false }, - sampleButton: { - class: "ytp-button ytp-settings-button", - index: 0, - buttonSizeBase: "x", - }, - uiParent: { - name: "ytp-right-controls", - isClass: true, - insertStrat: "prepend", + ui: { + uiMode: "native", + uiconf: { + sampleButton: { + class: "ytp-button ytp-settings-button", + index: 0, + buttonSizeBase: "x", + }, + uiParent: { + name: "ytp-right-controls", + isClass: true, + insertStrat: "prepend", + }, + uiOffset: { + offsetBy: "10vh", + offsetType: "css" + } + } }, autoar_imdb:{ enabled: false @@ -156,15 +194,24 @@ var UW_SITES = { name: "placeholder", isClass: true, }, - sampleButton: { - class: "ytp-button ytp-settings-button", - index: 0, - buttonSizeBase: "x", - }, - uiParent: { - name: "player-controls-wrapper", - isClass: true, - insertStrat: "append" + ui: { + uiMode: "native", + uiconf: { + sampleButton: { + class: "ytp-button ytp-settings-button", + index: 0, + buttonSizeBase: "x", + }, + uiParent: { + name: "player-controls-wrapper", + isClass: true, + insertStrat: "append" + }, + uiOffset: { + offsetBy: "0px", + offsetType: "css" + } + } }, autoar_imdb:{ enabled: true, @@ -259,8 +306,8 @@ var DEFAULT_KEYBINDINGS = { //BEGIN included from lib/libopts.js -// setopt in getopt. Shranita oz. dobita stvari iz skladišča -// setopt, getopt. They set/get stuff from the storage +// setopt, getopt, delopt. Shrani oz. dobi oz. briše stvari iz skladišča +// setopt, getopt, delopt. They set/get/delete stuff from the storage function setopt(item){ browser.storage.local.set(item); @@ -271,10 +318,14 @@ function getopt(prop, callback){ else browser.storage.local.get(prop).then(callback); } +function delopt(item){ + browser.storage.local.remove(item); +} //END included from lib/libopts.js //BEGIN included from lib/browser_autodetect.js +var browser_autodetect = true; usebrowser = "firefox"; if(typeof browser === "undefined"){ // This means we're probably not on Firefox. @@ -305,39 +356,300 @@ IGNORE_STORAGE_CHANGES = false; //END included from lib/optinit.js -var usebrowser = "chrome"; -var browser_autodetect = true; +//BEGIN included from conf/uwvars.js + +//END included from conf/uwvars.js -var debugmsg = true; -var debugmsg_click = false; -var debugmsg_message = false; -var debugmsg_autoar = false; -var debugmsg_periodic = false; -var debugmsg_ui = true; -var force_conf_reload = true; -if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){ - console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); - console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n"); + +//BEGIN included from lib/player_ui.js +var UICONF; + +function uinit(){ + if(debugmsg) + console.log("player_ui::uinit | initializing elements from the webpage"); + + var site = UW_SITES[SITE]; if(debugmsg) - console.log("Logging all"); + console.log("player_ui::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass); - if(debugmsg_click) - console.log("Logging debugmsg_click"); + SITE_ENABLED = site.enabled; + SITE_TYPE = site.type; + SITE_URL_RULES = site.urlRules; + SITE_PROPS = site; - if(debugmsg_message) - console.log("Logging debugmsg_message"); + if(debugmsg) + console.log("player_ui::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false ); - if(debugmsg_autoar) - console.log("Logging autoar"); + if(inIframe() && site.iframe){ + console.log("player_ui::uinit | we're in iframe."); + PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name); + } + else{ + PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name); + } - console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); + // + if( site.ui.uiMode == "native") + NATIVE_UI = true; + else + NATIVE_UI = false; + + UICONF = site.ui.uiconf; + + console.log("player_ui::uinit |\nsite.ui.uiMode: ", site.ui.uiMode,"\nsite.ui.uiMode.uiconf:",site.ui.uiconf,"\nUICONF: ", UICONF); + + IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled; + + if(debugmsg) + console.log("player_ui::uinit | initializing elements from the webpage"); } +function buildUInative(){ + /** This function builds UI in the native bar. + * + */ + if(debugmsg || debugmsg_ui) + console.log("player_ui::buildUInative | starting ..."); + + if(ui_anchor){ + console.log("player_ui::buildUInative | anchor found, doing nothing"); + return; + + } + if(!ui_anchor) + mkanchor(); + + if(UW_UI_MODE == "none"){ + if(debugmsg || debugmsg_ui) + console.log("player_ui::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built."); + return; + } + if(UW_UI_MODE == "compact"){ + if(debugmsg || debugmsg_ui) + console.log("player_ui::buildUInative | usersettings say UI should be compact if possible. Checking if possible."); + + if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){ + if(debugmsg || debugmsg_ui) + console.log("player_ui::buildUInative | compact ui is not possible on this site. Reverting to full."); + UW_UI_MODE == "all"; + } + } + + if(debugmsg || debugmsg_ui ) + console.log("player_ui::buildUInative | starting to build UI"); + + var el; + + if(UW_UI_MODE == "compact"){ // no need for loop if all we add is the 'settings' buton + el = UW_UI_BUTTONS.settings; + uiel = mkbutton(el); + uiel.appendChild(mksubmenu(el)); + ui_anchor.appendChild(uiel); + } + else{ + for(key in UW_UI_BUTTONS){ + + el = UW_UI_BUTTONS[key]; + + if(UW_UI_BANLIST[SITE][key]){ + if(debugmsg) + console.log("player_ui::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing."); + + continue; + } + + if(!el.native_bar) + continue; + + var uiel; //ui element + + if(el.button){ + uiel = mkbutton(el); + } + + if(!uiel) + continue; + + ui_anchor.appendChild(uiel); + + if(el.has_submenu){ + uiel.appendChild(mksubmenu(el)); + } + } + } + + if(debugmsg || debugmsg_ui ) + console.log("player_ui::buildUInative | ui finished"); +} +function mksubmenu(el){ + var submenu = document.createElement("div"); + submenu.id = el.submenu_id; + submenu.className = "uw_element uw_submenu"; + + for(var i = 0; i < el.submenu.length; i++){ + if(UW_UI_BANLIST[SITE][el.submenu[i]]){ + if(debugmsg) + console.log("player_ui::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing."); + + continue; + } + submenu.appendChild(mkmenuitem(el.submenu[i])); + } + + return submenu; +} +function mkmenuitem(key){ + var el = UW_UI_BUTTONS[key]; + var item = document.createElement("div"); + item.textContent = el.text; + item.className = "uw-setmenu-item uw_element"; + item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); }; + + if(el.has_submenu){ + item.appendChild(mksubmenu(el)); + + if(debugmsg){ + console.log("player_ui::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu"); + } + + if(el.parent) + $(item).on("mouseenter", function(){ + // We determine where the submenu goes - to the left or to the right. showMenu handles position, + // this function gets sizes of all objects + var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id); + var supmenusize = div.getBoundingClientRect(); + div = document.getElementById(el.submenu_id); + var submenusize = div.getBoundingClientRect(); + var playersize = player.getBoundingClientRect(); + + if(debugmsg) + console.log("player_ui::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize); + + showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize}); + }); + else + $(item).on("mouseenter", function(){showMenu(el.submenu_id)}); + + $(item).on("mouseleave", function(){hideMenu(el.submenu_id)}); + } + + return item; +} +function mkanchor(){ + + if (debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | starting.\nNATIVE_UI: ",NATIVE_UI); + + + if( NATIVE_UI !== true ){ + if(debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | we don't use native UI, calling mkanchor_notify(common=true) to take over"); + + mkanchor_notify(true); + return; + } + else{ + if(debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | will make anchor for notifications, calling mkanchor_notify(common=false)"); + + mkanchor_notify(false); + } + + if (debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | anchor for notifications created."); + + + ui_anchor = document.createElement("div"); + ui_anchor.className = "uw_ui_anchor"; + ui_anchor.id = "uw_ui_anchor"; + + if(UICONF.uiParent.insertStrat == "prepend"){ + $(document.getElementsByClassName(UICONF.uiParent.name)[0]).prepend(ui_anchor); + } + else{ + document.getElementsByClassName(UICONF.uiParent.name)[0].appendChild(ui_anchor); + } + + if (debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | anchor created."); + +} +function mkanchor_notify(common){ + + if (debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor_common | starting.\n\ncommon anchor: ",common,"\nUICONF: ",UICONF,"\nUICONF.uiOffset: ",UICONF.uiOffset); + + if( document.getElementById("uw_common_anchor") ) + return; + + + var anchor = document.createElement("div"); + anchor.className = "uw_common_anchor"; + anchor.id = "uw_common_anchor"; + + // Izračunamo zamik zaradi drugih elementov na zaslonu + // Let's calculate offset due to other elements on the screen + + var offsetTop = "0px"; + + if ( UICONF.uiOffset.offsetType == "element_id" || UICONF.uiOffset.offsetType == "element_class"){ + + var blockingElement; + if( UICONF.uiOffset.offsetType == "element_id" ) + blockingElement = document.getElementById(UICONF.uiOffset.offsetBy); + else + blockingElement = document.getElementsByClassName(UICONF.uiOffset.offsetBy)[0]; + + offsetTop = blockingElement.offsetTop + blockingElement.offsetHeight + "px"; + } + else if( UICONF.uiOffset.offsetType == "css" ) + offsetTop = UICONF.uiOffset.offsetBy; + + if(debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor_notify | notification box will be offset by this much:", offsetTop); + + + var padding = document.createElement("div"); + padding.style.width = "100%"; + padding.style.height = offsetTop; + + anchor.appendChild(padding); + + var notification_box = document.createElement("div"); + notification_box.style.width = "50%"; + notification_box.style.height = "25%"; + notification_box.textContent = "test box"; + + if(debugmsg) + console.log("player_ui::mkanchor_notify | this is our notification box: ", notification_box); + + anchor.appendChild(notification_box); + + PLAYER.appendChild(anchor); + + +} + +function mkbutton(el){ + if(debugmsg | debugmsg_ui) + console.log("player_ui::mkbutton | trying to make a button", el.text); + + var button = document.createElement("div"); + button.style.backgroundImage = 'url(' + resourceToUrl(el.icon) + ')'; + button.className += " uw_button uw_element"; + button.onclick = function(event) {event.stopPropagation(); el.onclick() }; + + if(debugmsg | debugmsg_ui) + console.log("player_ui::mkbutton | button completed"); + + return button; +} +//END included from lib/player_ui.js const playercheck_recursion_depth_limit = 3; @@ -427,7 +739,7 @@ function init(force_reload){ } if(debugmsg) - console.log("uw::init | %cpage_url: "+page_url,"color: #99F"); + console.log("uw | %cpage_url: "+page_url,"color: #99F"); //Youtube: if(page_url.indexOf("youtu") != -1){ @@ -726,6 +1038,8 @@ function stagetracker(op){ return all_done; } + + function extsetup_stage2(op){ if(debugmsg) @@ -743,15 +1057,36 @@ function extsetup_stage2(op){ // SITE is set in loadFromStorage. If SITE is still undefined at this point, then we aren't on a known page. if(debugmsg){ - console.log("uw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------"); + console.log("\n\n\n\nuw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------"); } if(SITE){ + + if(debugmsg){ + console.log("uw::extSetup (stage 2) | site found, starting config"); + console.log("starting uinit ..."); + console.log("progress: %c | |", "background-color: #161211; color: #f51;") + } uinit(); + if(debugmsg){ + console.log("uw::extSetup (stage 2)\nprogress: %c |===> |\nuinit complete\n\n", "background-color: #161211; color: #f51;"); + } + keydownSetup(); + if(debugmsg) + console.log("uw::extSetup (stage 2)\nprogress: %c |=======> |\nkeydownSetup complete\n\n", "background-color: #161211;color: #f51;"); + extsetup_comms(); + if(debugmsg) + console.log("uw::extSetup (stage 2)\nprogress: %c |============> |\nextSetup complete; starting buildUInative\n\n", "background-color: #161211; color: #f51;"); + buildUInative(); + if(debugmsg) + console.log("uw::extSetup (stage 2)\nprogress: %c |=================> |\nbuildUInative complete\n\n", "background-color: #161211; color: #f51;"); + updateUICSS(); + if(debugmsg) + console.log("uw::extSetup (stage 2)\nprogress: %c |========================|\nupdateUICSS complete\n\n", "background-color: #161211; color: #f51;"); if(page_url.indexOf("netflix.com") != -1){ console.log("uw::extSetup (stage 2) | starting netflix-specific setup steps"); @@ -771,47 +1106,6 @@ function extsetup_stage2(op){ } -function uinit(){ - if(debugmsg) - console.log("uw::uinit | initializing elements from the webpage"); - - var site = UW_SITES[SITE]; -// var inIframe = inIframe(); - - if(debugmsg) - console.log("uw::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass); - -// if(inIframe){ -// -// } -// else{ - SITE_ENABLED = site.enabled; - SITE_TYPE = site.type; - SITE_URL_RULES = site.urlRules; - SITE_PROPS = site; - - if(debugmsg) - console.log("uw::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false ); - - if(inIframe() && site.iframe){ - console.log("uw::uinit | we're in iframe."); - PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name); - } - else{ - PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name); - } - - SAMPLE_BUTTON_CLASS = site.sampleButton.class; - SAMPLE_BUTTON_INDEX = site.sampleButton.index; - BUTTON_SIZE_BASE = site.sampleButton.buttonSizeBase; -// } - - IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled; - - if(debugmsg) - console.log("uw::uinit | initializing elements from the webpage"); -} - function loadFromStorage(){ if(debugmsg || debugmsg_autoar) console.log("uw::loadFromStorage | loading stuff from storage."); @@ -1109,166 +1403,6 @@ function check4player(recursion_depth){ return false; } -function mkanchor(){ - ui_anchor = document.createElement("div"); - ui_anchor.className = "uw_ui_anchor"; - ui_anchor.id = "uw_ui_anchor"; - - var site = UW_SITES[SITE]; - - if(site.uiParent.insertStrat == "prepend"){ - $(document.getElementsByClassName(site.uiParent.name)[0]).prepend(ui_anchor); - } - -} - -function buildUInative(){ - /** This function builds UI in the native bar. - * - */ - - - if(ui_anchor) - return; - - if(!ui_anchor) - mkanchor(); - - if(UW_UI_MODE == "none"){ - if(debugmsg || debugmsg_ui) - console.log("uw::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built."); - return; - } - if(UW_UI_MODE == "compact"){ - if(debugmsg || debugmsg_ui) - console.log("uw::buildUInative | usersettings say UI should be compact if possible. Checking if possible."); - - if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){ - if(debugmsg || debugmsg_ui) - console.log("uw::buildUInative | compact ui is not possible on this site. Reverting to full."); - UW_UI_MODE == "all"; - } - } - - if(debugmsg || debugmsg_ui ) - console.log("uw::buildUInative | starting to build UI"); - - var el; - - if(UW_UI_MODE == "compact"){ // no need for loop if all we add is the 'settings' buton - el = UW_UI_BUTTONS.settings; - uiel = mkbutton(el); - uiel.appendChild(mksubmenu(el)); - ui_anchor.appendChild(uiel); - } - else{ - for(key in UW_UI_BUTTONS){ - - el = UW_UI_BUTTONS[key]; - - if(UW_UI_BANLIST[SITE][key]){ - if(debugmsg) - console.log("uw::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing."); - - continue; - } - - if(!el.native_bar) - continue; - - var uiel; //ui element - - if(el.button){ - uiel = mkbutton(el); - } - - if(!uiel) - continue; - - ui_anchor.appendChild(uiel); - - if(el.has_submenu){ - uiel.appendChild(mksubmenu(el)); - } - } - } - - if(debugmsg || debugmsg_ui ) - console.log("uw::buildUInative | ui finished"); -} - -function mksubmenu(el){ - var submenu = document.createElement("div"); - submenu.id = el.submenu_id; - submenu.className = "uw_element uw_submenu"; - - for(var i = 0; i < el.submenu.length; i++){ - if(UW_UI_BANLIST[SITE][el.submenu[i]]){ - if(debugmsg) - console.log("uw::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing."); - - continue; - } - submenu.appendChild(mkmenuitem(el.submenu[i])); - } - - return submenu; -} - -function mkmenuitem(key){ - var el = UW_UI_BUTTONS[key]; - var item = document.createElement("div"); - item.textContent = el.text; - item.className = "uw-setmenu-item uw_element"; - item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); }; - - if(el.has_submenu){ - item.appendChild(mksubmenu(el)); - - if(debugmsg){ - console.log("uw::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu"); - } - - if(el.parent) - $(item).on("mouseenter", function(){ - // We determine where the submenu goes - to the left or to the right. showMenu handles position, - // this function gets sizes of all objects - var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id); - var supmenusize = div.getBoundingClientRect(); - div = document.getElementById(el.submenu_id); - var submenusize = div.getBoundingClientRect(); - var playersize = player.getBoundingClientRect(); - - if(debugmsg) - console.log("uw::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize); - - showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize}); - }); - 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.className += " uw_button uw_element"; - button.onclick = function(event) {event.stopPropagation(); el.onclick() }; - - if(debugmsg | debugmsg_ui) - console.log("uw::mkbutton | button completed"); - - return button; -} - function hideAllMenus(){ var el; for(key in UW_UI_BUTTONS){ diff --git a/manifest.json b/manifest.json index 46486e7..2f4e87c 100644 --- a/manifest.json +++ b/manifest.json @@ -13,7 +13,7 @@ "content_scripts": [ { - "matches": ["*://*.youtube.com/*", "*://youtube.com/*", "*://youtu.be/*","*://www.netflix.com/*"], + "matches": ["*://*/*"], "js": [ "js/jquery-3.1.1.js", "js/uw_libbuttons.js", "js/uw.js" ], "all_frames": true } diff --git a/res/css/uw_common.css b/res/css/uw_common.css index 8aeef2b..e5c980d 100644 --- a/res/css/uw_common.css +++ b/res/css/uw_common.css @@ -31,6 +31,15 @@ padding-left: 2em !important; } +.common_anchor { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + .uw_button{ display: inline-block; /* height: 100% !important; */ diff --git a/res/settings.js b/res/settings.js index 9dd56f4..46f4697 100644 --- a/res/settings.js +++ b/res/settings.js @@ -1,3 +1,125 @@ +// Autogenerated using buildext. This file should not be modified — modify source files instead. + +//BEGIN included from lib/libopts.js +// setopt, getopt, delopt. Shrani oz. dobi oz. briše stvari iz skladišča +// setopt, getopt, delopt. They set/get/delete stuff from the storage + +function setopt(item){ + browser.storage.local.set(item); +} +function getopt(prop, callback){ + if(usebrowser == "chrome") + browser.storage.local.get(prop, callback); + else + browser.storage.local.get(prop).then(callback); +} +function delopt(item){ + browser.storage.local.remove(item); +} +//END included from lib/libopts.js + + +//BEGIN included from lib/uiutils.js + +//END included from lib/uiutils.js + + +//BEGIN included from conf/sitesconf.js +var UW_SITES = { + youtube: { + enabled: true, + type: "official", + urlRules: ["youtu"], + player: { + name: "movie_player", + isClass: false, + }, + iframe: { + name: "player", + isClass: false + }, + ui: { + uiMode: "native", + uiconf: { + sampleButton: { + class: "ytp-button ytp-settings-button", + index: 0, + buttonSizeBase: "x", + }, + uiParent: { + name: "ytp-right-controls", + isClass: true, + insertStrat: "prepend", + }, + uiOffset: { + offsetBy: "10vh", + offsetType: "css" + } + } + }, + autoar_imdb:{ + enabled: false + } + }, + netflix: { + enabled: true, + type: "official", + urlRules: ["netflix"], + player: { + name: "placeholder", + isClass: true, + }, + ui: { + uiMode: "native", + uiconf: { + sampleButton: { + class: "ytp-button ytp-settings-button", + index: 0, + buttonSizeBase: "x", + }, + uiParent: { + name: "player-controls-wrapper", + isClass: true, + insertStrat: "append" + }, + uiOffset: { + offsetBy: "0px", + offsetType: "css" + } + } + }, + autoar_imdb:{ + enabled: true, + title: "player-status-main-title", + isClass: true + } + }, + dummy: { + type: "add new site", + urlRules: [""], + player: { + name: "", + isClass: false, + }, + sampleButton: { + class: "ytp-button ytp-settings-button", + index: 0, + buttonSizeBase: "x", + }, + uiParent: { + name: "", + isClass: false, + insertStrat: "prepend", + }, + autoar_imdb:{ + enabled: false + } + } +} +//END included from conf/sitesconf.js + + + var browser_autodetect = true; var usebrowser = "chrome"; var debugmsg = true; @@ -164,19 +286,6 @@ function saveUI(){ } } -// setopt in getopt. Shranita oz. dobita stvari iz skladišča -// setopt, getopt. They set/get stuff from the storage - -function setopt(item){ - browser.storage.local.set(item); -} -function getopt(prop, callback){ - if(usebrowser == "chrome") - browser.storage.local.get(prop, callback); - else - browser.storage.local.get(prop).then(callback); - -} function compareModifiers(a,b){ //NOTE: to je precej slab in neprenoslijv način primerjanja dveh tabel, ampak za naš primer deluje dovolj @@ -254,6 +363,14 @@ function gotsites(opts){ list.remove(); var anchor = document.getElementById("uw_sites_body"); + + // at the top of the list, there is this option to reset site config + resetLink = document.createElement("a"); + resetLink.onclick = function(){ delopt("ultrawidify_siterules"); setopt({"ultrawidify_siterules":UW_SITES}); }; + resetLink.textContent = "Reset site options to default"; + anchor.appendChild(resetLink); + + list = document.createElement("div"); list.id = "uw_sites_list"; list.className = "uw_sites"; @@ -291,20 +408,21 @@ function gotsites(opts){ list.append(category_desc); var category_counter = 0; - for (site in uw_sites){ + + for (site in uw_sites) { if(debugmsg) console.log("we're at site %s of type %s. We're %s this site.",site, uw_sites[site].type, uw_sites[site].type == type ? "processing" : "ignoring"); if(uw_sites[site].type == type){ - var entry = document.createElement("div"); - var displayedInfo = document.createElement("div"); - displayedInfo.id = site + "_display"; - displayedInfo.className = "uw_options_line site_details"; + var header = document.createElement("div"); + + header.id = site + "_display"; + header.className = "uw_options_line site_details"; + var siteTitle = document.createElement("div"); siteTitle.className = "site_name"; - { var sitecb = mkcb(site, uw_sites[site].enabled, "siteEnabled", true); var editTitle = mkebox(site, site, "title"); @@ -334,155 +452,219 @@ function gotsites(opts){ siteTitle.append(saveBtn); siteTitle.append(cancelBtn); } + header.appendChild(siteTitle); + entry.appendChild(header); - var siteDetails = document.createElement("div"); - siteDetails.id = site + "_conf_details"; - siteDetails.classList = "hide"; + var body = document.createElement("div"); + var jsonForm = document.createElement("textarea"); + jsonForm.cols = 64; + jsonForm.rows = 32; - var urlRules = document.createElement("div"); - { - var urlRulesLabel = document.createElement("span"); - urlRulesLabel.textContent = "URL rule: "; - - urlRulesEbox = mkebox(site, uw_sites[site].urlRules[0], "url_rules"); - - urlRules.append(urlRulesLabel); - urlRules.append(urlRulesEbox); - } - - var playerElement = document.createElement("div"); - - { - var playerName = document.createElement("div"); - - var playerNameLabel = document.createElement("span"); - - playerNameLabel.textContent = "id of the player container:"; - var playerNameEbox = mkebox(site, uw_sites[site].player.name, "player_name"); - - playerName.append(playerNameLabel); - playerName.append(playerNameEbox); - - var playerClass = document.createElement("div"); - var pcb = document.createElement("input"); - pcb.className = site + "_ebox"; - pcb.type = "checkbox"; - pcb.name = site + "_pccb_name"; - pcb.id = site + "_pccb_id"; - pcb.checked = uw_sites[site].player.isClass; - pcb.disabled = true; - - var pcblabel = document.createElement("span"); - pcblabel.textContent = " Name of the player container is a class"; - - playerClass.append(pcb); - playerClass.append(pcblabel); - playerElement.append(playerName); - playerElement.append(playerClass); - } - - var iframe_playerName = document.createElement("div"); - var ipn_label = document.createElement("span"); - ipn_label.textContent = "id of the player container when in an iframe:"; - ipn_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "iframe_name"); - iframe_playerName.append(ipn_label); - iframe_playerName.append(ipn_ebox); - - var iframe_playerClass = document.createElement("div"); - var ipc_label = document.createElement("span"); - ipc_label.textContent = " Name of the player container is a class"; - var ipc_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "iframe_class"); - iframe_playerClass.append(ipc_cb); - iframe_playerClass.append(ipc_label); - - - var sampleButton = document.createElement("div"); - var sbc = document.createElement("div"); - var sbi = document.createElement("div"); - var sbo = document.createElement("div"); - var sbc_label = document.createElement("span"); - var sbi_label = document.createElement("span"); - var sbo_label = document.createElement("span"); - sbc_label.textContent = "Sample button class:"; - sbi_label.textContent = "Sample button index:"; - sbo_label.textContent = "Use height for UI scaling"; - var sampleButtonClass = mkebox(site, uw_sites[site].sampleButton.class, "sample_button_class"); - var sampleButtonIndex = mkebox(site, uw_sites[site].sampleButton.index, "sample_button_index"); - var buttonSizeBase = mkcb(site, uw_sites[site].sampleButton.buttonSizeBase == "y", "sample_button_size_base"); - - sbc.append(sbc_label); - sbc.append(sampleButtonClass); - sampleButton.append(sbc); - - sbi.append(sbi_label); - sbi.append(sampleButtonIndex); - sampleButton.append(sbi); - - sbo.append(buttonSizeBase); - sbo.append(sbo_label); - sampleButton.append(sbo); - - var imdbar = document.createElement("div"); - var imdbar_cb = mkcb(site, uw_sites[site].autoar_imdb, "imdbar"); - var imdbar_label = document.createElement("span"); - imdbar_label.textContent = " This site supports automatic aspect ratio detection"; - imdbar.append(imdbar_cb); - imdbar.append(imdbar_label); - - var imdbar_title = document.createElement("div"); - var it_label = document.createElement("span"); - it_label.textContent = "id of the element containing video title:"; - it_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "imdbar_title"); - imdbar_title.append(it_label); - imdbar_title.append(it_ebox); - - var imdbar_class = document.createElement("div"); - var ic_label = document.createElement("span"); - ic_label.textContent = " Name of the title container is a class"; - var ic_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "imdbar_class"); - imdbar_class.append(ic_cb); - imdbar_class.append(ic_label); - - - - - - var optionspad = document.createElement("div"); - optionspad.textContent = "-------------"; - - - siteDetails.append(urlRules); - siteDetails.append(playerElement); - siteDetails.append(optionspad); - siteDetails.append(iframe_playerName); - siteDetails.append(iframe_playerClass); - siteDetails.append(optionspad); - - siteDetails.append(sampleButton); - - siteDetails.append(imdbar); - siteDetails.append(imdbar_title); - siteDetails.append(imdbar_class); -// siteDetails.append(optionspad); - - - displayedInfo.append(siteTitle); - displayedInfo.append(siteDetails); - - entry.append(displayedInfo); + jsonForm.value = JSON.stringify(uw_sites[site], null, 2); + body.appendChild(jsonForm); +// body.classNamež + entry.appendChild(body); list.append(entry); - category_counter++; - if(site == "dummy" && type == "add new site"){ - if(debugmsg) - console.log("uw settings::gotsites | we are adding dummy site"); - enableEditing("dummy"); - document.getElementById("dummy_title_ebox").disabled = false; - } + category_counter++; } } + + +// for (site in uw_sites){ +// if(debugmsg) +// console.log("we're at site %s of type %s. We're %s this site.",site, uw_sites[site].type, uw_sites[site].type == type ? "processing" : "ignoring"); +// +// if(uw_sites[site].type == type){ +// +// var entry = document.createElement("div"); +// var displayedInfo = document.createElement("div"); +// displayedInfo.id = site + "_display"; +// displayedInfo.className = "uw_options_line site_details"; +// +// var siteTitle = document.createElement("div"); +// siteTitle.className = "site_name"; +// +// { +// var sitecb = mkcb(site, uw_sites[site].enabled, "siteEnabled", true); +// var editTitle = mkebox(site, site, "title"); +// editTitle.className = "site_title_ebox"; +// siteTitle.append(sitecb); +// siteTitle.append(editTitle); +// +// var editBtn = document.createElement("div"); +// editBtn.textContent = "« edit »"; +// editBtn.className = "inline_button"; +// editBtn.id = site + "_edit_button"; +// editBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_edit_button", ""); enableEditing(site)}); +// +// var saveBtn = document.createElement("div"); +// saveBtn.textContent = "« save »"; +// saveBtn.className = "inline_button hide"; +// saveBtn.id = site + "_save_button"; +// saveBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_save_button", ""); saveEdited(site)}); +// +// var cancelBtn = document.createElement("div"); +// cancelBtn.textContent = "« cancel »"; +// cancelBtn.className = "inline_button hide"; +// cancelBtn.id = site + "_cancel_button"; +// cancelBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_cancel_button", ""); cancelEditing(site)}); +// +// siteTitle.append(editBtn); +// siteTitle.append(saveBtn); +// siteTitle.append(cancelBtn); +// } +// +// var siteDetails = document.createElement("div"); +// siteDetails.id = site + "_conf_details"; +// siteDetails.classList = "hide"; +// +// var urlRules = document.createElement("div"); +// { +// var urlRulesLabel = document.createElement("span"); +// urlRulesLabel.textContent = "URL rule: "; +// +// urlRulesEbox = mkebox(site, uw_sites[site].urlRules[0], "url_rules"); +// +// urlRules.append(urlRulesLabel); +// urlRules.append(urlRulesEbox); +// } +// +// var playerElement = document.createElement("div"); +// +// { +// var playerName = document.createElement("div"); +// +// var playerNameLabel = document.createElement("span"); +// +// playerNameLabel.textContent = "id of the player container:"; +// var playerNameEbox = mkebox(site, uw_sites[site].player.name, "player_name"); +// +// playerName.append(playerNameLabel); +// playerName.append(playerNameEbox); +// +// var playerClass = document.createElement("div"); +// var pcb = document.createElement("input"); +// pcb.className = site + "_ebox"; +// pcb.type = "checkbox"; +// pcb.name = site + "_pccb_name"; +// pcb.id = site + "_pccb_id"; +// pcb.checked = uw_sites[site].player.isClass; +// pcb.disabled = true; +// +// var pcblabel = document.createElement("span"); +// pcblabel.textContent = " Name of the player container is a class"; +// +// playerClass.append(pcb); +// playerClass.append(pcblabel); +// playerElement.append(playerName); +// playerElement.append(playerClass); +// } +// +// var iframe_playerName = document.createElement("div"); +// var ipn_label = document.createElement("span"); +// ipn_label.textContent = "id of the player container when in an iframe:"; +// ipn_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "iframe_name"); +// iframe_playerName.append(ipn_label); +// iframe_playerName.append(ipn_ebox); +// +// var iframe_playerClass = document.createElement("div"); +// var ipc_label = document.createElement("span"); +// ipc_label.textContent = " Name of the player container is a class"; +// var ipc_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "iframe_class"); +// iframe_playerClass.append(ipc_cb); +// iframe_playerClass.append(ipc_label); +// +// +// var sampleButton = document.createElement("div"); +// var sbc = document.createElement("div"); +// var sbi = document.createElement("div"); +// var sbo = document.createElement("div"); +// var sbc_label = document.createElement("span"); +// var sbi_label = document.createElement("span"); +// var sbo_label = document.createElement("span"); +// sbc_label.textContent = "Sample button class:"; +// sbi_label.textContent = "Sample button index:"; +// sbo_label.textContent = "Use height for UI scaling"; +// var sampleButtonClass = mkebox(site, uw_sites[site].sampleButton.class, "sample_button_class"); +// var sampleButtonIndex = mkebox(site, uw_sites[site].sampleButton.index, "sample_button_index"); +// var buttonSizeBase = mkcb(site, uw_sites[site].sampleButton.buttonSizeBase == "y", "sample_button_size_base"); +// +// sbc.append(sbc_label); +// sbc.append(sampleButtonClass); +// sampleButton.append(sbc); +// +// sbi.append(sbi_label); +// sbi.append(sampleButtonIndex); +// sampleButton.append(sbi); +// +// sbo.append(buttonSizeBase); +// sbo.append(sbo_label); +// sampleButton.append(sbo); +// +// var imdbar = document.createElement("div"); +// var imdbar_cb = mkcb(site, uw_sites[site].autoar_imdb, "imdbar"); +// var imdbar_label = document.createElement("span"); +// imdbar_label.textContent = " This site supports automatic aspect ratio detection"; +// imdbar.append(imdbar_cb); +// imdbar.append(imdbar_label); +// +// var imdbar_title = document.createElement("div"); +// var it_label = document.createElement("span"); +// it_label.textContent = "id of the element containing video title:"; +// it_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "imdbar_title"); +// imdbar_title.append(it_label); +// imdbar_title.append(it_ebox); +// +// var imdbar_class = document.createElement("div"); +// var ic_label = document.createElement("span"); +// ic_label.textContent = " Name of the title container is a class"; +// var ic_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "imdbar_class"); +// imdbar_class.append(ic_cb); +// imdbar_class.append(ic_label); +// +// +// +// +// +// var optionspad = document.createElement("div"); +// optionspad.textContent = "-------------"; +// +// +// siteDetails.append(urlRules); +// siteDetails.append(playerElement); +// siteDetails.append(optionspad); +// siteDetails.append(iframe_playerName); +// siteDetails.append(iframe_playerClass); +// siteDetails.append(optionspad); +// +// siteDetails.append(sampleButton); +// +// siteDetails.append(imdbar); +// siteDetails.append(imdbar_title); +// siteDetails.append(imdbar_class); +// // siteDetails.append(optionspad); +// +// +// displayedInfo.append(siteTitle); +// displayedInfo.append(siteDetails); +// +// entry.append(displayedInfo); +// +// list.append(entry); +// +// category_counter++; +// +// if(site == "dummy" && type == "add new site"){ +// if(debugmsg) +// console.log("uw settings::gotsites | we are adding dummy site"); +// enableEditing("dummy"); +// document.getElementById("dummy_title_ebox").disabled = false; +// } +// } +// } if(! category_counter){ var noEntriesMsg = document.createElement("div"); noEntriesMsg.textContent = "There's no entries in this category yet"; diff --git a/src/conf/sitesconf.js b/src/conf/sitesconf.js index cebf113..94afbb4 100644 --- a/src/conf/sitesconf.js +++ b/src/conf/sitesconf.js @@ -11,15 +11,24 @@ var UW_SITES = { name: "player", isClass: false }, - sampleButton: { - class: "ytp-button ytp-settings-button", - index: 0, - buttonSizeBase: "x", - }, - uiParent: { - name: "ytp-right-controls", - isClass: true, - insertStrat: "prepend", + ui: { + uiMode: "native", + uiconf: { + sampleButton: { + class: "ytp-button ytp-settings-button", + index: 0, + buttonSizeBase: "x", + }, + uiParent: { + name: "ytp-right-controls", + isClass: true, + insertStrat: "prepend", + }, + uiOffset: { + offsetBy: "10vh", + offsetType: "css" + } + } }, autoar_imdb:{ enabled: false @@ -33,15 +42,24 @@ var UW_SITES = { name: "placeholder", isClass: true, }, - sampleButton: { - class: "ytp-button ytp-settings-button", - index: 0, - buttonSizeBase: "x", - }, - uiParent: { - name: "player-controls-wrapper", - isClass: true, - insertStrat: "append" + ui: { + uiMode: "native", + uiconf: { + sampleButton: { + class: "ytp-button ytp-settings-button", + index: 0, + buttonSizeBase: "x", + }, + uiParent: { + name: "player-controls-wrapper", + isClass: true, + insertStrat: "append" + }, + uiOffset: { + offsetBy: "0px", + offsetType: "css" + } + } }, autoar_imdb:{ enabled: true, diff --git a/src/conf/uwvars.js b/src/conf/uwvars.js new file mode 100644 index 0000000..8d1c8b6 --- /dev/null +++ b/src/conf/uwvars.js @@ -0,0 +1 @@ + diff --git a/src/lib/browser_autodetect.js b/src/lib/browser_autodetect.js index cba74c9..e84cd5c 100644 --- a/src/lib/browser_autodetect.js +++ b/src/lib/browser_autodetect.js @@ -1,3 +1,4 @@ +var browser_autodetect = true; usebrowser = "firefox"; if(typeof browser === "undefined"){ // This means we're probably not on Firefox. diff --git a/src/lib/debuginit.js b/src/lib/debuginit.js new file mode 100644 index 0000000..6bb3412 --- /dev/null +++ b/src/lib/debuginit.js @@ -0,0 +1,25 @@ + var debugmsg = true; + var debugmsg_click = false; + var debugmsg_message = false; + var debugmsg_autoar = false; + var debugmsg_periodic = false; + var debugmsg_ui = true; + var force_conf_reload = true; + if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){ + console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); + console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n"); + + if(debugmsg) + console.log("Logging all"); + + if(debugmsg_click) + console.log("Logging debugmsg_click"); + + if(debugmsg_message) + console.log("Logging debugmsg_message"); + + if(debugmsg_autoar) + console.log("Logging autoar"); + + console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); + } diff --git a/src/lib/libopts.js b/src/lib/libopts.js index 8622a20..ba6d80f 100644 --- a/src/lib/libopts.js +++ b/src/lib/libopts.js @@ -1,5 +1,5 @@ -// setopt in getopt. Shranita oz. dobita stvari iz skladišča -// setopt, getopt. They set/get stuff from the storage +// setopt, getopt, delopt. Shrani oz. dobi oz. briše stvari iz skladišča +// setopt, getopt, delopt. They set/get/delete stuff from the storage function setopt(item){ browser.storage.local.set(item); @@ -10,3 +10,6 @@ function getopt(prop, callback){ else browser.storage.local.get(prop).then(callback); } +function delopt(item){ + browser.storage.local.remove(item); +} diff --git a/src/lib/player_ui.js b/src/lib/player_ui.js new file mode 100644 index 0000000..2b3c7da --- /dev/null +++ b/src/lib/player_ui.js @@ -0,0 +1,287 @@ +var UICONF; + +function uinit(){ + if(debugmsg) + console.log("player_ui::uinit | initializing elements from the webpage"); + + var site = UW_SITES[SITE]; + + if(debugmsg) + console.log("player_ui::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass); + + SITE_ENABLED = site.enabled; + SITE_TYPE = site.type; + SITE_URL_RULES = site.urlRules; + SITE_PROPS = site; + + if(debugmsg) + console.log("player_ui::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false ); + + if(inIframe() && site.iframe){ + console.log("player_ui::uinit | we're in iframe."); + PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name); + } + else{ + PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name); + } + + // + if( site.ui.uiMode == "native") + NATIVE_UI = true; + else + NATIVE_UI = false; + + UICONF = site.ui.uiconf; + + console.log("player_ui::uinit |\nsite.ui.uiMode: ", site.ui.uiMode,"\nsite.ui.uiMode.uiconf:",site.ui.uiconf,"\nUICONF: ", UICONF); + + IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled; + + if(debugmsg) + console.log("player_ui::uinit | initializing elements from the webpage"); +} + +function buildUInative(){ + /** This function builds UI in the native bar. + * + */ + if(debugmsg || debugmsg_ui) + console.log("player_ui::buildUInative | starting ..."); + + if(ui_anchor){ + console.log("player_ui::buildUInative | anchor found, doing nothing"); + return; + + } + if(!ui_anchor) + mkanchor(); + + if(UW_UI_MODE == "none"){ + if(debugmsg || debugmsg_ui) + console.log("player_ui::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built."); + return; + } + if(UW_UI_MODE == "compact"){ + if(debugmsg || debugmsg_ui) + console.log("player_ui::buildUInative | usersettings say UI should be compact if possible. Checking if possible."); + + if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){ + if(debugmsg || debugmsg_ui) + console.log("player_ui::buildUInative | compact ui is not possible on this site. Reverting to full."); + UW_UI_MODE == "all"; + } + } + + if(debugmsg || debugmsg_ui ) + console.log("player_ui::buildUInative | starting to build UI"); + + var el; + + if(UW_UI_MODE == "compact"){ // no need for loop if all we add is the 'settings' buton + el = UW_UI_BUTTONS.settings; + uiel = mkbutton(el); + uiel.appendChild(mksubmenu(el)); + ui_anchor.appendChild(uiel); + } + else{ + for(key in UW_UI_BUTTONS){ + + el = UW_UI_BUTTONS[key]; + + if(UW_UI_BANLIST[SITE][key]){ + if(debugmsg) + console.log("player_ui::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing."); + + continue; + } + + if(!el.native_bar) + continue; + + var uiel; //ui element + + if(el.button){ + uiel = mkbutton(el); + } + + if(!uiel) + continue; + + ui_anchor.appendChild(uiel); + + if(el.has_submenu){ + uiel.appendChild(mksubmenu(el)); + } + } + } + + if(debugmsg || debugmsg_ui ) + console.log("player_ui::buildUInative | ui finished"); +} + +function mksubmenu(el){ + var submenu = document.createElement("div"); + submenu.id = el.submenu_id; + submenu.className = "uw_element uw_submenu"; + + for(var i = 0; i < el.submenu.length; i++){ + if(UW_UI_BANLIST[SITE][el.submenu[i]]){ + if(debugmsg) + console.log("player_ui::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing."); + + continue; + } + submenu.appendChild(mkmenuitem(el.submenu[i])); + } + + return submenu; +} + +function mkmenuitem(key){ + var el = UW_UI_BUTTONS[key]; + var item = document.createElement("div"); + item.textContent = el.text; + item.className = "uw-setmenu-item uw_element"; + item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); }; + + if(el.has_submenu){ + item.appendChild(mksubmenu(el)); + + if(debugmsg){ + console.log("player_ui::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu"); + } + + if(el.parent) + $(item).on("mouseenter", function(){ + // We determine where the submenu goes - to the left or to the right. showMenu handles position, + // this function gets sizes of all objects + var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id); + var supmenusize = div.getBoundingClientRect(); + div = document.getElementById(el.submenu_id); + var submenusize = div.getBoundingClientRect(); + var playersize = player.getBoundingClientRect(); + + if(debugmsg) + console.log("player_ui::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize); + + showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize}); + }); + else + $(item).on("mouseenter", function(){showMenu(el.submenu_id)}); + + $(item).on("mouseleave", function(){hideMenu(el.submenu_id)}); + } + + return item; +} + +function mkanchor(){ + + if (debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | starting.\nNATIVE_UI: ",NATIVE_UI); + + + if( NATIVE_UI !== true ){ + if(debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | we don't use native UI, calling mkanchor_notify(common=true) to take over"); + + mkanchor_notify(true); + return; + } + else{ + if(debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | will make anchor for notifications, calling mkanchor_notify(common=false)"); + + mkanchor_notify(false); + } + + if (debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | anchor for notifications created."); + + + ui_anchor = document.createElement("div"); + ui_anchor.className = "uw_ui_anchor"; + ui_anchor.id = "uw_ui_anchor"; + + if(UICONF.uiParent.insertStrat == "prepend"){ + $(document.getElementsByClassName(UICONF.uiParent.name)[0]).prepend(ui_anchor); + } + else{ + document.getElementsByClassName(UICONF.uiParent.name)[0].appendChild(ui_anchor); + } + + if (debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor | anchor created."); + +} + +function mkanchor_notify(common){ + + if (debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor_common | starting.\n\ncommon anchor: ",common,"\nUICONF: ",UICONF,"\nUICONF.uiOffset: ",UICONF.uiOffset); + + if( document.getElementById("uw_common_anchor") ) + return; + + + var anchor = document.createElement("div"); + anchor.className = "uw_common_anchor"; + anchor.id = "uw_common_anchor"; + + // Izračunamo zamik zaradi drugih elementov na zaslonu + // Let's calculate offset due to other elements on the screen + + var offsetTop = "0px"; + + if ( UICONF.uiOffset.offsetType == "element_id" || UICONF.uiOffset.offsetType == "element_class"){ + + var blockingElement; + if( UICONF.uiOffset.offsetType == "element_id" ) + blockingElement = document.getElementById(UICONF.uiOffset.offsetBy); + else + blockingElement = document.getElementsByClassName(UICONF.uiOffset.offsetBy)[0]; + + offsetTop = blockingElement.offsetTop + blockingElement.offsetHeight + "px"; + } + else if( UICONF.uiOffset.offsetType == "css" ) + offsetTop = UICONF.uiOffset.offsetBy; + + if(debugmsg || debugmsg_ui) + console.log("player_ui::mkanchor_notify | notification box will be offset by this much:", offsetTop); + + + var padding = document.createElement("div"); + padding.style.width = "100%"; + padding.style.height = offsetTop; + + anchor.appendChild(padding); + + var notification_box = document.createElement("div"); + notification_box.style.width = "50%"; + notification_box.style.height = "25%"; + notification_box.textContent = "test box"; + + if(debugmsg) + console.log("player_ui::mkanchor_notify | this is our notification box: ", notification_box); + + anchor.appendChild(notification_box); + + PLAYER.appendChild(anchor); + + +} + +function mkbutton(el){ + if(debugmsg | debugmsg_ui) + console.log("player_ui::mkbutton | trying to make a button", el.text); + + var button = document.createElement("div"); + button.style.backgroundImage = 'url(' + resourceToUrl(el.icon) + ')'; + button.className += " uw_button uw_element"; + button.onclick = function(event) {event.stopPropagation(); el.onclick() }; + + if(debugmsg | debugmsg_ui) + console.log("player_ui::mkbutton | button completed"); + + return button; +} diff --git a/src/lib/uiutils.js b/src/lib/uiutils.js new file mode 100644 index 0000000..8d1c8b6 --- /dev/null +++ b/src/lib/uiutils.js @@ -0,0 +1 @@ + diff --git a/src/settings.js b/src/settings.js new file mode 100644 index 0000000..7066577 --- /dev/null +++ b/src/settings.js @@ -0,0 +1,744 @@ +#location res +#include lib/libopts.js +#include lib/uiutils.js +#include conf/sitesconf.js + + +var browser_autodetect = true; +var usebrowser = "chrome"; +var debugmsg = true; + +if(browser_autodetect){ + if(typeof browser === "undefined"){ + if(chrome){ + browser = chrome; + usebrowser = "chrome"; + } + } + else + usebrowser = "firefox"; +} +else{ + if(usebrowser == "chrome") + browser = chrome; +} + +var UW_SITES = {}; + +function showAbout(){ + clearPage(); + + document.getElementById("about").classList.remove("hide"); + document.getElementById("tab_about").classList.add("tab-selected"); +} +function showShortcuts(){ + clearPage(); + + document.getElementById("uw_shortcuts").classList.remove("hide"); + document.getElementById("tab_shortcuts").classList.add("tab-selected"); +} +function showGeneralSettings(){ + clearPage(); + + document.getElementById("general_settings").classList.remove("hide"); + document.getElementById("tab_general_settings").classList.add("tab-selected"); +} + +function showSites(){ + clearPage(); + document.getElementById("uw_sites").classList.remove("hide"); + document.getElementById("tab_sites").classList.add("tab-selected"); +} + +function clearPage(){ + // Hide you sections + document.getElementById("uw_shortcuts").classList.add("hide"); + document.getElementById("about").classList.add("hide"); + document.getElementById("general_settings").classList.add("hide"); + document.getElementById("uw_sites").classList.add("hide"); + + // Hide you tabs + document.getElementById("tab_shortcuts").classList.remove("tab-selected"); + document.getElementById("tab_about").classList.remove("tab-selected"); + document.getElementById("tab_general_settings").classList.remove("tab-selected"); + document.getElementById("tab_sites").classList.remove("tab-selected"); + +} + +function saveopts(){ + + var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"]; + var new_keybinds = {}; + + // Preberemo naš obrazec in iz njega naredimo nov objekt z bližnjicami. + // Let's read our form and make a new object with keybinds. + + for(var i = 0; i < actions.length; i++){ + var action = actions[i]; + var targetAR = ""; + + if(action == "ar219"){ + action = "char"; + targetAR = (21/9); + } + if(action == "ar169"){ + action = "char"; + targetAR = (16/9); + } + if(action == "ar1610"){ + action = "char"; + targetAR = (16/10); + } + if(action == "ar43"){ + action = "char"; + targetAR = (4/3); + } + + if(targetAR != ""){ + var keybind = { + action: action, + targetAR: targetAR, + key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""), + modifiers: [] + } + } + else{ + var keybind = { + action: action, + key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""), + modifiers: [] + } + } + + if(document.querySelector("#" + actions[i] + "_ctrl").checked) + keybind.modifiers.push("ctrl"); + if(document.querySelector("#" + actions[i] + "_alt").checked) + keybind.modifiers.push("alt"); + if(document.querySelector("#" + actions[i] + "_shift").checked) + keybind.modifiers.push("shift"); + + new_keybinds[i] = keybind; + } + + // Preveriti moramo, da nismo dvema možnostima dodali isto bližnjico. + // We need to check if all keybinds are unique. + + var fail = false; + + for(var i = 0; i < actions.length; i++) + document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds"); + + for(var i = 0; i < actions.length; i++){ + if(new_keybinds[i].key == "") + continue; + + for(var j = i + 1; j < actions.length; j++){ + if(new_keybinds[i].key == new_keybinds[j].key){ + if(compareModifiers(new_keybinds[i].modifiers, new_keybinds[j].modifiers)){ + fail = true; + document.querySelector("#" + actions[i] + "_letter").classList.add("dup_keybinds"); + document.querySelector("#" + actions[j] + "_letter").classList.add("dup_keybinds"); + } + } + } + } + + if (!fail){ + browser.storage.local.set({ultrawidify_keybinds:new_keybinds}); + } + +} + +function saveAutoar(){ + setopt({ultrawidify_autoar: document.querySelector("#enable_autoar").checked}); +} + +function saveUI(){ + var show_ui = document.querySelector("#enable_ui"); + var ui_compact = document.querySelector("#enable_ui_compact"); + var optionLine = document.getElementById("compact_ui_suboption"); + + if(show_ui.checked){ + ui_compact.disabled = false; + optionLine.classList.remove("hide"); + setopt({ultrawidify_ui: ui_compact.checked ? "compact" : "all" }); + } + else{ + ui_compact.disabled = true; + optionLine.classList.add("hide"); + setopt({ultrawidify_ui: "none"}); + } +} + + +function compareModifiers(a,b){ + //NOTE: to je precej slab in neprenoslijv način primerjanja dveh tabel, ampak za naš primer deluje dovolj + // dobro, saj 'ctrl' vedno pride pred 'alt' in 'alt' vedno pride pred 'shift' (če se sploh pojavijo). + //NOTE: this is bad and totally unfoolproof practice. In our example comparing arrays the way we do works + // because values ALWAYS appear in the same order: 'ctrl' always appears before 'alt' (or it doesn't + // appear at all). 'alt' always appears before 'shift' (or it doesn't appear at all). + if(a.length != b.length) + return false; + + var match = true; + for(var i = 0; i < a.length; i++) + match &= a[i] == b[i] + + return match; +} + +function printerr(err){ + console.log(err); +} + +function gotopts(opts){ + if(!opts.ultrawidify_keybinds){ + console.log("ultrawidify keybinds are undefined. the fuck?",opts); + return; + } + var KEYBINDS = Object.keys(opts.ultrawidify_keybinds).map(function (key) { return opts.ultrawidify_keybinds[key];}); + // google chrome is really the untermensch browse // google chrome is really the untermensch browserr + var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"]; + for(var i = 0; i < actions.length; i++){ + document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds"); + document.querySelector("#" + actions[i] + "_letter").value = KEYBINDS[i].key; + for(var j = 0; j < KEYBINDS[i].modifiers.length; j++){ + if(KEYBINDS[i].modifiers[j] == "ctrl") + document.querySelector("#" + actions[i] + "_ctrl").checked = true; + if(KEYBINDS[i].modifiers[j] == "alt") + document.querySelector("#" + actions[i] + "_alt").checked = true; + if(KEYBINDS[i].modifiers[j] == "shift") + document.querySelector("#" + actions[i] + "_shift").checked = true; + } + } +} + +function gotar(opts){ + +} + +function gotui(opts){ + var show_ui = document.querySelector("#enable_ui"); + var ui_compact = document.querySelector("#enable_ui_compact"); + var optionLine = document.getElementById("compact_ui_suboption"); + + if(opts.ultrawidify_ui == "all"){ + show_ui.checked = true; + ui_compact.checked = false; + optionLine.classList.remove("hide"); + } + else if(opts.ultrawidify_ui == "compact"){ + show_ui.checked = true; + ui_compact.checked = true; + optionLine.classList.remove("hide"); + } + else if(opts.ultrawidify_ui == "none"){ + show_ui.checked = false; + ui_compact.checked = false; + optionLine.classList.add("hide"); + } +} + +function gotsites(opts){ + + var list = document.getElementById("uw_sites_list"); + + if(list) + list.remove(); + + var anchor = document.getElementById("uw_sites_body"); + + // at the top of the list, there is this option to reset site config + resetLink = document.createElement("a"); + resetLink.onclick = function(){ delopt("ultrawidify_siterules"); setopt({"ultrawidify_siterules":UW_SITES}); }; + resetLink.textContent = "Reset site options to default"; + anchor.appendChild(resetLink); + + + list = document.createElement("div"); + list.id = "uw_sites_list"; + list.className = "uw_sites"; + + anchor.appendChild(list); + + uw_sites = opts.ultrawidify_siterules; + UW_SITES = uw_sites; + if(debugmsg) + console.log("uw settings::gotopts | site opts:",opts); + + for (type in {"official":1,"non-official":1,"custom":1, "add new site":1} ) { // unparalleled laziness! + if(debugmsg){ + console.log("uw settings::gotopts | adding sites of type" , type); + } + var head = document.createElement("div"); + head.className = "sites_header"; + head.textContent = type.charAt(0).toUpperCase() + type.slice(1); + + var category_desc = document.createElement("div"); + if(type == "official"){ + category_desc.innerHTML = "These sites are officially supported by the extension developer. These sites should always work. (Pro tip: if you don't want extension to run on some of the following sites, uncheck the checkbox for that site)"; + } + else if(type == "non-official"){ + category_desc.textContent = "Sites in this category have been contribued by third parties. These sites will probably work, but the developer couldn't test whether they work or not."; + } + else if(type == "custom"){ + category_desc.textContent = "In this section, you can define rules for sites that aren't supported either officially or non-officially. See [todo: link] contributing for details. If you define a custom site, please consider sharing configuration on github (see contributing for details)."; + } + else if(type == "add new site"){ + category_desc.textContent = "Add a custom site by filling the form below."; + } + + list.append(head); + list.append(category_desc); + + var category_counter = 0; + + for (site in uw_sites) { + if(debugmsg) + console.log("we're at site %s of type %s. We're %s this site.",site, uw_sites[site].type, uw_sites[site].type == type ? "processing" : "ignoring"); + + if(uw_sites[site].type == type){ + var entry = document.createElement("div"); + var header = document.createElement("div"); + + header.id = site + "_display"; + header.className = "uw_options_line site_details"; + + + var siteTitle = document.createElement("div"); + siteTitle.className = "site_name"; + { + var sitecb = mkcb(site, uw_sites[site].enabled, "siteEnabled", true); + var editTitle = mkebox(site, site, "title"); + editTitle.className = "site_title_ebox"; + siteTitle.append(sitecb); + siteTitle.append(editTitle); + + var editBtn = document.createElement("div"); + editBtn.textContent = "« edit »"; + editBtn.className = "inline_button"; + editBtn.id = site + "_edit_button"; + editBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_edit_button", ""); enableEditing(site)}); + + var saveBtn = document.createElement("div"); + saveBtn.textContent = "« save »"; + saveBtn.className = "inline_button hide"; + saveBtn.id = site + "_save_button"; + saveBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_save_button", ""); saveEdited(site)}); + + var cancelBtn = document.createElement("div"); + cancelBtn.textContent = "« cancel »"; + cancelBtn.className = "inline_button hide"; + cancelBtn.id = site + "_cancel_button"; + cancelBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_cancel_button", ""); cancelEditing(site)}); + + siteTitle.append(editBtn); + siteTitle.append(saveBtn); + siteTitle.append(cancelBtn); + } + header.appendChild(siteTitle); + entry.appendChild(header); + + var body = document.createElement("div"); + var jsonForm = document.createElement("textarea"); + jsonForm.cols = 64; + jsonForm.rows = 32; + + jsonForm.value = JSON.stringify(uw_sites[site], null, 2); + + body.appendChild(jsonForm); +// body.classNamež + entry.appendChild(body); + list.append(entry); + + + category_counter++; + } + } + + +// for (site in uw_sites){ +// if(debugmsg) +// console.log("we're at site %s of type %s. We're %s this site.",site, uw_sites[site].type, uw_sites[site].type == type ? "processing" : "ignoring"); +// +// if(uw_sites[site].type == type){ +// +// var entry = document.createElement("div"); +// var displayedInfo = document.createElement("div"); +// displayedInfo.id = site + "_display"; +// displayedInfo.className = "uw_options_line site_details"; +// +// var siteTitle = document.createElement("div"); +// siteTitle.className = "site_name"; +// +// { +// var sitecb = mkcb(site, uw_sites[site].enabled, "siteEnabled", true); +// var editTitle = mkebox(site, site, "title"); +// editTitle.className = "site_title_ebox"; +// siteTitle.append(sitecb); +// siteTitle.append(editTitle); +// +// var editBtn = document.createElement("div"); +// editBtn.textContent = "« edit »"; +// editBtn.className = "inline_button"; +// editBtn.id = site + "_edit_button"; +// editBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_edit_button", ""); enableEditing(site)}); +// +// var saveBtn = document.createElement("div"); +// saveBtn.textContent = "« save »"; +// saveBtn.className = "inline_button hide"; +// saveBtn.id = site + "_save_button"; +// saveBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_save_button", ""); saveEdited(site)}); +// +// var cancelBtn = document.createElement("div"); +// cancelBtn.textContent = "« cancel »"; +// cancelBtn.className = "inline_button hide"; +// cancelBtn.id = site + "_cancel_button"; +// cancelBtn.addEventListener("click", function(){ var site = this.id; site = site.replace("_cancel_button", ""); cancelEditing(site)}); +// +// siteTitle.append(editBtn); +// siteTitle.append(saveBtn); +// siteTitle.append(cancelBtn); +// } +// +// var siteDetails = document.createElement("div"); +// siteDetails.id = site + "_conf_details"; +// siteDetails.classList = "hide"; +// +// var urlRules = document.createElement("div"); +// { +// var urlRulesLabel = document.createElement("span"); +// urlRulesLabel.textContent = "URL rule: "; +// +// urlRulesEbox = mkebox(site, uw_sites[site].urlRules[0], "url_rules"); +// +// urlRules.append(urlRulesLabel); +// urlRules.append(urlRulesEbox); +// } +// +// var playerElement = document.createElement("div"); +// +// { +// var playerName = document.createElement("div"); +// +// var playerNameLabel = document.createElement("span"); +// +// playerNameLabel.textContent = "id of the player container:"; +// var playerNameEbox = mkebox(site, uw_sites[site].player.name, "player_name"); +// +// playerName.append(playerNameLabel); +// playerName.append(playerNameEbox); +// +// var playerClass = document.createElement("div"); +// var pcb = document.createElement("input"); +// pcb.className = site + "_ebox"; +// pcb.type = "checkbox"; +// pcb.name = site + "_pccb_name"; +// pcb.id = site + "_pccb_id"; +// pcb.checked = uw_sites[site].player.isClass; +// pcb.disabled = true; +// +// var pcblabel = document.createElement("span"); +// pcblabel.textContent = " Name of the player container is a class"; +// +// playerClass.append(pcb); +// playerClass.append(pcblabel); +// playerElement.append(playerName); +// playerElement.append(playerClass); +// } +// +// var iframe_playerName = document.createElement("div"); +// var ipn_label = document.createElement("span"); +// ipn_label.textContent = "id of the player container when in an iframe:"; +// ipn_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "iframe_name"); +// iframe_playerName.append(ipn_label); +// iframe_playerName.append(ipn_ebox); +// +// var iframe_playerClass = document.createElement("div"); +// var ipc_label = document.createElement("span"); +// ipc_label.textContent = " Name of the player container is a class"; +// var ipc_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "iframe_class"); +// iframe_playerClass.append(ipc_cb); +// iframe_playerClass.append(ipc_label); +// +// +// var sampleButton = document.createElement("div"); +// var sbc = document.createElement("div"); +// var sbi = document.createElement("div"); +// var sbo = document.createElement("div"); +// var sbc_label = document.createElement("span"); +// var sbi_label = document.createElement("span"); +// var sbo_label = document.createElement("span"); +// sbc_label.textContent = "Sample button class:"; +// sbi_label.textContent = "Sample button index:"; +// sbo_label.textContent = "Use height for UI scaling"; +// var sampleButtonClass = mkebox(site, uw_sites[site].sampleButton.class, "sample_button_class"); +// var sampleButtonIndex = mkebox(site, uw_sites[site].sampleButton.index, "sample_button_index"); +// var buttonSizeBase = mkcb(site, uw_sites[site].sampleButton.buttonSizeBase == "y", "sample_button_size_base"); +// +// sbc.append(sbc_label); +// sbc.append(sampleButtonClass); +// sampleButton.append(sbc); +// +// sbi.append(sbi_label); +// sbi.append(sampleButtonIndex); +// sampleButton.append(sbi); +// +// sbo.append(buttonSizeBase); +// sbo.append(sbo_label); +// sampleButton.append(sbo); +// +// var imdbar = document.createElement("div"); +// var imdbar_cb = mkcb(site, uw_sites[site].autoar_imdb, "imdbar"); +// var imdbar_label = document.createElement("span"); +// imdbar_label.textContent = " This site supports automatic aspect ratio detection"; +// imdbar.append(imdbar_cb); +// imdbar.append(imdbar_label); +// +// var imdbar_title = document.createElement("div"); +// var it_label = document.createElement("span"); +// it_label.textContent = "id of the element containing video title:"; +// it_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "", "imdbar_title"); +// imdbar_title.append(it_label); +// imdbar_title.append(it_ebox); +// +// var imdbar_class = document.createElement("div"); +// var ic_label = document.createElement("span"); +// ic_label.textContent = " Name of the title container is a class"; +// var ic_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false, "imdbar_class"); +// imdbar_class.append(ic_cb); +// imdbar_class.append(ic_label); +// +// +// +// +// +// var optionspad = document.createElement("div"); +// optionspad.textContent = "-------------"; +// +// +// siteDetails.append(urlRules); +// siteDetails.append(playerElement); +// siteDetails.append(optionspad); +// siteDetails.append(iframe_playerName); +// siteDetails.append(iframe_playerClass); +// siteDetails.append(optionspad); +// +// siteDetails.append(sampleButton); +// +// siteDetails.append(imdbar); +// siteDetails.append(imdbar_title); +// siteDetails.append(imdbar_class); +// // siteDetails.append(optionspad); +// +// +// displayedInfo.append(siteTitle); +// displayedInfo.append(siteDetails); +// +// entry.append(displayedInfo); +// +// list.append(entry); +// +// category_counter++; +// +// if(site == "dummy" && type == "add new site"){ +// if(debugmsg) +// console.log("uw settings::gotsites | we are adding dummy site"); +// enableEditing("dummy"); +// document.getElementById("dummy_title_ebox").disabled = false; +// } +// } +// } + if(! category_counter){ + var noEntriesMsg = document.createElement("div"); + noEntriesMsg.textContent = "There's no entries in this category yet"; + noEntriesMsg.classList = "red"; + list.append(noEntriesMsg); + } + } + +} + +function mkebox(site, value, id){ + var ebox = document.createElement("input"); + ebox.className = "site_details details_ebox " + site + "_ebox", + ebox.id = site + "_" + id + "_ebox"; + ebox.type = "text"; + ebox.value = value; + ebox.disabled = true; + + return ebox; +} + +function mkcb(site, checked, id, forceEnable){ + var cb = document.createElement("input"); + cb.type = "checkbox"; + cb.name = site + "_cb_name"; + cb.id = site + "_" + id + "_cb"; + cb.checked = checked; + + if(!forceEnable){ + cb.disabled = true; + cb.className = site + "_ebox"; + } + return cb; +} + +function enableEditing(site){ + showSiteDetails(site); + if(debugmsg) + console.log("uw settings :: enableEditing | enabling editing for",site); + + var formElements = document.getElementsByClassName(site + "_ebox"); + + if(!formElements) + return; + + if(debugmsg) + console.log("form elements: ", formElements); + + for(var i = 0; i < formElements.length; i++){ + formElements[i].disabled = false; + } + + var editButton = document.getElementById(site + "_edit_button"); + if( editButton ) + editButton.classList.add("hide"); + else + return; + + try{ + document.getElementById(site + "_save_button").classList.remove("hide"); + document.getElementById(site + "_cancel_button").classList.remove("hide"); + } catch (e){}; +} + +function disableEditing(site){ + var formElements = document.getElementsByClassName(site + "_ebox"); + + if(!formElements) + return; + + for(var i = 0; i < formElements.length; i++){ + formElements[i].disabled = true; + } + + var editButton = document.getElementById(site + "_edit_button"); + if( editButton ) + editButton.classList.remove("hide"); + else + return; + + try{ + document.getElementById(site + "_save_button").classList.add("hide"); + document.getElementById(site + "_cancel_button").classList.add("hide"); + } catch (e){}; +} + +function cancelEditing(site){ + if(site != "dummy"){ + disableEditing(site); + hideSiteDetails(site); + } + setSiteOpts(site, UW_SITES[site]); +} + +function saveEdited(site){ + + console.log("uw settings::saveEdited | this is our site:",site,"is this 'dummy'?", site == "dummy"); + + if(site == "dummy"){ + var newsite = getSiteOpts(site); + newsite.type = "custom"; + newsite.enabled = true; + UW_SITES[document.getElementById("dummy_title_ebox").value] = newsite; + } + else{ + UW_SITES[site] = getSiteOpts(site); +// disableEditing(site); +// hideSiteDetails(site); + } + setopt({ultrawidify_siterules: UW_SITES}); + + if(site == "dummy") + gotsites({ultrawidify_siterules: UW_SITES}); + +} + +function showSiteDetails(site){ + try{ + document.getElementById(site + "_conf_details").classList.remove("hide"); + }catch(me_outside_how_about_that){} +} + +function hideSiteDetails(site){ + try{ + document.getElementById(site + "_conf_details").classList.add("hide"); + }catch(me_outside_how_about_that){} +} + + +function getSiteOpts(site){ + var newOptions = {}; + + newOptions.urlRules = [ document.getElementById(site + "_url_rules_ebox").value ]; + newOptions.player = {}; + newOptions.player.name = document.getElementById(site + "_player_name_ebox").value; + newOptions.player.isClass = document.getElementById(site + "_pccb_id").checked; + newOptions.iframe = {}; + newOptions.iframe.name = document.getElementById(site + "_iframe_name_ebox").value; + newOptions.iframe.isClass = document.getElementById(site + "_iframe_class_cb").checked; + newOptions.autoar_imdb = {}; + newOptions.autoar_imdb.enabled = document.getElementById(site + "_imdbar_cb").value; + newOptions.autoar_imdb.title = document.getElementById(site + "_imdbar_title_ebox").value; + newOptions.autoar_imdb.isClass = document.getElementById(site + "_imdbar_class_cb").checked; + + return newOptions; +} + +function setSiteOpts(site, opts){ + document.getElementById(site + "_url_rules_ebox").value = opts.urlRules[0]; + document.getElementById(site + "_player_name_ebox").value = opts.player.name; + document.getElementById(site + "_pccb_id").checked = opts.player.isClass; + if(opts.iframe){ + document.getElementById(site + "_iframe_name_ebox").value = opts.iframe.name; + document.getElementById(site + "_iframe_class_cb").checked = opts.iframe.isClass; + } + if(opts.autoar_imdb){ + document.getElementById(site + "_imdbar_cb").checked = opts.autoar_imdb.enabled; + if(opts.autoar_imdb.enabled){ + document.getElementById(site + "_imdbar_title_ebox").value = opts.autoar_imdb.title; + document.getElementById(site + "_imdbar_class_cb").value = opts.autoar_imdb.isClass + } + } +} + + +function loadopts(){ + + getopt("ultrawidify_keybinds", gotopts); +// getopt("ultrawidify_autoar", gotar) + getopt("ultrawidify_ui", gotui); + getopt("ultrawidify_siterules", gotsites); + + // We build ui for 'site options' here +// buildSites(); + +} + + +// page init +document.addEventListener("DOMContentLoaded", loadopts); + +document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts); +document.querySelector("#tab_about").addEventListener("click", showAbout); +document.querySelector("#tab_general_settings").addEventListener("click",showGeneralSettings); +document.querySelector("#tab_sites").addEventListener("click", showSites); + +document.querySelector("#kb_save").addEventListener("click", saveopts); +document.querySelector("#kb_cancel").addEventListener("click",loadopts); + +document.querySelector("#enable_autoar").addEventListener("click",saveAutoar); +document.querySelector("#enable_ui").addEventListener("click", saveUI); +document.querySelector("#enable_ui_compact").addEventListener("click", saveUI); +getopt("ultrawidify_autoar",function(obj){document.querySelector("#enable_autoar").checked = obj.ultrawidify_autoar}); diff --git a/src/uw.js b/src/uw.js index fa80530..4e79cd3 100644 --- a/src/uw.js +++ b/src/uw.js @@ -1,45 +1,13 @@ #location js +#include lib/debuginit.js #include conf/uiconf.js #include conf/sitesconf.js #include conf/keybinds.js #include lib/libopts.js #include lib/browser_autodetect.js #include lib/optinit.js - -var usebrowser = "chrome"; -var browser_autodetect = true; - -var debugmsg = true; -var debugmsg_click = false; -var debugmsg_message = false; -var debugmsg_autoar = false; -var debugmsg_periodic = false; -var debugmsg_ui = true; -var force_conf_reload = true; -if(debugmsg || debugmsg_click || debugmsg_message || debugmsg_autoar){ - console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); - console.log("\nLoading ultrawidify (uw)\nIf you can see this, extension at least tried to load\n\nRandom number: ",Math.floor(Math.random() * 20) + 1,"\n"); - - if(debugmsg) - console.log("Logging all"); - - if(debugmsg_click) - console.log("Logging debugmsg_click"); - - if(debugmsg_message) - console.log("Logging debugmsg_message"); - - if(debugmsg_autoar) - console.log("Logging autoar"); - - console.log(". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "); -} - - - - - - +#include conf/uwvars.js +#include lib/player_ui.js const playercheck_recursion_depth_limit = 3; @@ -427,6 +395,8 @@ function stagetracker(op){ return all_done; } + + function extsetup_stage2(op){ if(debugmsg) @@ -444,15 +414,36 @@ function extsetup_stage2(op){ // SITE is set in loadFromStorage. If SITE is still undefined at this point, then we aren't on a known page. if(debugmsg){ - console.log("uw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------"); + console.log("\n\n\n\nuw::extSetup (stage 2) | --------- ENTERING STAGE 2 OF SETUP -----------"); } if(SITE){ + + if(debugmsg){ + console.log("uw::extSetup (stage 2) | site found, starting config"); + console.log("starting uinit ..."); + console.log("progress: %c | |", "background-color: #161211; color: #f51;") + } uinit(); + if(debugmsg){ + console.log("uw::extSetup (stage 2)\nprogress: %c |===> |\nuinit complete\n\n", "background-color: #161211; color: #f51;"); + } + keydownSetup(); + if(debugmsg) + console.log("uw::extSetup (stage 2)\nprogress: %c |=======> |\nkeydownSetup complete\n\n", "background-color: #161211;color: #f51;"); + extsetup_comms(); + if(debugmsg) + console.log("uw::extSetup (stage 2)\nprogress: %c |============> |\nextSetup complete; starting buildUInative\n\n", "background-color: #161211; color: #f51;"); + buildUInative(); + if(debugmsg) + console.log("uw::extSetup (stage 2)\nprogress: %c |=================> |\nbuildUInative complete\n\n", "background-color: #161211; color: #f51;"); + updateUICSS(); + if(debugmsg) + console.log("uw::extSetup (stage 2)\nprogress: %c |========================|\nupdateUICSS complete\n\n", "background-color: #161211; color: #f51;"); if(page_url.indexOf("netflix.com") != -1){ console.log("uw::extSetup (stage 2) | starting netflix-specific setup steps"); @@ -472,47 +463,6 @@ function extsetup_stage2(op){ } -function uinit(){ - if(debugmsg) - console.log("uw::uinit | initializing elements from the webpage"); - - var site = UW_SITES[SITE]; -// var inIframe = inIframe(); - - if(debugmsg) - console.log("uw::uinit | site data:",site,"\n\n\nsite.player.name:", site.player.name,"\nsite.player.isClass:", site.player.isClass); - -// if(inIframe){ -// -// } -// else{ - SITE_ENABLED = site.enabled; - SITE_TYPE = site.type; - SITE_URL_RULES = site.urlRules; - SITE_PROPS = site; - - if(debugmsg) - console.log("uw::uinit | are we in iframe?", inIframe(), "does the site have a separate config for iframe?", site.iframe ? true : false ); - - if(inIframe() && site.iframe){ - console.log("uw::uinit | we're in iframe."); - PLAYER = site.iframe.isClass ? document.getElementsByClassName(site.iframe.name)[0] : document.getElementById(site.iframe.name); - } - else{ - PLAYER = site.player.isClass ? document.getElementsByClassName(site.player.name)[0] : document.getElementById(site.player.name); - } - - SAMPLE_BUTTON_CLASS = site.sampleButton.class; - SAMPLE_BUTTON_INDEX = site.sampleButton.index; - BUTTON_SIZE_BASE = site.sampleButton.buttonSizeBase; -// } - - IMDB_AUTOAR_ALLOWED = site.autoar_imdb.enabled; - - if(debugmsg) - console.log("uw::uinit | initializing elements from the webpage"); -} - function loadFromStorage(){ if(debugmsg || debugmsg_autoar) console.log("uw::loadFromStorage | loading stuff from storage."); @@ -810,166 +760,6 @@ function check4player(recursion_depth){ return false; } -function mkanchor(){ - ui_anchor = document.createElement("div"); - ui_anchor.className = "uw_ui_anchor"; - ui_anchor.id = "uw_ui_anchor"; - - var site = UW_SITES[SITE]; - - if(site.uiParent.insertStrat == "prepend"){ - $(document.getElementsByClassName(site.uiParent.name)[0]).prepend(ui_anchor); - } - -} - -function buildUInative(){ - /** This function builds UI in the native bar. - * - */ - - - if(ui_anchor) - return; - - if(!ui_anchor) - mkanchor(); - - if(UW_UI_MODE == "none"){ - if(debugmsg || debugmsg_ui) - console.log("uw::buildUInative | usersettings say UI shouldn't be displayed. UI will not be built."); - return; - } - if(UW_UI_MODE == "compact"){ - if(debugmsg || debugmsg_ui) - console.log("uw::buildUInative | usersettings say UI should be compact if possible. Checking if possible."); - - if(UW_UI_BANLIST[SITE].settings !== undefined && UW_UI_BANLIST[SITE].settings != "noban"){ - if(debugmsg || debugmsg_ui) - console.log("uw::buildUInative | compact ui is not possible on this site. Reverting to full."); - UW_UI_MODE == "all"; - } - } - - if(debugmsg || debugmsg_ui ) - console.log("uw::buildUInative | starting to build UI"); - - var el; - - if(UW_UI_MODE == "compact"){ // no need for loop if all we add is the 'settings' buton - el = UW_UI_BUTTONS.settings; - uiel = mkbutton(el); - uiel.appendChild(mksubmenu(el)); - ui_anchor.appendChild(uiel); - } - else{ - for(key in UW_UI_BUTTONS){ - - el = UW_UI_BUTTONS[key]; - - if(UW_UI_BANLIST[SITE][key]){ - if(debugmsg) - console.log("uw::buildUInative | we don't show", key, "on site", SITE, ". Doing nothing."); - - continue; - } - - if(!el.native_bar) - continue; - - var uiel; //ui element - - if(el.button){ - uiel = mkbutton(el); - } - - if(!uiel) - continue; - - ui_anchor.appendChild(uiel); - - if(el.has_submenu){ - uiel.appendChild(mksubmenu(el)); - } - } - } - - if(debugmsg || debugmsg_ui ) - console.log("uw::buildUInative | ui finished"); -} - -function mksubmenu(el){ - var submenu = document.createElement("div"); - submenu.id = el.submenu_id; - submenu.className = "uw_element uw_submenu"; - - for(var i = 0; i < el.submenu.length; i++){ - if(UW_UI_BANLIST[SITE][el.submenu[i]]){ - if(debugmsg) - console.log("uw::mksubmenu | we don't show", el.submenu[i], "on site", SITE, ". Doing nothing."); - - continue; - } - submenu.appendChild(mkmenuitem(el.submenu[i])); - } - - return submenu; -} - -function mkmenuitem(key){ - var el = UW_UI_BUTTONS[key]; - var item = document.createElement("div"); - item.textContent = el.text; - item.className = "uw-setmenu-item uw_element"; - item.onclick = function(event){ event.stopPropagation(); el.onclick(); hideAllMenus(); }; - - if(el.has_submenu){ - item.appendChild(mksubmenu(el)); - - if(debugmsg){ - console.log("uw::mkmenuitem | we are:", el, "; do we have parent?",el.parent,"parent id:",UW_UI_BUTTONS[el.parent].submenu_id, UW_UI_BUTTONS[el.parent].submenu_id === "uw_settings_menu"); - } - - if(el.parent) - $(item).on("mouseenter", function(){ - // We determine where the submenu goes - to the left or to the right. showMenu handles position, - // this function gets sizes of all objects - var div = document.getElementById(UW_UI_BUTTONS[el.parent].submenu_id); - var supmenusize = div.getBoundingClientRect(); - div = document.getElementById(el.submenu_id); - var submenusize = div.getBoundingClientRect(); - var playersize = player.getBoundingClientRect(); - - if(debugmsg) - console.log("uw::mouseenter | parent menu size:",supmenusize,"submenu size:",submenusize,"player size:",playersize); - - showMenu(el.submenu_id, {parent:supmenusize, submenu:submenusize, player:playersize}); - }); - 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.className += " uw_button uw_element"; - button.onclick = function(event) {event.stopPropagation(); el.onclick() }; - - if(debugmsg | debugmsg_ui) - console.log("uw::mkbutton | button completed"); - - return button; -} - function hideAllMenus(){ var el; for(key in UW_UI_BUTTONS){