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

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

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

14
lib/formslib.php
View file

@ -2392,10 +2392,16 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
var $_requiredNoteTemplate = var $_requiredNoteTemplate =
"\n\t\t<div class=\"fdescription required\">{requiredNote}</div>"; "\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 = var $_collapseButtonsTemplate =
"\n\t<div class=\"collapsible-actions\"><button disabled=\"disabled\" class=\"btn-expandall\">{strexpandall}</button> "\n\t<div class=\"collapsible-actions\"><span class=\"collapseexpand\">{strexpandall}</span></div>";
<button disabled=\"disabled\" class=\"btn-collapseall\">{strcollapseall}</button></div>";
/** /**
* Array whose keys are element names. If the key exists this is a advanced element * 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 (!empty($this->_collapsibleElements)) {
if (count($this->_collapsibleElements) > 1) { if (count($this->_collapsibleElements) > 1) {
$this->_collapseButtons = $this->_collapseButtonsTemplate; $this->_collapseButtons = $this->_collapseButtonsTemplate;
$this->_collapseButtons = str_replace('{strcollapseall}', get_string('collapseall'), $this->_collapseButtons);
$this->_collapseButtons = str_replace('{strexpandall}', get_string('expandall'), $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))); $PAGE->requires->yui_module('moodle-form-shortforms', 'M.form.shortforms', array(array('formid' => $formid)));
} }

5
theme/base/style/core.css
View file

@ -242,6 +242,11 @@ a.skip:active {position: static;display: block;}
.mform .collapsible-actions {display: none;} .mform .collapsible-actions {display: none;}
.jsenabled .mform .collapsible-actions {text-align: right; display: block;} .jsenabled .mform .collapsible-actions {text-align: right; display: block;}
.dir-rtl .mform .collapsible-actions {text-align: left;} .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.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]]);} .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;} .jsenabled .mform fieldset.collapsed {border-width: 1px 0 0 1px; padding: 0; border-color: transparent;}