Skip to content

Commit

Permalink
back ported MDL-38923
Browse files Browse the repository at this point in the history
  • Loading branch information
marsh0lion committed Apr 27, 2014
1 parent ca3b210 commit 3cf982e
Show file tree
Hide file tree
Showing 12 changed files with 269 additions and 41 deletions.
3 changes: 3 additions & 0 deletions lib/outputrenderers.php
Expand Up @@ -3249,6 +3249,9 @@ public function body_css_classes(array $additionalclasses = array()) {
} else {
$additionalclasses[] = 'empty-region-'.$region;
}
if ($this->page->blocks->region_completely_docked($region, $this)) {
$additionalclasses[] = 'docked-region-'.$region;
}
}
foreach ($this->page->layout_options as $option => $value) {
if ($value) {
Expand Down
16 changes: 10 additions & 6 deletions lib/yui/build/moodle-core-dock/moodle-core-dock-debug.js
Expand Up @@ -193,7 +193,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
}

// We need to fix a font-size - sorry theme designers.
test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
BODY.insert(test, 0);
width = test.one('span').get('offsetWidth') * 1.2;
height = test.one('span').get('offsetHeight');
Expand All @@ -204,12 +204,10 @@ M.core.dock.fixTitleOrientation = function(title, text) {

// Move the title into position
title.setStyles({
'margin' : '0',
'padding' : '0',
'position' : 'relative',
'fontSize' : fontsize,
'width' : width,
'top' : width/2
'top' : (width - height)/2
});

// Positioning is different when in RTL mode.
Expand Down Expand Up @@ -760,14 +758,16 @@ DOCK.prototype = {
showregions = false,
i;
// First look for understood regions.
Y.all(SELECTOR.blockregion).each(function(){
Y.all(SELECTOR.blockregion).each(function(region){
var regionname = region.getData('blockregion');
if (region.all('.block').size() > 0) {
populatedblockregions++;
BODY.addClass('used-region-'+regionname);
BODY.removeClass('empty-region-'+regionname);
BODY.removeClass('docked-region-'+regionname);
} else {
BODY.addClass('empty-region-'+regionname);
BODY.addClass('docked-region-'+regionname);
BODY.removeClass('used-region-'+regionname);
}
});
Expand Down Expand Up @@ -1393,7 +1393,11 @@ TABHEIGHTMANAGER.prototype = {
var dock = this.get('dock'),
node = dock.get('dockNode'),
items = dock.dockeditems,
possibleheight = node.get('offsetHeight') - node.one('.controls').get('offsetHeight') - (dock.get('bufferPanel')*3) - (items.length*2),
containermargin = parseInt(node.one('.dockeditem_container').getStyle('marginTop').replace('/[^0-9]+$/', ''), 10),
dockheight = node.get('offsetHeight') - containermargin,
controlheight = node.one('.controls').get('offsetHeight'),
buffer = (dock.get('bufferPanel') * 3),
possibleheight = dockheight - controlheight - buffer - (items.length*2),
totalheight = 0,
id, dockedtitle;
if (items.length > 0) {
Expand Down
16 changes: 10 additions & 6 deletions lib/yui/build/moodle-core-dock/moodle-core-dock.js
Expand Up @@ -192,7 +192,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
}

// We need to fix a font-size - sorry theme designers.
test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
BODY.insert(test, 0);
width = test.one('span').get('offsetWidth') * 1.2;
height = test.one('span').get('offsetHeight');
Expand All @@ -203,12 +203,10 @@ M.core.dock.fixTitleOrientation = function(title, text) {

// Move the title into position
title.setStyles({
'margin' : '0',
'padding' : '0',
'position' : 'relative',
'fontSize' : fontsize,
'width' : width,
'top' : width/2
'top' : (width - height)/2
});

// Positioning is different when in RTL mode.
Expand Down Expand Up @@ -753,14 +751,16 @@ DOCK.prototype = {
showregions = false,
i;
// First look for understood regions.
Y.all(SELECTOR.blockregion).each(function(){
Y.all(SELECTOR.blockregion).each(function(region){
var regionname = region.getData('blockregion');
if (region.all('.block').size() > 0) {
populatedblockregions++;
BODY.addClass('used-region-'+regionname);
BODY.removeClass('empty-region-'+regionname);
BODY.removeClass('docked-region-'+regionname);
} else {
BODY.addClass('empty-region-'+regionname);
BODY.addClass('docked-region-'+regionname);
BODY.removeClass('used-region-'+regionname);
}
});
Expand Down Expand Up @@ -1382,7 +1382,11 @@ TABHEIGHTMANAGER.prototype = {
var dock = this.get('dock'),
node = dock.get('dockNode'),
items = dock.dockeditems,
possibleheight = node.get('offsetHeight') - node.one('.controls').get('offsetHeight') - (dock.get('bufferPanel')*3) - (items.length*2),
containermargin = parseInt(node.one('.dockeditem_container').getStyle('marginTop').replace('/[^0-9]+$/', ''), 10),
dockheight = node.get('offsetHeight') - containermargin,
controlheight = node.one('.controls').get('offsetHeight'),
buffer = (dock.get('bufferPanel') * 3),
possibleheight = dockheight - controlheight - buffer - (items.length*2),
totalheight = 0,
id, dockedtitle;
if (items.length > 0) {
Expand Down
10 changes: 5 additions & 5 deletions lib/yui/src/dock/js/dock.js
Expand Up @@ -191,7 +191,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
}

// We need to fix a font-size - sorry theme designers.
test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
BODY.insert(test, 0);
width = test.one('span').get('offsetWidth') * 1.2;
height = test.one('span').get('offsetHeight');
Expand All @@ -202,12 +202,10 @@ M.core.dock.fixTitleOrientation = function(title, text) {

// Move the title into position
title.setStyles({
'margin' : '0',
'padding' : '0',
'position' : 'relative',
'fontSize' : fontsize,
'width' : width,
'top' : width/2
'top' : (width - height)/2
});

// Positioning is different when in RTL mode.
Expand Down Expand Up @@ -758,14 +756,16 @@ DOCK.prototype = {
showregions = false,
i;
// First look for understood regions.
Y.all(SELECTOR.blockregion).each(function(){
Y.all(SELECTOR.blockregion).each(function(region){
var regionname = region.getData('blockregion');
if (region.all('.block').size() > 0) {
populatedblockregions++;
BODY.addClass('used-region-'+regionname);
BODY.removeClass('empty-region-'+regionname);
BODY.removeClass('docked-region-'+regionname);
} else {
BODY.addClass('empty-region-'+regionname);
BODY.addClass('docked-region-'+regionname);
BODY.removeClass('used-region-'+regionname);
}
});
Expand Down
6 changes: 5 additions & 1 deletion lib/yui/src/dock/js/tabheightmanager.js
Expand Up @@ -37,7 +37,11 @@ TABHEIGHTMANAGER.prototype = {
var dock = this.get('dock'),
node = dock.get('dockNode'),
items = dock.dockeditems,
possibleheight = node.get('offsetHeight') - node.one('.controls').get('offsetHeight') - (dock.get('bufferPanel')*3) - (items.length*2),
containermargin = parseInt(node.one('.dockeditem_container').getStyle('marginTop').replace('/[^0-9]+$/', ''), 10),
dockheight = node.get('offsetHeight') - containermargin,
controlheight = node.one('.controls').get('offsetHeight'),
buffer = (dock.get('bufferPanel') * 3),
possibleheight = dockheight - controlheight - buffer - (items.length*2),
totalheight = 0,
id, dockedtitle;
if (items.length > 0) {
Expand Down
2 changes: 1 addition & 1 deletion theme/bootstrapbase/config.php
Expand Up @@ -160,7 +160,7 @@
$THEME->javascripts = array(
);
$THEME->javascripts_footer = array(
'moodlebootstrap',
'moodlebootstrap', 'dock'
);

if (core_useragent::is_ie() && !core_useragent::check_ie_version('9.0')) {
Expand Down
58 changes: 58 additions & 0 deletions theme/bootstrapbase/javascript/dock.js
@@ -0,0 +1,58 @@

/**
* Customise the dock for this theme.
*
* Tasks we do within this function:
* - Add 'block' as a class to the dock panel so that its items are styled the same as they are when being displayed
* in page as blocks.
* - Constrain the width of the docked block to the window width using a responsible max-width.
* - Handle the opening/closing of the Bootstrap collapsible navbar on small screens.
*/
function customise_dock_for_theme(dock) {
// Add the "block" class to docked blocks.
// This prevents having to restyle all docked blocks and simply use standard block styling.
// First we wait until the panel has been generated.
dock.on('dock:panelgenerated', function() {
// Then we wait until the panel it is being shown for the first time.
dock.get('panel').once('dockpanel:beforeshow', function() {
// Finally we add the block class.
Y.all('.dockeditempanel_content').addClass('block');
});
dock.get('panel').on('dockpanel:beforeshow', function() {
var content = Y.all('.dockeditempanel_content');
// Finally set a responsible max width.
content.setStyle('maxWidth', content.get('winWidth') - dock.get('dockNode').get('offsetWidth') - 10);
});
});

// Handle the opening/closing of the bootstrap collapsible navbar on small screens.
// This is a complex little bit of JS because we need to simulate Bootstrap actions in order to measure height changes
// in the dom and apply them as spacing to the dock.
dock.on('dock:initialised', function() {
var navbar = Y.one('header.navbar'),
navbarbtn = Y.one('header.navbar .btn-navbar'),
navcollapse = Y.one('header.navbar .nav-collapse'),
container = Y.one('#dock .dockeditem_container'),
margintop = null,
newmargintop = null,
diff = null;
if (navbar && navbarbtn && container) {
margintop = parseInt(container.getStyle('marginTop').replace(/px$/, ''), 10);
diff = margintop - parseInt(navbar.get('offsetHeight'), 10);
navbarbtn.ancestor().on('click', function() {
// We need to fake the collapsible region being active, this JS *ALWAYS* executes before the bootstrap JS.
navcollapse.toggleClass('active');
if (!this.hasClass('active')) {
newmargintop = (parseInt(navbar.get('offsetHeight'), 10) + diff);
container.setStyle('marginTop', newmargintop + 'px');
} else {
container.setStyle('marginTop', margintop + 'px');
}
// Undo the simulation.
navcollapse.toggleClass('active');
// Tell the dock things have changed so that it automatically resizes things.
dock.fire('dock:itemschanged');
}, navbarbtn);
}
});
}
1 change: 1 addition & 0 deletions theme/bootstrapbase/less/moodle.less
Expand Up @@ -48,6 +48,7 @@ body {
@import "moodle/backup-restore";
@import "moodle/tables";
@import "moodle/buttons";
@import "moodle/dock";

// Anything below this line is considered expendable,
// so it doesn't matter if it doesn't show up in ie < 9
Expand Down
43 changes: 24 additions & 19 deletions theme/bootstrapbase/less/moodle/core.less
Expand Up @@ -9,37 +9,42 @@
display:none;
}

.empty-region-side-pre #block-region-side-pre,
.empty-region-side-post #block-region-side-post {
.empty-region-side-pre #block-region-side-pre, // Pre region is empty.
.empty-region-side-post #block-region-side-post, // Post region is empty.
.jsenabled.docked-region-side-post #block-region-side-post, // All post blocks are docked.
.jsenabled.docked-region-side-pre #block-region-side-pre { // All pre blocks are docked.
display:none;
}

.empty-region-side-post #region-bs-main-and-pre.span9,
.empty-region-side-pre #region-bs-main-and-post.span9,
.empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8 {
/** LTR with no post area.
RTL with no pre area.
RTL with no post area. **/
.empty-region-side-post #region-bs-main-and-pre.span9, // LTR with no post area.
.empty-region-side-pre #region-bs-main-and-post.span9, // RTL with no pre area.
.empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8, // RTL with no post area.
.jsenabled.docked-region-side-post #region-bs-main-and-pre.span9, // LTR with all post blocks docked.
.jsenabled.docked-region-side-post #region-bs-main-and-post.span9 #region-main.span8,
.jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 { // RTL with all pre blocks docked.
width: 100%;
}

.empty-region-side-pre #region-bs-main-and-pre.span9 #region-main {
/** LTR with no pre area. **/
.empty-region-side-pre #region-bs-main-and-pre.span9 #region-main, // LTR with no pre area.
.jsenabled.docked-region-side-pre #region-bs-main-and-pre.span9 #region-main { // LTR with all pre blocks docked.
float:none;
width:100%;
}

.empty-region-side-post.used-region-side-pre #region-main.span8 {
/** increase the span size by 1 **/
.fluid-span(9);
}
.empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
/** decrease the span size by 1 **/
.fluid-span(3);
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#region-main.span8 {
/** Increase the span size by 1 **/
.fluid-span(9);
}
#block-region-side-pre.span4 {
/** Decrease the span size by 1 **/
.fluid-span(3);
}
}

.empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 {
/** RTL with no pre area. **/
.empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8, // RTL with no pre area.
.jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 { // RTL with all pre blocks docked.
float: right;
}

Expand Down

0 comments on commit 3cf982e

Please sign in to comment.