[Summary view] [Print] [Text view]

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