Permalink
Browse files

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
  • Loading branch information...
kabalin committed Jan 24, 2013
1 parent a4f1834 commit ac5e6ca4d1c7f33eb72dcc2953feb02db0657090
Showing with 146 additions and 155 deletions.
  1. +2 −0 lang/en/form.php
  2. +0 −52 lib/form/form.js
  3. +104 −0 lib/form/yui/showadvanced/showadvanced.js
  4. +40 −100 lib/formslib.php
  5. +0 −3 user/filters/user_filter_forms.php
View
@@ -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';
View
@@ -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.
*/
@@ -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']});
Oops, something went wrong.

0 comments on commit ac5e6ca

Please sign in to comment.