Popup menus are showing properly.
This commit is contained in:
Tamius Han
parent
de2677fdd6
commit
0f2d786780
18
js/modules/PageInfo.js
Normal file
18
js/modules/PageInfo.js
Normal file
@ -0,0 +1,18 @@
|
||||
if(Debug.debug)
|
||||
console.log("Loading: PageInfo.js");
|
||||
|
||||
var _pi_hasVideos = function(){
|
||||
var videos = document.getElementsByTagName("video");
|
||||
if(videos.length == 0)
|
||||
return false;
|
||||
|
||||
if(videos[0].style.display == "none") // in this case ultrawidify doesn't even work
|
||||
return false;
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
var PageInfo = {
|
||||
hasVideos: _pi_hasVideos
|
||||
}
|
||||
19
js/uw-bg.js
19
js/uw-bg.js
@ -16,21 +16,26 @@ async function sendMessage(message){
|
||||
if(Debug.debug)
|
||||
console.log("[uw-bg::sendMessage] trying to send message", message, " to tab ", tabs[0], ". (all tabs:", tabs,")");
|
||||
|
||||
browser.tabs.sendMessage(tabs[0].id, message);
|
||||
var response = await browser.tabs.sendMessage(tabs[0].id, message);
|
||||
return response;
|
||||
}
|
||||
|
||||
async function _uwbg_rcvmsg(message){
|
||||
|
||||
if(Debug.debug){
|
||||
console.log("received message", message);
|
||||
console.log("[uw-bg::_uwbg_rcvmsg] received message", message);
|
||||
|
||||
}
|
||||
/*
|
||||
message.sender = "uwbg";
|
||||
message.receiver = "uw";*/
|
||||
|
||||
if(message.cmd == "debug-ping"){
|
||||
|
||||
message.sender = "uwbg";
|
||||
message.receiver = "uw";
|
||||
|
||||
if(message.cmd == "has-videos"){
|
||||
var response = await sendMessage(message);
|
||||
if(Debug.debug){
|
||||
console.log("[uw-bg::_uwbg_rcvmsg] received response!", message);
|
||||
}
|
||||
return Promise.resolve(response);
|
||||
}
|
||||
else if(message.cmd == "force-ar"){
|
||||
sendMessage(message); // args: {cmd: string, newAr: number/"auto"}
|
||||
|
||||
6
js/uw.js
6
js/uw.js
@ -108,6 +108,12 @@ function receiveMessage(message) {
|
||||
if(message.cmd == "reload-settings"){
|
||||
Settings.reload();
|
||||
}
|
||||
if(message.cmd == "has-videos"){
|
||||
var anyVideos = PageInfo.hasVideos();
|
||||
return Promise.resolve({response: {"hasVideos": anyVideos }});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
main();
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
|
||||
"js/lib/FullScreenDetect.js",
|
||||
|
||||
"js/modules/PageInfo.js",
|
||||
"js/modules/ArDetect.js",
|
||||
"js/modules/Resizer.js",
|
||||
"js/conf/Keybinds.js",
|
||||
|
||||
@ -1,35 +1,117 @@
|
||||
if(Debug.debug)
|
||||
console.log("[popup.js] loading popup script!");
|
||||
|
||||
document.getElementById("uw-version").textContent = browser.runtime.getManifest().version;
|
||||
|
||||
async function test(){
|
||||
await StorageManager.getopt_async("uw-settings");
|
||||
console.log("popup: settings machine :b:roke?", Settings);
|
||||
var Menu = {};
|
||||
Menu.noVideo = document.getElementById("no-videos-display");
|
||||
Menu.general = document.getElementById("extension-mode");
|
||||
Menu.arSettings = document.getElementById("aspect-ratio-settings");
|
||||
Menu.cssHacks = document.getElementById("css-hacks-settings");
|
||||
Menu.about = document.getElementById("panel-about");
|
||||
|
||||
var MenuTab = {};
|
||||
MenuTab.general = document.getElementById("_menu_general");
|
||||
MenuTab.arSettings = document.getElementById("_menu_aspectratio");
|
||||
MenuTab.cssHacks = document.getElementById("_menu_hacks");
|
||||
MenuTab.about = document.getElementById("_menu_about");
|
||||
|
||||
var selectedMenu = "arSettings";
|
||||
var hasVideos = false;
|
||||
|
||||
function check4videos(){
|
||||
var command = {};
|
||||
command.cmd = "has-videos";
|
||||
command.sender = "popup";
|
||||
command.receiver = "uwbg";
|
||||
|
||||
browser.runtime.sendMessage(command)
|
||||
.then(response => {
|
||||
if(Debug.debug)
|
||||
console.log("[popup.js::check4videos] received response:",response);
|
||||
|
||||
if(response.response.hasVideos){
|
||||
hasVideos = true;
|
||||
openMenu(selectedMenu);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if(Debug.debug)
|
||||
console.log("%c[popup.js::check4videos] sending message failed with error", "color: #f00", error, "%c retrying in 1s ...", "color: #f00");
|
||||
|
||||
setTimeout(check4videos, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
function changeAr(ar){
|
||||
if(Debug.debug)
|
||||
console.log("[popup.js] changing ar to ", ar)
|
||||
function openMenu(menu){
|
||||
if(Debug.debug){
|
||||
console.log("[popup.js::openMenu] trying to open menu", menu, "| element: ", Menu[menu]);
|
||||
}
|
||||
|
||||
for(var m in Menu){
|
||||
Menu[m].classList.add("hidden");
|
||||
}
|
||||
for(var m in MenuTab){
|
||||
if(MenuTab[m])
|
||||
MenuTab[m].classList.remove("selected");
|
||||
}
|
||||
|
||||
if(menu == "arSettings" || menu == "cssHacks" ){
|
||||
if(!hasVideos)
|
||||
Menu.noVideo.classList.remove("hidden");
|
||||
else{
|
||||
Menu[menu].classList.remove("hidden");
|
||||
if(Debug.debug){
|
||||
console.log("[popup.js::openMenu] unhid", menu, "| element: ", Menu[menu]);
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
Menu[menu].classList.remove("hidden");
|
||||
if(Debug.debug){
|
||||
console.log("[popup.js::openMenu] unhid", menu, "| element: ", Menu[menu]);
|
||||
}
|
||||
}
|
||||
|
||||
if(menu != "noVideo"){
|
||||
selectedMenu = menu;
|
||||
MenuTab[menu].classList.add("selected");
|
||||
}
|
||||
}
|
||||
|
||||
test();
|
||||
|
||||
// browser.runtime.sendMessage("test");
|
||||
|
||||
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
|
||||
console.log("we clicked. e?",e);
|
||||
// console.log("we clicked. e?",e);
|
||||
|
||||
function getcmd(e){
|
||||
console.log("extracting command from e", e);
|
||||
// console.log("extracting command from e", e);
|
||||
|
||||
var command = {};
|
||||
command.sender = "popup";
|
||||
command.receiver = "uwbg";
|
||||
|
||||
if(e.target.classList.contains("disabled"))
|
||||
return;
|
||||
|
||||
if(e.target.classList.contains("menu-item")){
|
||||
if(e.target.classList.contains("_menu_general")){
|
||||
openMenu("general");
|
||||
}
|
||||
else if(e.target.classList.contains("_menu_aspectratio")){
|
||||
openMenu("arSettings");
|
||||
}
|
||||
else if(e.target.classList.contains("_menu_hacks")){
|
||||
openMenu("cssHacks");
|
||||
}
|
||||
else if(e.target.classList.contains("_menu_about")){
|
||||
openMenu("about");
|
||||
}
|
||||
|
||||
// don't send commands
|
||||
return;
|
||||
}
|
||||
|
||||
if(e.target.classList.contains("_changeAr")){
|
||||
if(e.target.classList.contains("_ar_auto")){
|
||||
command.cmd = "force-ar";
|
||||
@ -101,6 +183,10 @@ document.addEventListener("click", (e) => {
|
||||
}
|
||||
|
||||
var command = getcmd(e);
|
||||
console.log("command: ", command);
|
||||
browser.runtime.sendMessage(command);
|
||||
if(command)
|
||||
browser.runtime.sendMessage(command);
|
||||
});
|
||||
|
||||
|
||||
|
||||
check4videos();
|
||||
|
||||
@ -5,10 +5,11 @@
|
||||
<style>
|
||||
html, body {
|
||||
width: 780px !important;
|
||||
max-width: 800px !important;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
/* width: 100%; */
|
||||
color: #f1f1f1;
|
||||
color: #f8f8f8;
|
||||
background-color: #1f1f1f;
|
||||
font-family: "Overpass";
|
||||
}
|
||||
@ -27,10 +28,12 @@
|
||||
}
|
||||
|
||||
.selected{
|
||||
color: #090909;
|
||||
background-color: #fa6607;
|
||||
color: #ffddaa;
|
||||
background-color: #433221;
|
||||
}
|
||||
.disabled {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #7f1416;
|
||||
color: #fff;
|
||||
@ -42,6 +45,12 @@
|
||||
font-size: 2.7em;
|
||||
}
|
||||
|
||||
.menu-item-inline-desc{
|
||||
font-size: 0.60em;
|
||||
font-weight: 300;
|
||||
font-variant: normal;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
display: inline-block;
|
||||
width: 39%;
|
||||
@ -59,11 +68,14 @@
|
||||
padding-left: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.suboption {
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
padding-top: 5px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.button {
|
||||
@ -87,7 +99,11 @@
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#no-videos-display {
|
||||
height: 100%;
|
||||
padding-top: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -95,17 +111,24 @@
|
||||
U<span class="smallcaps">ltrawidify</span>: <small>Quick settings</small>
|
||||
</div>
|
||||
<div class="left-side">
|
||||
<div class="menu-item selected">
|
||||
<div id="_menu_general" class="menu-item disabled _menu_general">
|
||||
General settings
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="_menu_aspectratio" class="menu-item selected _menu_aspectratio">
|
||||
Aspect ratio and alignment
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="_menu_csshacks" class="menu-item disabled hidden _menu_hacks">
|
||||
CSS hacks for this site
|
||||
</div>
|
||||
<div id="_menu_about" class="menu-item _menu_about">
|
||||
About Ultrawidify<span class="menu-item-inline-desc"><br/>See for bug reports</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div id="no-videos-display" class="suboption">
|
||||
No videos have been found on this page.<br/><small>NOTE: iframes are <b>not</b> detected by this popup. You need a keyboard / to enable automatic aspect ratio detection to fix aspect ratio in embedded players.<br/>Embedded players must also be in full screen.</small>
|
||||
</div>
|
||||
|
||||
<div id="extension-mode" class="suboption hidden">
|
||||
<p>How should extension work in general?<br/><small>NOTE: settings will be applied when page is reloaded.</small></p>
|
||||
|
||||
@ -123,7 +146,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="aspect-ratio-settings" class="suboption">
|
||||
<div id="aspect-ratio-settings" class="suboption hidden">
|
||||
<div class="row">
|
||||
Force aspect ratio:<br/>
|
||||
<div class="button-row">
|
||||
@ -143,19 +166,27 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
Video alignment:
|
||||
<div class="button-row">
|
||||
<a class="button _align _align_left">left</a>
|
||||
<a class="button _align _align_center">center</a>
|
||||
<a class="button _align _align_right">right</a>
|
||||
Video alignment:
|
||||
<div class="button-row">
|
||||
<a class="button _align _align_left">left</a>
|
||||
<a class="button _align _align_center">center</a>
|
||||
<a class="button _align _align_right">right</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="css-hacks-settings" class="suboption hidden">
|
||||
<p>If zoomed in video doesn't align properly, try enabling or disabling certain CSS rules below:</p>
|
||||
</div>
|
||||
|
||||
<div id="panel-about" class="suboption hidden">
|
||||
<div class="row">
|
||||
Ultrawidify version: <span id="uw-version"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
Having an issue? Report <strike>undocumented features</strike>bugs <a href="https://github.com/xternal7/ultrawidify/issues">here</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- load all scripts. ordering is important! -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user