use new menus

Author: Erwin Dondorp

saltgui/static/scripts/Character.js

@@ -25,6 +25,7 @@ export class Character {
     Character.WHITE_RIGHT_POINTING_TRIANGLE = "\u25B7";
     Character.BLACK_RIGHT_POINTING_POINTER = "\u25BA";
     Character.WHITE_DOWN_POINTING_TRIANGLE = "\u25BD";
+    Character.WHITE_CIRCLE = "\u25CB";
     Character.BLACK_CIRCLE = "\u25CF";
     Character.GEAR = "\u2699";
     Character.WARNING_SIGN = "\u26A0" + Character._VARIATION_SELECTOR_16;

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;
@@ -115,7 +116,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;
@@ -127,7 +128,7 @@ export class CommandBox {
       if (!description) {
         description = "(" + key + ")";
       }
-      menu.addMenuItem(
+      menu.addMenuItemCmd(
         () => CommandBox._templateTmplMenuItemTitle(template),
         () => {
           CommandBox._applyTemplate(template);
@@ -264,7 +265,7 @@ export class CommandBox {
       TargetType.setTargetType(targetType);
     } else {
       // not in the template, revert to default
-      TargetType.setTargetTypeDefault();
+      TargetType.setTargetType(null);
     }
 
     if (template.target) {
@@ -325,7 +326,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, " ");
@@ -479,7 +480,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.saltstack.com/en/latest/ref/";
+    Documentation.EXTERNAL_LINK = Character.NO_BREAK_SPACE + Character.EXTERNAL_LINK_IMG;
+
+    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.saltstack.com/en/latest/ref/";
-    Documentation.EXTERNAL_LINK = Character.NO_BREAK_SPACE + Character.EXTERNAL_LINK_IMG;
-
-    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 @@ import {Utils} from "./Utils.js";
 //    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 @@ import {Utils} from "./Utils.js";
 // 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
@@ -87,10 +89,10 @@ export class DropDownMenu {
           continue;
         }
 
-        const verifyCallBack = chld.verifyCallBack;
-        if (verifyCallBack) {
-          const title = verifyCallBack(chld);
-          if (title === null) {
+        const titleCallBack = chld._titleCallBack;
+        if (titleCallBack) {
+          const title = titleCallBack.bind(this)(chld);
+          if (!title) {
             chld.style.display = "none";
             continue;
           }
@@ -106,6 +108,7 @@ export class DropDownMenu {
         itemsBeforeSeparator += 1;
       }
     }
+
     // hide the menu when it has no visible menu-items
     const displayVisible = this.menuDropdown.tagName === "TD" ? "table-cell" : "inline-block";
     const displayInvisible = "none";
@@ -125,25 +128,49 @@ export class DropDownMenu {
   // 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", "...");
-    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.bind(this)(pClickEvent.target);
+      }
+
+      if (pUserCallBack) {
+        pUserCallBack.bind(this)(pClickEvent.target);
+      }
+
+      // 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;
   }
@@ -157,11 +184,6 @@ export class DropDownMenu {
     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.
@@ -172,18 +194,4 @@ export class DropDownMenu {
     pTitle += Character.GEAR;
     this.menuButton.innerText = DropDownMenu._sanitizeMenuItemTitle(pTitle);
   }
-
-  __showMenu () {
-    this.menuDropdown.style.display = "inline-block";
-  }
-
-  __hideMenu () {
-    this.menuDropdown.style.display = "none";
-  }
-
-  clearMenu () {
-    while (this.menuDropdownContent.firstChild) {
-      this.menuDropdownContent.removeChild(this.menuDropdownContent.firstChild);
-    }
-  }
 }

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,
+      DropDownMenuCheckBox._menuItemTitleCallBack,
+      DropDownMenuCheckBox._menuItemActionCallBack,
+      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,14 @@
+/* global */
+
+import {DropDownMenu} from "./DropDown.js";
+
+export class DropDownMenuCmd extends DropDownMenu {
+
+  addMenuItemCmd (pTitle, pUserCallBack) {
+    return super.addMenuItem(
+      null,
+      pTitle,
+      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,
+      this._menuItemTitleCallBack,
+      this._menuItemActionCallBack,
+      pUserCallBack);
+    menuItem._value = pValue;
+    menuItem._title = pTitle;
+    return menuItem;
+  }
+}

saltgui/static/scripts/ParseCommandLine.js

@@ -1,3 +1,5 @@
+/* global */
+
 // Function to parse a commandline
 // The line is broken into individual tokens
 // Each token that is recognized as a JS type will get that type