From 4028c719f3031d0062bb9ea8bbca31d60852c347 Mon Sep 17 00:00:00 2001
From: Davo Smith <git@davosmith.co.uk>
Date: Tue, 10 May 2011 11:21:48 +0100
Subject: [PATCH] CONTRIB-1869 Added animation to the update (whilst saving the
 changes to the server)

---
 mod/checklist/locallib.php    |  4 ++-
 mod/checklist/styles.php      | 15 +++++++++
 mod/checklist/updatechecks.js | 57 +++++++++++++++++++++++++++++------
 3 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/mod/checklist/locallib.php b/mod/checklist/locallib.php
index 7900d59d..4d0c826f 100644
--- a/mod/checklist/locallib.php
+++ b/mod/checklist/locallib.php
@@ -664,6 +664,7 @@ function view_progressbar() {
             echo '<span id="checklistprogressrequired">';
             echo '<div class="checklist_progress_outer">';
             echo '<div class="checklist_progress_inner" style="width:'.$percentcomplete.'%; background-image: url('.$CFG->wwwroot.'/mod/checklist/images/progress.gif);" >&nbsp;</div>';
+            echo '<div class="checklist_progress_anim" style="width:'.$percentcomplete.'%; background-image: url('.$CFG->wwwroot.'/mod/checklist/images/progress-fade.gif);" >&nbsp;</div>';
             echo '</div>';
             echo '<span class="checklist_progress_percent">&nbsp;'.sprintf('%0d',$percentcomplete).'% </span>';
             echo '</span>';
@@ -676,6 +677,7 @@ function view_progressbar() {
         echo '<span id="checklistprogressall">';
         echo '<div class="checklist_progress_outer">';
         echo '<div class="checklist_progress_inner" style="width:'.$allpercentcomplete.'%; background-image: url('.$CFG->wwwroot.'/mod/checklist/images/progress.gif);" >&nbsp;</div>';
+        echo '<div class="checklist_progress_anim" style="width:'.$allpercentcomplete.'%; background-image: url('.$CFG->wwwroot.'/mod/checklist/images/progress-fade.gif);" >&nbsp;</div>';
         echo '</div>';
         echo '<span class="checklist_progress_percent">&nbsp;'.sprintf('%0d',$allpercentcomplete).'% </span>';
         echo '</span>';
@@ -778,7 +780,7 @@ function view_items($viewother = false, $userreport = false) {
 
                 if (!$viewother) {
                     // Load the Javascript required to send changes back to the server (without clicking 'save')
-                    require_js(array('yui_yahoo', 'yui_dom', 'yui_event', 'yui_connection'));
+                    require_js(array('yui_yahoo', 'yui_dom', 'yui_event', 'yui_connection', 'yui_animation'));
                     require_js($CFG->wwwroot.'/mod/checklist/updatechecks.js');
                     $updatechecksurl = $CFG->wwwroot.'/mod/checklist/updatechecks.php';
                     echo '<script type="text/javascript">mod_checklist.set_server("'.$updatechecksurl.'","'.sesskey().'","'.$this->cm->id.'");</script>';
diff --git a/mod/checklist/styles.php b/mod/checklist/styles.php
index eb2e4d75..2858c984 100644
--- a/mod/checklist/styles.php
+++ b/mod/checklist/styles.php
@@ -154,6 +154,8 @@
     background-color: transparent;
     height: 15px;
     float: left;
+    overflow: clip;
+    position: relative;
 }
 
 .checklist_progress_inner {
@@ -162,4 +164,17 @@
     width: 100%;
     background-repeat: repeat-x;
     background-position: top;
+    float: left;
+}
+
+.checklist_progress_anim {
+    background-color: #98c193;
+    height: 15px;
+    width: 0;
+    background-repeat: repeat-x;
+    background-position: top;
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    top: 0;
 }
\ No newline at end of file
diff --git a/mod/checklist/updatechecks.js b/mod/checklist/updatechecks.js
index 5d8776de..60bca9e1 100644
--- a/mod/checklist/updatechecks.js
+++ b/mod/checklist/updatechecks.js
@@ -9,6 +9,8 @@ mod_checklist = {
     optionalcount: 0,
     requiredchecked: 0,
     optionalchecked: 0,
+    anim1: null,
+    anim2: null,
 
     set_server: function (url, sesskey, cmid) {
 	this.serverurl = url;
@@ -21,9 +23,7 @@ mod_checklist = {
 	var YD = YAHOO.util.Dom;
 
 	this.updatelist = new Array();
-
-	var checklist = YAHOO.util.Dom.get('checklistouter');
-	var items = checklist.getElementsByClassName('checklistitem');
+	var items = YD.getElementsByClassName('checklistitem');
 	for (var i=0; i<items.length; i++) {
 	    YE.addListener(items[i], 'click', function (e) {
 		mod_checklist.check_click(this, e);
@@ -40,6 +40,7 @@ mod_checklist = {
 		}
 	    }
 	}
+
 	YD.setStyle('checklistsavechecks', 'display', 'none');
 	window.onunload =  function(e) {
 	    mod_checklist.send_update_batch(true);
@@ -65,22 +66,59 @@ mod_checklist = {
 	this.update_server(el.value, el.checked);
     },
 
+    startanim: function(number, ya) {
+	if (number == 1) {
+	    if (this.anim1) {
+		this.anim1.stop();
+	    }
+	    this.anim1 = ya;
+	    this.anim1.animate();
+	} else if (number == 2) {
+	    if (this.anim2) {
+		this.anim2.stop();
+	    }
+	    this.anim2 = ya;
+	    this.anim2.animate();
+	}
+    },
+
     update_progress_bar: function() {
 	var YD = YAHOO.util.Dom;
+	var YA = YAHOO.util.Anim;
+	var YE = YAHOO.util.Easing.easeOut;
 	var prall = YD.get('checklistprogressall');
 	var prreq = YD.get('checklistprogressrequired');
 
 	var allpercent = (this.optionalchecked + this.requiredchecked) * 100.0 / (this.optionalcount + this.requiredcount);
-	var inner = prall.getElementsByClassName('checklist_progress_inner')[0];
-	YD.setStyle(inner, 'width', allpercent+'%');
-	var disppercent = prall.getElementsByClassName('checklist_progress_percent')[0];
+	var inner = YD.getElementsByClassName('checklist_progress_inner', 'div', prall)[0];
+	var inneranim = YD.getElementsByClassName('checklist_progress_anim', 'div', prall)[0];
+	var oldpercent = parseFloat(YD.getStyle(inner, 'width').replace("%",""));
+	if (allpercent > oldpercent) {
+	    YD.setStyle(inneranim, 'width', allpercent+'%');
+	    this.startanim(1, new YA(inner, { width: { from: oldpercent, to: allpercent, unit: '%' } }, 1, YE));
+	} else if (allpercent < oldpercent) {
+	    YD.setStyle(inner, 'width', allpercent+'%');
+	    var oldanimpercent = parseFloat(YD.getStyle(inneranim, 'width').replace("%",""));
+	    this.startanim(1, new YA(inneranim, { width: { from: oldanimpercent, to: allpercent, unit: '%' } }, 1, YE));
+	}
+	var disppercent = YD.getElementsByClassName('checklist_progress_percent', 'span', prall)[0];
 	disppercent.innerHTML = '&nbsp;'+allpercent.toFixed(0)+'% ';
 
 	if (prreq) {
 	    var reqpercent = this.requiredchecked * 100.0 / this.requiredcount;
-	    var inner = prreq.getElementsByClassName('checklist_progress_inner')[0];
-	    YD.setStyle(inner, 'width', reqpercent+'%');
-	    var disppercent = prreq.getElementsByClassName('checklist_progress_percent')[0];
+	    var inner = YD.getElementsByClassName('checklist_progress_inner', 'div', prreq)[0];
+	    var inneranim = YD.getElementsByClassName('checklist_progress_anim', 'div', prreq)[0];
+	    var oldpercent = parseFloat(YD.getStyle(inner, 'width').replace("%",""));
+	    if (reqpercent > oldpercent) {
+		YD.setStyle(inneranim, 'width', reqpercent+'%');
+		this.startanim(2, new YA(inner, { width: { from: oldpercent, to: reqpercent, unit: '%' } }, 1, YE));
+	    } else if (reqpercent < oldpercent) {
+		YD.setStyle(inner, 'width', reqpercent+'%');
+		var oldanimpercent = parseFloat(YD.getStyle(inneranim, 'width').replace("%",""));
+		this.startanim(2, new YA(inneranim, { width: { from: oldanimpercent, to: reqpercent, unit: '%' } }, 1, YE));
+	    }
+
+	    var disppercent = YD.getElementsByClassName('checklist_progress_percent', 'span', prreq)[0];
 	    disppercent.innerHTML = '&nbsp;'+reqpercent.toFixed(0)+'% ';
 	}
 
@@ -154,3 +192,4 @@ mod_checklist = {
 }
 
 YAHOO.util.Event.onDOMReady(function() { mod_checklist.init() });
+