use new menus

Author: Erwin Dondorp

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";
@@ -17,14 +17,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");
@@ -41,7 +42,7 @@ export class CommandBox {
       // since the storage-item is then not populated yet.
       return;
     }
-    const menu = new DropDownMenu(titleElement);
+    const menu = new DropDownMenuCmd(titleElement);
     const templatesText = Utils.getStorageItem("session", "templates", "{}");
     const templates = JSON.parse(templatesText);
     const keys = Object.keys(templates).sort();
@@ -51,7 +52,7 @@ export class CommandBox {
       if (!description) {
         description = "(" + key + ")";
       }
-      menu.addMenuItem(
+      menu.addMenuItemCmd(
         description,
         () => {
           CommandBox._applyTemplate(template);
@@ -184,7 +185,7 @@ export class CommandBox {
       TargetType.setTargetType(targetType);
     } else {
       // not in the template, revert to default
-      TargetType.setTargetTypeDefault();
+      TargetType.setTargetType(null);
     }
 
     if (template.target) {
@@ -244,7 +245,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, " ");
@@ -398,7 +399,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,13 +17,13 @@ export class Documentation {
     this.router = pRouter;
     this.commandbox = pCommandBox;
 
-    pCommandBox.cmdmenu.addMenuItem(
+    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());
 
@@ -117,7 +117,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);
     if (func === null) {

saltgui/static/scripts/DropDown.js

@@ -1,3 +1,5 @@
+/* global */
+
 import {Character} from "./Character.js";
 import {Utils} from "./Utils.js";
 
@@ -8,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
@@ -18,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
@@ -70,19 +74,20 @@ export class DropDownMenu {
     let visibleCount = 0;
     if (this.menuDropdownContent) {
       for (const chld of this.menuDropdownContent.children) {
-        const verifyCallBack = chld.verifyCallBack;
-        if (verifyCallBack) {
-          const title = verifyCallBack(chld);
+        const titleCallBack = chld._titleCallBack;
+        if (titleCallBack) {
+          const title = titleCallBack(this, chld);
           if (title === null) {
             chld.style.display = "none";
             continue;
           }
-          chld.innerText = DropDownMenu._sanitizeMenuItemTitle(title);
+          chld.innerHTML = DropDownMenu._sanitizeMenuItemTitle(title);
           chld.style.removeProperty("display");
         }
         visibleCount += 1;
       }
     }
+
     // hide the menu when it has no visible menu-items
     const displayVisible = this.menuDropdown.tagName === "TD" ? "table-cell" : "inline-block";
     const displayInvisible = "none";
@@ -102,32 +107,33 @@ 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, pCallBack) {
     const button = Utils.createDiv("run-command-button", "...");
     if (pValue) {
       button._value = pValue;
     }
     if (typeof pTitle === "string") {
       button.innerText = DropDownMenu._sanitizeMenuItemTitle(pTitle);
     } else {
-      button.verifyCallBack = pTitle;
+      button._titleCallBack = pTitle;
     }
     button.addEventListener("click", (pClickEvent) => {
       pClickEvent.target.parentElement.style.display = "none";
       window.setTimeout(() => {
         pClickEvent.target.parentElement.style.display = "";
       }, 500);
-      this._callback(pClickEvent, pCallBack, pValue);
+      this._callback(pCallBack, pValue);
       pClickEvent.stopPropagation();
     });
     this.menuDropdownContent.appendChild(button);
     this.verifyAll();
     return button;
   }
 
-  _callback (pClickEvent, pCallBack, pValue) {
+  _callback (pCallBack, pValue) {
     this._value = pValue;
-    pCallBack(pClickEvent);
+    pCallBack(this, pValue);
+    this.verifyAll();
   }
 
   setTitle (pTitle) {
@@ -140,18 +146,4 @@ export class DropDownMenu {
     pTitle += Character.BLACK_DOWN_POINTING_TRIANGLE;
     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,35 @@
+/* global */
+
+import {Character} from "./Character.js";
+import {DropDownMenu} from "./DropDown.js";
+
+export class DropDownMenuCheckBox extends DropDownMenu {
+  // constructor (pParentElement) {
+  //   super(pParentElement);
+  // }
+
+  addMenuItemCheckBox (pValue, pTitle, pCallBack) {
+    const menuItem = super.addMenuItem(pValue, pTitle, () => {
+      menuItem._selected = !menuItem._selected;
+
+      if (menuItem._selected === true) {
+        menuItem.innerText = Character.HEAVY_CHECK_MARK + " " + pTitle;
+      } else {
+        menuItem.innerText = pTitle;
+      }
+
+      if (pCallBack) {
+        pCallBack();
+      }
+    });
+  }
+
+  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,17 @@
+/* global */
+
+import {DropDownMenu} from "./DropDown.js";
+
+export class DropDownMenuCmd extends DropDownMenu {
+  // constructor (pParentElement) {
+  //   super(pParentElement);
+  // }
+
+  addMenuItemCmd (pTitle, pCallBack) {
+    return super.addMenuItem(
+      null,
+      pTitle,
+      pCallBack
+    );
+  }
+}

saltgui/static/scripts/DropDownRadio.js

@@ -0,0 +1,67 @@
+/* global */
+
+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;
+  }
+
+  static _menuItemLabelCallBack (pMenu, pMenuItem) {
+    let title;
+    if (!pMenuItem._title) {
+      title = "...";
+    } else if (typeof pMenuItem._title === "string") {
+      title = pMenuItem._title;
+    } else {
+      title = pMenuItem._title(pMenuItem);
+    }
+
+    if (title === null) {
+      // menu item will be hidden
+    } else if (pMenuItem._value === pMenu._value) {
+      // 25CF = BLACK CIRCLE
+      title = "\u25CF " + title;
+    } else if (pMenu._value === null && pMenuItem._value === pMenu._defaultValue) {
+      // 25CB = WHITE CIRCLE
+      title = "\u25CB " + title;
+    }
+    return title;
+  }
+
+  static _menuItemActionCallBack (pMenu, pEvent, pValue) {
+    pMenu._value = pValue;
+    const menuItem = pEvent.target;
+    let menuTitle = menuItem._title;
+    if (typeof menuTitle !== "string") {
+      menuTitle = menuTitle(menuItem);
+    }
+    pMenu.setTitle(menuTitle);
+  }
+
+  addMenuItemRadio (pValue, pTitle) {
+    const menuItem = super.addMenuItem(
+      pValue,
+      DropDownMenuRadio._menuItemLabelCallBack,
+      DropDownMenuRadio._menuItemActionCallBack);
+
+    menuItem._title = pTitle;
+  }
+}

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