[Summary view] [Print] [Text view]

   1  /**
   2   * Provides the form shortforms class.
   3   *
   4   * @module moodle-form-shortforms
   5   */
   6  
   7  /**
   8   * A class for a shortforms.
   9   *
  10   * @class M.form.shortforms
  11   * @constructor
  12   * @extends Base
  13   */
  14  function SHORTFORMS() {
  15      SHORTFORMS.superclass.constructor.apply(this, arguments);
  16  }
  17  
  18  var SELECTORS = {
  19          COLLAPSEEXPAND: '.collapsible-actions .collapseexpand',
  20          COLLAPSED: '.collapsed',
  21          FIELDSETCOLLAPSIBLE: 'fieldset.collapsible',
  22          FIELDSETLEGENDLINK: 'fieldset.collapsible .fheader',
  23          FHEADER: '.fheader',
  24          LEGENDFTOGGLER: 'legend.ftoggler'
  25      },
  26      CSS = {
  27          COLLAPSEALL: 'collapse-all',
  28          COLLAPSED: 'collapsed',
  29          FHEADER: 'fheader'
  30      },
  31      ATTRS = {};
  32  
  33  /**
  34   * The form ID attribute definition.
  35   *
  36   * @attribute formid
  37   * @type String
  38   * @default ''
  39   * @writeOnce
  40   */
  41  ATTRS.formid = {
  42      value: null
  43  };
  44  
  45  Y.extend(SHORTFORMS, Y.Base, {
  46      /**
  47       * A reference to the form.
  48       *
  49       * @property form
  50       * @protected
  51       * @type Node
  52       * @default null
  53       */
  54      form: null,
  55  
  56      /**
  57       * The initializer for the shortforms instance.
  58       *
  59       * @method initializer
  60       * @protected
  61       */
  62      initializer: function() {
  63          var form = Y.one('#' + this.get('formid')),
  64              fieldlist,
  65              btn,
  66              link,
  67              idlist;
  68          if (!form) {
  69              Y.log('Could not locate the form', 'warn', 'moodle-form-shortforms');
  70              return;
  71          }
  72          // Stores the form in the object.
  73          this.form = form;
  74          // Look through collapsible fieldset divs.
  75          fieldlist = form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
  76          fieldlist.each(this.process_fieldset, this);
  77  
  78          // Subscribe collapsible fieldsets and buttons to click events.
  79          form.delegate('click', this.switch_state, SELECTORS.FIELDSETLEGENDLINK, this);
  80          form.delegate('key', this.switch_state, 'down:enter,32', SELECTORS.FIELDSETLEGENDLINK, this);
  81  
  82          // Handle event, when there's an error in collapsed section.
  83          Y.Global.on(M.core.globalEvents.FORM_ERROR, this.expand_fieldset, this);
  84  
  85          // Make the collapse/expand a link.
  86          btn = form.one(SELECTORS.COLLAPSEEXPAND);
  87          if (btn) {
  88              link = Y.Node.create('<a href="#"></a>');
  89              link.setHTML(btn.getHTML());
  90              link.setAttribute('class', btn.getAttribute('class'));
  91              link.setAttribute('role', 'button');
  92  
  93              // Get list of IDs controlled by this button to set the aria-controls attribute.
  94              idlist = [];
  95              form.all(SELECTORS.FIELDSETLEGENDLINK).each(function(node) {
  96                  idlist[idlist.length] = node.generateID();
  97              });
  98              link.setAttribute('aria-controls', idlist.join(' '));
  99  
 100              // Placing the button and binding the event.
 101              link.on('click', this.set_state_all, this, true);
 102              link.on('key', this.set_state_all, 'down:enter,32', this, true);
 103              btn.replace(link);
 104              this.update_btns(form);
 105          }
 106      },
 107  
 108      /**
 109       * Process the supplied fieldset to add appropriate links, and ARIA
 110       * roles.
 111       *
 112       * @method process_fieldset
 113       * @param {Node} fieldset The Node relating to the fieldset to add collapsing to.
 114       * @chainable
 115       */
 116      process_fieldset: function(fieldset) {
 117          // Get legend element.
 118          var legendelement = fieldset.one(SELECTORS.LEGENDFTOGGLER);
 119  
 120          // Turn headers to links for accessibility.
 121          var headerlink = Y.Node.create('<a href="#"></a>');
 122          headerlink.addClass(CSS.FHEADER);
 123          headerlink.appendChild(legendelement.get('firstChild'));
 124          headerlink.setAttribute('role', 'button');
 125          headerlink.setAttribute('aria-controls', fieldset.generateID());
 126          if (legendelement.ancestor(SELECTORS.COLLAPSED)) {
 127              headerlink.setAttribute('aria-expanded', 'false');
 128          } else {
 129              headerlink.setAttribute('aria-expanded', 'true');
 130          }
 131          legendelement.prepend(headerlink);
 132  
 133          return this;
 134      },
 135  
 136      /**
 137       * Set the collapsed state for the specified fieldset.
 138       *
 139       * @method set_state
 140       * @param {Node} fieldset The Node relating to the fieldset to set state on.
 141       * @param {Boolean} [collapsed] Whether the fieldset is collapsed.
 142       * @chainable
 143       */
 144      set_state: function(fieldset, collapsed) {
 145          var headerlink = fieldset.one(SELECTORS.FHEADER);
 146          if (collapsed) {
 147              fieldset.addClass(CSS.COLLAPSED);
 148              if (headerlink) {
 149                  headerlink.setAttribute('aria-expanded', 'false');
 150              }
 151          } else {
 152              fieldset.removeClass(CSS.COLLAPSED);
 153              if (headerlink) {
 154                  headerlink.setAttribute('aria-expanded', 'true');
 155              }
 156          }
 157          var statuselement = this.form.one('input[name=mform_isexpanded_' + fieldset.get('id') + ']');
 158          if (!statuselement) {
 159              Y.log("M.form.shortforms::switch_state was called on an fieldset without a status field: '" +
 160                  fieldset.get('id') + "'", 'debug', 'moodle-form-shortforms');
 161              return this;
 162          }
 163          statuselement.set('value', collapsed ? 0 : 1);
 164  
 165          return this;
 166      },
 167  
 168      /**
 169       * Set the state for all fieldsets in the form.
 170       *
 171       * @method set_state_all
 172       * @param {EventFacade} e
 173       */
 174      set_state_all: function(e) {
 175          e.preventDefault();
 176          var collapsed = e.target.hasClass(CSS.COLLAPSEALL),
 177              fieldlist = this.form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
 178          fieldlist.each(function(node) {
 179              this.set_state(node, collapsed);
 180          }, this);
 181          this.update_btns();
 182      },
 183  
 184      /**
 185       * Toggle the state for the fieldset that was clicked.
 186       *
 187       * @method switch_state
 188       * @param {EventFacade} e
 189       */
 190      switch_state: function(e) {
 191          e.preventDefault();
 192          var fieldset = e.target.ancestor(SELECTORS.FIELDSETCOLLAPSIBLE);
 193          this.set_state(fieldset, !fieldset.hasClass(CSS.COLLAPSED));
 194          this.update_btns();
 195      },
 196  
 197      /**
 198       * Update the Expand/Collapse all buttons as required.
 199       *
 200       * @method update_btns
 201       * @chainable
 202       */
 203      update_btns: function() {
 204          var btn,
 205              collapsed = 0,
 206              expandbtn = false,
 207              fieldlist;
 208  
 209          btn = this.form.one(SELECTORS.COLLAPSEEXPAND);
 210          if (!btn) {
 211              return this;
 212          }
 213  
 214          // Counting the number of collapsed sections.
 215          fieldlist = this.form.all(SELECTORS.FIELDSETCOLLAPSIBLE);
 216          fieldlist.each(function(node) {
 217              if (node.hasClass(CSS.COLLAPSED)) {
 218                  collapsed++;
 219              }
 220          });
 221  
 222          if (collapsed !== 0) {
 223              expandbtn = true;
 224          }
 225  
 226          // Updating the button.
 227          if (expandbtn) {
 228              btn.removeClass(CSS.COLLAPSEALL);
 229              btn.setHTML(M.util.get_string('expandall', 'moodle'));
 230          } else {
 231              btn.addClass(CSS.COLLAPSEALL);
 232              btn.setHTML(M.util.get_string('collapseall', 'moodle'));
 233          }
 234  
 235          return this;
 236      },
 237      /**
 238       * Expand the fieldset, which contains an error.
 239       *
 240       * @method expand_fieldset
 241       * @param {EventFacade} e
 242       */
 243      expand_fieldset: function(e) {
 244          e.stopPropagation();
 245          var formid = e.formid;
 246          if (formid === this.form.getAttribute('id')) {
 247              var errorfieldset = Y.one('#' + e.elementid).ancestor('fieldset');
 248              if (errorfieldset) {
 249                  this.set_state(errorfieldset, false);
 250              }
 251  
 252          }
 253     }
 254  }, {
 255      NAME: 'moodle-form-shortforms',
 256      ATTRS: ATTRS
 257  });
 258  
 259  M.form = M.form || {};
 260  M.form.shortforms = M.form.shortforms || function(params) {
 261      return new SHORTFORMS(params);
 262  };