[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              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  };
 147  
 148  
 149  }, '@VERSION@', {"requires": ["node", "base", "selector-css3"]});