moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 08:56:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-38681 form: Changed collapse/expand button to a link

Browse source
This commit is contained in:
Frederic Massart 2013-03-27 09:47:02 +08:00
parent 8963212472
commit a4b076d51b
3 changed files with 51 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

59
lib/form/yui/shortforms/shortforms.js vendored
View file

@ -18,13 +18,13 @@ YUI.add('moodle-form-shortforms', function(Y) {
}
var SELECTORS = {
COLLAPSEBTN : '.collapsible-actions .btn-collapseall',
EXPANDBTN : '.collapsible-actions .btn-expandall',
COLLAPSEEXPAND : '.collapsible-actions .collapseexpand',
FIELDSETCOLLAPSIBLE : 'fieldset.collapsible',
FORM: 'form.mform',
FIELDSETLEGENDLINK : 'fieldset.collapsible .fheader',
LEGENDFTOGGLER : 'legend.ftoggler'
},
CSS = {
COLLAPSEALL : 'collapse-all',
COLLAPSED : 'collapsed',
FHEADER : 'fheader'
},
@ -64,7 +64,9 @@ YUI.add('moodle-form-shortforms', function(Y) {
form: null,
initializer : function() {
var form = Y.one('#'+this.get('formid')),
fieldlist;
fieldlist,
btn,
link;
if (!form) {
Y.log('Could not locate the form', 'debug');
return;
@ -74,11 +76,20 @@ YUI.add('moodle-form-shortforms', function(Y) {
// Look through collapsible fieldset divs.
fieldlist = form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
fieldlist.each(this.process_fieldset, this);
// Subscribe collapsible fieldsets and buttons to click events.
form.delegate('click', this.switch_state, SELECTORS.FIELDSETCOLLAPSIBLE+' .'+CSS.FHEADER, this);
form.delegate('click', this.set_state_all, SELECTORS.COLLAPSEBTN, this, true);
form.delegate('click', this.set_state_all, SELECTORS.EXPANDBTN, this, false);
this.update_btns(form);
form.delegate('click', this.switch_state, SELECTORS.FIELDSETLEGENDLINK, this);
// Make the collapse/expand a link.
btn = form.one(SELECTORS.COLLAPSEEXPAND);
if (btn) {
link = Y.Node.create('<a href="#"></a>');
link.setHTML(btn.getHTML());
link.setAttribute('class', btn.getAttribute('class'));
btn.replace(link);
form.delegate('click', this.set_state_all, SELECTORS.COLLAPSEEXPAND, this, true);
this.update_btns(form);
}
},
process_fieldset : function(fieldset) {
// Get legend element.
@ -96,7 +107,7 @@ YUI.add('moodle-form-shortforms', function(Y) {
} else {
fieldset.removeClass(CSS.COLLAPSED);
}
var statuselement = Y.one('input[name=mform_isexpanded_'+fieldset.get('id')+']');
var statuselement = this.form.one('input[name=mform_isexpanded_'+fieldset.get('id')+']');
if (!statuselement) {
Y.log("M.form.shortforms::switch_state was called on an fieldset without a status field: '" +
fieldset.get('id') + "'", 'debug');
@ -104,9 +115,10 @@ YUI.add('moodle-form-shortforms', function(Y) {
}
statuselement.set('value', collapsed ? 0 : 1);
},
set_state_all: function(e, collapsed) {
set_state_all: function(e) {
e.preventDefault();
var fieldlist = this.form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
var collapsed = e.target.hasClass(CSS.COLLAPSEALL),
fieldlist = this.form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
fieldlist.each(function(node) {
this.set_state(node, collapsed);
}, this);
@ -121,10 +133,14 @@ YUI.add('moodle-form-shortforms', function(Y) {
update_btns: function() {
var btn,
collapsed = 0,
collapsebtn = false,
expandbtn = false,
fieldlist;
btn = this.form.one(SELECTORS.COLLAPSEEXPAND);
if (!btn) {
return;
}
// Counting the number of collapsed sections.
fieldlist = this.form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
fieldlist.each(function(node) {
@ -133,20 +149,17 @@ YUI.add('moodle-form-shortforms', function(Y) {
}
});
if (collapsed === 0) {
if (collapsed !== 0) {
expandbtn = true;
} else if (collapsed === fieldlist.size()) {
collapsebtn = true;
}
// Setting the new states of the buttons.
btn = this.form.one(SELECTORS.COLLAPSEBTN);
if (btn) {
btn.set('disabled', collapsebtn);
}
btn = this.form.one(SELECTORS.EXPANDBTN);
if (btn) {
btn.set('disabled', expandbtn);
// Updating the button.
if (expandbtn) {
btn.removeClass(CSS.COLLAPSEALL);
btn.setHTML(M.util.get_string('expandall', 'moodle'));
} else {
btn.addClass(CSS.COLLAPSEALL);
btn.setHTML(M.util.get_string('collapseall', 'moodle'));
}
}
});