From 13c1d1df7a50fb75c3074e8ce7258b7a84ba459b Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 13 Jun 2016 22:00:23 +0100
Subject: [PATCH] Update Debug node to use typedInput for complete/property
 option

---
 nodes/core/core/58-debug.html | 65 +++++++++++++++++------------------
 1 file changed, 31 insertions(+), 34 deletions(-)

diff --git a/nodes/core/core/58-debug.html b/nodes/core/core/58-debug.html
index 61d94123e..4f63dde70 100644
--- a/nodes/core/core/58-debug.html
+++ b/nodes/core/core/58-debug.html
@@ -16,14 +16,9 @@
 
 <script type="text/x-red" data-template-name="debug">
     <div class="form-row">
-        <label for="node-input-select-complete"><i class="fa fa-list"></i> <span data-i18n="debug.output"></span></label>
-        <select type="text" id="node-input-select-complete" style="display: inline-block; width: 250px; vertical-align: top;">
-            <option value="false" data-i18n="debug.msgprop"></option>
-            <option value="true" data-i18n="debug.msgobj"></option>
-        </select>
-    </div>
-    <div class="form-row" id="node-prop-row">
-        <label for="node-input-complete">&nbsp;</label>msg.<input type="text" style="width:208px" id="node-input-complete">
+        <label for="node-input-typed-complete"><i class="fa fa-list"></i> <span data-i18n="debug.output"></span></label>
+        <input id="node-input-typed-complete" type="text">
+        <input id="node-input-complete" type="hidden">
     </div>
     <div class="form-row">
         <label for="node-input-console"><i class="fa fa-random"></i> <span data-i18n="debug.to"></span></label>
@@ -52,31 +47,6 @@
 
 <script type="text/javascript">
 
-    function oneditprepare() {
-        if (this.complete === "true" || this.complete === true) {
-            // show complete message object
-            $("#node-input-select-complete").val("true");
-            $("#node-prop-row").hide();
-        } else {
-            // show msg.[   ]
-            var property = (!this.complete||(this.complete === "false")) ? "payload" : this.complete+"";
-            $("#node-input-select-complete").val("false");
-            $("#node-input-complete").val(property);
-            $("#node-prop-row").show();
-        }
-        $("#node-input-select-complete").change(function() {
-            var v = $("#node-input-select-complete option:selected").val();
-            $("#node-input-complete").val(v);
-            if (v !== "true") {
-                $("#node-input-complete").val("payload");
-                $("#node-prop-row").show();
-                $("#node-input-complete").focus();
-            } else {
-                $("#node-prop-row").hide();
-            }
-        });
-    }
-
     RED.nodes.registerType('debug',{
         category: 'output',
         defaults: {
@@ -283,7 +253,34 @@
             RED.events.off("workspace:change", refreshMessageList);
             delete RED._debug;
         },
-        oneditprepare: oneditprepare
+        oneditprepare: function() {
+            $("#node-input-typed-complete").typedInput({types:['msg', {value:"full",label:RED._("node-red:debug.msgobj"),hasValue:false}]});
+            if (this.complete === "true" || this.complete === true) {
+                // show complete message object
+                $("#node-input-typed-complete").typedInput('type','full');
+            } else {
+                var property = (!this.complete||(this.complete === "false")) ? "payload" : this.complete+"";
+                $("#node-input-typed-complete").typedInput('type','msg');
+                $("#node-input-typed-complete").typedInput('value',property);
+            }
+            $("#node-input-typed-complete").on('change',function() {
+                if ($("#node-input-typed-complete").typedInput('type') === 'msg'
+                    &&
+                    $("#node-input-typed-complete").typedInput('value') === ''
+                ) {
+                    $("#node-input-typed-complete").typedInput('value','payload');
+                }
+            });
+        },
+        oneditsave: function() {
+            var type = $("#node-input-typed-complete").typedInput('type');
+            if (type === 'full') {
+                $("#node-input-complete").val("true");
+            } else {
+                $("#node-input-complete").val($("#node-input-typed-complete").typedInput('value'));
+            }
+        }
+
     });
 </script>