tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tab switching in popup fixed

Browse Source
This commit is contained in:
Tamius Han 2018-11-26 21:12:24 +01:00
parent 5a43011797
commit ebf1058dda
3 changed files with 58 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
res/popup/js/popup.js
View File

@ -36,14 +36,26 @@ var selectedSubitemLoaded = false;
//#region build ui
var tablist = {
'extensionSettings': new MenuItem('_menu_item_settings_ext', 'Extension settings', '', () => showMenu('extensionSettings')),
'siteSettings': new MenuItem('_menu_item_settings_site', 'Site settings', 'Settings for current site', () => showMenu('siteSettings')),
'videoSettings': new MenuItem('_menu_item_settings_video', 'Video settings', 'Crop & stretch options for videos on current page', () => showMenu('videoSettings')),
'about': new MenuItem('_menu_item_about', 'About Ultrawidify', '', () => showMenu('about'))
'extensionSettings': {
tab: new MenuItem('_menu_item_settings_ext', 'Extension settings', '', () => showMenu('extensionSettings')),
container: GlobalPanel.container,
},
'siteSettings': {
tab: new MenuItem('_menu_item_settings_site', 'Site settings', 'Settings for current site', () => showMenu('siteSettings')),
container: SitePanel.container
},
'videoSettings': {
tab: new MenuItem('_menu_item_settings_video', 'Video settings', 'Crop & stretch options for videos on current page', () => showMenu('videoSettings')),
container: VideoPanel.container
},
'about': {
tab: new MenuItem('_menu_item_about', 'About Ultrawidify', '', () => showMenu('about')),
container: AboutPanel.container
}
};
for (let t in tablist) {
tablist[t].appendTo(document.getElementById('tablist'));
tablist[t].tab.appendTo(document.getElementById('tablist'));
}
@ -60,7 +72,7 @@ function loadFrames(videoTab) {
}
function onTabitemClick(item) {
tablist[selectedMenu].selectSubitem(item);
tablist[selectedMenu].tab.selectSubitem(item);
selectedSubitem[selectedMenu] = item;
port.postMessage({cmd: 'popup-set-selected-tab', selectedMenu: selectedMenu, selectedSubitem: item});
}
@ -75,8 +87,8 @@ function loadFrames(videoTab) {
() => onTabitemClick(id)
);
tablist['siteSettings'].insertSubitem(newItem);
tablist['videoSettings'].insertSubitem(newItem);
tablist['siteSettings'].tab.insertSubitem(newItem);
tablist['videoSettings'].tab.insertSubitem(newItem);
}
@ -90,28 +102,26 @@ function loadFrames(videoTab) {
(click) => onTabitemClick(nid)
);
tablist['siteSettings'].insertSubitem(newItem);
tablist['videoSettings'].insertSubitem(newItem);
tablist['siteSettings'].tab.insertSubitem(newItem);
tablist['videoSettings'].tab.insertSubitem(newItem);
}
console.log("TIME TO SELECT SUBITEM", selectedSubitem, "\nexists subitem in site settings/video settings?", selectedSubitem && tablist['siteSettings'].existsSubitem(selectedSubitem.siteSettings), selectedSubitem && tablist['videoSettings'].existsSubitem(selectedSubitem.videoSettings))
if (! selectedSubitem.siteSettings || !tablist['siteSettings'].existsSubitem(selectedSubitem.siteSettings)) {
selectedSubitem['siteSettings'] = tablist['siteSettings'].selectFirstSubitem();
if (! selectedSubitem.siteSettings || !tablist['siteSettings'].tab.existsSubitem(selectedSubitem.siteSettings)) {
selectedSubitem['siteSettings'] = tablist['siteSettings'].tab.selectFirstSubitem();
console.log("selected first subitem!")
} else {
tablist['siteSettings'].selectSubitem(selectedSubitem.siteSettings)
tablist['siteSettings'].tab.selectSubitem(selectedSubitem.siteSettings)
}
if (! selectedSubitem.videoSettings || !tablist['videoSettings'].existsSubitem(selectedSubitem.videoSettings)) {
selectedSubitem['videoSettings'] = tablist['videoSettings'].selectFirstSubitem();
if (! selectedSubitem.videoSettings || !tablist['videoSettings'].tab.existsSubitem(selectedSubitem.videoSettings)) {
selectedSubitem['videoSettings'] = tablist['videoSettings'].tab.selectFirstSubitem();
console.log("selected first subitem (vs)!")
} else {
tablist['videoSettings'].selectSubitem(selectedSubitem.videoSettings);
tablist['videoSettings'].tab.selectSubitem(selectedSubitem.videoSettings);
}
}
//#endregion
async function processReceivedMessage(message, port){
if (Debug.debug) {
console.log("[popup.js] received message", message)
@ -445,19 +455,25 @@ function openMenu(menu){
}
function showMenu(tab) {
if(Debug.debug) {
console.log("[popup.js::showMenu] opening menu", tab, "tablist?", tablist)
}
if (!tablist) {
// todo: fix & remove this
return;
}
for (const i in tablist) {
tablist[i].unselect();
tablist[i].hideSubitems();
tablist[i].tab.unselect();
tablist[i].tab.hideSubitems();
tablist[i].container.hide();
}
tablist[tab].select();
tablist[tab].showSubitems();
tablist[tab].tab.select();
tablist[tab].tab.showSubitems();
tablist[tab].container.show();
// todo: display the correct tab
selectedMenu = tab;
}

23
res/popup/js/popupvars.js
View File

@ -1,5 +1,6 @@
//#region GlobalPanel
var GlobalPanel = {};
GlobalPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_global'))
GlobalPanel.elements = {};
GlobalPanel.elements.extensionSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status')),
@ -21,20 +22,21 @@ GlobalPanel.elements.alignmentSettings = {
//#region SitePanel
var SitePanel = {};
GlobalPanel.elements = {};
GlobalPanel.elements.extensionSettings = {
SitePanel.elements = {};
SitePanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_site'))
SitePanel.elements.extensionSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status_buttons'))
}
GlobalPanel.elements.autoarSettings = {
SitePanel.elements.autoarSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar_buttons'))
}
GlobalPanel.elements.stretchSettings = {
SitePanel.elements.stretchSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop_buttons'))
};
GlobalPanel.elements.alignmentSettings = {
SitePanel.elements.alignmentSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment_buttons'))
};
@ -45,6 +47,7 @@ GlobalPanel.elements.alignmentSettings = {
//#region VideoPanel
var VideoPanel = {};
VideoPanel.elements = {};
VideoPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_video'))
VideoPanel.elements.cropSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop_buttons'))
@ -79,4 +82,12 @@ VideoPanel.labels.zoomLevel = document.getElementById("_label_zoom_level"
// misc stuff
VideoPanel.misc = {};
VideoPanel.misc.zoomShortcuts = document.getElementById("_zoom_shortcuts");
//#endregion
//#endregion
//#region about
var AboutPanel = {};
AboutPanel.container = BaseElement.fromExisting(document.getElementById('_menu_about'))
//#endregion

7
res/popup/popup.html
View File

@ -24,17 +24,16 @@
<!-- <div id="script-not-running-warning" class="warning">If you see this line, then your browser didn't start the popup script yet. This is a problem caused by the browser. Please wait a few seconds.</div> -->
<!-- EXTENSION SETTINGS -->
<div id="_menu_settings_ext" class="suboption hidden">
<div id="_menu_settings_global" class="suboption hidden">
<p>These settings can be overriden on per-site basis.</p>
<div class="row">
<div id="_menu_settings_site_status" class="row">
<div id="_menu_settings_global_status" class="row">
<span class="label experimental">Extension status</span>
<div id="_menu_settings_global_status_buttons" class="button-row">
</div>
</div>
<div id="_menu_settings_site_autoar" class="row">
<div id="_menu_settings_global_autoar" class="row">
<span class="label experimental">Automatic detection</span>
<div id="_menu_settings_global_autoar_buttons" class="button-row">
</div>