MDL-22449 bumping major version to lang invalidate caches and fix phpdocs
[moodle.git] / 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);
66     // Give the dock item class the event properties/methods
67     Y.augment(this.item, Y.EventTarget);
68     Y.augment(this, Y.EventTarget, true);
70     // Publish the events the dock has
71     this.publish('dock:beforedraw', {prefix:'dock'});
72     this.publish('dock:beforeshow', {prefix:'dock'});
73     this.publish('dock:shown', {prefix:'dock'});
74     this.publish('dock:hidden', {prefix:'dock'});
75     this.publish('dock:initialised', {prefix:'dock'});
76     this.publish('dock:itemadded', {prefix:'dock'});
77     this.publish('dock:itemremoved', {prefix:'dock'});
78     this.publish('dock:itemschanged', {prefix:'dock'});
79     this.publish('dock:panelgenerated', {prefix:'dock'});
80     this.publish('dock:panelresizestart', {prefix:'dock'});
81     this.publish('dock:resizepanelcomplete', {prefix:'dock'});
82     this.publish('dock:starting', {prefix: 'dock',broadcast:  2,emitFacade: true});
83     this.fire('dock:starting');
84     // Re-apply early bindings properly now that we can
85     this.applyBinds();
86     // Check if there is a customisation function
87     if (typeof(customise_dock_for_theme) === 'function') {
88         try {
89             // Run the customisation function
90             customise_dock_for_theme();
91         } catch (exception) {
92             // Do nothing at the moment
93         }
94     }
96     var dock = Y.one('#dock');
97     if (!dock) {
98         // Start the construction of the dock
99         dock = Y.Node.create('<div id="dock" class="'+css.dock+' '+css.dock+'_'+this.cfg.position+'_'+this.cfg.orientation+'"></div>')
100                     .append(Y.Node.create('<div class="'+css.buttonscontainer+'"></div>')
101                         .append(Y.Node.create('<div class="'+css.dockeditemcontainer+'"></div>')));
102         this.nodes.body.append(dock);
103     } else {
104         dock.addClass(css.dock+'_'+this.cfg.position+'_'+this.cfg.orientation);
105     }
106     this.holdingarea = Y.Node.create('<div></div>').setStyles({display:'none'});
107     this.nodes.body.append(this.holdingarea);
108     if (Y.UA.ie > 0 && Y.UA.ie < 7) {
109         // Adjust for IE 6 (can't handle fixed pos)
110         dock.setStyle('height', dock.get('winHeight')+'px');
111     }
112     // Store the dock
113     this.nodes.dock = dock;
114     this.nodes.buttons = dock.one('.'+css.buttonscontainer);
115     this.nodes.container = this.nodes.buttons.one('.'+css.dockeditemcontainer);
117     if (Y.all('.block.dock_on_load').size() == 0) {
118         // Nothing on the dock... hide it using CSS
119         dock.addClass('nothingdocked');
120     } else {
121         this.nodes.body.addClass(this.css.body).addClass(this.css.body+'_'+this.cfg.position+'_'+this.cfg.orientation);
122     }
124     this.fire('dock:beforedraw');
126     // Add a removeall button
127     // Must set the image src seperatly of we get an error with XML strict headers
128     var removeall = Y.Node.create('<img alt="'+M.str.block.undockall+'" title="'+M.str.block.undockall+'" />');
129     removeall.setAttribute('src',this.cfg.removeallicon);
130     removeall.on('removeall|click', this.remove_all, this);
131     this.nodes.buttons.appendChild(Y.Node.create('<div class="'+css.controls+'"></div>').append(removeall));
133     // Create a manager for the height of the tabs. Once set this can be forgotten about
134     new (function(Y){
135         return {
136             enabled : false,        // True if the item_sizer is being used, false otherwise
137             /**
138              * Initialises the dock sizer which then attaches itself to the required
139              * events in order to monitor the dock
140              * @param {YUI} Y
141              */
142             init : function() {
143                 M.core_dock.on('dock:itemschanged', this.checkSizing, this);
144                 Y.on('windowresize', this.checkSizing, this);
145             },
146             /**
147              * Check if the size dock items needs to be adjusted
148              */
149             checkSizing : function() {
150                 var dock = M.core_dock;
151                 var possibleheight = dock.nodes.dock.get('offsetHeight') - dock.nodes.dock.one('.controls').get('offsetHeight') - (dock.cfg.buffer*3) - (dock.items.length*2);
152                 var totalheight = 0;
153                 for (var id in dock.items) {
154                     var dockedtitle = Y.one(dock.items[id].title).ancestor('.'+dock.css.dockedtitle);
155                     if (dockedtitle) {
156                         if (this.enabled) {
157                             dockedtitle.setStyle('height', 'auto');
158                         }
159                         totalheight += dockedtitle.get('offsetHeight') || 0;
160                     }
161                 }
162                 if (totalheight > possibleheight) {
163                     this.enable(possibleheight);
164                 }
165             },
166             /**
167              * Enables the dock sizer and resizes where required.
168              */
169             enable : function(possibleheight) {
170                 var dock = M.core_dock;
171                 var runningcount = 0;
172                 var usedheight = 0;
173                 this.enabled = true;
174                 for (var id in dock.items) {
175                     var itemtitle = Y.one(dock.items[id].title).ancestor('.'+dock.css.dockedtitle);
176                     if (!itemtitle) {
177                         continue;
178                     }
179                     var itemheight = Math.floor((possibleheight-usedheight) / (dock.count - runningcount));
180                     var offsetheight = itemtitle.get('offsetHeight');
181                     itemtitle.setStyle('overflow', 'hidden');
182                     if (offsetheight > itemheight) {
183                         itemtitle.setStyle('height', itemheight+'px');
184                         usedheight += itemheight;
185                     } else {
186                         usedheight += offsetheight;
187                     }
188                     runningcount++;
189                 }
190             }
191         };
192     })(Y).init();
194     // Attach the required event listeners
195     // We use delegate here as that way a handful of events are created for the dock
196     // and all items rather than the same number for the dock AND every item individually
197     Y.delegate('click', this.handleEvent, this.nodes.dock, '.'+this.css.dockedtitle, this, {cssselector:'.'+this.css.dockedtitle, delay:0});
198     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});
199     //Y.delegate('mouseleave', this.handleEvent, this.nodes.body, '#dock', this,  {cssselector:'#dock', delay:0.5, iscontained:false});
200     this.nodes.dock.on('mouseleave', this.handleEvent, this, {cssselector:'#dock', delay:0.5, iscontained:false});
202     this.nodes.body.on('click', this.handleEvent, this,  {cssselector:'body', delay:0});
203     this.on('dock:itemschanged', this.resizeBlockSpace, this);
204     this.on('dock:itemschanged', this.checkDockVisibility, this);
205     this.on('dock:itemschanged', this.resetFirstItem, this);
206     // Inform everyone the dock has been initialised
207     this.fire('dock:initialised');
208     return true;
209 };
210 /**
211  * Get the panel docked blocks will be shown in and initialise it if we havn't already.
212  */
213 M.core_dock.getPanel = function() {
214     if (this.nodes.panel === null) {
215         // Initialise the dockpanel .. should only happen once
216         this.nodes.panel = (function(Y, parent){
217             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>');
218             // Give the dockpanel event target properties and methods
219             Y.augment(dockpanel, Y.EventTarget);
220             // Publish events for the dock panel
221             dockpanel.publish('dockpanel:beforeshow', {prefix:'dockpanel'});
222             dockpanel.publish('dockpanel:shown', {prefix:'dockpanel'});
223             dockpanel.publish('dockpanel:beforehide', {prefix:'dockpanel'});
224             dockpanel.publish('dockpanel:hidden', {prefix:'dockpanel'});
225             dockpanel.publish('dockpanel:visiblechange', {prefix:'dockpanel'});
226             // Cache the content nodes
227             dockpanel.contentNode = dockpanel.one('.dockeditempanel_content');
228             dockpanel.contentHeader = dockpanel.contentNode.one('.dockeditempanel_hd');
229             dockpanel.contentBody = dockpanel.contentNode.one('.dockeditempanel_bd');
230             // Set the x position of the panel
231             //dockpanel.setX(parent.get('offsetWidth'));
232             dockpanel.visible = false;
233             // Add a show event
234             dockpanel.show = function() {
235                 this.fire('dockpanel:beforeshow');
236                 this.visible = true;
237                 this.removeClass('dockitempanel_hidden');
238                 this.fire('dockpanel:shown');
239                 this.fire('dockpanel:visiblechange');
240             };
241             // Add a hide event
242             dockpanel.hide = function() {
243                 this.fire('dockpanel:beforehide');
244                 this.visible = false;
245                 this.addClass('dockitempanel_hidden');
246                 this.fire('dockpanel:hidden');
247                 this.fire('dockpanel:visiblechange');
248             };
249             // Add a method to set the header content
250             dockpanel.setHeader = function(content) {
251                 this.contentHeader.setContent(content);
252                 if (arguments.length > 1) {
253                     for (var i=1;i < arguments.length;i++) {
254                         this.contentHeader.append(arguments[i]);
255                     }
256                 }
257             };
258             // Add a method to set the body content
259             dockpanel.setBody = function(content) {
260                 this.contentBody.setContent(content);
261             };
262             // Add a method to set the top of the panel position
263             dockpanel.setTop = function(newtop) {
264                 if (Y.UA.ie > 0 && Y.UA.ie < 7) {
265                     this.setY(newtop);
266                 } else {
267                     this.setStyle('top', newtop.toString()+'px');
268                 }
269                 return;
270             };
271             // Put the dockpanel in the body
272             parent.append(dockpanel);
273             // Return it
274             return dockpanel;
275         })(this.Y, this.nodes.dock);
276         this.nodes.panel.on('panel:visiblechange', this.resize, this);
277         this.Y.on('windowresize', this.resize, this);
278         this.fire('dock:panelgenerated');
279     }
280     return this.nodes.panel;
281 };
282 /**
283  * Handles a generic event within the dock
284  * @param {Y.Event} e
285  * @param {object} options Event configuration object
286  */
287 M.core_dock.handleEvent = function(e, options) {
288     var item = this.getActiveItem();
289     if (options.cssselector == 'body') {
290         if (!this.nodes.dock.contains(e.target)) {
291             if (item) {
292                 item.hide();
293             }
294         }
295     } else {
296         var target;
297         if (e.target.test(options.cssselector)) {
298             target = e.target;
299         } else {
300             target = e.target.ancestor(options.cssselector);
301         }
302         if (!target) {
303             return true;
304         }
305         if (this.preventevent !== null && e.type === this.preventevent) {
306             return true;
307         }
308         if (options.preventevent) {
309             this.preventevent = options.preventevent;
310             if (options.preventdelay) {
311                 setTimeout(function(){M.core_dock.preventevent = null;}, options.preventdelay*1000);
312             }
313         }
314         if (this.delayedevent && this.delayedevent.timeout) {
315             clearTimeout(this.delayedevent.timeout);
316             this.delayedevent.event.detach();
317             this.delayedevent = null;
318         }
319         if (options.delay > 0) {
320             return this.delayEvent(e, options, target);
321         }
322         var targetid = target.get('id');
323         if (targetid.match(/^dock_item_(\d+)_title$/)) {
324             item = this.items[targetid.replace(/^dock_item_(\d+)_title$/, '$1')];
325             if (item.active) {
326                 item.hide();
327             } else {
328                 item.show();
329             }
330         } else if (item) {
331             item.hide();
332         }
333     }
334     return true;
335 };
336 /**
337  * This function delays an event and then fires it providing the cursor if either
338  * within or outside of the original target (options.iscontained=true|false)
339  * @param {Y.Event} event
340  * @param {object} options
341  * @param {Y.Node} target
342  * @return bool
343  */
344 M.core_dock.delayEvent = function(event, options, target) {
345     var self = this;
346     self.delayedevent = (function(){
347         return {
348             target : target,
349             event : self.nodes.body.on('mousemove', function(e){
350                 self.delayedevent.target = e.target;
351             }),
352             timeout : null
353         };
354     })(self);
355     self.delayedevent.timeout = setTimeout(function(){
356         self.delayedevent.timeout = null;
357         self.delayedevent.event.detach();
358         if (options.iscontained == self.nodes.dock.contains(self.delayedevent.target)) {
359             self.handleEvent(event, {cssselector:options.cssselector, delay:0, iscontained:options.iscontained});
360         }
361     }, options.delay*1000);
362     return true;
363 };
364 /**
365  * Corrects the orientation of the title, which for the default
366  * dock just means making it vertical
367  * The orientation is determined by M.str.langconfig.thisdirectionvertical:
368  *    ver : Letters are stacked rather than rotated
369  *    ttb : Title is rotated clockwise so the first letter is at the top
370  *    btt : Title is rotated counterclockwise so the first letter is at the bottom.
371  * @param {string} title
372  */
373 M.core_dock.fixTitleOrientation = function(item, title, text) {
374     var Y = this.Y;
375     
376     var title = Y.one(title);
378     if(M.core_dock.cfg.orientation != 'vertical') {
379         // If the dock isn't vertical don't adjust it!
380         title.setContent(text);
381         return title
382     }
384     if (Y.UA.ie > 0 && Y.UA.ie < 8) {
385         // IE 6/7 can't rotate text so force ver
386         M.str.langconfig.thisdirectionvertical = 'ver';
387     }
389     var clockwise = false;
390     switch (M.str.langconfig.thisdirectionvertical) {
391         case 'ver':
392             // Stacked is easy
393             return title.setContent(text.split('').join('<br />'));
394         case 'ttb':
395             clockwise = true;
396             break;
397         case 'btt':
398             clockwise = false;
399             break;
400     }
402     if (Y.UA.ie > 7) {
403         // IE8 can flip the text via CSS but not handle SVG
404         title.setContent(text);
405         title.setAttribute('style', 'writing-mode: tb-rl; filter: flipV flipH;display:inline;');
406         title.addClass('filterrotate');
407         return title;
408     }
410     // Cool, we can use SVG!
411     var test = Y.Node.create('<h2><span style="font-size:10px;">'+text+'</span></h2>');
412     this.nodes.body.append(test);
413     var height = test.one('span').get('offsetWidth')+4;
414     var width = test.one('span').get('offsetHeight')*2;
415     var qwidth = width/4;
416     test.remove();
418     // Create the text for the SVG
419     var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
420     txt.setAttribute('font-size','10px');
421     if (clockwise) {
422         txt.setAttribute('transform','rotate(90 '+(qwidth/2)+' '+qwidth+')');
423     } else {
424         txt.setAttribute('y', height);
425         txt.setAttribute('transform','rotate(270 '+qwidth+' '+(height-qwidth)+')');
426     }
427     txt.appendChild(document.createTextNode(text));
429     var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
430     svg.setAttribute('version', '1.1');
431     svg.setAttribute('height', height);
432     svg.setAttribute('width', width);
433     svg.appendChild(txt);
435     title.append(svg);
437     item.on('dockeditem:drawcomplete', function(txt, title){
438         txt.setAttribute('fill', Y.one(title).getStyle('color'));
439     }, item, txt, title);
441     return title;
442 };
443 /**
444  * Resizes the space that contained blocks if there were no blocks left in
445  * it. e.g. if all blocks have been moved to the dock
446  * @param {Y.Node} node
447  */
448 M.core_dock.resizeBlockSpace = function(node) {
450     if (this.Y.all('.block.dock_on_load').size()>0) {
451         // Do not resize during initial load
452         return;
453     }
454     var blockregions = [];
455     var populatedblockregions = 0;
456     this.Y.all('.block-region').each(function(region){
457         var hasblocks = (region.all('.block').size() > 0);
458         if (hasblocks) {
459             populatedblockregions++;
460         }
461         blockregions[region.get('id')] = {hasblocks: hasblocks, bodyclass: region.get('id').replace(/^region\-/, 'side-')+'-only'};
462     });
463     var bodynode = M.core_dock.nodes.body;
464     var showregions = false;
465     if (bodynode.hasClass('blocks-moving')) {
466         // open up blocks during blocks positioning
467         showregions = true;
468     }
470     var noblocksbodyclass = 'content-only';
471     var i = null;
472     if (populatedblockregions==0 && showregions==false) {
473         bodynode.addClass(noblocksbodyclass);
474         for (i in blockregions) {
475             bodynode.removeClass(blockregions[i].bodyclass);
476         }
477     } else if (populatedblockregions==1 && showregions==false) {
478         bodynode.removeClass(noblocksbodyclass);
479         for (i in blockregions) {
480             if (!blockregions[i].hasblocks) {
481                 bodynode.removeClass(blockregions[i].bodyclass);
482             } else {
483                 bodynode.addClass(blockregions[i].bodyclass);
484             }
485         }
486     } else {
487         bodynode.removeClass(noblocksbodyclass);
488         for (i in blockregions) {
489             bodynode.removeClass(blockregions[i].bodyclass);
490         }
491     }
492 };
493 /**
494  * Adds a dock item into the dock
495  * @function
496  * @param {M.core_dock.item} item
497  */
498 M.core_dock.add = function(item) {
499     item.id = this.totalcount;
500     this.count++;
501     this.totalcount++;
502     this.items[item.id] = item;
503     this.items[item.id].draw();
504     this.fire('dock:itemadded', item);
505     this.fire('dock:itemschanged', item);
506 };
507 /**
508  * Appends a dock item to the dock
509  * @param {YUI.Node} docknode
510  */
511 M.core_dock.append = function(docknode) {
512     this.nodes.container.append(docknode);
513 };
514 /**
515  * Initialises a generic block object
516  * @param {YUI} Y
517  * @param {int} id
518  */
519 M.core_dock.init_genericblock = function(Y, id) {
520     if (!this.initialised) {
521         this.init(Y);
522     }
523     new this.genericblock(id).init(Y, Y.one('#inst'+id));
524 };
525 /**
526  * Removes the node at the given index and puts it back into conventional page sturcture
527  * @function
528  * @param {int} uid Unique identifier for the block
529  * @return {boolean}
530  */
531 M.core_dock.remove = function(uid) {
532     if (!this.items[uid]) {
533         return false;
534     }
535     this.items[uid].remove();
536     delete this.items[uid];
537     this.count--;
538     this.fire('dock:itemremoved', uid);
539     this.fire('dock:itemschanged', uid);
540     return true;
541 };
542 /**
543  * Ensures the the first item in the dock has the correct class
544  */
545 M.core_dock.resetFirstItem = function() {
546     this.nodes.dock.all('.'+this.css.dockeditem+'.firstdockitem').removeClass('firstdockeditem');
547     if (this.nodes.dock.one('.'+this.css.dockeditem)) {
548         this.nodes.dock.one('.'+this.css.dockeditem).addClass('firstdockitem');
549     }
550 };
551 /**
552  * Removes all nodes and puts them back into conventional page sturcture
553  * @function
554  * @return {boolean}
555  */
556 M.core_dock.remove_all = function() {
557     for (var i in this.items) {
558         this.remove(i);
559     }
560     return true;
561 };
562 /**
563  * Hides the active item
564  */
565 M.core_dock.hideActive = function() {
566     var item = this.getActiveItem();
567     if (item) {
568         item.hide();
569     }
570 };
571 /**
572  * Checks wether the dock should be shown or hidden
573  */
574 M.core_dock.checkDockVisibility = function() {
575     if (!this.count) {
576         this.nodes.dock.addClass('nothingdocked');
577         this.nodes.body.removeClass(this.css.body)
578                        .removeClass(this.css.body+'_'+this.cfg.position+'_'+this.cfg.orientation);
579         this.fire('dock:hidden');
580     } else {
581         this.fire('dock:beforeshow');
582         this.nodes.dock.removeClass('nothingdocked');
583         this.nodes.body.addClass(this.css.body)
584                        .addClass(this.css.body+'_'+this.cfg.position+'_'+this.cfg.orientation);
585         this.fire('dock:shown');
586     }
587 };
588 /**
589  * This smart little function allows developers to attach event listeners before
590  * the dock has been augmented to allows event listeners.
591  * Once the augmentation is complete this function will be replaced with the proper
592  * on method for handling event listeners.
593  * Finally applyBinds needs to be called in order to properly bind events.
594  * @param {string} event
595  * @param {function} callback
596  */
597 M.core_dock.on = function(event, callback) {
598     this.earlybinds.push({event:event,callback:callback});
599 };
600 /**
601  * This function takes all early binds and attaches them as listeners properly
602  * This should only be called once augmentation is complete.
603  */
604 M.core_dock.applyBinds = function() {
605     for (var i in this.earlybinds) {
606         var bind = this.earlybinds[i];
607         this.on(bind.event, bind.callback);
608     }
609     this.earlybinds = [];
610 };
611 /**
612  * This function checks the size and position of the panel and moves/resizes if
613  * required to keep it within the bounds of the window.
614  */
615 M.core_dock.resize = function() {
616     this.fire('dock:panelresizestart');
617     var panel = this.getPanel();
618     var item = this.getActiveItem();
619     if (!panel.visible || !item) {
620         return;
621     }
623     if (this.cfg.orientation=='vertical') {
624         var buffer = this.cfg.buffer;
625         var screenheight = parseInt(this.nodes.body.get('winHeight'))-(buffer*2);
626         var docky = this.nodes.dock.getY();
627         var titletop = item.nodes.docktitle.getY()-docky-buffer;
628         var containery = this.nodes.container.getY();
629         var containerheight = containery-docky+this.nodes.buttons.get('offsetHeight');
630         var scrolltop = panel.contentBody.get('scrollTop');
631         panel.contentBody.setStyle('height', 'auto');
632         panel.removeClass('oversized_content');
633         var panelheight = panel.get('offsetHeight');
635         if (this.Y.UA.ie > 0 && this.Y.UA.ie < 7) {
636             panel.setTop(item.nodes.docktitle.getY());
637         } else if (panelheight > screenheight) {
638             panel.setTop(buffer-containerheight);
639             panel.contentBody.setStyle('height', (screenheight-panel.contentHeader.get('offsetHeight'))+'px');
640             panel.addClass('oversized_content');
641         } else if (panelheight > (screenheight-(titletop-buffer))) {
642             var difference = panelheight - (screenheight-titletop);
643             panel.setTop(titletop-containerheight-difference+buffer);
644         } else {
645             panel.setTop(titletop-containerheight+buffer);
646         }
648         if (scrolltop) {
649             panel.contentBody.set('scrollTop', scrolltop);
650         }
651     }
653     if (this.cfg.position=='right') {
654         panel.setStyle('left', -panel.get('offsetWidth')+'px');
656     } else if (this.cfg.position=='top') {
657         var dockx = this.nodes.dock.getX();
658         var titleleft = item.nodes.docktitle.getX()-dockx;
659         panel.setStyle('left', titleleft+'px');
660     }
662     this.fire('dock:resizepanelcomplete');
663     return;
664 };
665 /**
666  * Returns the currently active dock item or false
667  */
668 M.core_dock.getActiveItem = function() {
669     for (var i in this.items) {
670         if (this.items[i].active) {
671             return this.items[i];
672         }
673     }
674     return false;
675 };
676 /**
677  * This class represents a generic block
678  * @class M.core_dock.genericblock
679  * @constructor
680  */
681 M.core_dock.genericblock = function(id) {
682     // Nothing to actually do here but it needs a constructor!
683     if (id) {
684         this.id = id;
685     }
686 };
687 M.core_dock.genericblock.prototype = {
688     Y : null,                   // A YUI instance to use with the block
689     id : null,                  // The block instance id
690     cachedcontentnode : null,   // The cached content node for the actual block
691     blockspacewidth : null,     // The width of the block's original container
692     skipsetposition : false,    // If true the user preference isn't updated
693     isdocked : false,           // True if it is docked
694     /**
695      * This function should be called within the block's constructor and is used to
696      * set up the initial controls for swtiching block position as well as an initial
697      * moves that may be required.
698      *
699      * @param {YUI} Y
700      * @param {YUI.Node} node The node that contains all of the block's content
701      * @return {M.core_dock.genericblock}
702      */
703     init : function(Y, node) {
704         M.core_dock.init(Y);
705         
706         this.Y = Y;
707         if (!node) {
708             return false;
709         }
711         var commands = node.one('.header .title .commands');
712         if (!commands) {
713             commands = this.Y.Node.create('<div class="commands"></div>');
714             if (node.one('.header .title')) {
715                 node.one('.header .title').append(commands);
716             }
717         }
719         // Must set the image src seperatly of we get an error with XML strict headers
720         var moveto = Y.Node.create('<input type="image" class="moveto customcommand requiresjs" alt="'+M.str.block.addtodock+'" title="'+M.str.block.addtodock+'" />');
721         moveto.setAttribute('src', M.util.image_url('t/block_to_dock', 'moodle'));
722         moveto.on('movetodock|click', this.move_to_dock, this, commands);
724         var blockaction = node.one('.block_action');
725         if (blockaction) {
726             blockaction.prepend(moveto);
727         } else {
728             commands.append(moveto);
729         }
731         // Move the block straight to the dock if required
732         if (node.hasClass('dock_on_load')) {
733             node.removeClass('dock_on_load');
734             this.skipsetposition = true;
735             this.move_to_dock(null, commands);
736         }
737         return this;
738     },
740     /**
741      * This function is reponsible for moving a block from the page structure onto the
742      * dock
743      * @param {event}
744      */
745     move_to_dock : function(e, commands) {
746         if (e) {
747             e.halt(true);
748         }
750         var Y = this.Y;
751         var dock = M.core_dock;
753         var node = Y.one('#inst'+this.id);
754         var blockcontent = node.one('.content');
755         if (!blockcontent) {
756             return;
757         }
759         var blockclass = (function(classes){
760             var r = /(^|\s)(block_[a-zA-Z0-9_]+)(\s|$)/;
761             var m = r.exec(classes);
762             return (m)?m[2]:m;
763         })(node.getAttribute('className').toString());
765         this.cachedcontentnode = node;
767         node.replace(Y.Node.getDOMNode(Y.Node.create('<div id="content_placeholder_'+this.id+'" class="block_dock_placeholder"></div>')));
768         M.core_dock.holdingarea.append(node);
769         node = null;
771         var blocktitle = Y.Node.getDOMNode(this.cachedcontentnode.one('.title h2')).cloneNode(true);
773         var blockcommands = this.cachedcontentnode.one('.title .commands');
774         if (!blockcommands) {
775             blockcommands = Y.Node.create('<div class="commands"></div>');
776             this.cachedcontentnode.one('.title').append(blockcommands);
777         }
779         // Must set the image src seperatly of we get an error with XML strict headers
780         var movetoimg = Y.Node.create('<img alt="'+M.str.block.undockitem+'" title="'+M.str.block.undockitem+'" />');
781         movetoimg.setAttribute('src', M.util.image_url('t/dock_to_block', 'moodle'));
782         var moveto = Y.Node.create('<a class="moveto customcommand requiresjs"></a>').append(movetoimg);
783         if (location.href.match(/\?/)) {
784             moveto.set('href', location.href+'&dock='+this.id);
785         } else {
786             moveto.set('href', location.href+'?dock='+this.id);
787         }
788         blockcommands.append(moveto);
790         // Create a new dock item for the block
791         var dockitem = new dock.item(Y, this.id, blocktitle, blockcontent, blockcommands, blockclass);
792         // Wire the draw events to register remove events
793         dockitem.on('dockeditem:drawcomplete', function(e){
794             // check the contents block [editing=off]
795             this.contents.all('.moveto').on('returntoblock|click', function(e){
796                 e.halt();
797                 dock.remove(this.id);
798             }, this);
799             // check the commands block [editing=on]
800             this.commands.all('.moveto').on('returntoblock|click', function(e){
801                 e.halt();
802                 dock.remove(this.id);
803             }, this);
804             // Add a close icon
805             // Must set the image src seperatly of we get an error with XML strict headers
806             var closeicon = Y.Node.create('<span class="hidepanelicon"><img alt="" style="width:11px;height:11px;cursor:pointer;" /></span>');
807             closeicon.one('img').setAttribute('src', M.util.image_url('t/dockclose', 'moodle'));
808             closeicon.on('forceclose|click', this.hide, this);
809             this.commands.append(closeicon);
810         }, dockitem);
811         // Register an event so that when it is removed we can put it back as a block
812         dockitem.on('dockeditem:itemremoved', this.return_to_block, this, dockitem);
813         dock.add(dockitem);
814         
815         if (!this.skipsetposition) {
816             // save the users preference
817             M.util.set_user_preference('docked_block_instance_'+this.id, 1);
818         } else {
819             this.skipsetposition = false;
820         }
822         this.isdocked = true;
823     },
824     /**
825      * This function removes a block from the dock and puts it back into the page
826      * structure.
827      * @param {M.core_dock.class.item}
828      */
829     return_to_block : function(dockitem) {
830         var placeholder = this.Y.one('#content_placeholder_'+this.id);
832         if (this.cachedcontentnode.one('.header')) {
833             this.cachedcontentnode.one('.header').insert(dockitem.contents, 'after');
834         } else {
835             this.cachedcontentnode.insert(dockitem.contents);
836         }
838         placeholder.replace(this.Y.Node.getDOMNode(this.cachedcontentnode));
839         this.cachedcontentnode = this.Y.one('#'+this.cachedcontentnode.get('id'));
841         var commands = this.cachedcontentnode.one('.title .commands');
842         if (commands) {
843             commands.all('.hidepanelicon').remove();
844             commands.all('.moveto').remove();
845             commands.remove();
846         }
847         this.cachedcontentnode.one('.title').append(commands);
848         this.cachedcontentnode = null;
849         M.util.set_user_preference('docked_block_instance_'+this.id, 0);
850         this.isdocked = false;
851         return true;
852     }
853 };
855 /**
856  * This class represents an item in the dock
857  * @class M.core_dock.item
858  * @constructor
859  * @param {YUI} Y The YUI instance to use for this item
860  * @param {int} uid The unique ID for the item
861  * @param {this.Y.Node} title
862  * @param {this.Y.Node} contents
863  * @param {this.Y.Node} commands
864  * @param {string} blockclass
865  */
866 M.core_dock.item = function(Y, uid, title, contents, commands, blockclass){
867     this.Y = Y;
868     this.publish('dockeditem:drawstart', {prefix:'dockeditem'});
869     this.publish('dockeditem:drawcomplete', {prefix:'dockeditem'});
870     this.publish('dockeditem:showstart', {prefix:'dockeditem'});
871     this.publish('dockeditem:showcomplete', {prefix:'dockeditem'});
872     this.publish('dockeditem:hidestart', {prefix:'dockeditem'});
873     this.publish('dockeditem:hidecomplete', {prefix:'dockeditem'});
874     this.publish('dockeditem:itemremoved', {prefix:'dockeditem'});
875     if (uid && this.id==null) {
876         this.id = uid;
877     }
878     if (title && this.title==null) {
879         this.titlestring = title.cloneNode(true);
880         this.title = document.createElement(title.nodeName);
881         M.core_dock.fixTitleOrientation(this, this.title, this.titlestring.firstChild.nodeValue);
882     }
883     if (contents && this.contents==null) {
884         this.contents = contents;
885     }
886     if (commands && this.commands==null) {
887         this.commands = commands;
888     }
889     if (blockclass && this.blockclass==null) {
890         this.blockclass = blockclass;
891     }
892     this.nodes = (function(){
893         return {docktitle : null, dockitem : null, container: null};
894     })();
895 };
896 /**
897  *
898  */
899 M.core_dock.item.prototype = {
900     Y : null,               // The YUI instance to use with this dock item
901     id : null,              // The unique id for the item
902     name : null,            // The name of the item
903     title : null,           // The title of the item
904     titlestring : null,     // The title as a plain string
905     contents : null,        // The content of the item
906     commands : null,        // The commands for the item
907     active : false,         // True if the item is being shown
908     blockclass : null,      // The class of the block this item relates to
909     nodes : null,
910     /**
911      * This function draws the item on the dock
912      */
913     draw : function() {
914         this.fire('dockeditem:drawstart');
916         var Y = this.Y;
917         var css = M.core_dock.css;
919         this.nodes.docktitle = Y.Node.create('<div id="dock_item_'+this.id+'_title" class="'+css.dockedtitle+'"></div>');
920         this.nodes.docktitle.append(this.title);
921         this.nodes.dockitem = Y.Node.create('<div id="dock_item_'+this.id+'" class="'+css.dockeditem+'"></div>');
922         if (M.core_dock.count === 1) {
923             this.nodes.dockitem.addClass('firstdockitem');
924         }
925         this.nodes.dockitem.append(this.nodes.docktitle);
926         M.core_dock.append(this.nodes.dockitem);
927         this.fire('dockeditem:drawcomplete');
928         return true;
929     },
930     /**
931      * This function toggles makes the item active and shows it
932      */
933     show : function() {
934         M.core_dock.hideActive();
935         var Y = this.Y;
936         var css = M.core_dock.css;
937         var panel = M.core_dock.getPanel();
938         this.fire('dockeditem:showstart');
939         panel.setHeader(this.titlestring, this.commands);
940         panel.setBody(Y.Node.create('<div class="'+this.blockclass+' block_docked"></div>').append(this.contents));
941         panel.show();
943         this.active = true;
944         // Add active item class first up
945         this.nodes.docktitle.addClass(css.activeitem);
946         this.fire('dockeditem:showcomplete');
947         M.core_dock.resize();
948         return true;
949     },
950     /**
951      * This function hides the item and makes it inactive
952      */
953     hide : function() {
954         var css = M.core_dock.css;
955         this.fire('dockeditem:hidestart');
956         // No longer active
957         this.active = false;
958         // Remove the active class
959         this.nodes.docktitle.removeClass(css.activeitem);
960         // Hide the panel
961         M.core_dock.getPanel().hide();
962         this.fire('dockeditem:hidecomplete');
963     },
964     /**
965      * This function removes the node and destroys it's bits
966      * @param {Event} e
967      */
968     remove : function () {
969         this.hide();
970         this.nodes.dockitem.remove();
971         this.fire('dockeditem:itemremoved');
972     }
973 };