MDL-30637 Refactor Advanced fileds functionality

The displaying of advanced items has been refactored. The changes are:

* The Advanced button is replaced by the Show Less/More link
* The Show less/more link controls advanced elements only within the section
  it is located at
* The Show less/more state of sections is preserved between form submissions
* When javascript is off, all advanced elements will be displayed by default,
  no show/hide controls will exists on the page

lang/en/form.php

@@ -58,6 +58,8 @@
 $string['selectallornone'] = 'Select all/none';
 $string['selected'] = 'Selected';
 $string['showadvanced'] = 'Show advanced';
+$string['showless'] = 'Show less...';
+$string['showmore'] = 'Show more...';
 $string['showeditortoolbar'] = 'Show editing tools';
 $string['somefieldsrequired'] = 'There are required fields in this form marked {$a}.';
 $string['time'] = 'Time';

lib/form/form.js

@@ -6,58 +6,6 @@
 // Namespace for the form bits and bobs
 M.form = M.form || {};
 
-/**
- * Initialises the show advanced functionality and events.
- * This should only ever happen ONCE per page.
- *
- * @param {YUI} Y
- * @param {object} config
- */
-M.form.initShowAdvanced = function(Y, config) {
-    if (M.form.showAdvanced) {
-        return M.form.showAdvanced;
-    }
-    var showAdvanced = function(config) {
-        showAdvanced.superclass.constructor.apply(this, arguments);
-    };
-    showAdvanced.prototype = {
-        _advButtons : [],
-        _advAreas : [],
-        _stateInput : null,
-        initializer : function() {
-            this._advAreas = Y.all('form .advanced');
-            this._advButtons = Y.all('.showadvancedbtn');
-            if (this._advButtons.size() > 0) {
-                this._stateInput = new Y.NodeList(document.getElementsByName('mform_showadvanced_last'));
-                this._advButtons.on('click', this.switchState, this);
-                this._advButtons.set('type', 'button');
-            }
-        },
-        /**
-         * Toggles between showing advanced items and hiding them.
-         * Should be fired by an event.
-         */
-        switchState : function(e) {
-            e.preventDefault();
-            if (this._stateInput.get('value')=='1') {
-                this._stateInput.set('value', '0');
-                this._advButtons.setAttribute('value', M.str.form.showadvanced);
-                this._advAreas.addClass('hide');
-            } else {
-                this._stateInput.set('value', '1');
-                this._advButtons.setAttribute('value', M.str.form.hideadvanced);
-                this._advAreas.removeClass('hide');
-            }
-        }
-    };
-    // Extend it with the YUI widget fw.
-    Y.extend(showAdvanced, Y.Base, showAdvanced.prototype, {
-        NAME : 'mform-showAdvanced'
-    });
-    M.form.showAdvanced = new showAdvanced(config);
-    return M.form.showAdvanced;
-};
-
 /**
  * Stores a list of the dependencyManager for each form on the page.
  */

lib/form/yui/showadvanced/showadvanced.js

@@ -0,0 +1,104 @@
+YUI.add('moodle-form-showadvanced', function(Y) {
+    /**
+     * Provides the form showadvanced class
+     *
+     * @module moodle-form-showadvanced
+     */
+
+    /**
+     * A class for a showadvanced
+     *
+     * @param {Object} config Object literal specifying showadvanced configuration properties.
+     * @class M.form.showadvanced
+     * @constructor
+     * @extends Y.Base
+     */
+    function SHOWADVANCED(config) {
+        SHOWADVANCED.superclass.constructor.apply(this, [config]);
+    }
+
+    var SELECTORS = {
+            FIELDSETCONTAINSADVANCED : 'fieldset.containsadvancedelements',
+            DIVFITEMADVANCED : 'div.fitem.advanced',
+            DIVFCONTAINER : 'div.fcontainer'
+        },
+        CSS = {
+            HIDE : 'hide',
+            MORELESSTOGGLER : 'morelesstoggler'
+        },
+        ATTRS = {};
+
+    /**
+     * Static property provides a string to identify the JavaScript class.
+     *
+     * @property NAME
+     * @type String
+     * @static
+     */
+    SHOWADVANCED.NAME = 'moodle-form-showadvanced';
+
+    /**
+     * Static property used to define the default attribute configuration for the Showadvanced.
+     *
+     * @property ATTRS
+     * @type String
+     * @static
+     */
+    SHOWADVANCED.ATTRS = ATTRS;
+
+    /**
+     * The form ID attribute definition
+     *
+     * @attribute formid
+     * @type String
+     * @default ''
+     * @writeOnce
+     */
+    ATTRS.formid = {
+        value : null
+    };
+
+    Y.extend(SHOWADVANCED, Y.Base, {
+        initializer : function() {
+            var fieldlist = Y.Node.all('#'+this.get('formid')+' '+SELECTORS.FIELDSETCONTAINSADVANCED);
+            // Look through fieldset divs that contain advanced elements
+            fieldlist.each(this.process_fieldset, this);
+            // Subscribe more/less links to click event
+            Y.one('#'+this.get('formid')).delegate('click', this.switch_state, SELECTORS.FIELDSETCONTAINSADVANCED+' .'+CSS.MORELESSTOGGLER);
+        },
+        process_fieldset : function(fieldset) {
+            var statuselement = new Y.one('input[name=mform_showmore_'+fieldset.get('id')+']');
+            var morelesslink = Y.Node.create('<a href="#"></a>');
+            morelesslink.addClass(CSS.MORELESSTOGGLER);
+            if (statuselement.get('value') === '0') {
+                morelesslink.setHTML(M.str.form.showmore);
+                // hide advanced stuff initially
+                fieldset.all(SELECTORS.DIVFITEMADVANCED).addClass(CSS.HIDE);
+            } else {
+                morelesslink.setHTML(M.str.form.showless);
+            }
+            fieldset.one(SELECTORS.DIVFCONTAINER).append(morelesslink);
+        },
+        switch_state : function(e) {
+            e.preventDefault();
+            var fieldset = this.ancestor(SELECTORS.FIELDSETCONTAINSADVANCED);
+            // toggle collapsed class
+            fieldset.all(SELECTORS.DIVFITEMADVANCED).toggleClass(CSS.HIDE);
+            // get corresponding hidden variable
+            var statuselement = new Y.one('input[name=mform_showmore_'+fieldset.get('id')+']');
+            // invert it and change the link text
+            if (statuselement.get('value') === '0') {
+                statuselement.set('value', 1);
+                this.setHTML(M.util.get_string('showless', 'form'));
+            } else {
+                statuselement.set('value', 0);
+                this.setHTML(M.util.get_string('showmore', 'form'));
+            }
+        }
+    });
+
+    M.form = M.form || {};
+    M.form.showadvanced = M.form.showadvanced || function(params) {
+        return new SHOWADVANCED(params);
+    };
+}, '@VERSION@', {requires:['base', 'node', 'selector-css3']});