[Summary view] [Print] [Text view]

   1  /**
   2   * Dock JS.
   3   *
   4   * This file contains the panel class used by the dock to display the content of docked blocks.
   5   *
   6   * @module moodle-core-dock
   7   */
   8  
   9  /**
  10   * Panel.
  11   *
  12   * @namespace M.core.dock
  13   * @class Panel
  14   * @constructor
  15   * @extends Base
  16   * @uses EventTarget
  17   */
  18  DOCKPANEL = function() {
  19      DOCKPANEL.superclass.constructor.apply(this, arguments);
  20  };
  21  DOCKPANEL.prototype = {
  22      /**
  23       * True once the panel has been created.
  24       * @property created
  25       * @protected
  26       * @type {Boolean}
  27       */
  28      created : false,
  29      /**
  30       * Called during the initialisation process of the object.
  31       * @method initializer
  32       */
  33      initializer : function() {
  34          Y.log('Panel initialising', 'debug', LOGNS);
  35          /**
  36           * Fired before the panel is shown.
  37           * @event dockpane::beforeshow
  38           */
  39          this.publish('dockpanel:beforeshow', {prefix:'dockpanel'});
  40          /**
  41           * Fired after the panel is shown.
  42           * @event dockpanel:shown
  43           */
  44          this.publish('dockpanel:shown', {prefix:'dockpanel'});
  45          /**
  46           * Fired before the panel is hidden.
  47           * @event dockpane::beforehide
  48           */
  49          this.publish('dockpanel:beforehide', {prefix:'dockpanel'});
  50          /**
  51           * Fired after the panel is hidden.
  52           * @event dockpanel:hidden
  53           */
  54          this.publish('dockpanel:hidden', {prefix:'dockpanel'});
  55          /**
  56           * Fired when ever the dock panel is either hidden or shown.
  57           * Always fired after the shown or hidden events.
  58           * @event dockpanel:visiblechange
  59           */
  60          this.publish('dockpanel:visiblechange', {prefix:'dockpanel'});
  61      },
  62      /**
  63       * Creates the Panel if it has not already been created.
  64       * @method create
  65       * @return {Boolean}
  66       */
  67      create : function() {
  68          if (this.created) {
  69              return true;
  70          }
  71          this.created = true;
  72          var dock = this.get('dock'),
  73              node = dock.get('dockNode');
  74          this.set('node', Y.Node.create('<div id="dockeditempanel" class="dockitempanel_hidden"></div>'));
  75          this.set('contentNode', Y.Node.create('<div class="dockeditempanel_content"></div>'));
  76          this.set('headerNode', Y.Node.create('<div class="dockeditempanel_hd"></div>'));
  77          this.set('bodyNode', Y.Node.create('<div class="dockeditempanel_bd"></div>'));
  78          node.append(
  79              this.get('node').append(this.get('contentNode').append(this.get('headerNode')).append(this.get('bodyNode')))
  80          );
  81      },
  82      /**
  83       * Displays the panel.
  84       * @method show
  85       */
  86      show : function() {
  87          this.create();
  88          this.fire('dockpanel:beforeshow');
  89          this.set('visible', true);
  90          this.get('node').removeClass('dockitempanel_hidden');
  91          this.fire('dockpanel:shown');
  92          this.fire('dockpanel:visiblechange');
  93      },
  94      /**
  95       * Hides the panel
  96       * @method hide
  97       */
  98      hide : function() {
  99          this.fire('dockpanel:beforehide');
 100          this.set('visible', false);
 101          this.get('node').addClass('dockitempanel_hidden');
 102          this.fire('dockpanel:hidden');
 103          this.fire('dockpanel:visiblechange');
 104      },
 105      /**
 106       * Sets the panel header.
 107       * @method setHeader
 108       * @param {Node|String} content
 109       */
 110      setHeader : function(content) {
 111          this.create();
 112          var header = this.get('headerNode'),
 113              i;
 114          header.setContent(content);
 115          if (arguments.length > 1) {
 116              for (i = 1; i < arguments.length; i++) {
 117                  if (Y.Lang.isNumber(i) || Y.Lang.isString(i)) {
 118                      header.append(arguments[i]);
 119                  }
 120              }
 121          }
 122      },
 123      /**
 124       * Sets the panel body.
 125       * @method setBody
 126       * @param {Node|String} content
 127       */
 128      setBody : function(content) {
 129          this.create();
 130          this.get('bodyNode').setContent(content);
 131      },
 132      /**
 133       * Sets the new top mark of the panel.
 134       *
 135       * @method setTop
 136       * @param {Number} newtop
 137       */
 138      setTop : function(newtop) {
 139          if (Y.UA.ie > 0 && Y.UA.ie < 7) {
 140              this.get('node').setY(newtop);
 141          } else {
 142              this.get('node').setStyle('top', newtop.toString()+'px');
 143          }
 144      },
 145      /**
 146       * Corrects the width of the panel.
 147       * @method correctWidth
 148       */
 149      correctWidth : function() {
 150          var bodyNode = this.get('bodyNode'),
 151              // Width of content.
 152              width = bodyNode.get('clientWidth'),
 153              // Scrollable width of content.
 154              scroll = bodyNode.get('scrollWidth'),
 155              // Width of content container with overflow.
 156              offsetWidth = bodyNode.get('offsetWidth'),
 157              // The new width - defaults to the current width.
 158              newWidth = width,
 159              // The max width (80% of screen).
 160              maxWidth = Math.round(bodyNode.get('winWidth') * 0.8);
 161  
 162          // If the scrollable width is more than the visible width
 163          if (scroll > width) {
 164              //   Content width
 165              // + the difference
 166              // + any rendering difference (borders, padding)
 167              // + 10px to make it look nice.
 168              newWidth = width + (scroll - width) + ((offsetWidth - width)*2) + 10;
 169          }
 170  
 171          // Make sure its not more then the maxwidth
 172          if (newWidth > maxWidth) {
 173              newWidth = maxWidth;
 174          }
 175  
 176          // Set the new width if its more than the old width.
 177          if (newWidth > offsetWidth) {
 178              this.get('node').setStyle('width', newWidth+'px');
 179          }
 180      }
 181  };
 182  Y.extend(DOCKPANEL, Y.Base, DOCKPANEL.prototype, {
 183      NAME : 'moodle-core-dock-panel',
 184      ATTRS : {
 185          /**
 186           * The dock itself.
 187           * @attribute dock
 188           * @type DOCK
 189           * @writeonce
 190           */
 191          dock : {
 192              writeOnce : 'initOnly'
 193          },
 194          /**
 195           * The node that contains the whole panel.
 196           * @attribute node
 197           * @type Node
 198           */
 199          node : {
 200              value : null
 201          },
 202          /**
 203           * The node that contains the header, body and footer.
 204           * @attribute contentNode
 205           * @type Node
 206           */
 207          contentNode : {
 208              value : null
 209          },
 210          /**
 211           * The node that contains the header
 212           * @attribute headerNode
 213           * @type Node
 214           */
 215          headerNode : {
 216              value : null
 217          },
 218          /**
 219           * The node that contains the body
 220           * @attribute bodyNode
 221           * @type Node
 222           */
 223          bodyNode : {
 224              value : null
 225          },
 226          /**
 227           * True if the panel is currently visible.
 228           * @attribute visible
 229           * @type Boolean
 230           */
 231          visible : {
 232              value : false
 233          }
 234      }
 235  });
 236  Y.augment(DOCKPANEL, Y.EventTarget);