blocks/dock.js

   1 /**
   2  * The dock namespace: Contains all things dock related
   3  * @namespace
   4  */
   5 M.core_dock = {
   6     count : 0,              // The number of dock items currently
   7     totalcount : 0,         // The number of dock items through the page life
   8     items : [],             // An array of dock items
   9     earlybinds : [],        // Events added before the dock was augmented to support events
  10     Y : null,               // The YUI instance to use with dock related code
  11     initialised : false,    // True once thedock has been initialised
  12     delayedevent : null,    // Will be an object if there is a delayed event in effect
  13     preventevent : null,    // Will be an eventtype if there is an eventyoe to prevent
  14     holdingarea : null
  15 };
  16 /**
  17  * Namespace containing the nodes that relate to the dock
  18  * @namespace
  19  */
  20 M.core_dock.nodes = {
  21     dock : null, // The dock itself
  22     body : null, // The body of the page
  23     panel : null // The docks panel
  24 };
  25 /**
  26  * Configuration parameters used during the initialisation and setup
  27  * of dock and dock items.
  28  * This is here specifically so that themers can override core parameters and
  29  * design aspects without having to re-write navigation
  30  * @namespace
  31  */
  32 M.core_dock.cfg = {
  33     buffer:10,                          // Buffer used when containing a panel
  34     position:'left',                    // position of the dock
  35     orientation:'vertical',             // vertical || horizontal determines if we change the title
  36     spacebeforefirstitem: 10,           // Space between the top of the dock and the first item
  37     removeallicon: M.util.image_url('t/dock_to_block', 'moodle')
  38 };
  39 /**
  40  * CSS classes to use with the dock
  41  * @namespace
  42  */
  43 M.core_dock.css = {
  44     dock:'dock',                    // CSS Class applied to the dock box
  45     dockspacer:'dockspacer',        // CSS class applied to the dockspacer
  46     controls:'controls',            // CSS class applied to the controls box
  47     body:'has_dock',                // CSS class added to the body when there is a dock
  48     buttonscontainer: 'buttons_container',
  49     dockeditem:'dockeditem',        // CSS class added to each item in the dock
  50     dockeditemcontainer:'dockeditem_container',
  51     dockedtitle:'dockedtitle',      // CSS class added to the item's title in each dock
  52     activeitem:'activeitem'         // CSS class added to the active item
  53 };
  54 /**
  55  * Augments the classes as required and processes early bindings
  56  */
  57 M.core_dock.init = function(Y) {
  58     if (this.initialised) {
  59         return true;
  60     }
  61     var css = this.css;
  62     this.initialised = true;
  63     this.Y = Y;
  64     this.nodes.body = Y.one(document.body);
  65
  66     // Give the dock item class the event properties/methods
  67     Y.augment(this.item, Y.EventTarget);
  68     Y.augment(this, Y.EventTarget, true);
  69     /**
  70      * A 'dock:actionkey' Event.
  71      * The event consists of the left arrow, right arrow, enter and space keys.
  72      * More keys can be mapped to action meanings.
  73      * actions: collapse , expand, toggle, enter.
  74      *
  75      * This event is subscribed to by dockitems.
  76      * The on() method to subscribe allows specifying the desired trigger actions as JSON.
  77      *
  78      * This event can also be delegated if needed.
  79      * Todo: This could be centralised, a similar Event is defined in blocks/navigation/yui/navigation/navigation.js
  80      */
  81     Y.Event.define("dock:actionkey", {
  82         // Webkit and IE repeat keydown when you hold down arrow keys.
  83         // Opera links keypress to page scroll; others keydown.
  84         // Firefox prevents page scroll via preventDefault() on either
  85         // keydown or keypress.
  86         _event: (Y.UA.webkit || Y.UA.ie) ? 'keydown' : 'keypress',
  87
  88         _keys: {
  89             //arrows
  90             '37': 'collapse',
  91             '39': 'expand',
  92             //(@todo: lrt/rtl/M.core_dock.cfg.orientation decision to assign arrow to meanings)
  93             '32': 'toggle',
  94             '13': 'enter'
  95         },
  96
  97         _keyHandler: function (e, notifier, args) {
  98             if (!args.actions) {
  99                 var actObj = {collapse:true, expand:true, toggle:true, enter:true};
 100             } else {
 101                 var actObj = args.actions;
 102             }
 103             if (this._keys[e.keyCode] && actObj[this._keys[e.keyCode]]) {
 104                 e.action = this._keys[e.keyCode];
 105                 notifier.fire(e);
 106             }
 107         },
 108
 109         on: function (node, sub, notifier) {
 110             // subscribe to _event and ask keyHandler to handle with given args[0] (the desired actions).
 111             if (sub.args == null) {
 112                 //no actions given
 113                 sub._detacher = node.on(this._event, this._keyHandler,this, notifier, {actions:false});
 114             } else {
 115                 sub._detacher = node.on(this._event, this._keyHandler,this, notifier, sub.args[0]);
 116             }
 117         },
 118
 119         detach: function (node, sub, notifier) {
 120             //detach our _detacher handle of the subscription made in on()
 121             sub._detacher.detach();
 122         },
 123
 124         delegate: function (node, sub, notifier, filter) {
 125             // subscribe to _event and ask keyHandler to handle with given args[0] (the desired actions).
 126             if (sub.args == null) {
 127                 //no actions given
 128                 sub._delegateDetacher = node.delegate(this._event, this._keyHandler,filter, this, notifier, {actions:false});
 129             } else {
 130                 sub._delegateDetacher = node.delegate(this._event, this._keyHandler,filter, this, notifier, sub.args[0]);
 131             }
 132         },
 133
 134         detachDelegate: function (node, sub, notifier) {
 135             sub._delegateDetacher.detach();
 136         }
 137     });
 138     // Publish the events the dock has
 139     this.publish('dock:beforedraw', {prefix:'dock'});
 140     this.publish('dock:beforeshow', {prefix:'dock'});
 141     this.publish('dock:shown', {prefix:'dock'});
 142     this.publish('dock:hidden', {prefix:'dock'});
 143     this.publish('dock:initialised', {prefix:'dock'});
 144     this.publish('dock:itemadded', {prefix:'dock'});
 145     this.publish('dock:itemremoved', {prefix:'dock'});
 146     this.publish('dock:itemschanged', {prefix:'dock'});
 147     this.publish('dock:panelgenerated', {prefix:'dock'});
 148     this.publish('dock:panelresizestart', {prefix:'dock'});
 149     this.publish('dock:resizepanelcomplete', {prefix:'dock'});
 150     this.publish('dock:starting', {prefix: 'dock',broadcast:  2,emitFacade: true});
 151     this.fire('dock:starting');
 152     // Re-apply early bindings properly now that we can
 153     this.applyBinds();
 154     // Check if there is a customisation function
 155     if (typeof(customise_dock_for_theme) === 'function') {
 156         try {
 157             // Run the customisation function
 158             customise_dock_for_theme();
 159         } catch (exception) {
 160             // Do nothing at the moment
 161         }
 162     }
 163
 164     var dock = Y.one('#dock');
 165     if (!dock) {
 166         // Start the construction of the dock
 167         dock = Y.Node.create('<div id="dock" class="'+css.dock+' '+css.dock+'_'+this.cfg.position+'_'+this.cfg.orientation+'"></div>')
 168                     .append(Y.Node.create('<div class="'+css.buttonscontainer+'"></div>')
 169                         .append(Y.Node.create('<div class="'+css.dockeditemcontainer+'"></div>')));
 170         this.nodes.body.append(dock);
 171     } else {
 172         dock.addClass(css.dock+'_'+this.cfg.position+'_'+this.cfg.orientation);
 173     }
 174     this.holdingarea = Y.Node.create('<div></div>').setStyles({display:'none'});
 175     this.nodes.body.append(this.holdingarea);
 176     if (Y.UA.ie > 0 && Y.UA.ie < 7) {
 177         // Adjust for IE 6 (can't handle fixed pos)
 178         dock.setStyle('height', dock.get('winHeight')+'px');
 179     }
 180     // Store the dock
 181     this.nodes.dock = dock;
 182     this.nodes.buttons = dock.one('.'+css.buttonscontainer);
 183     this.nodes.container = this.nodes.buttons.one('.'+css.dockeditemcontainer);
 184
 185     if (Y.all('.block.dock_on_load').size() == 0) {
 186         // Nothing on the dock... hide it using CSS
 187         dock.addClass('nothingdocked');
 188     } else {
 189         this.nodes.body.addClass(this.css.body).addClass(this.css.body+'_'+this.cfg.position+'_'+this.cfg.orientation);
 190     }
 191
 192     this.fire('dock:beforedraw');
 193
 194     // Add a removeall button
 195     // Must set the image src seperatly of we get an error with XML strict headers
 196     var removeall = Y.Node.create('<img alt="'+M.str.block.undockall+'" title="'+M.str.block.undockall+'" tabindex="0"/>');
 197     removeall.setAttribute('src',this.cfg.removeallicon);
 198     removeall.on('removeall|click', this.remove_all, this);
 199     removeall.on('dock:actionkey', this.remove_all, this, {actions:{enter:true}});
 200     this.nodes.buttons.appendChild(Y.Node.create('<div class="'+css.controls+'"></div>').append(removeall));
 201
 202     // Create a manager for the height of the tabs. Once set this can be forgotten about
 203     new (function(Y){
 204         return {
 205             enabled : false,        // True if the item_sizer is being used, false otherwise
 206             /**
 207              * Initialises the dock sizer which then attaches itself to the required
 208              * events in order to monitor the dock
 209              * @param {YUI} Y
 210              */
 211             init : function() {
 212                 M.core_dock.on('dock:itemschanged', this.checkSizing, this);
 213                 Y.on('windowresize', this.checkSizing, this);
 214             },
 215             /**
 216              * Check if the size dock items needs to be adjusted
 217              */
 218             checkSizing : function() {
 219                 var dock = M.core_dock;
 220                 var possibleheight = dock.nodes.dock.get('offsetHeight') - dock.nodes.dock.one('.controls').get('offsetHeight') - (dock.cfg.buffer*3) - (dock.items.length*2);
 221                 var totalheight = 0;
 222                 for (var id in dock.items) {
 223                     var dockedtitle = Y.one(dock.items[id].title).ancestor('.'+dock.css.dockedtitle);
 224                     if (dockedtitle) {
 225                         if (this.enabled) {
 226                             dockedtitle.setStyle('height', 'auto');
 227                         }
 228                         totalheight += dockedtitle.get('offsetHeight') || 0;
 229                     }
 230                 }
 231                 if (totalheight > possibleheight) {
 232                     this.enable(possibleheight);
 233                 }
 234             },
 235             /**
 236              * Enables the dock sizer and resizes where required.
 237              */
 238             enable : function(possibleheight) {
 239                 var dock = M.core_dock;
 240                 var runningcount = 0;
 241                 var usedheight = 0;
 242                 this.enabled = true;
 243                 for (var id in dock.items) {
 244                     var itemtitle = Y.one(dock.items[id].title).ancestor('.'+dock.css.dockedtitle);
 245                     if (!itemtitle) {
 246                         continue;
 247                     }
 248                     var itemheight = Math.floor((possibleheight-usedheight) / (dock.count - runningcount));
 249                     var offsetheight = itemtitle.get('offsetHeight');
 250                     itemtitle.setStyle('overflow', 'hidden');
 251                     if (offsetheight > itemheight) {
 252                         itemtitle.setStyle('height', itemheight+'px');
 253                         usedheight += itemheight;
 254                     } else {
 255                         usedheight += offsetheight;
 256                     }
 257                     runningcount++;
 258                 }
 259             }
 260         };
 261     })(Y).init();
 262
 263     // Attach the required event listeners
 264     // We use delegate here as that way a handful of events are created for the dock
 265     // and all items rather than the same number for the dock AND every item individually
 266     Y.delegate('click', this.handleEvent, this.nodes.dock, '.'+this.css.dockedtitle, this, {cssselector:'.'+this.css.dockedtitle, delay:0});
 267     Y.delegate('mouseenter', this.handleEvent, this.nodes.dock, '.'+this.css.dockedtitle, this, {cssselector:'.'+this.css.dockedtitle, delay:0.5, iscontained:true, preventevent:'click', preventdelay:3});
 268     //Y.delegate('mouseleave', this.handleEvent, this.nodes.body, '#dock', this,  {cssselector:'#dock', delay:0.5, iscontained:false});
 269     this.nodes.dock.on('mouseleave', this.handleEvent, this, {cssselector:'#dock', delay:0.5, iscontained:false});
 270
 271     this.nodes.body.on('click', this.handleEvent, this,  {cssselector:'body', delay:0});
 272     this.on('dock:itemschanged', this.resizeBlockSpace, this);
 273     this.on('dock:itemschanged', this.checkDockVisibility, this);
 274     this.on('dock:itemschanged', this.resetFirstItem, this);
 275     // Inform everyone the dock has been initialised
 276     this.fire('dock:initialised');
 277     return true;
 278 };
 279 /**
 280  * Get the panel docked blocks will be shown in and initialise it if we havn't already.
 281  */
 282 M.core_dock.getPanel = function() {
 283     if (this.nodes.panel === null) {
 284         // Initialise the dockpanel .. should only happen once
 285         this.nodes.panel = (function(Y, parent){
 286             var dockpanel = Y.Node.create('<div id="dockeditempanel" class="dockitempanel_hidden"><div class="dockeditempanel_content"><div class="dockeditempanel_hd"></div><div class="dockeditempanel_bd"></div></div></div>');
 287             // Give the dockpanel event target properties and methods
 288             Y.augment(dockpanel, Y.EventTarget);
 289             // Publish events for the dock panel
 290             dockpanel.publish('dockpanel:beforeshow', {prefix:'dockpanel'});
 291             dockpanel.publish('dockpanel:shown', {prefix:'dockpanel'});
 292             dockpanel.publish('dockpanel:beforehide', {prefix:'dockpanel'});
 293             dockpanel.publish('dockpanel:hidden', {prefix:'dockpanel'});
 294             dockpanel.publish('dockpanel:visiblechange', {prefix:'dockpanel'});
 295             // Cache the content nodes
 296             dockpanel.contentNode = dockpanel.one('.dockeditempanel_content');
 297             dockpanel.contentHeader = dockpanel.contentNode.one('.dockeditempanel_hd');
 298             dockpanel.contentBody = dockpanel.contentNode.one('.dockeditempanel_bd');
 299             // Set the x position of the panel
 300             //dockpanel.setX(parent.get('offsetWidth'));
 301             dockpanel.visible = false;
 302             // Add a show event
 303             dockpanel.show = function() {
 304                 this.fire('dockpanel:beforeshow');
 305                 this.visible = true;
 306                 this.removeClass('dockitempanel_hidden');
 307                 this.fire('dockpanel:shown');
 308                 this.fire('dockpanel:visiblechange');
 309             };
 310             // Add a hide event
 311             dockpanel.hide = function() {
 312                 this.fire('dockpanel:beforehide');
 313                 this.visible = false;
 314                 this.addClass('dockitempanel_hidden');
 315                 this.fire('dockpanel:hidden');
 316                 this.fire('dockpanel:visiblechange');
 317             };
 318             // Add a method to set the header content
 319             dockpanel.setHeader = function(content) {
 320                 this.contentHeader.setContent(content);
 321                 if (arguments.length > 1) {
 322                     for (var i=1;i < arguments.length;i++) {
 323                         this.contentHeader.append(arguments[i]);
 324                     }
 325                 }
 326             };
 327             // Add a method to set the body content
 328             dockpanel.setBody = function(content) {
 329                 this.contentBody.setContent(content);
 330             };
 331             // Add a method to set the top of the panel position
 332             dockpanel.setTop = function(newtop) {
 333                 if (Y.UA.ie > 0 && Y.UA.ie < 7) {
 334                     this.setY(newtop);
 335                 } else {
 336                     this.setStyle('top', newtop.toString()+'px');
 337                 }
 338                 return;
 339             };
 340             /**
 341              * Increases the width of the panel to avoid horizontal scrolling
 342              * if possible.
 343              */
 344             dockpanel.correctWidth = function() {
 345                 var bd = this.one('.dockeditempanel_bd');
 346
 347                 // Width of content
 348                 var w = bd.get('clientWidth');
 349                 // Scrollable width of content
 350                 var s = bd.get('scrollWidth');
 351                 // Width of content container with overflow
 352                 var ow = this.get('offsetWidth');
 353                 // The new width
 354                 var nw = w;
 355                 // The max width (80% of screen)
 356                 var mw = Math.round(this.get('winWidth') * 0.8);
 357
 358                 // If the scrollable width is more than the visible width
 359                 if (s > w) {
 360                     //   Content width
 361                     // + the difference
 362                     // + any rendering difference (borders, padding)
 363                     // + 10px to make it look nice.
 364                     nw = w + (s-w) + ((ow-w)*2) + 10;
 365                 }
 366
 367                 // Make sure its not more then the maxwidth
 368                 if (nw > mw) {
 369                     nw = mw;
 370                 }
 371
 372                 // Set the new width if its more than the old width.
 373                 if (nw > ow) {
 374                     this.setStyle('width', nw+'px');
 375                 }
 376             }
 377             // Put the dockpanel in the body
 378             parent.append(dockpanel);
 379             // Return it
 380             return dockpanel;
 381         })(this.Y, this.nodes.dock);
 382         this.nodes.panel.on('panel:visiblechange', this.resize, this);
 383         this.Y.on('windowresize', this.resize, this);
 384         this.fire('dock:panelgenerated');
 385     }
 386     return this.nodes.panel;
 387 };
 388 /**
 389  * Handles a generic event within the dock
 390  * @param {Y.Event} e
 391  * @param {object} options Event configuration object
 392  */
 393 M.core_dock.handleEvent = function(e, options) {
 394     var item = this.getActiveItem();
 395     if (options.cssselector == 'body') {
 396         if (!this.nodes.dock.contains(e.target)) {
 397             if (item) {
 398                 item.hide();
 399             }
 400         }
 401     } else {
 402         var target;
 403         if (e.target.test(options.cssselector)) {
 404             target = e.target;
 405         } else {
 406             target = e.target.ancestor(options.cssselector);
 407         }
 408         if (!target) {
 409             return true;
 410         }
 411         if (this.preventevent !== null && e.type === this.preventevent) {
 412             return true;
 413         }
 414         if (options.preventevent) {
 415             this.preventevent = options.preventevent;
 416             if (options.preventdelay) {
 417                 setTimeout(function(){M.core_dock.preventevent = null;}, options.preventdelay*1000);
 418             }
 419         }
 420         if (this.delayedevent && this.delayedevent.timeout) {
 421             clearTimeout(this.delayedevent.timeout);
 422             this.delayedevent.event.detach();
 423             this.delayedevent = null;
 424         }
 425         if (options.delay > 0) {
 426             return this.delayEvent(e, options, target);
 427         }
 428         var targetid = target.get('id');
 429         if (targetid.match(/^dock_item_(\d+)_title$/)) {
 430             item = this.items[targetid.replace(/^dock_item_(\d+)_title$/, '$1')];
 431             if (item.active) {
 432                 item.hide();
 433             } else {
 434                 item.show();
 435             }
 436         } else if (item) {
 437             item.hide();
 438         }
 439     }
 440     return true;
 441 };
 442 /**
 443  * This function delays an event and then fires it providing the cursor if either
 444  * within or outside of the original target (options.iscontained=true|false)
 445  * @param {Y.Event} event
 446  * @param {object} options
 447  * @param {Y.Node} target
 448  * @return bool
 449  */
 450 M.core_dock.delayEvent = function(event, options, target) {
 451     var self = this;
 452     self.delayedevent = (function(){
 453         return {
 454             target : target,
 455             event : self.nodes.body.on('mousemove', function(e){
 456                 self.delayedevent.target = e.target;
 457             }),
 458             timeout : null
 459         };
 460     })(self);
 461     self.delayedevent.timeout = setTimeout(function(){
 462         self.delayedevent.timeout = null;
 463         self.delayedevent.event.detach();
 464         if (options.iscontained == self.nodes.dock.contains(self.delayedevent.target)) {
 465             self.handleEvent(event, {cssselector:options.cssselector, delay:0, iscontained:options.iscontained});
 466         }
 467     }, options.delay*1000);
 468     return true;
 469 };
 470 /**
 471  * Corrects the orientation of the title, which for the default
 472  * dock just means making it vertical
 473  * The orientation is determined by M.str.langconfig.thisdirectionvertical:
 474  *    ver : Letters are stacked rather than rotated
 475  *    ttb : Title is rotated clockwise so the first letter is at the top
 476  *    btt : Title is rotated counterclockwise so the first letter is at the bottom.
 477  * @param {string} title
 478  */
 479 M.core_dock.fixTitleOrientation = function(item, title, text) {
 480     var Y = this.Y;
 481
 482     var title = Y.one(title);
 483
 484     if(M.core_dock.cfg.orientation != 'vertical') {
 485         // If the dock isn't vertical don't adjust it!
 486         title.setContent(text);
 487         return title
 488     }
 489
 490     if (Y.UA.ie > 0 && Y.UA.ie < 8) {
 491         // IE 6/7 can't rotate text so force ver
 492         M.str.langconfig.thisdirectionvertical = 'ver';
 493     }
 494
 495     var clockwise = false;
 496     switch (M.str.langconfig.thisdirectionvertical) {
 497         case 'ver':
 498             // Stacked is easy
 499             return title.setContent(text.split('').join('<br />'));
 500         case 'ttb':
 501             clockwise = true;
 502             break;
 503         case 'btt':
 504             clockwise = false;
 505             break;
 506     }
 507
 508     if (Y.UA.ie > 7) {
 509         // IE8 can flip the text via CSS but not handle SVG
 510         title.setContent(text);
 511         title.setAttribute('style', 'writing-mode: tb-rl; filter: flipV flipH;display:inline;');
 512         title.addClass('filterrotate');
 513         return title;
 514     }
 515
 516     // Cool, we can use SVG!
 517     var test = Y.Node.create('<h2><span style="font-size:10px;">'+text+'</span></h2>');
 518     this.nodes.body.append(test);
 519     var height = test.one('span').get('offsetWidth')+4;
 520     var width = test.one('span').get('offsetHeight')*2;
 521     var qwidth = width/4;
 522     test.remove();
 523
 524     // Create the text for the SVG
 525     var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
 526     txt.setAttribute('font-size','10px');
 527     if (clockwise) {
 528         txt.setAttribute('transform','rotate(90 '+(qwidth/2)+' '+qwidth+')');
 529     } else {
 530         txt.setAttribute('y', height);
 531         txt.setAttribute('transform','rotate(270 '+qwidth+' '+(height-qwidth)+')');
 532     }
 533     txt.appendChild(document.createTextNode(text));
 534
 535     var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 536     svg.setAttribute('version', '1.1');
 537     svg.setAttribute('height', height);
 538     svg.setAttribute('width', width);
 539     svg.appendChild(txt);
 540
 541     title.append(svg);
 542     title.append(Y.Node.create('<span class="accesshide">'+text+'</span>'));
 543
 544     item.on('dockeditem:drawcomplete', function(txt, title){
 545         txt.setAttribute('fill', Y.one(title).getStyle('color'));
 546     }, item, txt, title);
 547
 548     return title;
 549 };
 550 /**
 551  * Resizes the space that contained blocks if there were no blocks left in
 552  * it. e.g. if all blocks have been moved to the dock
 553  * @param {Y.Node} node
 554  */
 555 M.core_dock.resizeBlockSpace = function(node) {
 556
 557     if (this.Y.all('.block.dock_on_load').size()>0) {
 558         // Do not resize during initial load
 559         return;
 560     }
 561     var blockregions = [];
 562     var populatedblockregions = 0;
 563     this.Y.all('.block-region').each(function(region){
 564         var hasblocks = (region.all('.block').size() > 0);
 565         if (hasblocks) {
 566             populatedblockregions++;
 567         }
 568         blockregions[region.get('id')] = {hasblocks: hasblocks, bodyclass: region.get('id').replace(/^region\-/, 'side-')+'-only'};
 569     });
 570     var bodynode = M.core_dock.nodes.body;
 571     var showregions = false;
 572     if (bodynode.hasClass('blocks-moving')) {
 573         // open up blocks during blocks positioning
 574         showregions = true;
 575     }
 576
 577     var noblocksbodyclass = 'content-only';
 578     var i = null;
 579     if (populatedblockregions==0 && showregions==false) {
 580         bodynode.addClass(noblocksbodyclass);
 581         for (i in blockregions) {
 582             bodynode.removeClass(blockregions[i].bodyclass);
 583         }
 584     } else if (populatedblockregions==1 && showregions==false) {
 585         bodynode.removeClass(noblocksbodyclass);
 586         for (i in blockregions) {
 587             if (!blockregions[i].hasblocks) {
 588                 bodynode.removeClass(blockregions[i].bodyclass);
 589             } else {
 590                 bodynode.addClass(blockregions[i].bodyclass);
 591             }
 592         }
 593     } else {
 594         bodynode.removeClass(noblocksbodyclass);
 595         for (i in blockregions) {
 596             bodynode.removeClass(blockregions[i].bodyclass);
 597         }
 598     }
 599 };
 600 /**
 601  * Adds a dock item into the dock
 602  * @function
 603  * @param {M.core_dock.item} item
 604  */
 605 M.core_dock.add = function(item) {
 606     item.id = this.totalcount;
 607     this.count++;
 608     this.totalcount++;
 609     this.items[item.id] = item;
 610     this.items[item.id].draw();
 611     this.fire('dock:itemadded', item);
 612     this.fire('dock:itemschanged', item);
 613 };
 614 /**
 615  * Appends a dock item to the dock
 616  * @param {YUI.Node} docknode
 617  */
 618 M.core_dock.append = function(docknode) {
 619     this.nodes.container.append(docknode);
 620 };
 621 /**
 622  * Initialises a generic block object
 623  * @param {YUI} Y
 624  * @param {int} id
 625  */
 626 M.core_dock.init_genericblock = function(Y, id) {
 627     if (!this.initialised) {
 628         this.init(Y);
 629     }
 630     new this.genericblock(id).initialise_block(Y, Y.one('#inst'+id));
 631 };
 632 /**
 633  * Removes the node at the given index and puts it back into conventional page sturcture
 634  * @function
 635  * @param {int} uid Unique identifier for the block
 636  * @return {boolean}
 637  */
 638 M.core_dock.remove = function(uid) {
 639     if (!this.items[uid]) {
 640         return false;
 641     }
 642     this.items[uid].remove();
 643     delete this.items[uid];
 644     this.count--;
 645     this.fire('dock:itemremoved', uid);
 646     this.fire('dock:itemschanged', uid);
 647     return true;
 648 };
 649 /**
 650  * Ensures the the first item in the dock has the correct class
 651  */
 652 M.core_dock.resetFirstItem = function() {
 653     this.nodes.dock.all('.'+this.css.dockeditem+'.firstdockitem').removeClass('firstdockeditem');
 654     if (this.nodes.dock.one('.'+this.css.dockeditem)) {
 655         this.nodes.dock.one('.'+this.css.dockeditem).addClass('firstdockitem');
 656     }
 657 };
 658 /**
 659  * Removes all nodes and puts them back into conventional page sturcture
 660  * @function
 661  * @return {boolean}
 662  */
 663 M.core_dock.remove_all = function(e) {
 664     for (var i in this.items) {
 665         this.remove(i);
 666     }
 667     return true;
 668 };
 669 /**
 670  * Hides the active item
 671  */
 672 M.core_dock.hideActive = function() {
 673     var item = this.getActiveItem();
 674     if (item) {
 675         item.hide();
 676     }
 677 };
 678 /**
 679  * Checks wether the dock should be shown or hidden
 680  */
 681 M.core_dock.checkDockVisibility = function() {
 682     if (!this.count) {
 683         this.nodes.dock.addClass('nothingdocked');
 684         this.nodes.body.removeClass(this.css.body)
 685                        .removeClass(this.css.body+'_'+this.cfg.position+'_'+this.cfg.orientation);
 686         this.fire('dock:hidden');
 687     } else {
 688         this.fire('dock:beforeshow');
 689         this.nodes.dock.removeClass('nothingdocked');
 690         this.nodes.body.addClass(this.css.body)
 691                        .addClass(this.css.body+'_'+this.cfg.position+'_'+this.cfg.orientation);
 692         this.fire('dock:shown');
 693     }
 694 };
 695 /**
 696  * This smart little function allows developers to attach event listeners before
 697  * the dock has been augmented to allows event listeners.
 698  * Once the augmentation is complete this function will be replaced with the proper
 699  * on method for handling event listeners.
 700  * Finally applyBinds needs to be called in order to properly bind events.
 701  * @param {string} event
 702  * @param {function} callback
 703  */
 704 M.core_dock.on = function(event, callback) {
 705     this.earlybinds.push({event:event,callback:callback});
 706 };
 707 /**
 708  * This function takes all early binds and attaches them as listeners properly
 709  * This should only be called once augmentation is complete.
 710  */
 711 M.core_dock.applyBinds = function() {
 712     for (var i in this.earlybinds) {
 713         var bind = this.earlybinds[i];
 714         this.on(bind.event, bind.callback);
 715     }
 716     this.earlybinds = [];
 717 };
 718 /**
 719  * This function checks the size and position of the panel and moves/resizes if
 720  * required to keep it within the bounds of the window.
 721  */
 722 M.core_dock.resize = function() {
 723     this.fire('dock:panelresizestart');
 724     var panel = this.getPanel();
 725     var item = this.getActiveItem();
 726     if (!panel.visible || !item) {
 727         return;
 728     }
 729
 730     if (this.cfg.orientation=='vertical') {
 731         var buffer = this.cfg.buffer;
 732         var screenheight = parseInt(this.nodes.body.get('winHeight'))-(buffer*2);
 733         var docky = this.nodes.dock.getY();
 734         var titletop = item.nodes.docktitle.getY()-docky-buffer;
 735         var containery = this.nodes.container.getY();
 736         var containerheight = containery-docky+this.nodes.buttons.get('offsetHeight');
 737         var scrolltop = panel.contentBody.get('scrollTop');
 738         panel.contentBody.setStyle('height', 'auto');
 739         panel.removeClass('oversized_content');
 740         var panelheight = panel.get('offsetHeight');
 741
 742         if (this.Y.UA.ie > 0 && this.Y.UA.ie < 7) {
 743             panel.setTop(item.nodes.docktitle.getY());
 744         } else if (panelheight > screenheight) {
 745             panel.setTop(buffer-containerheight);
 746             panel.contentBody.setStyle('height', (screenheight-panel.contentHeader.get('offsetHeight'))+'px');
 747             panel.addClass('oversized_content');
 748         } else if (panelheight > (screenheight-(titletop-buffer))) {
 749             var difference = panelheight - (screenheight-titletop);
 750             panel.setTop(titletop-containerheight-difference+buffer);
 751         } else {
 752             panel.setTop(titletop-containerheight+buffer);
 753         }
 754
 755         if (scrolltop) {
 756             panel.contentBody.set('scrollTop', scrolltop);
 757         }
 758     }
 759
 760     if (this.cfg.position=='right') {
 761         panel.setStyle('left', -panel.get('offsetWidth')+'px');
 762
 763     } else if (this.cfg.position=='top') {
 764         var dockx = this.nodes.dock.getX();
 765         var titleleft = item.nodes.docktitle.getX()-dockx;
 766         panel.setStyle('left', titleleft+'px');
 767     }
 768
 769     this.fire('dock:resizepanelcomplete');
 770     return;
 771 };
 772 /**
 773  * Returns the currently active dock item or false
 774  */
 775 M.core_dock.getActiveItem = function() {
 776     for (var i in this.items) {
 777         if (this.items[i].active) {
 778             return this.items[i];
 779         }
 780     }
 781     return false;
 782 };
 783 /**
 784  * This class represents a generic block
 785  * @class M.core_dock.genericblock
 786  * @constructor
 787  */
 788 M.core_dock.genericblock = function(id) {
 789     // Nothing to actually do here but it needs a constructor!
 790     if (id) {
 791         this.id = id;
 792     }
 793 };
 794 M.core_dock.genericblock.prototype = {
 795     Y : null,                   // A YUI instance to use with the block
 796     id : null,                  // The block instance id
 797     cachedcontentnode : null,   // The cached content node for the actual block
 798     blockspacewidth : null,     // The width of the block's original container
 799     skipsetposition : false,    // If true the user preference isn't updated
 800     isdocked : false,           // True if it is docked
 801     /**
 802      * This function should be called within the block's constructor and is used to
 803      * set up the initial controls for swtiching block position as well as an initial
 804      * moves that may be required.
 805      *
 806      * @param {YUI} Y
 807      * @param {YUI.Node} node The node that contains all of the block's content
 808      * @return {M.core_dock.genericblock}
 809      */
 810     initialise_block : function(Y, node) {
 811         M.core_dock.init(Y);
 812
 813         this.Y = Y;
 814         if (!node) {
 815             return false;
 816         }
 817
 818         var commands = node.one('.header .title .commands');
 819         if (!commands) {
 820             commands = this.Y.Node.create('<div class="commands"></div>');
 821             if (node.one('.header .title')) {
 822                 node.one('.header .title').append(commands);
 823             }
 824         }
 825
 826         // Must set the image src seperatly of we get an error with XML strict headers
 827         var moveto = Y.Node.create('<input type="image" class="moveto customcommand requiresjs" alt="'+M.str.block.addtodock+'" title="'+M.str.block.addtodock+'" />');
 828         moveto.setAttribute('src', M.util.image_url('t/block_to_dock', 'moodle'));
 829         moveto.on('movetodock|click', this.move_to_dock, this, commands);
 830
 831         var blockaction = node.one('.block_action');
 832         if (blockaction) {
 833             blockaction.prepend(moveto);
 834         } else {
 835             commands.append(moveto);
 836         }
 837
 838         // Move the block straight to the dock if required
 839         if (node.hasClass('dock_on_load')) {
 840             node.removeClass('dock_on_load');
 841             this.skipsetposition = true;
 842             this.move_to_dock(null, commands);
 843         }
 844         return this;
 845     },
 846
 847     /**
 848      * This function is reponsible for moving a block from the page structure onto the
 849      * dock
 850      * @param {event}
 851      */
 852     move_to_dock : function(e, commands) {
 853         if (e) {
 854             e.halt(true);
 855         }
 856
 857         var Y = this.Y;
 858         var dock = M.core_dock;
 859
 860         var node = Y.one('#inst'+this.id);
 861         var blockcontent = node.one('.content');
 862         if (!blockcontent) {
 863             return;
 864         }
 865
 866         var blockclass = (function(classes){
 867             var r = /(^|\s)(block_[a-zA-Z0-9_]+)(\s|$)/;
 868             var m = r.exec(classes);
 869             return (m)?m[2]:m;
 870         })(node.getAttribute('className').toString());
 871
 872         this.cachedcontentnode = node;
 873
 874         node.replace(Y.Node.getDOMNode(Y.Node.create('<div id="content_placeholder_'+this.id+'" class="block_dock_placeholder"></div>')));
 875         M.core_dock.holdingarea.append(node);
 876         node = null;
 877
 878         var blocktitle = Y.Node.getDOMNode(this.cachedcontentnode.one('.title h2')).cloneNode(true);
 879
 880         var blockcommands = this.cachedcontentnode.one('.title .commands');
 881         if (!blockcommands) {
 882             blockcommands = Y.Node.create('<div class="commands"></div>');
 883             this.cachedcontentnode.one('.title').append(blockcommands);
 884         }
 885
 886         // Must set the image src seperatly of we get an error with XML strict headers
 887         var movetoimg = Y.Node.create('<img alt="'+M.str.block.undockitem+'" title="'+M.str.block.undockitem+'" />');
 888         movetoimg.setAttribute('src', M.util.image_url('t/dock_to_block', 'moodle'));
 889         var moveto = Y.Node.create('<a class="moveto customcommand requiresjs"></a>').append(movetoimg);
 890         if (location.href.match(/\?/)) {
 891             moveto.set('href', location.href+'&dock='+this.id);
 892         } else {
 893             moveto.set('href', location.href+'?dock='+this.id);
 894         }
 895         blockcommands.append(moveto);
 896
 897         // Create a new dock item for the block
 898         var dockitem = new dock.item(Y, this.id, blocktitle, blockcontent, blockcommands, blockclass);
 899         // Wire the draw events to register remove events
 900         dockitem.on('dockeditem:drawcomplete', function(e){
 901             // check the contents block [editing=off]
 902             this.contents.all('.moveto').on('returntoblock|click', function(e){
 903                 e.halt();
 904                 dock.remove(this.id);
 905             }, this);
 906             // check the commands block [editing=on]
 907             this.commands.all('.moveto').on('returntoblock|click', function(e){
 908                 e.halt();
 909                 dock.remove(this.id);
 910             }, this);
 911             // Add a close icon
 912             // Must set the image src seperatly of we get an error with XML strict headers
 913             var closeicon = Y.Node.create('<span class="hidepanelicon" tabindex="0"><img alt="" style="width:11px;height:11px;cursor:pointer;" /></span>');
 914             closeicon.one('img').setAttribute('src', M.util.image_url('t/dockclose', 'moodle'));
 915             closeicon.on('forceclose|click', this.hide, this);
 916             closeicon.on('dock:actionkey',this.hide, this, {actions:{enter:true,toggle:true}});
 917             this.commands.append(closeicon);
 918         }, dockitem);
 919         // Register an event so that when it is removed we can put it back as a block
 920         dockitem.on('dockeditem:itemremoved', this.return_to_block, this, dockitem);
 921         dock.add(dockitem);
 922
 923         if (!this.skipsetposition) {
 924             // save the users preference
 925             M.util.set_user_preference('docked_block_instance_'+this.id, 1);
 926         } else {
 927             this.skipsetposition = false;
 928         }
 929
 930         this.isdocked = true;
 931     },
 932     /**
 933      * This function removes a block from the dock and puts it back into the page
 934      * structure.
 935      * @param {M.core_dock.class.item}
 936      */
 937     return_to_block : function(dockitem) {
 938         var placeholder = this.Y.one('#content_placeholder_'+this.id);
 939
 940         if (this.cachedcontentnode.one('.header')) {
 941             this.cachedcontentnode.one('.header').insert(dockitem.contents, 'after');
 942         } else {
 943             this.cachedcontentnode.insert(dockitem.contents);
 944         }
 945
 946         placeholder.replace(this.Y.Node.getDOMNode(this.cachedcontentnode));
 947         this.cachedcontentnode = this.Y.one('#'+this.cachedcontentnode.get('id'));
 948
 949         var commands = this.cachedcontentnode.one('.title .commands');
 950         if (commands) {
 951             commands.all('.hidepanelicon').remove();
 952             commands.all('.moveto').remove();
 953             commands.remove();
 954         }
 955         this.cachedcontentnode.one('.title').append(commands);
 956         this.cachedcontentnode = null;
 957         M.util.set_user_preference('docked_block_instance_'+this.id, 0);
 958         this.isdocked = false;
 959         return true;
 960     }
 961 };
 962
 963 /**
 964  * This class represents an item in the dock
 965  * @class M.core_dock.item
 966  * @constructor
 967  * @param {YUI} Y The YUI instance to use for this item
 968  * @param {int} uid The unique ID for the item
 969  * @param {this.Y.Node} title
 970  * @param {this.Y.Node} contents
 971  * @param {this.Y.Node} commands
 972  * @param {string} blockclass
 973  */
 974 M.core_dock.item = function(Y, uid, title, contents, commands, blockclass){
 975     this.Y = Y;
 976     this.publish('dockeditem:drawstart', {prefix:'dockeditem'});
 977     this.publish('dockeditem:drawcomplete', {prefix:'dockeditem'});
 978     this.publish('dockeditem:showstart', {prefix:'dockeditem'});
 979     this.publish('dockeditem:showcomplete', {prefix:'dockeditem'});
 980     this.publish('dockeditem:hidestart', {prefix:'dockeditem'});
 981     this.publish('dockeditem:hidecomplete', {prefix:'dockeditem'});
 982     this.publish('dockeditem:itemremoved', {prefix:'dockeditem'});
 983     if (uid && this.id==null) {
 984         this.id = uid;
 985     }
 986     if (title && this.title==null) {
 987         this.titlestring = title.cloneNode(true);
 988         this.title = document.createElement(title.nodeName);
 989         M.core_dock.fixTitleOrientation(this, this.title, this.titlestring.firstChild.nodeValue);
 990     }
 991     if (contents && this.contents==null) {
 992         this.contents = contents;
 993     }
 994     if (commands && this.commands==null) {
 995         this.commands = commands;
 996     }
 997     if (blockclass && this.blockclass==null) {
 998         this.blockclass = blockclass;
 999     }
1000     this.nodes = (function(){
1001         return {docktitle : null, dockitem : null, container: null};
1002     })();
1003 };
1004 /**
1005  *
1006  */
1007 M.core_dock.item.prototype = {
1008     Y : null,               // The YUI instance to use with this dock item
1009     id : null,              // The unique id for the item
1010     name : null,            // The name of the item
1011     title : null,           // The title of the item
1012     titlestring : null,     // The title as a plain string
1013     contents : null,        // The content of the item
1014     commands : null,        // The commands for the item
1015     active : false,         // True if the item is being shown
1016     blockclass : null,      // The class of the block this item relates to
1017     nodes : null,
1018     /**
1019      * This function draws the item on the dock
1020      */
1021     draw : function() {
1022         this.fire('dockeditem:drawstart');
1023
1024         var Y = this.Y;
1025         var css = M.core_dock.css;
1026
1027         this.nodes.docktitle = Y.Node.create('<div id="dock_item_'+this.id+'_title" class="'+css.dockedtitle+'"></div>');
1028         this.nodes.docktitle.append(this.title);
1029         this.nodes.dockitem = Y.Node.create('<div id="dock_item_'+this.id+'" class="'+css.dockeditem+'" tabindex="0"></div>');
1030         this.nodes.dockitem.on('dock:actionkey', this.toggle, this);
1031         if (M.core_dock.count === 1) {
1032             this.nodes.dockitem.addClass('firstdockitem');
1033         }
1034         this.nodes.dockitem.append(this.nodes.docktitle);
1035         M.core_dock.append(this.nodes.dockitem);
1036         this.fire('dockeditem:drawcomplete');
1037         return true;
1038     },
1039     /**
1040      * This function toggles makes the item active and shows it
1041      */
1042     show : function() {
1043         M.core_dock.hideActive();
1044         var Y = this.Y;
1045         var css = M.core_dock.css;
1046         var panel = M.core_dock.getPanel();
1047         this.fire('dockeditem:showstart');
1048         panel.setHeader(this.titlestring, this.commands);
1049         panel.setBody(Y.Node.create('<div class="'+this.blockclass+' block_docked"></div>').append(this.contents));
1050         panel.show();
1051         panel.correctWidth();
1052
1053         this.active = true;
1054         // Add active item class first up
1055         this.nodes.docktitle.addClass(css.activeitem);
1056         this.fire('dockeditem:showcomplete');
1057         M.core_dock.resize();
1058         return true;
1059     },
1060     /**
1061      * This function hides the item and makes it inactive
1062      */
1063     hide : function() {
1064         var css = M.core_dock.css;
1065         this.fire('dockeditem:hidestart');
1066         // No longer active
1067         this.active = false;
1068         // Remove the active class
1069         this.nodes.docktitle.removeClass(css.activeitem);
1070         // Hide the panel
1071         M.core_dock.getPanel().hide();
1072         this.fire('dockeditem:hidecomplete');
1073     },
1074     /**
1075      * A toggle between calling show and hide functions based on css.activeitem
1076      * Applies rules to key press events (dock:actionkey)
1077      * @param {Event} e
1078      */
1079     toggle : function(e) {
1080         var css = M.core_dock.css;
1081         if (this.nodes.docktitle.hasClass(css.activeitem) && !(e.type == 'dock:actionkey' && e.action=='expand')) {
1082             this.hide();
1083         } else if (!this.nodes.docktitle.hasClass(css.activeitem) && !(e.type == 'dock:actionkey' && e.action=='collapse'))  {
1084             this.show();
1085         }
1086     },
1087     /**
1088      * This function removes the node and destroys it's bits
1089      * @param {Event} e
1090      */
1091     remove : function () {
1092         this.hide();
1093         this.nodes.dockitem.remove();
1094         this.fire('dockeditem:itemremoved');
1095     }
1096 };