[Summary view] [Print] [Text view]

   1  /* global LOGNS, DOCKEDITEM */
   2  
   3  /**
   4   * Dock JS.
   5   *
   6   * This file contains the docked item class.
   7   *
   8   * @module moodle-core-dock
   9   */
  10  
  11  /**
  12   * Docked item.
  13   *
  14   * @namespace M.core.dock
  15   * @class DockedItem
  16   * @constructor
  17   * @extends Base
  18   * @uses EventTarget
  19   */
  20  DOCKEDITEM = function() {
  21      DOCKEDITEM.superclass.constructor.apply(this, arguments);
  22  };
  23  DOCKEDITEM.prototype = {
  24      /**
  25       * Set to true if this item is currently being displayed.
  26       * @property active
  27       * @protected
  28       * @type Boolean
  29       */
  30      active: false,
  31      /**
  32       * Called during the initialisation process of the object.
  33       * @method initializer
  34       */
  35      initializer: function() {
  36          var title = this.get('title'),
  37              titlestring,
  38              type;
  39          /**
  40           * Fired before the docked item has been drawn.
  41           * @event dockeditem:drawstart
  42           */
  43          this.publish('dockeditem:drawstart', {prefix: 'dockeditem'});
  44          /**
  45           * Fired after the docked item has been drawn.
  46           * @event dockeditem:drawcomplete
  47           */
  48          this.publish('dockeditem:drawcomplete', {prefix: 'dockeditem'});
  49          /**
  50           * Fired before the docked item is to be shown.
  51           * @event dockeditem:showstart
  52           */
  53          this.publish('dockeditem:showstart', {prefix: 'dockeditem'});
  54          /**
  55           * Fired after the docked item has been shown.
  56           * @event dockeditem:showcomplete
  57           */
  58          this.publish('dockeditem:showcomplete', {prefix: 'dockeditem'});
  59          /**
  60           * Fired before the docked item has been hidden.
  61           * @event dockeditem:hidestart
  62           */
  63          this.publish('dockeditem:hidestart', {prefix: 'dockeditem'});
  64          /**
  65           * Fired after the docked item has been hidden.
  66           * @event dockeditem:hidecomplete
  67           */
  68          this.publish('dockeditem:hidecomplete', {prefix: 'dockeditem'});
  69          /**
  70           * Fired when the docked item is removed from the dock.
  71           * @event dockeditem:itemremoved
  72           */
  73          this.publish('dockeditem:itemremoved', {prefix: 'dockeditem'});
  74          if (title) {
  75              type = title.get('nodeName');
  76              titlestring = title.cloneNode(true);
  77              title = Y.Node.create('<' + type + '></' + type + '>');
  78              title = M.core.dock.fixTitleOrientation(title, titlestring.get('text'));
  79              this.set('title', title);
  80              this.set('titlestring', titlestring);
  81          }
  82          Y.log('Initialised dockeditem for block with title "' + this._getLogDescription(), 'debug', LOGNS);
  83      },
  84      /**
  85       * This function draws the item on the dock.
  86       * @method draw
  87       * @return Boolean
  88       */
  89      draw: function() {
  90          var create = Y.Node.create,
  91              dock = this.get('dock'),
  92              count = dock.count,
  93              docktitle,
  94              dockitem,
  95              closeicon,
  96              closeiconimg,
  97              id = this.get('id');
  98  
  99          this.fire('dockeditem:drawstart');
 100  
 101          docktitle = create('<div id="dock_item_' + id + '_title" role="menu" aria-haspopup="true" class="'
 102              + CSS.dockedtitle + '"></div>');
 103          docktitle.append(this.get('title'));
 104          dockitem = create('<div id="dock_item_' + id + '" class="' + CSS.dockeditem + '" tabindex="0" rel="' + id + '"></div>');
 105          if (count === 1) {
 106              dockitem.addClass('firstdockitem');
 107          }
 108          dockitem.append(docktitle);
 109          dock.append(dockitem);
 110  
 111          closeiconimg = create('<img alt="' + M.util.get_string('hidepanel', 'block') +
 112                  '" title="' + M.util.get_string('hidedockpanel', 'block') + '" />');
 113          closeiconimg.setAttribute('src', M.util.image_url('t/dockclose', 'moodle'));
 114          closeicon = create('<span class="hidepanelicon" tabindex="0"></span>').append(closeiconimg);
 115          closeicon.on('forceclose|click', this.hide, this);
 116          closeicon.on('dock:actionkey', this.hide, this, {actions: {enter: true, toggle: true}});
 117          this.get('commands').append(closeicon);
 118  
 119          this.set('dockTitleNode', docktitle);
 120          this.set('dockItemNode', dockitem);
 121  
 122          this.fire('dockeditem:drawcomplete');
 123          return true;
 124      },
 125      /**
 126       * This function toggles makes the item active and shows it.
 127       * @method show
 128       * @return Boolean
 129       */
 130      show: function() {
 131          var dock = this.get('dock'),
 132              panel = dock.getPanel(),
 133              docktitle = this.get('dockTitleNode');
 134  
 135          dock.hideActive();
 136          this.fire('dockeditem:showstart');
 137          Y.log('Showing ' + this._getLogDescription(), 'debug', LOGNS);
 138          panel.setHeader(this.get('titlestring'), this.get('commands'));
 139          panel.setBody(Y.Node.create('<div class="block_' + this.get('blockclass') + ' block_docked"></div>')
 140               .append(this.get('contents')));
 141          if (M.core.actionmenu !== undefined) {
 142              M.core.actionmenu.newDOMNode(panel.get('node'));
 143          }
 144          panel.show();
 145          panel.correctWidth();
 146  
 147          this.active = true;
 148          // Add active item class first up
 149          docktitle.addClass(CSS.activeitem);
 150          // Set aria-exapanded property to true.
 151          docktitle.set('aria-expanded', "true");
 152          this.fire('dockeditem:showcomplete');
 153          dock.resize();
 154          return true;
 155      },
 156      /**
 157       * This function hides the item and makes it inactive.
 158       * @method hide
 159       */
 160      hide: function() {
 161          this.fire('dockeditem:hidestart');
 162          Y.log('Hiding "' + this._getLogDescription(), 'debug', LOGNS);
 163          if (this.active) {
 164              // No longer active
 165              this.active = false;
 166              // Hide the panel
 167              this.get('dock').getPanel().hide();
 168          }
 169          // Remove the active class
 170          // Set aria-exapanded property to false
 171          this.get('dockTitleNode').removeClass(CSS.activeitem).set('aria-expanded', "false");
 172          this.fire('dockeditem:hidecomplete');
 173      },
 174      /**
 175       * A toggle between calling show and hide functions based on css.activeitem
 176       * Applies rules to key press events (dock:actionkey)
 177       * @method toggle
 178       * @param {String} action
 179       */
 180      toggle: function(action) {
 181          var docktitle = this.get('dockTitleNode');
 182          if (docktitle.hasClass(CSS.activeitem) && action !== 'expand') {
 183              this.hide();
 184          } else if (!docktitle.hasClass(CSS.activeitem) && action !== 'collapse') {
 185              this.show();
 186          }
 187      },
 188      /**
 189       * This function removes the node and destroys it's bits.
 190       * @method remove.
 191       */
 192      remove: function() {
 193          this.hide();
 194          // Return the block to its original position.
 195          this.get('block').returnToPage();
 196          // Remove the dock item node.
 197          this.get('dockItemNode').remove();
 198          this.fire('dockeditem:itemremoved');
 199      },
 200      /**
 201       * Returns the description of this item to use for log calls.
 202       * @method _getLogDescription
 203       * @private
 204       * @return {String}
 205       */
 206      _getLogDescription: function() {
 207          return this.get('titlestring').get('innerHTML') + ' (' + this.get('blockinstanceid') + ')';
 208      }
 209  };
 210  Y.extend(DOCKEDITEM, Y.Base, DOCKEDITEM.prototype, {
 211      NAME: 'moodle-core-dock-dockeditem',
 212      ATTRS: {
 213          /**
 214           * The block this docked item is associated with.
 215           * @attribute block
 216           * @type BLOCK
 217           * @writeOnce
 218           * @required
 219           */
 220          block: {
 221              writeOnce: 'initOnly'
 222          },
 223          /**
 224           * The dock itself.
 225           * @attribute dock
 226           * @type DOCK
 227           * @writeOnce
 228           * @required
 229           */
 230          dock: {
 231              writeOnce: 'initOnly'
 232          },
 233          /**
 234           * The docked item ID. This will be given by the dock.
 235           * @attribute id
 236           * @type Number
 237           */
 238          id: {},
 239          /**
 240           * Block instance id.Taken from the associated block.
 241           * @attribute blockinstanceid
 242           * @type Number
 243           * @writeOnce
 244           */
 245          blockinstanceid: {
 246              writeOnce: 'initOnly',
 247              setter: function(value) {
 248                  return parseInt(value, 10);
 249              }
 250          },
 251          /**
 252           * The title  nodeof the docked item.
 253           * @attribute title
 254           * @type Node
 255           * @default null
 256           */
 257          title: {
 258              value: null
 259          },
 260          /**
 261           * The title string.
 262           * @attribute titlestring
 263           * @type String
 264           */
 265          titlestring: {
 266              value: null
 267          },
 268          /**
 269           * The contents of the docked item
 270           * @attribute contents
 271           * @type Node
 272           * @writeOnce
 273           * @required
 274           */
 275          contents: {
 276              writeOnce: 'initOnly'
 277          },
 278          /**
 279           * Commands associated with the block.
 280           * @attribute commands
 281           * @type Node
 282           * @writeOnce
 283           * @required
 284           */
 285          commands: {
 286              writeOnce: 'initOnly'
 287          },
 288          /**
 289           * The block class.
 290           * @attribute blockclass
 291           * @type String
 292           * @writeOnce
 293           * @required
 294           */
 295          blockclass: {
 296              writeOnce: 'initOnly'
 297          },
 298          /**
 299           * The title node for the docked block.
 300           * @attribute dockTitleNode
 301           * @type Node
 302           */
 303          dockTitleNode: {
 304              value: null
 305          },
 306          /**
 307           * The item node for the docked block.
 308           * @attribute dockItemNode
 309           * @type Node
 310           */
 311          dockItemNode: {
 312              value: null
 313          },
 314          /**
 315           * The container for the docked item (will contain the block contents when visible)
 316           * @attribute dockcontainerNode
 317           * @type Node
 318           */
 319          dockcontainerNode: {
 320              value: null
 321          }
 322      }
 323  });
 324  Y.augment(DOCKEDITEM, Y.EventTarget);