df-progressbar-tooltip-patch #3

df · 2020-05-11T13:01:31Z

df commented

2020-05-11 13:01:31 +00:00

The image-based progress bar doesn't show the actual value, which might be especially interesting in Diagnostics>MuxInfo. This patch (which I've had lying around for ages but keeps getting overwritten) makes it appear as a tooltip in typical browsers.

WebIf seems to use two different progress bar styles: this one and the jQueryUI plugin with the reportprogress() API. Also, the currently included jQueryUI version has its own progressbar widget.

I guess it wouldn't be hard to re-implement the jQueryUI plugin using this image-based progress bar widget, something like this:

(function($) {                                                                   
       //Main Method                                                            
       $.fn.reportprogress = function(val,maxVal) {     
               var max=100;                                                     
               if (maxVal) max=maxVal;                            
               return this.each(                                                
                       function(){                                  
                               var progbar=$(this).find("img .progress");
                               
                               if (progbar) {                                   
                                       var pct=Math.round(val/max*100);         
                                       var pct_txt=pct+"%";                     
                                       var pos;                                 
                                       progbar.attr("title", pct_txt);                   
                                       progbar.attr("alt", pct_txt);
                                       pos=-Math.round((1-val)/max*118);         
                                       progbar.css("background-position", pos+"px 0");
                               }                                                
                       }                                                        
               );                                                               
       }; 
})(jQuery);

Then the progress bars could be consistent across the WebIf.

The image-based progress bar doesn't show the actual value, which might be especially interesting in Diagnostics>MuxInfo. This patch (which I've had lying around for ages but keeps getting overwritten) makes it appear as a tooltip in typical browsers. WebIf seems to use two different progress bar styles: this one and the jQueryUI plugin with the ```reportprogress()``` API. Also, the currently included jQueryUI version has its own progressbar widget. I guess it wouldn't be hard to re-implement the jQueryUI plugin using this image-based progress bar widget, something like this: ``` (function($) { //Main Method $.fn.reportprogress = function(val,maxVal) { var max=100; if (maxVal) max=maxVal; return this.each( function(){ var progbar=$(this).find("img .progress"); if (progbar) { var pct=Math.round(val/max*100); var pct_txt=pct+"%"; var pos; progbar.attr("title", pct_txt); progbar.attr("alt", pct_txt); pos=-Math.round((1-val)/max*118); progbar.css("background-position", pos+"px 0"); } } ); }; })(jQuery); ``` Then the progress bars could be consistent across the WebIf.

af123 referenced this issue from a commit

2020-06-03 10:43:54 +00:00

Merge pull request 'df-progressbar-tooltip-patch' (#3) from df/webif:df-progressbar-tooltip-patch into master

af123 closed this pull request

2020-06-03 10:43:55 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: hummypkg/webif#3