openwebrx-clone/htdocs/lib/FrequencyDisplay.js

107 lines
3.2 KiB
JavaScript
Raw Normal View History

2020-01-18 20:33:10 +00:00
function FrequencyDisplay(element) {
this.element = $(element);
2020-01-18 23:00:51 +00:00
this.digits = [];
2020-01-25 21:47:47 +00:00
this.setupElements();
this.setFrequency(0);
}
FrequencyDisplay.prototype.setupElements = function() {
2020-01-25 21:35:44 +00:00
this.displayContainer = $('<div>');
2020-01-18 23:00:51 +00:00
this.digitContainer = $('<span>');
2020-01-25 21:35:44 +00:00
this.displayContainer.html([this.digitContainer, $('<span> MHz</span>')]);
this.element.html(this.displayContainer);
2020-01-25 21:47:47 +00:00
};
2020-01-18 20:33:10 +00:00
FrequencyDisplay.prototype.setFrequency = function(freq) {
2020-01-18 23:00:51 +00:00
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();
2020-01-25 21:47:47 +00:00
TuneableFrequencyDisplay.prototype.setupElements = function() {
FrequencyDisplay.prototype.setupElements.call(this);
this.input = $('<input>');
this.input.hide();
this.element.append(this.input);
};
2020-01-18 23:00:51 +00:00
TuneableFrequencyDisplay.prototype.setupEvents = function() {
var me = this;
2020-01-25 21:47:47 +00:00
2020-01-25 21:35:44 +00:00
me.element.on('wheel', function(e){
2020-01-18 23:00:51 +00:00
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;
2020-05-01 22:05:20 +00:00
me.element.trigger('frequencychange', newFrequency);
2020-01-18 23:00:51 +00:00
});
2020-01-25 21:47:47 +00:00
var submit = function(){
var freq = parseInt(me.input.val());
if (!isNaN(freq)) {
2020-05-01 22:05:20 +00:00
me.element.trigger('frequencychange', freq);
2020-01-25 21:47:47 +00:00
}
me.input.hide();
me.displayContainer.show();
};
me.input.on('blur', submit).on('keyup', function(e){
if (e.keyCode == 13) return submit();
2020-02-01 20:48:46 +00:00
if (e.keyCode == 27) {
me.input.hide();
me.displayContainer.show();
}
2020-01-25 21:47:47 +00:00
});
me.input.on('click', function(e){
e.stopPropagation();
});
2020-01-25 21:35:44 +00:00
me.element.on('click', function(){
2020-01-25 21:47:47 +00:00
me.input.val(me.frequency);
me.input.show();
2020-01-25 21:35:44 +00:00
me.displayContainer.hide();
2020-01-25 21:47:47 +00:00
me.input.focus();
2020-01-25 21:35:44 +00:00
});
2020-01-18 23:00:51 +00:00
};
2020-05-01 22:05:20 +00:00
$.fn.frequencyDisplay = function() {
if (!this.data('frequencyDisplay')) {
this.data('frequencyDisplay', new FrequencyDisplay(this));
}
return this.data('frequencyDisplay');
}
$.fn.tuneableFrequencyDisplay = function() {
if (!this.data('frequencyDisplay')) {
this.data('frequencyDisplay', new TuneableFrequencyDisplay(this));
}
return this.data('frequencyDisplay');
}