Skip to content

Commit 06d98c9

Browse files
Erwin DondorpErwin Dondorp
Erwin Dondorp
authored and
Erwin Dondorp
committed
use new menus
1 parent 876ccd8 commit 06d98c9

File tree

9 files changed

+155
-90
lines changed

9 files changed

+155
-90
lines changed

‎saltgui/static/scripts/CommandBox.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import {Character} from "./Character.js";
44
import {Documentation} from "./Documentation.js";
5-
import {DropDownMenu} from "./DropDown.js";
5+
import {DropDownMenuCmd} from "./DropDownCmd.js";
66
import {Output} from "./output/Output.js";
77
import {ParseCommandLine} from "./ParseCommandLine.js";
88
import {Router} from "./Router.js";
@@ -17,14 +17,15 @@ export class CommandBox {
1717
this.api = pApi;
1818

1919
const cmdbox = document.getElementById("cmd-box");
20-
this.cmdmenu = new DropDownMenu(cmdbox);
20+
this.cmdmenu = new DropDownMenuCmd(cmdbox);
2121

22-
this.documentation = new Documentation(this.router, this);
2322
this._registerCommandBoxEventListeners();
2423

2524
RunType.createMenu();
2625
TargetType.createMenu();
2726

27+
this.documentation = new Documentation(pRouter, this);
28+
2829
const manualRun = document.getElementById("popup-run-command");
2930
Utils.addTableHelp(manualRun, "Click for help", "bottom-center");
3031
const helpButton = manualRun.querySelector("#help");
@@ -40,7 +41,7 @@ export class CommandBox {
4041
// since the storage-item is then not populated yet.
4142
return;
4243
}
43-
const menu = new DropDownMenu(titleElement);
44+
const menu = new DropDownMenuCmd(titleElement);
4445
const templatesText = Utils.getStorageItem("session", "templates", "{}");
4546
const templates = JSON.parse(templatesText);
4647
const keys = Object.keys(templates).sort();
@@ -50,7 +51,7 @@ export class CommandBox {
5051
if (!description) {
5152
description = "(" + key + ")";
5253
}
53-
menu.addMenuItem(
54+
menu.addMenuItemCmd(
5455
description,
5556
() => {
5657
CommandBox._applyTemplate(template);
@@ -156,7 +157,7 @@ export class CommandBox {
156157
TargetType.setTargetType(targetType);
157158
} else {
158159
// not in the template, revert to default
159-
TargetType.setTargetTypeDefault();
160+
TargetType.setTargetType(null);
160161
}
161162

162163
if (template.target) {
@@ -183,7 +184,7 @@ export class CommandBox {
183184
const commandField = document.getElementById("command");
184185
const commandValue = commandField.value;
185186

186-
const targetType = TargetType.menuTargetType._value;
187+
const targetType = TargetType.menuTargetType.getValue();
187188

188189
const patWhitespaceAll = /\s/g;
189190
const commandValueNoTabs = commandValue.replace(patWhitespaceAll, " ");
@@ -366,7 +367,7 @@ export class CommandBox {
366367

367368
// reset to default, so that its value is initially hidden
368369
RunType.setRunTypeDefault();
369-
TargetType.setTargetTypeDefault();
370+
TargetType.setTargetType(null);
370371

371372
Router.currentPage.refreshPage();
372373

‎saltgui/static/scripts/Documentation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export class Documentation {
109109
dummyCommand = "sys.doc " + cmd;
110110
}
111111

112-
const targetType = TargetType.menuTargetType._value;
112+
const targetType = TargetType.menuTargetType.getValue();
113113

114114
const func = this.commandbox.getRunParams(targetType, target, docCommand, true);
115115
if (func === null) {

‎saltgui/static/scripts/DropDown.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import {Utils} from "./Utils.js";
1818
// the menu. when at least one item is visible, the menu is visible
1919
// remember to call verifyApp() when that is potentially the case
2020

21+
// superclass for DropDownMenuRadio, DropDownMenuCheckbox and DropDownMenuCmd
22+
2123
export class DropDownMenu {
2224

2325
// Creates an empty dropdown menu
@@ -77,6 +79,7 @@ export class DropDownMenu {
7779
visibleCount += 1;
7880
}
7981
}
82+
8083
// hide the menu when it has no visible menu-items
8184
const displayVisible = this.menuDropdown.tagName === "TD" ? "table-cell" : "inline-block";
8285
const displayInvisible = "none";
@@ -96,7 +99,7 @@ export class DropDownMenu {
9699
// function is called each time the menu opens
97100
// This allows dynamic menuitem titles (use menuitem.innerText)
98101
// or visibility (use menuitem.style.display = "none"/"inline-block")
99-
addMenuItem (pTitle, pCallBack, pValue) {
102+
addMenuItem (pTitle, pCallBack = null, pValue = null) {
100103
const button = Utils.createDiv("run-command-button", "...");
101104
if (pValue) {
102105
button._value = pValue;
@@ -118,9 +121,9 @@ export class DropDownMenu {
118121
return button;
119122
}
120123

121-
_callback (pClickEvent, pCallBack, pValue) {
122-
this._value = pValue;
124+
_callback (pClickEvent, pCallBack) {
123125
pCallBack(pClickEvent);
126+
this.verifyAll();
124127
pClickEvent.stopPropagation();
125128
}
126129

@@ -138,10 +141,4 @@ export class DropDownMenu {
138141
__hideMenu () {
139142
this.menuDropdown.style.display = "none";
140143
}
141-
142-
clearMenu () {
143-
while (this.menuDropdownContent.firstChild) {
144-
this.menuDropdownContent.removeChild(this.menuDropdownContent.firstChild);
145-
}
146-
}
147144
}

‎saltgui/static/scripts/DropDownCheckbox.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {DropDownMenu} from "./DropDown.js";
2+
3+
export class DropDownMenuCheckbox extends DropDownMenu {
4+
// constructor (pParentElement) {
5+
// super(pParentElement);
6+
// }
7+
8+
/*
9+
addMenuItemCheckbox (pTitle, pCallback) {
10+
const menuItem = super.addMenuItem(pTitle, () => {
11+
this._selectCallback(pValue, pTitle, pMenuTitle);
12+
}, (pMenuItem) => {
13+
return this._verifyMenuItem(pMenuItem);
14+
pCallback(ev);
15+
});
16+
}
17+
*/
18+
}

‎saltgui/static/scripts/DropDownCmd.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {DropDownMenu} from "./DropDown.js";
2+
3+
export class DropDownMenuCmd extends DropDownMenu {
4+
// constructor (pParentElement) {
5+
// super(pParentElement);
6+
// }
7+
8+
_selectCallback (pMenuItem, pTitle) {
9+
// show the chosen value
10+
if (typeof pTitle !== "string") {
11+
pTitle = pTitle(pMenuItem);
12+
}
13+
this.setTitle(pTitle);
14+
}
15+
16+
addMenuItemCmd (pTitle, pCallback) {
17+
const menuItem = super.addMenuItem(pTitle, (pMenuItem) => {
18+
this._selectCallback(pMenuItem, pTitle);
19+
}, (pMenuItem) => {
20+
pCallback(pMenuItem);
21+
});
22+
return menuItem;
23+
}
24+
}

‎saltgui/static/scripts/DropDownRadio.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import {DropDownMenu} from "./DropDown.js";
2+
3+
export class DropDownMenuRadio extends DropDownMenu {
4+
constructor (pParentElement) {
5+
super(pParentElement);
6+
this.value = null;
7+
this.defaultValue = null;
8+
}
9+
10+
getValue () {
11+
if (this.value === null) {
12+
return this.defaultValue;
13+
}
14+
return this.value;
15+
}
16+
17+
setValue (pValue) {
18+
this.value = pValue;
19+
}
20+
21+
setDefaultValue (pDefaultValue) {
22+
this.defaultValue = pDefaultValue;
23+
}
24+
25+
_verifyMenuItem (pMenuItem) {
26+
let title;
27+
if (typeof pMenuItem._title === "string") {
28+
title = pMenuItem._title;
29+
} else {
30+
title = pMenuItem._title(pMenuItem);
31+
}
32+
33+
if (title === null) {
34+
// menu item will be hidden
35+
} else if (pMenuItem._value === this.value) {
36+
// 25CF = BLACK CIRCLE
37+
title = "\u25CF " + title;
38+
} else if (this.value === null && pMenuItem._value === this.defaultValue) {
39+
// 25CB = WHITE CIRCLE
40+
title = "\u25CB " + title;
41+
}
42+
return title;
43+
}
44+
45+
_selectCallback (pValue, pTitle, pMenuTitle) {
46+
47+
this.value = pValue;
48+
49+
// show the chosen value
50+
if (pMenuTitle === null) {
51+
// caller can specify a more specific menu title
52+
// usually an abbreviation of the chosen menu item
53+
if (typeof pTitle !== "string") {
54+
pTitle = pTitle();
55+
}
56+
this.setTitle(pTitle);
57+
} else {
58+
this.setTitle(pMenuTitle);
59+
}
60+
}
61+
62+
addMenuItemRadio (pValue, pTitle, pMenuTitle = null) {
63+
const menuItem = super.addMenuItem(pTitle, () => {
64+
this._selectCallback(pValue, pTitle, pMenuTitle);
65+
}, (pMenuItem) => this._verifyMenuItem(pMenuItem));
66+
67+
menuItem._value = pValue;
68+
}
69+
}

‎saltgui/static/scripts/RunType.js‎

Lines changed: 8 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,26 @@
1-
/* global console document */
1+
/* global document */
22

3-
import {Character} from "./Character.js";
4-
import {DropDownMenu} from "./DropDown.js";
3+
import {DropDownMenuRadio} from "./DropDownRadio.js";
54

65
export class RunType {
76

87
static createMenu () {
98
const runblock = document.getElementById("run-block");
10-
RunType.menuRunType = new DropDownMenu(runblock);
11-
// do not show the menu title at first
12-
RunType.menuRunType.setTitle("");
13-
RunType.menuRunType.addMenuItem("Normal", this._updateRunTypeText, "normal");
14-
RunType.menuRunType.addMenuItem("Async", this._updateRunTypeText, "async");
15-
RunType._updateRunTypeText();
16-
}
17-
18-
static _updateRunTypeText () {
19-
const runType = RunType.getRunType();
20-
21-
switch (runType) {
22-
case "normal":
23-
// now that the menu is used show the menu title
24-
RunType.menuRunType.setTitle("Normal");
25-
break;
26-
case "async":
27-
RunType.menuRunType.setTitle("Async");
28-
break;
29-
default:
30-
console.error("runType", runType);
31-
}
32-
33-
const menuItems = RunType.menuRunType.menuDropdownContent.children;
34-
for (let i = 0; i < menuItems.length; i++) {
35-
let menuItemText = menuItems[i].innerText;
36-
menuItemText = menuItemText.replace(/^. /, "");
37-
if (menuItems[i]._value === runType) {
38-
menuItemText = Character.BLACK_CIRCLE + " " + menuItemText;
39-
}
40-
menuItems[i].innerText = menuItemText;
41-
}
9+
RunType.menuRunType = new DropDownMenuRadio(runblock);
10+
RunType.menuRunType.setDefaultValue("normal");
11+
RunType.menuRunType.addMenuItemRadio("normal", "Normal");
12+
RunType.menuRunType.addMenuItemRadio("async", "Async");
4213
}
4314

4415
static setRunTypeDefault () {
45-
RunType.menuRunType._value = "normal";
46-
RunType._updateRunTypeText();
16+
RunType.menuRunType.setValue(null);
4717
// reset the title to the absolute minimum
4818
// so that the menu does not stand out in trivial situations
4919
RunType.menuRunType.setTitle("");
5020
}
5121

5222
static getRunType () {
53-
const runType = RunType.menuRunType._value;
54-
if (runType === undefined || runType === "") {
55-
return "normal";
56-
}
23+
const runType = RunType.menuRunType.getValue();
5724
return runType;
5825
}
5926
}

‎saltgui/static/scripts/TargetType.js‎

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
/* global console document */
22

33
import {Character} from "./Character.js";
4-
import {DropDownMenu} from "./DropDown.js";
4+
import {DropDownMenuRadio} from "./DropDownRadio.js";
55
import {Utils} from "./Utils.js";
66

77
export class TargetType {
88

99
static createMenu () {
1010
const targetbox = document.getElementById("target-box");
11-
TargetType.menuTargetType = new DropDownMenu(targetbox);
11+
TargetType.menuTargetType = new DropDownMenuRadio(targetbox);
1212
// do not show the menu title at first
13-
TargetType.menuTargetType.addMenuItem("Normal", this._manualUpdateTargetTypeText, "glob");
14-
TargetType.menuTargetType.addMenuItem("List", this._manualUpdateTargetTypeText, "list");
15-
TargetType.menuTargetType.addMenuItem(TargetType._targetTypeNodeGroupPrepare, this._manualUpdateTargetTypeText, "nodegroup");
16-
TargetType.menuTargetType.addMenuItem("Compound", this._manualUpdateTargetTypeText, "compound");
17-
TargetType.setTargetTypeDefault();
13+
TargetType.menuTargetType.setTitle("");
14+
TargetType.menuTargetType.addMenuItemRadio("glob", "Normal");
15+
TargetType.menuTargetType.addMenuItemRadio("list", "List");
16+
TargetType.menuTargetType.addMenuItemRadio("nodegroup", (pMenuItem) => TargetType._targetTypeNodeGroupPrepare(pMenuItem));
17+
TargetType.menuTargetType.addMenuItemRadio("compound", "Compound");
18+
TargetType.autoSelectTargetType("");
1819
}
1920

2021
// It takes a while before we known the list of nodegroups
@@ -85,46 +86,34 @@ export class TargetType {
8586
}
8687
menuItems[i].innerText = menuItemText;
8788
}
89+
return null;
8890
}
8991

9092
static autoSelectTargetType (pTarget) {
9193

92-
if (!TargetType.menuTargetType._system) {
93-
// user has selected the value, do not touch it
94-
return;
95-
}
96-
9794
if (pTarget.includes("@") || pTarget.includes(" ") ||
9895
pTarget.includes("(") || pTarget.includes(")")) {
9996
// "@" is a strong indicator for compound target
10097
// but "space", "(" and ")" are also typical for compound target
101-
TargetType.menuTargetType._value = "compound";
98+
TargetType.menuTargetType.setDefaultValue("compound");
10299
} else if (pTarget.includes(",")) {
103100
// "," is a strong indicator for list target (when it is also not compound)
104-
TargetType.menuTargetType._value = "list";
101+
TargetType.menuTargetType.setDefaultValue("list");
105102
} else if (pTarget.startsWith("#")) {
106103
// "#" at the start of a line is a strong indicator for nodegroup target
107104
// this is not a SALTSTACK standard, but our own invention
108-
TargetType.menuTargetType._value = "nodegroup";
105+
TargetType.menuTargetType.setDefaultValue("nodegroup");
109106
} else {
110-
TargetType.menuTargetType._value = "glob";
107+
TargetType.menuTargetType.setDefaultValue("glob");
111108
}
112-
113-
// show the new title
114-
TargetType._updateTargetTypeText();
115109
}
116110

117111
static setTargetType (pTargetType) {
118-
TargetType.menuTargetType._value = pTargetType;
119-
TargetType.menuTargetType._system = true;
120-
TargetType._updateTargetTypeText();
112+
TargetType.menuTargetType.setValue(pTargetType);
121113
}
122114

123115
static _getTargetType () {
124-
const targetType = TargetType.menuTargetType._value;
125-
if (targetType === undefined || targetType === "") {
126-
return "glob";
127-
}
116+
const targetType = TargetType.menuTargetType.getValue();
128117
return targetType;
129118
}
130119

0 commit comments

Comments
 (0)