Selecting popup buttons in 'site settings' and 'extension settings'

js/conf/ExtensionConf.js

@@ -401,7 +401,7 @@ var ExtensionConf = {
   {
     cmd: [{
       action: 'set-stretch',
-      arg: 'NO_STRETCH',
+      arg: 0,
     }],
     popup: true,
     popup_site: true,
@@ -411,7 +411,7 @@ var ExtensionConf = {
   },{
     cmd: [{
       action: 'set-stretch',
-      arg: 'BASIC',
+      arg: 1,
     }],
     popup: true,
     popup_site: true,
@@ -421,7 +421,7 @@ var ExtensionConf = {
   },{
     cmd: [{
       action: 'set-stretch',
-      arg: 'HYBRID',
+      arg: 2,
     }],
     popup: true,
     popup_site: true,
@@ -431,7 +431,7 @@ var ExtensionConf = {
   },{
     cmd: [{
       action: 'set-stretch',
-      arg: 'CONDITIONAL',
+      arg: 3,
     }],
     popup: true,
     popup_site: true,

js/lib/Comms.js

@@ -71,7 +71,7 @@ class CommsClient {
       this.pageInfo.setVideoFloat(message.arg, message.playing);
       this.pageInfo.restoreAr();
     } else if (message.cmd === "set-stretch") {
-      this.pageInfo.setStretchMode(StretchMode[message.arg], message.playing);
+      this.pageInfo.setStretchMode(message.arg, message.playing);
     } else if (message.cmd === "autoar-start") {
       if (message.enabled !== false) {
         this.pageInfo.initArDetection(message.playing);

res/popup/js/popup.js

@@ -195,12 +195,13 @@ function configurePopupTabs(site) {
 
 
 
-function basicCommandHandler(cmdArray) {
+function basicCommandHandler(cmdArray, scope) {
   for (cmd of cmdArray) {
     port.postMessage({
       cmd: cmd.action,
       arg: cmd.arg,
-      targetFrame: selectedSubitem[selectedMenu]
+      targetFrame: selectedSubitem[selectedMenu],
+      scope: scope
     });
   }
 }
@@ -225,10 +226,11 @@ function buildKeyboardShortcutString(keypress) {
   return shortcutCombo;
 } 
 
-function processButtonsForPopupCategory(category, buttons) {
+function processButtonsForPopupCategory(category, buttons, scope) {
   if (buttons.length === 0) {
     category.container.hide();
   } else {
+    category.buttons = {};
     category.buttonContainer.removeChildren();
     category.container.show();
     category.buttonContainer.show();
@@ -244,51 +246,47 @@ function processButtonsForPopupCategory(category, buttons) {
         '',
         button.label,
         shortcutCombo,
-        () => basicCommandHandler(cmd),
+        () => basicCommandHandler(cmd, scope),
         ['w24']
       )
       nb.appendTo(category.buttonContainer);
+
+      var buttonId = '';
+      for (var c in cmd) {
+        buttonId += `${c > 0 ? ';' : ''}${cmd[c].action}:${cmd[c].arg}`;
+      }
+      category.buttons[buttonId] = nb;
     }
   }
 }
 
+function selectButton(action, arg, buttons) {
+  for (var b in buttons) {
+    buttons[b].unselect();
+  }
+  const cmd=`${action}:${arg}`
+  
+  if (buttons[cmd]) {
+    buttons[cmd].select();
+  }
+  console.log("SSSSSSSSSSSSSSSSSSS\nselecting button:", cmd, "\nbuttons", buttons)
+}
+
 function configureGlobalTab() {
   const popupButtons = settings.getActionsForSite(site).filter(action => action.popup_global === true); 
 
   const stretchButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-stretch');
   const alignButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-alignment');
 
-  processButtonsForPopupCategory(VideoPanel.elements.stretchSettings, stretchButtons);
+  processButtonsForPopupCategory(GlobalPanel.elements.stretchSettings, stretchButtons);
-  processButtonsForPopupCategory(VideoPanel.elements.alignmentSettings, alignButtons);
+  processButtonsForPopupCategory(GlobalPanel.elements.alignmentSettings, alignButtons);
+
+  selectButton('set-stretch', settings.active.stretch.initialMode, GlobalPanel.elements.stretchSettings.buttons);
+  selectButton('set-alignment', settings.active.miscFullscreenSettings.videoFloat, GlobalPanel.elements.alignmentSettings.buttons);
 
   return; // todo: revisit
-  if (Debug.debug) {
-    console.log("[popup.js] Configuring global tab (ExtPanel).",
-    "\nextension mode:  ", settings.active.extensionMode,
-    "\narDetect mode:   ", settings.active.arDetect.mode,
-    "\nvideo float mode:", settings.active.miscFullscreenSettings.videoFloat,
-    "\nstretch mode:    ", settings.active.stretch.initialMode,
-    "\n..")
-  }
-
-
-  for(var button in ExtPanel.extOptions) {
-    ExtPanel.extOptions[button].classList.remove("selected");
-  }
-  for(var button in ExtPanel.arOptions) {
-    ExtPanel.arOptions[button].classList.remove("selected");
-  }
-  for(var button in ExtPanel.alignment) {
-    ExtPanel.alignment[button].classList.remove("selected");
-  }
-  for(var button in ExtPanel.stretch) {
-    ExtPanel.stretch[button].classList.remove("selected");
-  }
-
   ExtPanel.extOptions[settings.active.extensionMode].classList.add("selected");
   ExtPanel.arOptions[settings.active.arDetect.mode].classList.add("selected");
-  ExtPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
-  ExtPanel.stretch[settings.active.stretch.initialMode].classList.add("selected");
 }
 
 function configureSitesTab(site) {
@@ -297,20 +295,23 @@ function configureSitesTab(site) {
   const stretchButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-stretch');
   const alignButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-alignment');
 
-  processButtonsForPopupCategory(VideoPanel.elements.stretchSettings, stretchButtons);
+  processButtonsForPopupCategory(SitePanel.elements.stretchSettings, stretchButtons, 'site');
-  processButtonsForPopupCategory(VideoPanel.elements.alignmentSettings, alignButtons);
+  processButtonsForPopupCategory(SitePanel.elements.alignmentSettings, alignButtons, 'site');
+
+  // optional settings:
+  if(settings.active.sites[site.host] && settings.active.sites[site.host].stretch !== undefined) {  // can be 0
+    selectButton('set-stretch', settings.active.sites[site.host].stretch, SitePanel.elements.stretchSettings.buttons)
+  } else {
+    selectButton('set-stretch', -1, SitePanel.elements.stretchSettings.buttons)
+  }
+
+  if (settings.active.sites[site.host] && settings.active.sites[site.host].videoAlignment) {
+    selectButton('set-alignment', settings.active.sites[site.host].videoAlignment, SitePanel.elements.alignmentSettings.buttons);
+  } else {
+    selectButton('set-alignment', 'default', SitePanel.elements.alignmentSettings.buttons);
+  }
 
   return; // todo: revisit
-  if (Debug.debug) {
-    console.log("[popup.js] Configuring sites tab (SitePanel).",
-    "\nsite:            ", site,
-    "\nextension mode:    ", settings.active.sites[site.host] ? settings.active.sites[site.host].status : 'no site-special settings for this site',
-    "\narDetect mode:   ", settings.active.sites[site.host] ? settings.active.sites[site.host].arStatus : 'no site-special settings for this site',
-    "\nvideo float mode:", settings.active.sites[site.host] ? settings.active.sites[site.host].videoFloat : 'no site-special settings for this site',
-    "\ndefault ar:      ", settings.active.sites[site.host] ? settings.active.sites[site.host].ar : 'no site-special settings for this site',
-    "\nstretch mode:    ", settings.active.sites[site.host] ? settings.active.sites[site.host].stretch : 'no site-special settings for this site',
-    "\n...")
-  }
 
   for(const button in SitePanel.extOptions) {
     SitePanel.extOptions[button].classList.remove("selected");
@@ -334,18 +335,7 @@ function configureSitesTab(site) {
     SitePanel.arOptions.default.classList.add("selected");
   }
 
-  // optional settings:
-  if (settings.active.sites[site.host] && settings.active.sites[site.host].videoAlignment) {
-    SitePanel.alignment[settings.active.sites[site.host].videoAlignment].classList.add("selected");
-  } else {
-    SitePanel.alignment.default.classList.add('selected');
-  }
 
-  if(settings.active.sites[site.host] && settings.active.sites[site.host].stretch !== undefined) {  // can be 0
-    SitePanel.stretch[settings.active.sites[site.host].stretch].classList.add("selected");
-  } else {
-    SitePanel.stretch['-1'].classList.add("selected");
-  }
 }
 
 function configureVideoTab(site) {

res/popup/js/popupvars.js

@@ -3,18 +3,22 @@ var GlobalPanel = {};
 GlobalPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_global'))
 GlobalPanel.elements = {};
 GlobalPanel.elements.extensionSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status_buttons'))
 }
 GlobalPanel.elements.autoarSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_autoar')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_autoar_buttons'))
 }
 GlobalPanel.elements.stretchSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_crop')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_stretch_buttons'))
 }
 GlobalPanel.elements.alignmentSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_alignment')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_alignment_buttons'))
 }
@@ -25,16 +29,19 @@ var SitePanel = {};
 SitePanel.elements = {};
 SitePanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_site'))
 SitePanel.elements.extensionSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status_buttons'))
 }
 SitePanel.elements.autoarSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar_buttons'))
 }
 SitePanel.elements.stretchSettings = {
-  container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop')),
+  buttons: {},
-  buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop_buttons'))
+  container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_stretch')),
+  buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_stretch_buttons'))
 };
 SitePanel.elements.alignmentSettings = {
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment')),
@@ -49,18 +56,23 @@ var VideoPanel = {};
 VideoPanel.elements = {};
 VideoPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_video'))
 VideoPanel.elements.cropSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop_buttons'))
 }
 VideoPanel.elements.stretchSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_stretch')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_stretch_buttons'))
 }
 VideoPanel.elements.alignmentSettings = {
+  buttons: {},
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_alignment')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_alignment_buttons'))
 }
 
+// THE FOLLOWING BUTTONS ARE STILL HANDLED THE OLD-FASHIONED WAY
+// DO NOT REMOVE
 // buttons: for toggle, select
 VideoPanel.buttons = {};
 VideoPanel.buttons.zoom = {};