[Summary view] [Print] [Text view]

   1  YUI.add('moodle-form-showadvanced', function (Y, NAME) {
   2  
   3  /**
   4   * Provides the form showadvanced class.
   5   *
   6   * @module moodle-form-showadvanced
   7   */
   8  
   9  /**
  10   * A class to help show and hide advanced form content.
  11   *
  12   * @class M.form.showadvanced
  13   * @constructor
  14   * @extends Base
  15   */
  16  function SHOWADVANCED() {
  17      SHOWADVANCED.superclass.constructor.apply(this, arguments);
  18  }
  19  
  20  var SELECTORS = {
  21          FIELDSETCONTAINSADVANCED: 'fieldset.containsadvancedelements',
  22          DIVFITEMADVANCED: 'div.fitem.advanced',
  23          DIVFCONTAINER: 'div.fcontainer',
  24          MORELESSLINK: 'fieldset.containsadvancedelements .moreless-toggler'
  25      },
  26      CSS = {
  27          SHOW: 'show',
  28          MORELESSACTIONS: 'moreless-actions',
  29          MORELESSTOGGLER: 'moreless-toggler',
  30          SHOWLESS: 'moreless-less'
  31      },
  32      WRAPPERS = {
  33          FITEM: '<div class="fitem"></div>',
  34          FELEMENT: '<div class="felement"></div>'
  35      },
  36      ATTRS = {};
  37  
  38  /**
  39   * The form ID attribute definition.
  40   *
  41   * @attribute formid
  42   * @type String
  43   * @default null
  44   * @writeOnce
  45   */
  46  ATTRS.formid = {
  47      value: null
  48  };
  49  
  50  Y.extend(SHOWADVANCED, Y.Base, {
  51      /**
  52       * The initializer for the showadvanced instance.
  53       *
  54       * @method initializer
  55       * @protected
  56       */
  57      initializer: function() {
  58          var form = Y.one('#' + this.get('formid')),
  59              fieldlist = form.all(SELECTORS.FIELDSETCONTAINSADVANCED);
  60  
  61          // Look through fieldset divs that contain advanced elements.
  62          fieldlist.each(this.processFieldset, this);
  63  
  64          // Subscribe more/less links to click event.
  65          form.delegate('click', this.switchState, SELECTORS.MORELESSLINK);
  66          form.delegate('key', this.switchState, 'down:enter,32', SELECTORS.MORELESSLINK);
  67      },
  68  
  69      /**
  70       * Process the supplied fieldset to add appropriate links, and ARIA roles.
  71       *
  72       * @method processFieldset
  73       * @param {Node} fieldset The Node relating to the fieldset to add collapsing to.
  74       * @chainable
  75       */
  76      processFieldset: function(fieldset) {
  77          var statuselement = Y.one('input[name=mform_showmore_' + fieldset.get('id') + ']');
  78          if (!statuselement) {
  79              Y.log("M.form.showadvanced::processFieldset was called on an fieldset without a status field: '" +
  80                  fieldset.get('id') + "'", 'debug', 'moodle-form-showadvanced');
  81              return this;
  82          }
  83  
  84          var morelesslink = Y.Node.create('<a href="#"></a>');
  85          morelesslink.addClass(CSS.MORELESSTOGGLER);
  86          if (statuselement.get('value') === '0') {
  87              morelesslink.setHTML(M.util.get_string('showmore', 'form'));
  88          } else {
  89              morelesslink.setHTML(M.util.get_string('showless', 'form'));
  90              morelesslink.addClass(CSS.SHOWLESS);
  91              fieldset.all(SELECTORS.DIVFITEMADVANCED).addClass(CSS.SHOW);
  92          }
  93  
  94          // Get list of IDs controlled by this button to set the aria-controls attribute.
  95          var idlist = [];
  96          fieldset.all(SELECTORS.DIVFITEMADVANCED).each(function(node) {
  97              idlist[idlist.length] = node.generateID();
  98          });
  99          morelesslink.setAttribute('role', 'button');
 100          morelesslink.setAttribute('aria-controls', idlist.join(' '));
 101  
 102          var fitem = Y.Node.create(WRAPPERS.FITEM);
 103          fitem.addClass(CSS.MORELESSACTIONS);
 104          var felement = Y.Node.create(WRAPPERS.FELEMENT);
 105          felement.append(morelesslink);
 106          fitem.append(felement);
 107  
 108          fieldset.one(SELECTORS.DIVFCONTAINER).append(fitem);
 109  
 110          return this;
 111      },
 112  
 113      /**
 114       * Toggle the state for the fieldset that was clicked.
 115       *
 116       * @method switchState
 117       * @param {EventFacade} e
 118       */
 119      switchState: function(e) {
 120          e.preventDefault();
 121          var fieldset = this.ancestor(SELECTORS.FIELDSETCONTAINSADVANCED);
 122  
 123          // Toggle collapsed class.
 124          fieldset.all(SELECTORS.DIVFITEMADVANCED).toggleClass(CSS.SHOW);
 125  
 126          // Get corresponding hidden variable.
 127          var statuselement = Y.one('input[name=mform_showmore_' + fieldset.get('id') + ']');
 128  
 129          // Invert it and change the link text.
 130          if (statuselement.get('value') === '0') {
 131              statuselement.set('value', 1);
 132              this.addClass(CSS.SHOWLESS);
 133              this.setHTML(M.util.get_string('showless', 'form'));
 134          } else {
 135              statuselement.set('value', 0);
 136              this.removeClass(CSS.SHOWLESS);
 137              this.setHTML(M.util.get_string('showmore', 'form'));
 138          }
 139      }
 140  }, {
 141      NAME: 'moodle-form-showadvanced',
 142      ATTRS: ATTRS
 143  });
 144  
 145  M.form = M.form || {};
 146  M.form.showadvanced = M.form.showadvanced || function(params) {
 147      return new SHOWADVANCED(params);
 148  };
 149  
 150  
 151  }, '@VERSION@', {"requires": ["node", "base", "selector-css3"]});