Improving progress bar

main/css/base.css

@@ -119,7 +119,7 @@ form .formw input {
 #lp_navigation_elem .buttons,
 #lp_navigation_elem #progress_bar {
     width:130px;
-    margin-left:15px;
+    margin:0px 0px 10px 15px;    
 }
 
 * {

main/newscorm/aicc_api.php

@@ -541,12 +541,19 @@ function update_progress_bar(nbr_complete, nbr_total, mode)
         if(nbr_total == 0){nbr_total=1;}
         var percentage = (nbr_complete/nbr_total)*100;
         percentage = Math.round(percentage);
+        
+        var progress_bar  = $("#progress_bar_value");
+        progress_bar.css('width', percentage);
+        
+    /*
         var pr_text  = myframe.document.getElementById('progress_text');
         var pr_full  = myframe.document.getElementById('progress_img_full');
 
         var pr_empty = myframe.document.getElementById('progress_img_empty');
         pr_full.width = percentage;
         pr_empty.width = 100-percentage;
+        */
+        
         var mytext = '';
         switch(mode){
             case 'abs':

main/newscorm/learnpath.class.php

@@ -2077,28 +2077,10 @@ class learnpath {
         }
         $text = $percentage . $text_add;
 
-        // Default progress bar config
+        $output .= '<div class="progress progress-striped">                                    
-        // times that will be greater or shorter
+                        <div id="progress_bar_value" class="bar" style="width: '.$text.';"></div>                                            
-        $factor = 1.2;
+                    </div>
-        if ($from_lp)
+                    <div class="progresstext" id="progress_text">' . $text . '</div>';
-            $progress_height = '26';
-        else
-            $progress_height = '16';
-        $size = str_replace('%', '', $percentage);
-
-        $output ='<div>' .
-            '<img id="progress_img_limit_left" src="' . $css_path . 'bar_1.gif" width="1px" height="' . $progress_height . '">' .
-            '<img id="progress_img_full" src="' . $css_path . 'bar_1u.gif" width="' . $size * $factor . 'px" height="' . $progress_height . 'px" id="full_portion">' .
-            '<img id="progress_img_limit_middle" src="' . $css_path . 'bar_1m.gif" width="1px" height="' . $progress_height . '">';
-
-        if ($percentage <= 98) {
-            $output .= '<img id="progress_img_empty" src="' . $css_path . 'bar_1r.gif" width="' . (100 - $size) * $factor . 'px" height="' . $progress_height . 'px" id="empty_portion">';
-        } else {
-            //$output .= '<img id="progress_img_empty" src="' . $css_path . 'bar_1r.gif" width="0px" height="' . $progress_height . '" id="empty_portion">';
-        }
-
-        $output .= '<img id="progress_bar_img_limit_right" src="' . $css_path . 'bar_1.gif" width="1px" height="' . $progress_height . '"></div>' .
-        '<div class="progresstext" id="progress_text">' . $text . '</div>';
 
         return $output;
     }

main/newscorm/lp_list.php

@@ -17,7 +17,6 @@ if (empty($lp_controller_touched) || $lp_controller_touched != 1) {
 require_once 'back_compat.inc.php';
 $courseDir   = api_get_course_path().'/scorm';
 $baseWordDir = $courseDir;
-$display_progress_bar = true;
 
 require_once 'learnpathList.class.php';
 require_once 'learnpath.class.php';
@@ -256,15 +255,24 @@ if (!empty($flat_list)) {
 
         $lp_theme_css = $mystyle;
 
-        if ($display_progress_bar) {
+        
-            if ($is_allowed_to_edit) {            
+        $progress = learnpath::get_db_progress($id, api_get_user_id(), '%', '', false, api_get_session_id());
-                $dsp_progress = '<td>'.learnpath::get_db_progress($id, api_get_user_id(), '%', '', false, api_get_session_id()).'</td>';
+
-            } else {
+          
-                $dsp_progress = '<td><div style="width:125px;">'.learnpath::get_progress_bar('%',learnpath::get_db_progress($id, api_get_user_id(), '%', '', false, api_get_session_id())).'</div></td>';
+          
-            }
+          
+        if ($is_allowed_to_edit) {            
+            $dsp_progress = '<td>'.$progress.'</td>';
         } else {
-            $dsp_progress = '<td style="padding-top:1em;"><div style="width:125px">'.learnpath::get_db_progress($id, api_get_user_id(), 'both','',false, api_get_session_id()).'</div></td>';
+            //$dsp_progress = '<td><div style="width:125px;">'.learnpath::get_progress_bar('%',$progress)).'</div></td>';
-        }   
+            $dsp_progress = '<td>'.learnpath::get_progress_bar('%',learnpath::get_db_progress($id, api_get_user_id(), '%', '', false, api_get_session_id())).'</td>';
+            /*$dsp_progress = '<td align="center">                                    
+                                <div class="progress progress-striped">                                    
+                                    <div class="bar" style="width: '.$progress.';"></div>                                            
+                                </div>
+                                '.$progress.'                                    
+                            </td>';*/
+        }
         
         
         $dsp_edit = '<td class="td_actions">';

main/newscorm/scorm_api.php

@@ -1251,17 +1251,22 @@ function update_progress_bar(nbr_complete, nbr_total, mode)
     logit_lms('update_progress_bar('+nbr_complete+','+nbr_total+','+mode+')',2);
     logit_lms('could update with data: '+olms.lms_lp_id+','+olms.lms_view_id+','+olms.lms_user_id,2);
 
-        if(mode == ''){mode='%';}
+    if(mode == ''){mode='%';}
-        if(nbr_total == 0){nbr_total=1;}
+    if(nbr_total == 0){nbr_total=1;}
-        var percentage = (nbr_complete/nbr_total)*100;
+    var percentage = (nbr_complete/nbr_total)*100;
-        percentage = Math.round(percentage);
+    percentage = Math.round(percentage);
 
     var pr_text  = $("#progress_text");
+    var progress_bar  = $("#progress_bar_value");
+    progress_bar.css('width', percentage);
+    
+    /*
     var pr_full  = $("#progress_img_full");
     var pr_empty = $("#progress_img_empty");
-
     pr_full.attr('width',percentage*1.2);
     pr_empty.attr('width',(100-percentage)*1.2);
+    
+    */
 
         var mytext = '';
         switch(mode){