mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-20 07:56:06 +02:00
Code Issues Projects Releases Wiki Activity

navigation MDL-22373 Reorientated title of docked blocks and moved a little bit of the standard theme's navigation into the core docks library

Browse Source
This commit is contained in:
Sam Hemelryk 2010-05-24 04:03:31 +00:00
parent 01da148278
commit b496e6345c
5 changed files with 89 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
blocks/dock.js
View File

@ -30,6 +30,7 @@ M.core_dock = {
buffer:10, // Buffer used when containing a panel
position:'left', // position of the dock
orientation:'vertical', // vertical || horizontal determines if we change the title
titlerotation:'counterclockwise',
/**
* Display parameters for the dock
* @namespace
@ -378,7 +379,7 @@ M.core_dock = {
this.cachedcontentnode = node;
var placeholder = this.Y.Node.create('<div id="content_placeholder_'+this.id+'"></div>');
var placeholder = this.Y.Node.create('<div id="content_placeholder_'+this.id+'" class="block_dock_placeholder"></div>');
node.replace(this.Y.Node.getDOMNode(placeholder));
node = null;
@ -442,8 +443,57 @@ M.core_dock = {
* @param {YUI.Node} node
*/
fix_title_orientation : function(node) {
node.innerHTML = node.innerHTML.replace(/(.)/g, "$1<br />");
return node;
var title = node.firstChild.nodeValue;
var clockwise = false;
if (M.core_dock.cfg.titlerotation == 'counterclockwise') {
clockwise = false;
} else if (M.core_dock.cfg.titlerotation == 'clockwise') {
clockwise = true;
} else {
clockwise = (M.core_dock.cfg.titleorientation)(M.str.langconfig.thisdirectionvertical=='ttb');
}
if (YAHOO.env.ua.ie > 0) {
if (YAHOO.env.ua.ie > 7) {
// IE8 can flip the text via CSS
node.setAttribute('style', 'writing-mode: tb-rl; filter: flipV flipH;');
} else {
// IE < 7 can't do anything cool, just settle to stacked letters
title = title.split('').join('<br />');
node.innerHTML = title;
}
return node;
}
// Cool, we can use SVG!
var test = M.core_dock.Y.Node.create('<div><span style="font-size:10pt;">'+title+'</span></div>');
M.core_dock.Y.one(document.body).append(test);
var height = test.one('span').get('offsetWidth');
var width = test.one('span').get('offsetHeight')*2;
var qwidth = width/4;
test.remove();
var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
txt.setAttribute('font-size', '10');
if (clockwise) {
txt.setAttribute('transform','rotate(90 '+(qwidth/2)+' '+qwidth+')');
} else {
txt.setAttribute('y', height);
txt.setAttribute('transform','rotate(270 '+qwidth+' '+(height-qwidth)+')');
}
txt.appendChild(document.createTextNode(node.firstChild.nodeValue));
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('version', '1.1');
svg.setAttribute('height', height);
svg.setAttribute('width', width);
svg.appendChild(txt);
var div = document.createElement(node.nodeName);
div.appendChild(svg);
return div;
},
/**
* Resizes the space that contained blocks if there were no blocks left in
@ -451,22 +501,39 @@ M.core_dock = {
* @param {Y.Node} node
*/
resize_block_space : function(node) {
node = node.ancestor('.block-region');
if (node) {
var width = node.getStyle('width');
if (node.all('.block').size() === 0 && this.blockspacewidth === null) {
// If the node has no children then we can shrink it
this.blockspacewidth = width;
node.setStyle('width', '0px');
} else if (this.blockspacewidth !== null) {
// Otherwise if it contains children and we have saved a width
// we can reapply the width
node.setStyle('width', this.blockspacewidth);
this.blockspacewidth = null;
var blockregions = [];
var populatedblockregions = 0;
M.core_dock.Y.all('.block-region').each(function(region){
var hasblocks = (region.all('.block').size() > 0);
if (hasblocks) {
populatedblockregions++;
}
blockregions[region.get('id')] = {hasblocks: hasblocks, bodyclass: region.get('id').replace(/^region\-/, 'side-')+'-only'};
});
var bodynode = M.core_dock.Y.one(document.body);
var noblocksbodyclass = 'content-only';
var i = null;
if (populatedblockregions==0) {
bodynode.addClass(noblocksbodyclass);
for (i in blockregions) {
bodynode.removeClass(blockregions[i].bodyclass);
}
} else if (populatedblockregions==1) {
bodynode.removeClass(noblocksbodyclass);
for (i in blockregions) {
if (!blockregions[i].hasblocks) {
bodynode.removeClass(blockregions[i].bodyclass);
} else {
bodynode.addClass(blockregions[i].bodyclass);
}
}
} else {
bodynode.removeClass(noblocksbodyclass);
for (i in blockregions) {
bodynode.removeClass(blockregions[i].bodyclass);
}
return width;
}
return null;
return '200px';
},
/**
* This function removes a block from the dock and puts it back into the page

2
lib/outputrequirementslib.php
View File

@ -381,7 +381,7 @@ class page_requirements_manager {
$module = array('name' => 'core_dock',
'fullpath' => '/blocks/dock.js',
'requires' => array('base', 'cookie', 'dom', 'io', 'node', 'event-custom', 'event-mouseenter', 'yui2-container'),
'strings' => array(array('addtodock', 'block'),array('undockitem', 'block'),array('undockall', 'block')));
'strings' => array(array('addtodock', 'block'),array('undockitem', 'block'),array('undockall', 'block'),array('thisdirectionvertical', 'langconfig')));
break;
case 'core_calendar':
$module = array('name' => 'core_calendar',

4
theme/base/layout/frontpage.php
View File

@ -57,7 +57,7 @@ echo $OUTPUT->doctype() ?>
</div>
<?php if ($hassidepre) { ?>
<div id="region-pre">
<div id="region-pre" class="block-region">
<div class="region-content">
<?php echo $OUTPUT->blocks_for_region('side-pre') ?>
</div>
@ -65,7 +65,7 @@ echo $OUTPUT->doctype() ?>
<?php } ?>
<?php if ($hassidepost) { ?>
<div id="region-post">
<div id="region-post" class="block-region">
<div class="region-content">
<?php echo $OUTPUT->blocks_for_region('side-post') ?>
</div>

4
theme/base/layout/general.php
View File

@ -68,7 +68,7 @@ echo $OUTPUT->doctype() ?>
</div>
<?php if ($hassidepre) { ?>
<div id="region-pre">
<div id="region-pre" class="block-region">
<div class="region-content">
<?php echo $OUTPUT->blocks_for_region('side-pre') ?>
</div>
@ -76,7 +76,7 @@ echo $OUTPUT->doctype() ?>
<?php } ?>
<?php if ($hassidepost) { ?>
<div id="region-post">
<div id="region-post" class="block-region">
<div class="region-content">
<?php echo $OUTPUT->blocks_for_region('side-post') ?>
</div>

75
theme/standard/javascript/navigation.js
View File

@ -5,80 +5,5 @@ function customise_dock_for_theme() {
}
// Throw a lightbox for the navigation boxes
M.core_dock.cfg.panel.modal = true;
/**
* This function converts the title of each docked block to make it vertical.
*
* In the case of browsers that support svg (scalable vector graphics) an SVG is
* generated to rotate the text. In the case of IE we have to settle for making
* it letter over letter.
*
* @param {Y.Node} node
*/
M.core_dock.genericblock.prototype.fix_title_orientation = function(node) {
if (YAHOO.env.ua.ie > 0) {
if (YAHOO.env.ua.ie > 7) {
// IE8 can flip the text via CSS
node.setAttribute('style', 'writing-mode: tb-rl; filter: flipV flipH;');
} else {
// IE < 7 can't do anything cool, just settle to stacked letters
node.innerHTML = node.innerHTML.replace(/(.)/g, "$1<br />");
}
return node;
}
// Cool, we can use SVG!
var test = M.core_dock.Y.Node.create('<div><span>'+node.firstChild.nodeValue+'</span></div>');
M.core_dock.Y.one(document.body).append(test);
var height = test.one('span').get('offsetWidth');
test.remove();
var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
txt.setAttribute('x', '0');
txt.setAttribute('y', '0');
txt.setAttribute('transform','rotate(90, 5, 5)');
txt.appendChild(document.createTextNode(node.firstChild.nodeValue));
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('version', '1.1');
svg.setAttribute('height', height);
svg.setAttribute('width', 30);
svg.appendChild(txt);
var div = document.createElement(node.nodeName);
div.appendChild(svg);
return div;
}
/**
* This function makes sure that if all blocks from one side or the other are docked
* the gap that is left behind if closed up. This is done of course by using classes.
*/
M.core_dock.genericblock.prototype.resize_block_space = function() {
var blockregions = {
pre: {
hasblocks : (M.core_dock.Y.one('#region-pre') && M.core_dock.Y.one('#region-pre').all('.block').size() > 0),
c : 'side-pre-only'
},
post: {
hasblocks : (M.core_dock.Y.one('#region-post') && M.core_dock.Y.one('#region-post').all('.block').size() > 0),
c : 'side-post-only'
},
noblocksc:'content-only'
}
if (blockregions.pre.hasblocks && blockregions.post.hasblocks) {
// No classes required both regions have blocks
M.core_dock.Y.one(document.body).removeClass(blockregions.pre.c).removeClass(blockregions.post.c).removeClass(blockregions.noblocksc);
} else if (blockregions.pre.hasblocks) {
// side-pre-only required: remove any other classes
M.core_dock.Y.one(document.body).addClass(blockregions.pre.c).removeClass(blockregions.post.c).removeClass(blockregions.noblocksc);
} else if (blockregions.post.hasblocks) {
// side-post-only required: remove any other classes
M.core_dock.Y.one(document.body).removeClass(blockregions.pre.c).addClass(blockregions.post.c).removeClass(blockregions.noblocksc);
} else {
// All blocks have been docked: add noblocks remove side-xxx-only's if set
M.core_dock.Y.one(document.body).removeClass(blockregions.pre.c).removeClass(blockregions.post.c).addClass(blockregions.noblocksc);
}
return '200px';
}
return true;
}