[Summary view] [Print] [Text view]

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