Permalink
Browse files

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

  • Loading branch information...
1 parent 8963212 commit a4b076d51bee9dd479c3c5ae302d9f800c0ab34f @FMCorz FMCorz committed Mar 27, 2013
Showing with 51 additions and 27 deletions.
  1. +36 −23 lib/form/yui/shortforms/shortforms.js
  2. +10 −4 lib/formslib.php
  3. +5 −0 theme/base/style/core.css
@@ -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,17 +107,18 @@ 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');
return;
}
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'));
}
}
});
View
@@ -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 @@ function startForm(&$form){
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;}

0 comments on commit a4b076d

Please sign in to comment.