joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use static elements

Browse Source
This commit is contained in:
Jakob Ketterl 2020-01-25 22:47:47 +01:00
parent 4b60b7e046
commit 8fc981c8a0
2 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/index.html
View File

@ -144,8 +144,8 @@
<div class="openwebrx-panel" id="openwebrx-panel-receiver" data-panel-name="client-params" style="width: 259px;"> <div class="openwebrx-panel" id="openwebrx-panel-receiver" data-panel-name="client-params" style="width: 259px;">
<div class="openwebrx-panel-line frequencies-container"> <div class="openwebrx-panel-line frequencies-container">
<div class="frequencies"> <div class="frequencies">
<div id="webrx-actual-freq">---.--- MHz</div> <div id="webrx-actual-freq"></div>
<div id="webrx-mouse-freq">---.--- MHz</div> <div id="webrx-mouse-freq"></div>
</div> </div>
<div class="openwebrx-button openwebrx-square-button openwebrx-bookmark-button" style="display:none;" title="Add bookmark..."> <div class="openwebrx-button openwebrx-square-button openwebrx-bookmark-button" style="display:none;" title="Add bookmark...">
<img src="static/gfx/openwebrx-bookmark.png"> <img src="static/gfx/openwebrx-bookmark.png">

37
htdocs/lib/FrequencyDisplay.js
View File

@ -1,13 +1,16 @@
function FrequencyDisplay(element) { function FrequencyDisplay(element) {
this.element = $(element); this.element = $(element);
this.digits = []; this.digits = [];
this.setupElements();
this.setFrequency(0);
}
FrequencyDisplay.prototype.setupElements = function() {
this.displayContainer = $('<div>'); this.displayContainer = $('<div>');
this.digitContainer = $('<span>'); this.digitContainer = $('<span>');
this.displayContainer.html([this.digitContainer, $('<span> MHz</span>')]); this.displayContainer.html([this.digitContainer, $('<span> MHz</span>')]);
this.element.html(this.displayContainer); this.element.html(this.displayContainer);
this.decimalSeparator = (0.1).toLocaleString().substring(1, 2); };
this.setFrequency(0);
}
FrequencyDisplay.prototype.setFrequency = function(freq) { FrequencyDisplay.prototype.setFrequency = function(freq) {
this.frequency = freq; this.frequency = freq;
@ -38,8 +41,17 @@ function TuneableFrequencyDisplay(element) {
TuneableFrequencyDisplay.prototype = new FrequencyDisplay(); TuneableFrequencyDisplay.prototype = new FrequencyDisplay();
TuneableFrequencyDisplay.prototype.setupElements = function() {
FrequencyDisplay.prototype.setupElements.call(this);
this.input = $('<input>');
this.input.hide();
this.element.append(this.input);
};
TuneableFrequencyDisplay.prototype.setupEvents = function() { TuneableFrequencyDisplay.prototype.setupEvents = function() {
var me = this; var me = this;
me.listeners = [];
me.element.on('wheel', function(e){ me.element.on('wheel', function(e){
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -55,29 +67,28 @@ TuneableFrequencyDisplay.prototype.setupEvents = function() {
l(newFrequency); l(newFrequency);
}); });
}); });
me.listeners = [];
me.element.on('click', function(){
var input = $('<input>');
var submit = function(){ var submit = function(){
var freq = parseInt(input.val()); var freq = parseInt(me.input.val());
if (!isNaN(freq)) { if (!isNaN(freq)) {
me.listeners.forEach(function(l) { me.listeners.forEach(function(l) {
l(freq); l(freq);
}); });
} }
input.remove(); me.input.hide();
me.displayContainer.show(); me.displayContainer.show();
}; };
input.on('blur', submit).on('keyup', function(e){ me.input.on('blur', submit).on('keyup', function(e){
if (e.keyCode == 13) return submit(); if (e.keyCode == 13) return submit();
}); });
input.on('click', function(e){ me.input.on('click', function(e){
e.stopPropagation(); e.stopPropagation();
}); });
input.val(me.frequency); me.element.on('click', function(){
me.input.val(me.frequency);
me.input.show();
me.displayContainer.hide(); me.displayContainer.hide();
me.element.append(input); me.input.focus();
input.focus();
}); });
}; };