From 5acee804637bd49acc6a73d916fc77f11f59c39f Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Wed, 26 Dec 2018 16:50:32 +0000
Subject: [PATCH] 'editableOption's are now full width. 'editableOptionShort'
 type added to replace the old style.

---
 src/core/Ingredient.mjs       |  1 +
 src/core/operations/Split.mjs |  4 ++--
 src/web/HTMLIngredient.mjs    | 29 +++++++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/core/Ingredient.mjs b/src/core/Ingredient.mjs
index dda66b8..00dd5f6 100755
--- a/src/core/Ingredient.mjs
+++ b/src/core/Ingredient.mjs
@@ -95,6 +95,7 @@ class Ingredient {
             case "binaryString":
             case "binaryShortString":
             case "editableOption":
+            case "editableOptionShort":
                 return Utils.parseEscapedChars(data);
             case "byteArray":
                 if (typeof data == "string") {
diff --git a/src/core/operations/Split.mjs b/src/core/operations/Split.mjs
index 88bf8ae..1340a38 100644
--- a/src/core/operations/Split.mjs
+++ b/src/core/operations/Split.mjs
@@ -26,12 +26,12 @@ class Split extends Operation {
         this.args = [
             {
                 "name": "Split delimiter",
-                "type": "editableOption",
+                "type": "editableOptionShort",
                 "value": SPLIT_DELIM_OPTIONS
             },
             {
                 "name": "Join delimiter",
-                "type": "editableOption",
+                "type": "editableOptionShort",
                 "value": JOIN_DELIM_OPTIONS
             }
         ];
diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs
index d026e1f..bb01d7d 100755
--- a/src/web/HTMLIngredient.mjs
+++ b/src/web/HTMLIngredient.mjs
@@ -165,6 +165,35 @@ class HTMLIngredient {
                 this.manager.addDynamicListener("#" + this.id, "change", this.populateOptionChange, this);
                 break;
             case "editableOption":
+                html += `<div class="form-group input-group">
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
+                    <input type="text"
+                        class="form-control arg"
+                        id="${this.id}"
+                        arg-name="${this.name}"
+                        value="${this.value[this.defaultIndex].value}"
+                        ${this.disabled ? "disabled" : ""}>
+                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                    <div class="input-group-append">
+                        <button type="button"
+                            class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+                            data-toggle="dropdown"
+                            data-boundary="scrollParent"
+                            aria-haspopup="true"
+                            aria-expanded="false">
+                            <span class="sr-only">Toggle Dropdown</span>
+                        </button>
+                        <div class="dropdown-menu editable-option-menu">`;
+                for (i = 0; i < this.value.length; i++) {
+                    html += `<a class="dropdown-item" href="#" value="${this.value[i].value}">${this.value[i].name}</a>`;
+                }
+                html += `</div>
+                    </div>
+                </div>`;
+
+                this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
+                break;
+            case "editableOptionShort":
                 html += `<div class="form-group input-group inline">
                     <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <input type="text"