MDL-44486 core: Rewrite JavaScript progressbar

lang/en/moodle.php

@@ -1601,6 +1601,7 @@ $string['searchhelp'] = '<p>You can search for multiple words at once and can re
 $string['searchoptions'] = 'Search options';
 $string['searchresults'] = 'Search results';
 $string['sec'] = 'sec';
+$string['secondsleft'] = '{$a} secs';
 $string['seconds'] = 'seconds';
 $string['secondstotime172800'] = '2 days';
 $string['secondstotime259200'] = '3 days';

lib/javascript-static.js

@@ -1413,36 +1413,33 @@ function stripHTML(str) {
     return ret;
 }
 
-Number.prototype.fixed=function(n){
-    with(Math)
-        return round(Number(this)*pow(10,n))/pow(10,n);
-};
-function update_progress_bar (id, width, pt, msg, es){
-    var percent = pt;
-    var status = document.getElementById("status_"+id);
-    var percent_indicator = document.getElementById("pt_"+id);
-    var progress_bar = document.getElementById("progress_"+id);
-    var time_es = document.getElementById("time_"+id);
-    status.innerHTML = msg;
-    percent_indicator.innerHTML = percent.fixed(2) + '%';
-    if(percent == 100) {
-        progress_bar.style.background = "green";
-        time_es.style.display = "none";
-    } else {
-        progress_bar.style.background = "#FFCC66";
-        if (es == '?'){
-            time_es.innerHTML = "";
-        }else {
-            time_es.innerHTML = es.fixed(2)+" sec";
-            time_es.style.display
-                = "block";
-        }
+function updateProgressBar(id, percent, msg, estimate) {
+    var progressIndicator = Y.one('#' + id);
+    if (!progressIndicator) {
+        return;
     }
-    progress_bar.style.width = width + "px";
 
+    var progressBar = progressIndicator.one('.bar'),
+        statusIndicator = progressIndicator.one('h2'),
+        estimateIndicator = progressIndicator.one('p');
+
+    statusIndicator.set('innerHTML', Y.Escape.html(msg));
+    progressBar.set('innerHTML', Y.Escape.html('' + percent + '%'));
+    if (percent === 100) {
+        progressIndicator.addClass('progress-success');
+        estimateIndicator.set('innerHTML', null);
+    } else {
+        if (estimate) {
+            estimateIndicator.set('innerHTML', Y.Escape.html(estimate));
+        } else {
+            estimateIndicator.set('innerHTML', null);
+        }
+        progressIndicator.removeClass('progress-success');
+    }
+    progressBar.setAttribute('aria-valuenow', percent);
+    progressBar.setStyle('width', percent + '%');
 }
 
-
 // ===== Deprecated core Javascript functions for Moodle ====
 //       DO NOT USE!!!!!!!
 // Do not put this stuff in separate file because it only adds extra load on servers!

lib/weblib.php

@@ -2994,21 +2994,22 @@ class progress_bar {
      * @return void Echo's output
      */
     public function create() {
+        global $PAGE;
+
         $this->time_start = microtime(true);
         if (CLI_SCRIPT) {
             return; // Temporary solution for cli scripts.
         }
-        $widthplusborder = $this->width + 2;
+
+        $PAGE->requires->string_for_js('secondsleft', 'moodle');
+
         $htmlcode = <<<EOT
-        <div style="text-align:center;width:{$widthplusborder}px;clear:both;padding:0;margin:0 auto;">
-            <h2 id="status_{$this->html_id}" style="text-align: center;margin:0 auto"></h2>
-            <p id="time_{$this->html_id}"></p>
-            <div id="bar_{$this->html_id}" style="border-style:solid;border-width:1px;width:{$this->width}px;height:50px;">
-                <div id="progress_{$this->html_id}"
-                style="text-align:center;background:#FFCC66;width:4px;border:1px
-                solid gray;height:38px; padding-top:10px;">&nbsp;<span id="pt_{$this->html_id}"></span>
-                </div>
+        <div class="progressbar_container" style="width: {$this->width}px;" id="{$this->html_id}">
+            <h2></h2>
+            <div class="progress progress-striped active">
+                <div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">&nbsp;</div>
             </div>
+            <p></p>
         </div>
 EOT;
         flush();
@@ -3034,12 +3035,11 @@ EOT;
             return; // Temporary solution for cli scripts.
         }
 
-        $es = $this->estimate($percent);
+        $estimate = $this->estimate($percent);
 
-        if ($es === null) {
+        if ($estimate === null) {
             // Always do the first and last updates.
-            $es = "?";
-        } else if ($es == 0) {
+        } else if ($estimate == 0) {
             // Always do the last updates.
         } else if ($this->lastupdate + 20 < time()) {
             // We must update otherwise browser would time out.
@@ -3047,13 +3047,15 @@ EOT;
             // No significant change, no need to update anything.
             return;
         }
+        if (is_numeric($estimate)) {
+            $estimate = get_string('secondsleft', 'moodle', round($estimate, 2));
+        }
 
-        $this->percent = $percent;
+        $this->percent = round($percent, 2);
         $this->lastupdate = microtime(true);
 
-        $w = ($this->percent/100) * $this->width;
-        echo html_writer::script(js_writer::function_call('update_progress_bar',
-            array($this->html_id, $w, $this->percent, $msg, $es)));
+        echo html_writer::script(js_writer::function_call('updateProgressBar',
+            array($this->html_id, $this->percent, $msg, $estimate)));
         flush();
     }
 

theme/base/style/core.css

@@ -2041,3 +2041,8 @@ body.lockscroll {
 .well-small {
   padding: 9px;
 }
+
+.progressbar_container {
+    max-width: 500px;
+    margin: 0 auto;
+}

theme/bootstrapbase/less/moodle/core.less

@@ -2239,3 +2239,8 @@ body.lockscroll {
         margin-right: 25px;
     }
 }
+
+.progressbar_container {
+    max-width: 500px;
+    margin: 0 auto;
+}