Skip to content

Commit

Permalink
CONTRIB-1869 Added animation to the update (whilst saving the changes…
Browse files Browse the repository at this point in the history 
… to the server)
  • Loading branch information
@davosmith
davosmith committed May 10, 2011
1 parent 9deb4b7 commit 4028c71
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 10 deletions.
4 changes: 3 additions & 1 deletion mod/checklist/locallib.php
View file
Expand Up @@ -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>';
Expand All @@ -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>';
Expand Down Expand Up @@ -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>';
Expand Down
15 changes: 15 additions & 0 deletions mod/checklist/styles.php
View file
Expand Up @@ -154,6 +154,8 @@
background-color: transparent;
height: 15px;
float: left;
overflow: clip;
position: relative;
}

.checklist_progress_inner {
Expand All @@ -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;
}
57 changes: 48 additions & 9 deletions mod/checklist/updatechecks.js
View file
Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -40,6 +40,7 @@ mod_checklist = {
}
}
}

YD.setStyle('checklistsavechecks', 'display', 'none');
window.onunload = function(e) {
mod_checklist.send_update_batch(true);
Expand All @@ -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)+'% ';
}

Expand Down Expand Up @@ -154,3 +192,4 @@ mod_checklist = {
}

YAHOO.util.Event.onDOMReady(function() { mod_checklist.init() });

0 comments on commit 4028c71

Please sign in to comment.