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 = $('
');
this.digitContainer = $('');
- this.element.html([this.digitContainer, $(' MHz')]);
+ this.displayContainer.html([this.digitContainer, $(' MHz')]);
+ 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 = $('');
+ 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){