mirror of
https://github.com/moodle/moodle.git
synced 2025-04-20 16:04:25 +02:00
MDL-38681 form: Changed collapse/expand button to a link
This commit is contained in:
Frederic Massart
parent
8963212472
commit
a4b076d51b
59
lib/form/yui/shortforms/shortforms.js
vendored
59
lib/form/yui/shortforms/shortforms.js
vendored
@ -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'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -2392,10 +2392,16 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
|
||||
var $_requiredNoteTemplate =
|
||||
"\n\t\t<div class=\"fdescription required\">{requiredNote}</div>";
|
||||
|
||||
/** @var string Collapsible buttons string template */
|
||||
/**
|
||||
* Collapsible buttons string template.
|
||||
*
|
||||
* Note that the <span> will be converted as a link. This is done so that the link is not yet clickable
|
||||
* until the Javascript has been fully loaded.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
var $_collapseButtonsTemplate =
|
||||
"\n\t<div class=\"collapsible-actions\"><button disabled=\"disabled\" class=\"btn-expandall\">{strexpandall}</button>
|
||||
<button disabled=\"disabled\" class=\"btn-collapseall\">{strcollapseall}</button></div>";
|
||||
"\n\t<div class=\"collapsible-actions\"><span class=\"collapseexpand\">{strexpandall}</span></div>";
|
||||
|
||||
/**
|
||||
* Array whose keys are element names. If the key exists this is a advanced element
|
||||
@ -2488,8 +2494,8 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
|
||||
if (!empty($this->_collapsibleElements)) {
|
||||
if (count($this->_collapsibleElements) > 1) {
|
||||
$this->_collapseButtons = $this->_collapseButtonsTemplate;
|
||||
$this->_collapseButtons = str_replace('{strcollapseall}', get_string('collapseall'), $this->_collapseButtons);
|
||||
$this->_collapseButtons = str_replace('{strexpandall}', get_string('expandall'), $this->_collapseButtons);
|
||||
$PAGE->requires->strings_for_js(array('collapseall', 'expandall'), 'moodle');
|
||||
}
|
||||
$PAGE->requires->yui_module('moodle-form-shortforms', 'M.form.shortforms', array(array('formid' => $formid)));
|
||||
}
|
||||
|
||||
@ -242,6 +242,11 @@ a.skip:active {position: static;display: block;}
|
||||
.mform .collapsible-actions {display: none;}
|
||||
.jsenabled .mform .collapsible-actions {text-align: right; display: block;}
|
||||
.dir-rtl .mform .collapsible-actions {text-align: left;}
|
||||
.mform .collapseexpand {background: url([[pix:t/collapsed]]) left center no-repeat; padding-left: 18px;}
|
||||
.dir-rtl .mform .collapseexpand {background-image: url([[pix:t/collapsed_rtl]]); background-position: right center; padding-left: 0; padding-right: 18px;}
|
||||
.mform .collapse-all,
|
||||
.dir-rtl .mform .collapse-all {background-image: url([[pix:t/expanded]]);}
|
||||
.mform fieldset legend {padding: 0 0.35em;}
|
||||
.mform fieldset.collapsible legend a.fheader {padding-left: 18px; background: url([[pix:t/expanded]]) left center no-repeat;}
|
||||
.mform fieldset.collapsed legend a.fheader {background-image: url([[pix:t/collapsed]]);}
|
||||
.jsenabled .mform fieldset.collapsed {border-width: 1px 0 0 1px; padding: 0; border-color: transparent;}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user