[Summary view] [Print] [Text view]

   1  YUI.add('moodle-calendar-info', function (Y, NAME) {
   2  
   3  // This file is part of Moodle - http://moodle.org/
   4  //
   5  // Moodle is free software: you can redistribute it and/or modify
   6  // it under the terms of the GNU General Public License as published by
   7  // the Free Software Foundation, either version 3 of the License, or
   8  // (at your option) any later version.
   9  //
  10  // Moodle is distributed in the hope that it will be useful,
  11  // but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13  // GNU General Public License for more details.
  14  //
  15  // You should have received a copy of the GNU General Public License
  16  // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  17  
  18  /**
  19   * Overlay manager for the Moodle Calendar.
  20   *
  21   * @module     moodle-core_calendar-info
  22   * @package    core_calendar
  23   * @copyright  2014 Andrew Nicols <andrew@nicols.co.uk>
  24   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  25   * @main       moodle-core_calendar-info
  26   */
  27  
  28  var ARIACONTROLS = 'aria-controls',
  29      BOUNDINGBOX = 'boundingBox',
  30      CALENDAREVENT = '[data-core_calendar-title]',
  31      CALENDARTABLE = 'calendartable',
  32      DATAPREFIX = 'core_calendar-',
  33      DOT = '.',
  34      EVENTCONTENT = 'eventcontent',
  35      EVENTDELAY = 'delay',
  36      EVENTTITLE = 'eventtitle',
  37      INNERHTML = 'innerHTML',
  38  
  39      /**
  40       * Overlay manager for the Moodle calendar.
  41       *
  42       * @namespace M.core_calendar
  43       * @class Info
  44       * @constructor
  45       */
  46  
  47      Info = function() {
  48          Info.superclass.constructor.apply(this, arguments);
  49      };
  50  
  51  
  52  Y.extend(Info, Y.Base, {
  53      /**
  54       * A pointer to the timer used for showing the panel.
  55       *
  56       * @property _showTimer
  57       * @type object
  58       * @private
  59       */
  60      _showTimer: null,
  61  
  62      /**
  63       * A pointer to the timer used for hiding the panel.
  64       *
  65       * @property _hideTimer
  66       * @type object
  67       * @private
  68       */
  69      _hideTimer: null,
  70  
  71      /**
  72       * A pointer for the Calendar Overlay.
  73       *
  74       * @property _panel
  75       * @type object
  76       * @private
  77       */
  78      _panel: null,
  79  
  80      /**
  81       * A pointer to the cell containing the currently open calendar day.
  82       *
  83       * @property _currentDay
  84       * @type object
  85       * @private
  86       */
  87      _currentDay: null,
  88  
  89      initializer: function() {
  90          var body = Y.one(Y.config.doc.body);
  91          body.delegate(['mouseenter', 'focus'], this._startShow, CALENDAREVENT, this);
  92          body.delegate(['mouseleave', 'blur'], this._startHide, CALENDAREVENT, this);
  93      },
  94  
  95      /**
  96       * Initialise the Overlay in which information is displayed.
  97       *
  98       * @method __initOverlay
  99       * @chainable
 100       */
 101      _initOverlay: function() {
 102          if (!this._panel) {
 103              this._panel = new Y.Overlay({
 104                  headerContent: Y.Node.create('<h2 class="' + EVENTTITLE + '"/>'),
 105                  bodyContent: Y.Node.create('<div class="' + EVENTCONTENT + '"/>'),
 106                  visible: false,
 107                  render: true
 108              });
 109  
 110              this._panel.get(BOUNDINGBOX)
 111                  .addClass('calendar-event-panel');
 112          }
 113  
 114          return this;
 115      },
 116  
 117      /**
 118       * Prepare to show the Overlay, and kick off the jobs that cause it to be shown.
 119       *
 120       * @method _startShow
 121       * @param {EventFacade} e
 122       * @private
 123       */
 124      _startShow: function(e) {
 125          if (this._isCurrentDayVisible(e.currentTarget)) {
 126              // Only start the show if the current day isn't already visible.
 127              return;
 128          }
 129  
 130          this._cancelHide()
 131              ._cancelShow()
 132  
 133          // Initialise the panel now - this will only happen once. This way
 134          // it's ready for when the timer times out.
 135              ._initOverlay();
 136  
 137  
 138          this._showTimer = setTimeout(Y.bind(function() {
 139                  var calendarCell = e.target.ancestor(CALENDAREVENT, true);
 140                  this._show(calendarCell);
 141              }, this), this.get(EVENTDELAY));
 142      },
 143  
 144      /**
 145       * Display the Overlay immediately.
 146       *
 147       * @method _show
 148       * @param {Node} dayCell The location that the Overlay should be displayed.
 149       */
 150      _show: function(dayCell) {
 151          var bb = this._panel.get(BOUNDINGBOX),
 152              widgetPositionAlign = Y.WidgetPositionAlign,
 153              calendarParent = dayCell.ancestor(DOT + CALENDARTABLE);
 154  
 155          bb.one(DOT + EVENTTITLE).set(INNERHTML, dayCell.getData(DATAPREFIX + 'title'));
 156          bb.one(DOT + EVENTCONTENT).set(INNERHTML, dayCell.getData(DATAPREFIX + 'popupcontent'));
 157  
 158          // Set the ARIA attributes for the owning cell.
 159          if (this._currentDay) {
 160              this._currentDay.setAttribute(ARIACONTROLS, null);
 161          }
 162          dayCell.setAttribute(ARIACONTROLS, dayCell.get('id'));
 163  
 164          // Move the panel to the current target.
 165          dayCell.appendChild(bb);
 166  
 167          // Keep track of the new day being shown.
 168          this._currentDay = dayCell;
 169  
 170          this._panel.constrain(calendarParent);
 171          this._panel
 172              .set('width', calendarParent.get('offsetWidth') + 'px')
 173              // Align it with the area clicked.
 174              .align(calendarParent, [
 175                      widgetPositionAlign.TC,
 176                      widgetPositionAlign.TC
 177                  ])
 178              // Show it.
 179              .show();
 180  
 181          bb.setAttribute('tabindex', '0')
 182            .focus();
 183      },
 184  
 185      /**
 186       * Cancel the timers which would cause the overlay to be shown.
 187       *
 188       * @method _cancelShow
 189       * @chainable
 190       * @private
 191       */
 192      _cancelShow: function() {
 193          if (this._showTimer) {
 194              clearTimeout(this._showTimer);
 195          }
 196  
 197          return this;
 198      },
 199  
 200      /**
 201       * Prepare to hide the Overlay, and kick off the jobs that cause it to be hidden.
 202       *
 203       * @method _startHide
 204       * @param {EventFacade} e
 205       * @private
 206       */
 207      _startHide: function(e) {
 208          if (e.type === 'blur' && e.currentTarget.contains(e.target)) {
 209              return;
 210          }
 211          this._cancelShow()
 212              ._cancelHide();
 213          this._hideTimer = setTimeout(Y.bind(function() {
 214                  this._hide();
 215              }, this), this.get(EVENTDELAY));
 216      },
 217  
 218      /**
 219       * Hide the Overlay immediately.
 220       *
 221       * @method _hide
 222       */
 223      _hide: function() {
 224          if (this._panel) {
 225              this._panel.hide();
 226          }
 227      },
 228  
 229      /**
 230       * Cancel the timers which would cause the overlay to be hidden.
 231       *
 232       * @method _cancelHide
 233       * @chainable
 234       * @private
 235       */
 236      _cancelHide: function() {
 237          if (this._hideTimer) {
 238              clearTimeout(this._hideTimer);
 239          }
 240  
 241          return this;
 242      },
 243  
 244      /**
 245       * Determine whether the specified day is currently visible.
 246       *
 247       * @method _isCurrentDayVisible
 248       * @param specifiedDay {Node} The Node to check visibility for.
 249       * @private
 250       */
 251      _isCurrentDayVisible: function(specifiedDay) {
 252          if (!this._panel || !this._panel.get('visible')) {
 253              return false;
 254          }
 255  
 256          if (specifiedDay !== this._currentDay) {
 257              return false;
 258          }
 259  
 260          return true;
 261      }
 262  }, {
 263      NAME: 'calendarInfo',
 264      ATTRS: {
 265          /**
 266           * The delay to use before showing or hiding the calendar.
 267           *
 268           * @attribute delay
 269           * @type Number
 270           * @default 300
 271           */
 272          delay: {
 273              value: 300
 274          }
 275      }
 276  });
 277  
 278  Y.namespace('M.core_calendar.info').init = function(config) {
 279      return new Info(config);
 280  };
 281  
 282  
 283  }, '@VERSION@', {"requires": ["base", "node", "event-mouseenter", "event-key", "overlay", "moodle-calendar-info-skin"]});