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

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

@ -1,5 +1,6 @@
//#region GlobalPanel //#region GlobalPanel
var GlobalPanel = {}; var GlobalPanel = {};
GlobalPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_global'))
GlobalPanel.elements = {}; GlobalPanel.elements = {};
GlobalPanel.elements.extensionSettings = { GlobalPanel.elements.extensionSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status')), container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status')),
@ -21,20 +22,21 @@ GlobalPanel.elements.alignmentSettings = {
//#region SitePanel //#region SitePanel
var SitePanel = {}; var SitePanel = {};
GlobalPanel.elements = {}; SitePanel.elements = {};
GlobalPanel.elements.extensionSettings = { SitePanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_site'))
SitePanel.elements.extensionSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status')), container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status_buttons')) 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')), container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar_buttons')) 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')), container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop_buttons')) 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')), container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment_buttons')) buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment_buttons'))
}; };
@ -45,6 +47,7 @@ GlobalPanel.elements.alignmentSettings = {
//#region VideoPanel //#region VideoPanel
var VideoPanel = {}; var VideoPanel = {};
VideoPanel.elements = {}; VideoPanel.elements = {};
VideoPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_video'))
VideoPanel.elements.cropSettings = { VideoPanel.elements.cropSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop')), container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop_buttons')) buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop_buttons'))
@ -79,4 +82,12 @@ VideoPanel.labels.zoomLevel = document.getElementById("_label_zoom_level"
// misc stuff // misc stuff
VideoPanel.misc = {}; VideoPanel.misc = {};
VideoPanel.misc.zoomShortcuts = document.getElementById("_zoom_shortcuts"); 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> --> <!-- <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 --> <!-- 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> <p>These settings can be overriden on per-site basis.</p>
<div class="row"> <div class="row">
<div id="_menu_settings_global_status" class="row">
<div id="_menu_settings_site_status" class="row">
<span class="label experimental">Extension status</span> <span class="label experimental">Extension status</span>
<div id="_menu_settings_global_status_buttons" class="button-row"> <div id="_menu_settings_global_status_buttons" class="button-row">
</div> </div>
</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> <span class="label experimental">Automatic detection</span>
<div id="_menu_settings_global_autoar_buttons" class="button-row"> <div id="_menu_settings_global_autoar_buttons" class="button-row">
</div> </div>