Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

MDL-38044 form: Added collapse/expand all buttons

  • Loading branch information...
commit f2c0aba81dc2ddc26f3012b4ce73beb7523e6cac 1 parent 373a8e0
@FMCorz FMCorz authored
View
81 lib/form/yui/shortforms/shortforms.js
@@ -18,7 +18,10 @@ YUI.add('moodle-form-shortforms', function(Y) {
}
var SELECTORS = {
+ COLLAPSEBTN : '.collapsible-actions .btn-collapseall',
+ EXPANDBTN : '.collapsible-actions .btn-expandall',
FIELDSETCOLLAPSIBLE : 'fieldset.collapsible',
+ FORM: 'form.mform',
LEGENDFTOGGLER : 'legend.ftoggler'
},
CSS = {
@@ -58,12 +61,24 @@ YUI.add('moodle-form-shortforms', function(Y) {
};
Y.extend(SHORTFORMS, Y.Base, {
+ form: null,
initializer : function() {
- var fieldlist = Y.Node.all('#'+this.get('formid')+' '+SELECTORS.FIELDSETCOLLAPSIBLE);
+ var form = Y.one('#'+this.get('formid')),
+ fieldlist;
+ if (!form) {
+ Y.log('Could not locate the form', 'debug');
+ return;
+ }
+ // Stores the form in the object.
+ this.form = form;
// Look through collapsible fieldset divs.
+ fieldlist = form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
fieldlist.each(this.process_fieldset, this);
- // Subscribe collapsible fieldsets to click event.
- Y.one('#'+this.get('formid')).delegate('click', this.switch_state, SELECTORS.FIELDSETCOLLAPSIBLE+' .'+CSS.FHEADER);
+ // 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);
},
process_fieldset : function(fieldset) {
// Get legend element.
@@ -75,20 +90,64 @@ YUI.add('moodle-form-shortforms', function(Y) {
headerlink.appendChild(legendelement.get('firstChild'));
legendelement.prepend(headerlink);
},
- switch_state : function(e) {
- e.preventDefault();
- var fieldset = this.ancestor(SELECTORS.FIELDSETCOLLAPSIBLE);
- // Toggle collapsed class.
- fieldset.toggleClass(CSS.COLLAPSED);
- // Get corresponding hidden variable
- // - and invert it.
+ set_state: function(fieldset, collapsed) {
+ if (collapsed) {
+ fieldset.addClass(CSS.COLLAPSED);
+ } else {
+ fieldset.removeClass(CSS.COLLAPSED);
+ }
var statuselement = Y.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', Math.abs(Number(statuselement.get('value'))-1));
+ statuselement.set('value', collapsed ? 0 : 1);
+ },
+ set_state_all: function(e, collapsed) {
+ e.preventDefault();
+ var fieldlist = this.form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
+ fieldlist.each(function(node) {
+ this.set_state(node, collapsed);
+ }, this);
+ this.update_btns();
+ },
+ switch_state : function(e) {
+ e.preventDefault();
+ var fieldset = e.target.ancestor(SELECTORS.FIELDSETCOLLAPSIBLE);
+ this.set_state(fieldset, !fieldset.hasClass(CSS.COLLAPSED));
+ this.update_btns();
+ },
+ update_btns: function() {
+ var btn,
+ collapsed = 0,
+ collapsebtn = false,
+ expandbtn = false,
+ fieldlist;
+
+ // Counting the number of collapsed sections.
+ fieldlist = this.form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
+ fieldlist.each(function(node) {
+ if (node.hasClass(CSS.COLLAPSED)) {
+ collapsed++;
+ }
+ });
+
+ 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);
+ }
}
});
View
20 lib/formslib.php
@@ -2346,6 +2346,12 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
/** @var string Required Note template string */
var $_requiredNoteTemplate =
"\n\t\t<div class=\"fdescription required\">{requiredNote}</div>";
+
+ /** @var string Collapsible buttons string template */
+ 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>";
+
/**
* Array whose keys are element names. If the key exists this is a advanced element
*
@@ -2361,6 +2367,11 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
var $_collapsibleElements = array();
/**
+ * @var string Contains the collapsible buttons to add to the form.
+ */
+ var $_collapseButtons = '';
+
+ /**
* Constructor
*/
function MoodleQuickForm_Renderer(){
@@ -2410,12 +2421,13 @@ function startForm(&$form){
$this->_reqHTML = $form->getReqHTML();
$this->_elementTemplates = str_replace('{req}', $this->_reqHTML, $this->_elementTemplates);
$this->_advancedHTML = $form->getAdvancedHTML();
+ $this->_collapseButtons = '';
$formid = $form->getAttribute('id');
parent::startForm($form);
if ($form->isFrozen()){
$this->_formTemplate = "\n<div class=\"mform frozen\">\n{content}\n</div>";
} else {
- $this->_formTemplate = "\n<form{attributes}>\n\t<div style=\"display: none;\">{hidden}</div>\n{content}\n</form>";
+ $this->_formTemplate = "\n<form{attributes}>\n\t<div style=\"display: none;\">{hidden}</div>\n{collapsebtns}\n{content}\n</form>";
$this->_hiddenHtml .= $form->_pageparams;
}
@@ -2429,6 +2441,11 @@ function startForm(&$form){
$PAGE->requires->string_for_js('changesmadereallygoaway', 'moodle');
}
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->yui_module('moodle-form-shortforms', 'M.form.shortforms', array(array('formid' => $formid)));
}
if (!empty($this->_advancedElements)){
@@ -2548,6 +2565,7 @@ function finishForm(&$form){
$this->_hiddenHtml = '';
}
parent::finishForm($form);
+ $this->_html = str_replace('{collapsebtns}', $this->_collapseButtons, $this->_html);
if (!$form->isFrozen()) {
$args = $form->getLockOptionObject();
if (count($args[1]) > 0) {
View
3  theme/base/style/core.css
@@ -239,6 +239,9 @@ a.skip:active {position: static;display: block;}
.mform fieldset.hidden {border-width:0;}
.mform fieldset.group {margin-bottom: 0}
.mform fieldset.error {border: 1px solid #A00;}
+.mform .collapsible-actions {display: none;}
+.jsenabled .mform .collapsible-actions {text-align: right; display: block;}
+.dir-rtl .mform .collapsible-actions {text-align: left;}
.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]]);}
Please sign in to comment.
Something went wrong with that request. Please try again.