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

use css animations for the progressbar (better performance?)

Browse Source
This commit is contained in:
Jakob Ketterl 2020-12-28 20:55:02 +01:00
parent 71043d4305
commit 993aa87776
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
htdocs/css/openwebrx.css
View File

@ -551,13 +551,23 @@ img.openwebrx-mirror-img
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
overflow: hidden;
} }
.openwebrx-progressbar-bar .openwebrx-progressbar-bar {
{ background-color: #00aba6;
border-radius: 5px; border-radius: 5px;
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute;
left: -100%;
transition-property: left background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.openwebrx-progressbar--over .openwebrx-progressbar-bar {
background-color: #ff6262;
} }
.openwebrx-progressbar-text .openwebrx-progressbar-text
@ -566,6 +576,7 @@ img.openwebrx-mirror-img
left:0px; left:0px;
top:4px; top:4px;
width: inherit; width: inherit;
z-index: 1;
} }
#openwebrx-panel-status #openwebrx-panel-status

5
htdocs/lib/ProgressBar.js
View File

@ -3,7 +3,6 @@ ProgressBar = function(el) {
this.$innerText = $('<span class="openwebrx-progressbar-text">' + this.getDefaultText() + '</span>'); this.$innerText = $('<span class="openwebrx-progressbar-text">' + this.getDefaultText() + '</span>');
this.$innerBar = $('<div class="openwebrx-progressbar-bar"></div>'); this.$innerBar = $('<div class="openwebrx-progressbar-bar"></div>');
this.$el.empty().append(this.$innerText, this.$innerBar); this.$el.empty().append(this.$innerText, this.$innerBar);
this.$innerBar.css('width', '0%');
}; };
ProgressBar.prototype.getDefaultText = function() { ProgressBar.prototype.getDefaultText = function() {
@ -19,7 +18,7 @@ ProgressBar.prototype.set = function(val, text, over) {
ProgressBar.prototype.setValue = function(val) { ProgressBar.prototype.setValue = function(val) {
if (val < 0) val = 0; if (val < 0) val = 0;
if (val > 1) val = 1; if (val > 1) val = 1;
this.$innerBar.stop().animate({width: val * 100 + '%'}, 700); this.$innerBar.css({left: (val - 1) * 100 + '%'});
}; };
ProgressBar.prototype.setText = function(text) { ProgressBar.prototype.setText = function(text) {
@ -27,7 +26,7 @@ ProgressBar.prototype.setText = function(text) {
}; };
ProgressBar.prototype.setOver = function(over) { ProgressBar.prototype.setOver = function(over) {
this.$innerBar.css('backgroundColor', (over) ? "#ff6262" : "#00aba6"); this.$el[over ? 'addClass' : 'removeClass']('openwebrx-progressbar--over');
}; };
AudioBufferProgressBar = function(el) { AudioBufferProgressBar = function(el) {