forked from kanemura1206/maspen
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MDL-21400 completion manual toggle ajax converted to YUI3, simplified…
… a bit, replaced textual feedback with standard ajax progress indicator spinning icon (fully themable)
- Loading branch information
Showing
6 changed files
with
105 additions
and
130 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,101 @@ | ||
| function completion_init() { | ||
| // Check the reload-forcing | ||
| var changeDetector=document.getElementById('completion_dynamic_change'); | ||
| if(changeDetector.value==1) { | ||
| changeDetector.value=0; | ||
| window.location.reload(); | ||
| return; | ||
| } | ||
|
|
||
| var toggles=YAHOO.util.Dom.getElementsByClassName('togglecompletion', 'form'); | ||
| for(var i=0;i<toggles.length;i++) { | ||
| if(toggles[i].className.indexOf('preventjs')==-1) { | ||
| completion_init_toggle(toggles[i]); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function completion_init_toggle(form) { | ||
| // Store all necessary references for easy access | ||
| var inputs=form.getElementsByTagName('input'); | ||
| for(var i=0;i<inputs.length;i++) { | ||
| switch(inputs[i].name) { | ||
| case 'id' : form.cmid=inputs[i].value; break; | ||
| case 'completionstate' : form.otherState=inputs[i].value; break; | ||
| M.core_completion = {}; | ||
|
|
||
| M.core_completion.init = function(Y) { | ||
| // Check the reload-forcing | ||
| var changeDetector = Y.one('#completion_dynamic_change'); | ||
| if (changeDetector.get('value') > 0) { | ||
| changeDetector.set('value', 0); | ||
| window.location.reload(); | ||
| return; | ||
| } | ||
| if(inputs[i].type=='image') { | ||
| form.image=inputs[i]; | ||
|
|
||
| // register submit handlers on manual tick completion forms | ||
| Y.all('form.togglecompletion').each(function(form) { | ||
| if (!form.hasClass('preventjs')) { | ||
| Y.on('submit', M.core_completion.toggle, form); | ||
| } | ||
| }); | ||
|
|
||
| // hide the help if there are no completion toggles or icons | ||
| var help = Y.one('#completionprogressid'); | ||
| if (help && !(Y.one('form.togglecompletion') || Y.one('.autocompletion'))) { | ||
| help.setStyle('display', 'none'); | ||
| } | ||
| } | ||
|
|
||
| // Create and position 'Saved' text | ||
| var saved=document.createElement('div'); | ||
| YAHOO.util.Dom.addClass(saved,'completion-saved-display'); | ||
| YAHOO.util.Dom.setStyle(saved,'display','none'); | ||
| saved.appendChild(document.createTextNode(completion_strsaved)); | ||
| form.appendChild(saved); | ||
| form.saved=saved; | ||
|
|
||
| // Add event handler | ||
| YAHOO.util.Event.addListener(form, "submit", completion_toggle); | ||
| } | ||
|
|
||
| function completion_handle_response(o) { | ||
| document.getElementById('completion_dynamic_change').value=1; | ||
| if(o.responseText!='OK') { | ||
| alert('An error occurred when attempting to save your tick mark.\n\n('+o.responseText+'.)'); | ||
| return; | ||
| } | ||
| // Change image | ||
| if(this.otherState==1) { | ||
| this.image.src = M.util.image_url('i/completion-manual-y', 'moodle'); | ||
| this.image.title=completion_strtitley; | ||
| this.image.alt=completion_stralty; | ||
| this.otherState=0; | ||
| } else { | ||
| this.image.src = M.util.image_url('i/completion-manual-n', 'moodle'); | ||
| this.image.title=completion_strtitlen; | ||
| this.image.alt=completion_straltn; | ||
| this.otherState=1; | ||
| } | ||
| // Start animation | ||
| completion_update_animation(this,1.0); | ||
| } | ||
| M.core_completion.toggle = function(e) { | ||
| e.preventDefault(); | ||
|
|
||
| function completion_update_animation(form,opacity) { | ||
| if(opacity<0.001) { | ||
| YAHOO.util.Dom.setStyle(form.saved,'display','none'); | ||
| return; | ||
| } | ||
| YAHOO.util.Dom.setStyle(form.saved,'opacity',opacity); | ||
| if(opacity>0.999) { | ||
| var pos=YAHOO.util.Dom.getXY(form.image); | ||
| pos[0]+=20; // Icon size + 4px border | ||
| YAHOO.util.Dom.setStyle(form.saved,'display','block'); | ||
| YAHOO.util.Dom.setXY(form.saved,pos); | ||
| } | ||
| setTimeout(function() { completion_update_animation(form,opacity-0.1); },100); | ||
| } | ||
| var form = e.target; | ||
| var cmid = 0; | ||
| var completionstate = 0; | ||
| var state = null; | ||
| var image = null; | ||
|
|
||
| function completion_handle_failure(o) { | ||
| alert('An error occurred when attempting to connect to our server. The tick mark will not be saved.\n\n('+ | ||
| o.status+' '+o.statusText+')'); | ||
| } | ||
| var inputs = Y.Node.getDOMNode(form).getElementsByTagName('input'); | ||
| for (var i=0; i<inputs.length; i++) { | ||
| switch (inputs[i].name) { | ||
| case 'id': | ||
| cmid = inputs[i].value; | ||
| break; | ||
| case 'completionstate': | ||
| completionstate = inputs[i].value; | ||
| state = Y.one(inputs[i]); | ||
| break; | ||
| } | ||
| if (inputs[i].type == 'image') { | ||
| image = Y.one(inputs[i]); | ||
| } | ||
| } | ||
|
|
||
| function completion_toggle(e) { | ||
| YAHOO.util.Event.preventDefault(e); | ||
| // By setting completion_wwwroot you can cause it to use absolute path | ||
| // otherwise script assumes it is called from somewhere in /course | ||
| var target = M.cfg.wwwroot + '/course/togglecompletion.php'; | ||
| YAHOO.util.Connect.asyncRequest('POST',target, | ||
| {success:completion_handle_response,failure:completion_handle_failure,scope:this}, | ||
| 'id='+this.cmid+'&completionstate='+this.otherState+'&fromajax=1&sesskey='+M.cfg.sesskey); | ||
| // start spinning the ajax indicator | ||
| var ajax = Y.Node.create('<div class="ajaxworking" />'); | ||
| form.append(ajax); | ||
|
|
||
| var cfg = { | ||
| method: "POST", | ||
| data: 'id='+cmid+'&completionstate='+completionstate+'&fromajax=1&sesskey='+M.cfg.sesskey, | ||
| on: { | ||
| success: M.core_completion.handle_success, | ||
| failure: M.core_completion.handle_failure | ||
| }, | ||
| arguments: {state: state, image: image, ajax: ajax} | ||
| }; | ||
|
|
||
| Y.use('io', function(Y) { | ||
| Y.io(M.cfg.wwwroot+'/course/togglecompletion.php', cfg); | ||
| }); | ||
| } | ||
|
|
||
| function completion_set_progressicon_visibility(spanid,displaystatus) { | ||
| // Check if the progress icon exists | ||
| if (document.getElementById(spanid)!= null) { | ||
| if (displaystatus=='show') { | ||
| document.getElementById(spanid).style.display="block"; | ||
| } | ||
| else if (displaystatus=='hide') { | ||
| document.getElementById(spanid).style.display="none"; | ||
| M.core_completion.handle_success = function(id, o, args) { | ||
| Y.one('#completion_dynamic_change').set('value', 1); | ||
|
|
||
| } | ||
| else { | ||
| alert ("An error occurred when calling completion_set_progressicon_visibility() function."); | ||
| if (o.responseText != 'OK') { | ||
| alert('An error occurred when attempting to save your tick mark.\n\n('+o.responseText+'.)'); //TODO: localize | ||
|
|
||
| } else { | ||
| var current = args.state.get('value'); | ||
|
|
||
| if (current == 1) { | ||
| args.state.set('value', 0); | ||
| args.image.set('src', M.util.image_url('i/completion-manual-y', 'moodle')); | ||
| args.image.set('alt', mstr.completion['completion-alt-manual-y']); | ||
| args.image.set('title', mstr.completion['completion-title-manual-y']); | ||
| } else { | ||
| args.state.set('value', 1); | ||
| args.image.set('src', M.util.image_url('i/completion-manual-n', 'moodle')); | ||
| args.image.set('alt', mstr.completion['completion-alt-manual-n']); | ||
| args.image.set('title', mstr.completion['completion-title-manual-n']); | ||
| } | ||
| } | ||
|
|
||
| args.ajax.remove(); | ||
| } | ||
|
|
||
| M.core_completion.handle_failure = function(id, o, args) { | ||
| alert('An error occurred when attempting to save your tick mark.\n\n('+o.responseText+'.)'); //TODO: localize | ||
| args.ajax.remove(); | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters