[Summary view] [Print] [Text view]

   1  /**
   2   * Provides the Calendar class.
   3   *
   4   * @module moodle-form-dateselector
   5   */
   6  
   7  /**
   8   * Calendar class
   9   */
  10  var CALENDAR = function() {
  11      CALENDAR.superclass.constructor.apply(this, arguments);
  12  };
  13  CALENDAR.prototype = {
  14      panel: null,
  15      yearselect: null,
  16      monthselect: null,
  17      dayselect: null,
  18      calendarimage: null,
  19      enablecheckbox: null,
  20      closepopup: true,
  21      initializer: function() {
  22          var controls = this.get('node').all('select');
  23          controls.each(function(node) {
  24              if (node.get('name').match(/\[year\]/)) {
  25                  this.yearselect = node;
  26              } else if (node.get('name').match(/\[month\]/)) {
  27                  this.monthselect = node;
  28              } else if (node.get('name').match(/\[day\]/)) {
  29                  this.dayselect = node;
  30              }
  31              node.after('change', this.handle_select_change, this);
  32          }, this);
  33  
  34          // Loop through the input fields.
  35          var inputs = this.get('node').all('input, a');
  36          inputs.each(function(node) {
  37              // Check if the current node is a calendar image field.
  38              if (node.get('name').match(/\[calendar\]/)) {
  39                  // Set it so that when the image is clicked the pop-up displays.
  40                  node.on('click', this.focus_event, this);
  41                  // Set the node to the calendarimage variable.
  42                  this.calendarimage = node;
  43              } else { // Must be the enabled checkbox field.
  44                  // If the enable checkbox is clicked we want to either disable/enable the calendar image.
  45                  node.on('click', this.toggle_calendar_image, this);
  46                  // Set the node to the enablecheckbox variable.
  47                  this.enablecheckbox = node;
  48              }
  49              // Ensure that the calendarimage and enablecheckbox values have been set.
  50              if (this.calendarimage && this.enablecheckbox) {
  51                  // Set the calendar icon status depending on the value of the checkbox.
  52                  this.toggle_calendar_image();
  53              }
  54          }, this);
  55      },
  56      focus_event: function(e) {
  57          M.form.dateselector.cancel_any_timeout();
  58          // If the current owner is set, then the pop-up is currently being displayed, so hide it.
  59          if (M.form.dateselector.currentowner === this) {
  60              this.release_calendar();
  61          } else if ((this.enablecheckbox === null)
  62              || (this.enablecheckbox.get('checked'))) { // Must be hidden. If the field is enabled display the pop-up.
  63              this.claim_calendar();
  64          }
  65          // Stop the input image field from submitting the form.
  66          e.preventDefault();
  67      },
  68      handle_select_change: function() {
  69          // It may seem as if the following variable is not used, however any call to set_date_from_selects will trigger a
  70          // call to set_selects_from_date if the calendar is open as the date has changed. Whenever the calendar is displayed
  71          // the set_selects_from_date function is set to trigger on any date change (see function connect_handlers).
  72          this.closepopup = false;
  73          this.set_date_from_selects();
  74          this.closepopup = true;
  75      },
  76      claim_calendar: function() {
  77          M.form.dateselector.cancel_any_timeout();
  78          if (M.form.dateselector.currentowner === this) {
  79              return;
  80          }
  81          if (M.form.dateselector.currentowner) {
  82              M.form.dateselector.currentowner.release_calendar();
  83          }
  84          if (M.form.dateselector.currentowner !== this) {
  85              this.connect_handlers();
  86              this.set_date_from_selects();
  87          }
  88          M.form.dateselector.currentowner = this;
  89          M.form.dateselector.calendar.set('mindate', new Date(this.yearselect.firstOptionValue(), 0, 1));
  90          M.form.dateselector.calendar.set('maxdate', new Date(this.yearselect.lastOptionValue(), 11, 31));
  91          M.form.dateselector.panel.show();
  92          M.form.dateselector.calendar.show();
  93          M.form.dateselector.fix_position();
  94          setTimeout(function() {
  95              M.form.dateselector.cancel_any_timeout();
  96          }, 100);
  97  
  98          // Focus on the calendar.
  99          M.form.dateselector.calendar.focus();
 100  
 101          // When the user tab out the calendar, close it.
 102          Y.one(document.body).on('keyup', function(e) {
 103              // hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
 104              if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
 105                  ((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
 106                  // Focus back on the calendar button.
 107                  this.calendarimage.focus();
 108                  this.release_calendar();
 109              }
 110          }, this);
 111  
 112      },
 113      set_date_from_selects: function() {
 114          var year = parseInt(this.yearselect.get('value'), 10);
 115          var month = parseInt(this.monthselect.get('value'), 10) - 1;
 116          var day = parseInt(this.dayselect.get('value'), 10);
 117          var date = new Date(year, month, day);
 118          M.form.dateselector.calendar.deselectDates();
 119          M.form.dateselector.calendar.selectDates([date]);
 120          M.form.dateselector.calendar.set("date", date);
 121          M.form.dateselector.calendar.render();
 122          if (date.getDate() !== day) {
 123              // Must've selected the 29 to 31st of a month that doesn't have such dates.
 124              this.dayselect.set('value', date.getDate());
 125              this.monthselect.set('value', date.getMonth() + 1);
 126          }
 127      },
 128      set_selects_from_date: function(ev) {
 129          var date = ev.newSelection[0];
 130          var newyear = Y.DataType.Date.format(date, {format: "%Y"});
 131          var newindex = newyear - this.yearselect.firstOptionValue();
 132          this.yearselect.set('selectedIndex', newindex);
 133          this.monthselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%m"}) - this.monthselect.firstOptionValue());
 134          this.dayselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%d"}) - this.dayselect.firstOptionValue());
 135          if (M.form.dateselector.currentowner && this.closepopup) {
 136              this.release_calendar();
 137          }
 138      },
 139      connect_handlers: function() {
 140          M.form.dateselector.calendar.on('selectionChange', this.set_selects_from_date, this, true);
 141      },
 142      release_calendar: function(e) {
 143          var wasOwner = M.form.dateselector.currentowner === this;
 144          M.form.dateselector.panel.hide();
 145          M.form.dateselector.calendar.detach('selectionChange', this.set_selects_from_date);
 146          M.form.dateselector.calendar.hide();
 147          M.form.dateselector.currentowner = null;
 148  
 149          // Put the focus back to the image calendar that we clicked, only if it was visible.
 150          if (wasOwner && (e === null || typeof e === "undefined" || e.type !== "click")) {
 151              this.calendarimage.focus();
 152          }
 153      },
 154      toggle_calendar_image: function() {
 155          // If the enable checkbox is det checked, disable the image.
 156          if (!this.enablecheckbox.get('checked')) {
 157              this.calendarimage.set('disabled', 'disabled');
 158              this.calendarimage.setStyle('cursor', 'default');
 159              this.release_calendar();
 160          } else {
 161              this.calendarimage.set('disabled', false);
 162              this.calendarimage.setStyle('cursor', null);
 163          }
 164      }
 165  };
 166  Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
 167      NAME: 'Date Selector',
 168      ATTRS: {
 169          firstdayofweek: {
 170              validator: Y.Lang.isString
 171          },
 172          node: {
 173              setter: function(node) {
 174                  return Y.one(node);
 175              }
 176          }
 177      }
 178  });