[Summary view] [Print] [Text view]

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