mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-20 06:55:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: ensure hint tooltips are rendered for all argument types

Browse source 
Move hint tooltip from label to form-group container element. This
ensures that the tooltip is also displayed for form elements with an
inline label, for which pointer-events are disabled (and rightly so)
by Bootstrap Material Design.

Logic applied to arguments of all types to ensure layout consistency.
This commit is contained in:
Bart van Andel 2025-04-06 01:26:56 +02:00
parent 7c8be12d52
commit 9d9cced7c4
1 changed files with 24 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/web/HTMLIngredient.mjs
View file

@ -49,15 +49,14 @@ class HTMLIngredient {
toHtml() { toHtml() {
let html = "", let html = "",
i, m, eventFn; i, m, eventFn;
const hintHtml = this.hint ? `data-toggle="tooltip" title="${this.hint}"` : "";
switch (this.type) { switch (this.type) {
case "string": case "string":
case "binaryString": case "binaryString":
case "byteArray": case "byteArray":
html += `<div class="form-group ing-wide"> html += `<div class="form-group ing-wide" ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg" class="form-control arg"
id="${this.id}" id="${this.id}"
@ -70,10 +69,8 @@ class HTMLIngredient {
break; break;
case "shortString": case "shortString":
case "binaryShortString": case "binaryShortString":
html += `<div class="form-group ing-short"> html += `<div class="form-group ing-short" ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg inline" class="form-control arg inline"
id="${this.id}" id="${this.id}"
@ -85,11 +82,9 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "toggleString": case "toggleString":
html += `<div class="form-group input-group ing-wide" data-help-title="Multi-type ingredients" data-help="Selecting a data type from the dropdown will change how the ingredient is interpreted by the operation."> html += `<div class="form-group input-group ing-wide" data-help-title="Multi-type ingredients" data-help="Selecting a data type from the dropdown will change how the ingredient is interpreted by the operation." ${hintHtml}>
<div class="toggle-string"> <div class="toggle-string">
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating toggle-string">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg toggle-string" class="form-control arg toggle-string"
id="${this.id}" id="${this.id}"
@ -111,10 +106,8 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "number": case "number":
html += `<div class="form-group inline ing-medium"> html += `<div class="form-group inline ing-medium" ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<input type="number" <input type="number"
class="form-control arg inline" class="form-control arg inline"
id="${this.id}" id="${this.id}"
@ -128,9 +121,9 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "boolean": case "boolean":
html += `<div class="form-group inline boolean-arg ing-flexible"> html += `<div class="form-group inline boolean-arg ing-flexible" ${hintHtml}>
<div class="checkbox"> <div class="checkbox">
<label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}> <label>
<input type="checkbox" <input type="checkbox"
class="arg" class="arg"
id="${this.id}" id="${this.id}"
@ -144,10 +137,8 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "option": case "option":
html += `<div class="form-group ing-medium"> html += `<div class="form-group ing-medium" ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<select <select
class="form-control arg inline" class="form-control arg inline"
id="${this.id}" id="${this.id}"
@ -168,10 +159,8 @@ class HTMLIngredient {
break; break;
case "populateOption": case "populateOption":
case "populateMultiOption": case "populateMultiOption":
html += `<div class="form-group ing-medium" data-help-title="Population dropdowns" data-help="Selecting a value from this dropdown will populate some of the other ingredients for this operation with pre-canned values."> html += `<div class="form-group ing-medium" data-help-title="Population dropdowns" data-help="Selecting a value from this dropdown will populate some of the other ingredients for this operation with pre-canned values." ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label>
<select <select
class="form-control arg no-state-change populate-option" class="form-control arg no-state-change populate-option"
id="${this.id}" id="${this.id}"
@ -199,10 +188,8 @@ class HTMLIngredient {
this.manager.addDynamicListener("#" + this.id, "change", eventFn, this); this.manager.addDynamicListener("#" + this.id, "change", eventFn, this);
break; break;
case "editableOption": case "editableOption":
html += `<div class="form-group input-group ing-wide"> html += `<div class="form-group input-group ing-wide" ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg" class="form-control arg"
id="${this.id}" id="${this.id}"
@ -230,10 +217,8 @@ class HTMLIngredient {
this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this); this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
break; break;
case "editableOptionShort": case "editableOptionShort":
html += `<div class="form-group input-group ing-short"> html += `<div class="form-group input-group ing-short" ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg inline" class="form-control arg inline"
id="${this.id}" id="${this.id}"
@ -261,10 +246,8 @@ class HTMLIngredient {
this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this); this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
break; break;
case "text": case "text":
html += `<div class="form-group ing-very-wide"> html += `<div class="form-group ing-very-wide" ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label>
<textarea <textarea
class="form-control arg" class="form-control arg"
id="${this.id}" id="${this.id}"
@ -275,10 +258,8 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "argSelector": case "argSelector":
html += `<div class="form-group inline ing-medium" data-help-title="Ingredient selector" data-help="Selecting options in this dropdown will configure which operation ingredients are visible."> html += `<div class="form-group inline ing-medium" data-help-title="Ingredient selector" data-help="Selecting options in this dropdown will configure which operation ingredients are visible." ${hintHtml}>
<label for="${this.id}" <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<select <select
class="form-control arg inline arg-selector" class="form-control arg inline arg-selector"
id="${this.id}" id="${this.id}"
@ -298,7 +279,7 @@ class HTMLIngredient {
this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this); this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);
break; break;
case "label": case "label":
html += `<div class="form-group ing-flexible"> html += `<div class="form-group ing-flexible" ${hintHtml}>
<label>${this.name}</label> <label>${this.name}</label>
<input type="hidden" <input type="hidden"
class="form-control arg" class="form-control arg"