From 4b60b7e0463d5461458c358ce458ee6ffcc4203d Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sat, 25 Jan 2020 22:35:44 +0100
Subject: [PATCH] frequency editor on click

---
 htdocs/css/openwebrx.css       | 19 ++++++++++++++-----
 htdocs/lib/FrequencyDisplay.js | 31 ++++++++++++++++++++++++++++---
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 556558f..349ea4d 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -311,16 +311,25 @@ input[type=range]:focus::-ms-fill-upper
     font-style: normal;
 }
 
-#webrx-actual-freq
-{
+#webrx-actual-freq {
 	width: 100%;
 	text-align: left;
-	font-size: 16pt;
-	font-family: 'roboto-mono';
 	padding: 0;
 	margin: 0;
-	line-height:22px;
+}
 
+#webrx-actual-freq input {
+    font-family: 'roboto-mono';
+    width: 98%;
+    box-sizing: border-box;
+    border: 0;
+    padding: 0;
+}
+
+#webrx-actual-freq, #webrx-actual-freq input {
+	font-size: 16pt;
+	font-family: 'roboto-mono';
+	line-height: 22px;
 }
 
 #webrx-mouse-freq
diff --git a/htdocs/lib/FrequencyDisplay.js b/htdocs/lib/FrequencyDisplay.js
index 0353fd8..8c749ca 100644
--- a/htdocs/lib/FrequencyDisplay.js
+++ b/htdocs/lib/FrequencyDisplay.js
@@ -1,8 +1,10 @@
 function FrequencyDisplay(element) {
     this.element = $(element);
     this.digits = [];
+    this.displayContainer = $('<div>');
     this.digitContainer = $('<span>');
-    this.element.html([this.digitContainer, $('<span> MHz</span>')]);
+    this.displayContainer.html([this.digitContainer, $('<span> MHz</span>')]);
+    this.element.html(this.displayContainer);
     this.decimalSeparator = (0.1).toLocaleString().substring(1, 2);
     this.setFrequency(0);
 }
@@ -38,7 +40,7 @@ TuneableFrequencyDisplay.prototype = new FrequencyDisplay();
 
 TuneableFrequencyDisplay.prototype.setupEvents = function() {
     var me = this;
-    this.element.on('wheel', function(e){
+    me.element.on('wheel', function(e){
         e.preventDefault();
         e.stopPropagation();
 
@@ -53,7 +55,30 @@ TuneableFrequencyDisplay.prototype.setupEvents = function() {
             l(newFrequency);
         });
     });
-    this.listeners = [];
+    me.listeners = [];
+    me.element.on('click', function(){
+        var input = $('<input>');
+        var submit = function(){
+            var freq = parseInt(input.val());
+            if (!isNaN(freq)) {
+                me.listeners.forEach(function(l) {
+                    l(freq);
+                });
+            }
+            input.remove();
+            me.displayContainer.show();
+        };
+        input.on('blur', submit).on('keyup', function(e){
+            if (e.keyCode == 13) return submit();
+        });
+        input.on('click', function(e){
+            e.stopPropagation();
+        });
+        input.val(me.frequency);
+        me.displayContainer.hide();
+        me.element.append(input);
+        input.focus();
+    });
 };
 
 TuneableFrequencyDisplay.prototype.onFrequencyChange = function(listener){