openwebrx-clone/htdocs/lib/FrequencyDisplay.js
2020-02-01 21:48:46 +01:00

102 lines
3.0 KiB
JavaScript

function FrequencyDisplay(element) {
this.element = $(element);
this.digits = [];
this.setupElements();
this.setFrequency(0);
}
FrequencyDisplay.prototype.setupElements = function() {
this.displayContainer = $('<div>');
this.digitContainer = $('<span>');
this.displayContainer.html([this.digitContainer, $('<span> MHz</span>')]);
this.element.html(this.displayContainer);
};
FrequencyDisplay.prototype.setFrequency = function(freq) {
this.frequency = freq;
var formatted = (freq / 1e6).toLocaleString(undefined, {maximumFractionDigits: 4, minimumFractionDigits: 4});
var children = this.digitContainer.children();
for (var i = 0; i < formatted.length; i++) {
if (!this.digits[i]) {
this.digits[i] = $('<span>');
var before = children[i];
if (before) {
$(before).after(this.digits[i]);
} else {
this.digitContainer.append(this.digits[i]);
}
}
this.digits[i][(isNaN(formatted[i]) ? 'remove' : 'add') + 'Class']('digit');
this.digits[i].html(formatted[i]);
}
while (this.digits.length > formatted.length) {
this.digits.pop().remove();
}
};
function TuneableFrequencyDisplay(element) {
FrequencyDisplay.call(this, element);
this.setupEvents();
}
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() {
var me = this;
me.listeners = [];
me.element.on('wheel', function(e){
e.preventDefault();
e.stopPropagation();
var index = me.digitContainer.find('.digit').index(e.target);
if (index < 0) return;
var delta = 10 ** (Math.floor(Math.log10(me.frequency)) - index);
if (e.originalEvent.deltaY > 0) delta *= -1;
var newFrequency = me.frequency + delta;
me.listeners.forEach(function(l) {
l(newFrequency);
});
});
var submit = function(){
var freq = parseInt(me.input.val());
if (!isNaN(freq)) {
me.listeners.forEach(function(l) {
l(freq);
});
}
me.input.hide();
me.displayContainer.show();
};
me.input.on('blur', submit).on('keyup', function(e){
if (e.keyCode == 13) return submit();
if (e.keyCode == 27) {
me.input.hide();
me.displayContainer.show();
}
});
me.input.on('click', function(e){
e.stopPropagation();
});
me.element.on('click', function(){
me.input.val(me.frequency);
me.input.show();
me.displayContainer.hide();
me.input.focus();
});
};
TuneableFrequencyDisplay.prototype.onFrequencyChange = function(listener){
this.listeners.push(listener);
};