Update the code to better handle the dropdown menus

saltgui/static/scripts/Character.js

@@ -26,6 +26,7 @@ export class Character {
     Character.BLACK_RIGHT_POINTING_POINTER = "\u25BA";
     Character.WHITE_DOWN_POINTING_TRIANGLE = "\u25BD";
     Character.BLACK_DIAMOND = "\u25C6";
+    Character.WHITE_CIRCLE = "\u25CB";
     Character.BLACK_CIRCLE = "\u25CF";
     Character.BALLOT_BOX_UNCHECKED = "\u2610";
     Character.BALLOT_BOX_WITH_CHECK = "\u2611";

saltgui/static/scripts/CommandBox.js

@@ -2,7 +2,7 @@
 
 import {Character} from "./Character.js";
 import {Documentation} from "./Documentation.js";
-import {DropDownMenu} from "./DropDown.js";
+import {DropDownMenuCmd} from "./DropDownCmd.js";
 import {Output} from "./output/Output.js";
 import {ParseCommandLine} from "./ParseCommandLine.js";
 import {Router} from "./Router.js";
@@ -18,14 +18,15 @@ export class CommandBox {
     this.api = pApi;
 
     const cmdbox = document.getElementById("cmd-box");
-    this.cmdmenu = new DropDownMenu(cmdbox);
+    this.cmdmenu = new DropDownMenuCmd(cmdbox);
 
-    this.documentation = new Documentation(this.router, this);
     this._registerCommandBoxEventListeners();
 
     RunType.createMenu();
     TargetType.createMenu();
 
+    this.documentation = new Documentation(pRouter, this);
+
     const manualRun = document.getElementById("popup-run-command");
     Utils.addTableHelp(manualRun, "Click for help", "bottom-center");
     const helpButton = manualRun.querySelector("#help");
@@ -58,7 +59,7 @@ export class CommandBox {
       CommandBox.templateCatMenu.setTitle("");
       return;
     }
-    const menu = new DropDownMenu(titleElement);
+    const menu = new DropDownMenuCmd(titleElement);
     menu.setTitle("");
     menu.menuButton.classList.add("small-button-left");
     CommandBox.templateCatMenu = menu;
@@ -70,7 +71,7 @@ export class CommandBox {
     }
     categories.unshift(null);
     for (const category of categories) {
-      menu.addMenuItem(
+      menu.addMenuItemCmd(
         () => CommandBox._templateCatMenuItemTitle(category),
         () => {
           CommandBox.templateTmplMenu._templateCategory = category;
@@ -120,7 +121,7 @@ export class CommandBox {
       CommandBox.templateTmplMenu._templateCategory = null;
       return;
     }
-    const menu = new DropDownMenu(titleElement);
+    const menu = new DropDownMenuCmd(titleElement);
     menu.menuButton.classList.add("small-button-left");
     CommandBox.templateTmplMenu = menu;
     CommandBox.templateTmplMenu._templateCategory = null;
@@ -132,7 +133,7 @@ export class CommandBox {
       if (!description) {
         description = "(" + key + ")";
       }
-      menu.addMenuItem(
+      menu.addMenuItemCmd(
         () => CommandBox._templateTmplMenuItemTitle(template),
         () => {
           CommandBox._applyTemplateByTemplate(template);
@@ -267,7 +268,7 @@ export class CommandBox {
       TargetType.setTargetType(pTargetType);
     } else {
       // not in the template, revert to default
-      TargetType.setTargetTypeDefault();
+      TargetType.setTargetType(null);
     }
 
     if (pTarget) {
@@ -356,7 +357,7 @@ export class CommandBox {
     const commandField = document.getElementById("command");
     const commandValue = commandField.value;
 
-    const targetType = TargetType.menuTargetType._value;
+    const targetType = TargetType.menuTargetType.getValue();
 
     const patWhitespaceAll = /\s/g;
     const commandValueNoTabs = commandValue.replace(patWhitespaceAll, " ");
@@ -650,7 +651,7 @@ export class CommandBox {
 
     // reset to default, so that its value is initially hidden
     RunType.setRunTypeDefault();
-    TargetType.setTargetTypeDefault();
+    TargetType.setTargetType(null);
 
     if (Router.currentPage) {
       Router.currentPage.refreshPage();

saltgui/static/scripts/Documentation.js

@@ -17,23 +17,23 @@ export class Documentation {
     this.router = pRouter;
     this.commandbox = pCommandBox;
 
-    pCommandBox.cmdmenu.addMenuItem(
+    Documentation.DOCUMENTATION_URL = "https://docs.saltproject.io/en/latest/ref/";
+    Documentation.EXTERNAL_LINK = Character.NO_BREAK_SPACE + "<span style='font-size:150%'>" + Character.HEAVY_NORTH_EAST_ARROW + "</span>";
+
+    Documentation.PROVIDERS = { };
+
+    pCommandBox.cmdmenu.addMenuItemCmd(
       () => Documentation._manualRunMenuSysDocPrepare(),
       () => this._manualRunMenuSysDocRun());
-    pCommandBox.cmdmenu.addMenuItem(
+    pCommandBox.cmdmenu.addMenuItemCmd(
       () => Documentation._manualRunMenuHtmlDocPrepare(),
       () => Documentation._manualRunMenuHtmlDocRun());
-    pCommandBox.cmdmenu.addMenuItem(
+    pCommandBox.cmdmenu.addMenuItemCmd(
       () => Documentation._manualRunMenuBeaconNamePrepare(),
       () => Documentation._manualRunMenuBeaconNameRun());
-    pCommandBox.cmdmenu.addMenuItem(
+    pCommandBox.cmdmenu.addMenuItemCmd(
       () => Documentation._manualRunMenuCustomHelpPrepare(),
       () => Documentation._manualRunMenuCustomHelpRun());
-
-    Documentation.DOCUMENTATION_URL = "https://docs.saltproject.io/en/latest/ref/";
-    Documentation.EXTERNAL_LINK = Character.NO_BREAK_SPACE + "<span style='font-size:150%'>" + Character.HEAVY_NORTH_EAST_ARROW + "</span>";
-
-    Documentation.PROVIDERS = { };
   }
 
   // INTERNAL DOCUMENTATION
@@ -120,7 +120,7 @@ export class Documentation {
       dummyCommand = "sys.doc " + cmd;
     }
 
-    const targetType = TargetType.menuTargetType._value;
+    const targetType = TargetType.menuTargetType.getValue();
 
     const func = this.commandbox.getRunParams(targetType, target, docCommand, true, false);
     if (func === null) {

saltgui/static/scripts/DropDown.js

@@ -10,7 +10,7 @@
 //    a) sets the title using pMenuItem.innerText = "xyz"
 //    b) arranges the visibility using pMenuItem.style.display = true/false
 // 2: the callback function
-//    called when the menu item is selected: (pClickEvent) => { ... }
+//    called when the menu item is selected: () => { ... }
 // all menu items are re-validated when the menu pops up
 // when all menu items are invisible, the menu-button must be made invisible
 // since this can happen at any time, this cannot be done when the menu is shown
@@ -20,6 +20,8 @@
 // the menu. when at least one item is visible, the menu is visible
 // remember to call verifyApp() when that is potentially the case
 
+// superclass for DropDownMenuRadio, DropDownMenuCheckBox and DropDownMenuCmd
+
 export class DropDownMenu {
 
   // Creates an empty dropdown menu
@@ -72,7 +74,7 @@
   // determine the visibility of all menu items
   // menu items without verify-callback are always visible
   // separators are only visible when there are visible items before it, and after it
   verifyAll () {
     if (!this.menuDropdownContent) {
       this.menuDropdown.style.display = "none";
       return;
@@ -81,7 +83,19 @@
     // Phase 1: handle regular menu items
     let visibleCount = 0;
     for (const chld of this.menuDropdownContent.children) {
-      if (!chld.isSeparator && DropDownMenu._verifyMenuItem(chld)) {
+      if (chld.isSeparator) {
+        continue;
+      }
+      const titleCallBack = chld._titleCallBack;
+      if (titleCallBack) {
+        const title = titleCallBack(chld);
+        if (!title) {
+          chld.style.display = "none";
+          continue;
+        }
+        chld.innerText = DropDownMenu._sanitizeMenuItemTitle(title);
+      }
+      if (DropDownMenu._verifyMenuItem(chld)) {
         visibleCount += 1;
       }
     }
@@ -106,7 +120,6 @@
         visibleItemsSinceLastShownSeparator += 1;
       }
     }
-
     // hide the menu when it has no visible menu-items
     const displayVisible = this.menuDropdown.tagName === "TD" ? "table-cell" : "inline-block";
     this.menuDropdown.style.display = visibleCount > 0 ? displayVisible : "none";
@@ -153,25 +166,49 @@
   // function is called each time the menu opens
   // This allows dynamic menuitem titles (use menuitem.innerText)
   // or visibility (use menuitem.style.display = "none"/"inline-block")
-  addMenuItem (pTitle, pCallBack, pValue) {
+  addMenuItem (pValue, pTitle, pSystemCallBack, pUserCallBack) {
+
     const button = Utils.createDiv("run-command-button", Character.HORIZONTAL_ELLIPSIS);
-    if (pValue) {
-      button._value = pValue;
-    }
+
+    button._value = pValue;
+
     if (typeof pTitle === "string") {
       button.innerText = DropDownMenu._sanitizeMenuItemTitle(pTitle);
     } else {
-      button.verifyCallBack = pTitle;
+      button._titleCallBack = pTitle;
     }
+
     button.addEventListener("click", (pClickEvent) => {
+
+      // hide the menu
       pClickEvent.target.parentElement.style.display = "none";
+
+      // "show" the menu again after a short delay
+      // but because the mouse is no longer hovering it,
+      // it will actually remain invisible
       window.setTimeout(() => {
         pClickEvent.target.parentElement.style.display = "";
       }, 500);
-      this._callback(pClickEvent, pCallBack, pValue);
+
+      this._value = pValue;
+
+      if (pSystemCallBack) {
+        pSystemCallBack(pClickEvent.target);
+      }
+
+      if (pUserCallBack) {
+        pUserCallBack(pClickEvent);
+      }
+
+      // all menu items may have become invisible
+      this.verifyAll();
+
       pClickEvent.stopPropagation();
     });
+
     this.menuDropdownContent.appendChild(button);
+
+    // the menu might have become populated enough to get visible
     this.verifyAll();
     return button;
   }
@@ -185,11 +222,6 @@
     this.menuDropdownContent.appendChild(div);
   }
 
-  _callback (pClickEvent, pCallBack, pValue) {
-    this._value = pValue;
-    pCallBack(pClickEvent);
-  }
-
   setTitle (pTitle) {
     // Setting the title implies that we are interested
     // in the menu values, rather than their actions.

saltgui/static/scripts/DropDownCheckBox.js

@@ -0,0 +1,38 @@
+/* global */
+
+import {Character} from "./Character.js";
+import {DropDownMenu} from "./DropDown.js";
+
+export class DropDownMenuCheckBox extends DropDownMenu {
+
+  static _menuItemTitleCallBack (pMenuItem) {
+    let prefix = "";
+    if (pMenuItem._selected === true) {
+      prefix = Character.HEAVY_CHECK_MARK + Character.NO_BREAK_SPACE;
+    }
+    return prefix + pMenuItem._title;
+  }
+
+  static _menuItemActionCallBack (pMenuItem) {
+    pMenuItem._selected = !pMenuItem._selected;
+  }
+
+  addMenuItemCheckBox (pValue, pTitle, pUserCallBack) {
+    const menuItem = super.addMenuItem(
+      pValue,
+      (pMenuItem) => DropDownMenuCheckBox._menuItemTitleCallBack(pMenuItem),
+      (pMenuItem) => DropDownMenuCheckBox._menuItemActionCallBack(pMenuItem),
+      pUserCallBack);
+    menuItem._title = pTitle;
+    return menuItem;
+  }
+
+  isSet (pValue) {
+    for (const menuItem of this.menuDropdownContent.childNodes) {
+      if (menuItem._selected === true && menuItem._value === pValue) {
+        return true;
+      }
+    }
+    return false;
+  }
+}

saltgui/static/scripts/DropDownCmd.js

@@ -0,0 +1,15 @@
+/* global */
+
+import {DropDownMenu} from "./DropDown.js";
+
+export class DropDownMenuCmd extends DropDownMenu {
+
+  addMenuItemCmd (pTitle, pUserCallBack) {
+    return super.addMenuItem(
+      null,
+      pTitle,
+      null,
+      pUserCallBack
+    );
+  }
+}

saltgui/static/scripts/DropDownRadio.js

@@ -0,0 +1,67 @@
+/* global */
+
+import {Character} from "./Character.js";
+import {DropDownMenu} from "./DropDown.js";
+
+export class DropDownMenuRadio extends DropDownMenu {
+  constructor (pParentElement) {
+    super(pParentElement);
+    this._value = null;
+    this._defaultValue = null;
+  }
+
+  getValue () {
+    if (this._value === null) {
+      return this._defaultValue;
+    }
+    return this._value;
+  }
+
+  setValue (pValue) {
+    this._value = pValue;
+  }
+
+  setDefaultValue (pDefaultValue) {
+    this._defaultValue = pDefaultValue;
+  }
+
+  _menuItemTitleCallBack (pMenuItem) {
+    let title;
+    if (!pMenuItem._title) {
+      title = "...";
+    } else if (typeof pMenuItem._title === "string") {
+      title = pMenuItem._title;
+    } else {
+      title = pMenuItem._title.bind(this)(pMenuItem);
+    }
+
+    if (title === null) {
+      // menu item will be hidden
+    } else if (pMenuItem._value === this._value) {
+      title = Character.BLACK_CIRCLE + Character.NO_BREAK_SPACE + title;
+    } else if (this._value === null && pMenuItem._value === this._defaultValue) {
+      title = Character.WHITE_CIRCLE + Character.NO_BREAK_SPACE + title;
+    }
+    return title;
+  }
+
+  _menuItemActionCallBack (pMenuItem) {
+    this._value = pMenuItem._value;
+    let menuTitle = pMenuItem._title;
+    if (menuTitle && typeof menuTitle !== "string") {
+      menuTitle = menuTitle.bind(this)(pMenuItem);
+    }
+    this.setTitle(menuTitle);
+  }
+
+  addMenuItemRadio (pValue, pTitle, pUserCallBack) {
+    const menuItem = super.addMenuItem(
+      pValue,
+      (pMenuItem) => this._menuItemTitleCallBack(pMenuItem),
+      (pMenuItem) => this._menuItemActionCallBack(pMenuItem),
+      pUserCallBack);
+    menuItem._value = pValue;
+    menuItem._title = pTitle;
+    return menuItem;
+  }
+}