From f2c0aba81dc2ddc26f3012b4ce73beb7523e6cac Mon Sep 17 00:00:00 2001 From: Frederic Massart Date: Thu, 14 Mar 2013 17:54:14 +0800 Subject: [PATCH] MDL-38044 form: Added collapse/expand all buttons --- lib/form/yui/shortforms/shortforms.js | 81 +++++++++++++++++++++++---- lib/formslib.php | 20 ++++++- theme/base/style/core.css | 3 + 3 files changed, 92 insertions(+), 12 deletions(-) diff --git a/lib/form/yui/shortforms/shortforms.js b/lib/form/yui/shortforms/shortforms.js index dbbb4546f01..260f1f89822 100644 --- a/lib/form/yui/shortforms/shortforms.js +++ b/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); + } } }); diff --git a/lib/formslib.php b/lib/formslib.php index 8d4eb4670d6..a9a77277ba5 100644 --- a/lib/formslib.php +++ b/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
{requiredNote}
"; + + /** @var string Collapsible buttons string template */ + var $_collapseButtonsTemplate = + "\n\t
+
"; + /** * Array whose keys are element names. If the key exists this is a advanced element * @@ -2360,6 +2366,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 */ @@ -2410,12 +2421,13 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{ $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
\n{content}\n
"; } else { - $this->_formTemplate = "\n\n\t
{hidden}
\n{content}\n"; + $this->_formTemplate = "\n\n\t
{hidden}
\n{collapsebtns}\n{content}\n"; $this->_hiddenHtml .= $form->_pageparams; } @@ -2429,6 +2441,11 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{ $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 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{ $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) { diff --git a/theme/base/style/core.css b/theme/base/style/core.css index fe8463324dc..ca3786a222b 100644 --- a/theme/base/style/core.css +++ b/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]]);}