lib/yui/src/dock/js/panel.js

   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);