Skip to content

Commit ed09767

Browse files
Erwin Dondorperwindon
Erwin Dondorp
authored and
erwindon
committed
use new menus
1 parent 363764b commit ed09767

File tree

9 files changed

+154
-90
lines changed

9 files changed

+154
-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");
@@ -41,7 +42,7 @@ export class CommandBox {
4142
// since the storage-item is then not populated yet.
4243
return;
4344
}
44-
const menu = new DropDownMenu(titleElement);
45+
const menu = new DropDownMenuCmd(titleElement);
4546
const templatesText = Utils.getStorageItem("session", "templates", "{}");
4647
const templates = JSON.parse(templatesText);
4748
const keys = Object.keys(templates).sort();
@@ -51,7 +52,7 @@ export class CommandBox {
5152
if (!description) {
5253
description = "(" + key + ")";
5354
}
54-
menu.addMenuItem(
55+
menu.addMenuItemCmd(
5556
description,
5657
() => {
5758
CommandBox._applyTemplate(template);
@@ -164,7 +165,7 @@ export class CommandBox {
164165
TargetType.setTargetType(targetType);
165166
} else {
166167
// not in the template, revert to default
167-
TargetType.setTargetTypeDefault();
168+
TargetType.setTargetType(null);
168169
}
169170

170171
if (template.target) {
@@ -222,7 +223,7 @@ export class CommandBox {
222223
const commandField = document.getElementById("command");
223224
const commandValue = commandField.value;
224225

225-
const targetType = TargetType.menuTargetType._value;
226+
const targetType = TargetType.menuTargetType.getValue();
226227

227228
const patWhitespaceAll = /\s/g;
228229
const commandValueNoTabs = commandValue.replace(patWhitespaceAll, " ");
@@ -380,7 +381,7 @@ export class CommandBox {
380381

381382
// reset to default, so that its value is initially hidden
382383
RunType.setRunTypeDefault();
383-
TargetType.setTargetTypeDefault();
384+
TargetType.setTargetType(null);
384385

385386
if (Router.currentPage) {
386387
Router.currentPage.refreshPage();

‎saltgui/static/scripts/Documentation.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export class Documentation {
117117
dummyCommand = "sys.doc " + cmd;
118118
}
119119

120-
const targetType = TargetType.menuTargetType._value;
120+
const targetType = TargetType.menuTargetType.getValue();
121121

122122
const func = this.commandbox.getRunParams(targetType, target, docCommand, true);
123123
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
@@ -80,6 +82,7 @@ export class DropDownMenu {
8082
visibleCount += 1;
8183
}
8284
}
85+
8386
// hide the menu when it has no visible menu-items
8487
const displayVisible = this.menuDropdown.tagName === "TD" ? "table-cell" : "inline-block";
8588
const displayInvisible = "none";
@@ -99,7 +102,7 @@ export class DropDownMenu {
99102
// function is called each time the menu opens
100103
// This allows dynamic menuitem titles (use menuitem.innerText)
101104
// or visibility (use menuitem.style.display = "none"/"inline-block")
102-
addMenuItem (pTitle, pCallBack, pValue) {
105+
addMenuItem (pTitle, pCallBack = null, pValue = null) {
103106
const button = Utils.createDiv("run-command-button", "...");
104107
if (pValue) {
105108
button._value = pValue;
@@ -121,9 +124,9 @@ export class DropDownMenu {
121124
return button;
122125
}
123126

124-
_callback (pClickEvent, pCallBack, pValue) {
125-
this._value = pValue;
127+
_callback (pClickEvent, pCallBack) {
126128
pCallBack(pClickEvent);
129+
this.verifyAll();
127130
pClickEvent.stopPropagation();
128131
}
129132

@@ -145,10 +148,4 @@ export class DropDownMenu {
145148
__hideMenu () {
146149
this.menuDropdown.style.display = "none";
147150
}
148-
149-
clearMenu () {
150-
while (this.menuDropdownContent.firstChild) {
151-
this.menuDropdownContent.removeChild(this.menuDropdownContent.firstChild);
152-
}
153-
}
154151
}

‎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: 7 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,26 @@
11
/* global document */
22

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

75
export class RunType {
86

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

4515
static setRunTypeDefault () {
46-
RunType.menuRunType._value = "normal";
47-
RunType._updateRunTypeText();
16+
RunType.menuRunType.setValue(null);
4817
// reset the title to the absolute minimum
4918
// so that the menu does not stand out in trivial situations
5019
RunType.menuRunType.setTitle("");
5120
}
5221

5322
static getRunType () {
54-
const runType = RunType.menuRunType._value;
55-
if (runType === undefined || runType === "") {
56-
return "normal";
57-
}
23+
const runType = RunType.menuRunType.getValue();
5824
return runType;
5925
}
6026
}

‎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 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", TargetType._manualUpdateTargetTypeText, "glob");
14-
TargetType.menuTargetType.addMenuItem("List", TargetType._manualUpdateTargetTypeText, "list");
15-
TargetType.menuTargetType.addMenuItem(TargetType._targetTypeNodeGroupPrepare, TargetType._manualUpdateTargetTypeText, "nodegroup");
16-
TargetType.menuTargetType.addMenuItem("Compound", TargetType._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)