MDL-49094 dock: Add -only class to body for non-legacy regions

This also tidies up the dock region code.
This commit is contained in:
Andrew Nicols
2015-03-06 11:09:44 +08:00
parent b90f98dade
commit eb67d5a690
5 changed files with 304 additions and 156 deletions
+7
View File
@@ -3566,10 +3566,12 @@ EOD;
public function body_css_classes(array $additionalclasses = array()) {
// Add a class for each block region on the page.
// We use the block manager here because the theme object makes get_string calls.
$usedregions = array();
foreach ($this->page->blocks->get_regions() as $region) {
$additionalclasses[] = 'has-region-'.$region;
if ($this->page->blocks->region_has_content($region, $this)) {
$additionalclasses[] = 'used-region-'.$region;
$usedregions[] = $region;
} else {
$additionalclasses[] = 'empty-region-'.$region;
}
@@ -3577,6 +3579,11 @@ EOD;
$additionalclasses[] = 'docked-region-'.$region;
}
}
if (count($usedregions) === 1) {
// Add the -only class for the only used region.
$region = array_shift($usedregions);
$additionalclasses[] = $region . '-only';
}
foreach ($this->page->layout_options as $option => $value) {
if ($value) {
$additionalclasses[] = 'layout-option-'.$option;
+98 -51
View File
@@ -21,7 +21,6 @@ var LOGNS = 'moodle-core-dock',
dockeditemcontainer: 'dockeditem_container',
dockedtitle: 'dockedtitle', // CSS class added to the item's title in each dock
activeitem: 'activeitem', // CSS class added to the active item
contentonly: 'content-only',
dockonload: 'dock_on_load'
},
SELECTOR = {
@@ -742,78 +741,126 @@ DOCK.prototype = {
// Do not resize during initial load
return;
}
var blockregions = [],
populatedblockregions = 0,
allnewregions = true,
showregions = false,
i;
var populatedRegionCount = 0,
populatedBlockRegions = [],
unpopulatedBlockRegions = [],
isMoving = false,
populatedLegacyRegions = [],
containsLegacyRegions = false,
classesToAdd = [],
classesToRemove = [];
// First look for understood regions.
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);
populatedBlockRegions.push(regionname);
populatedRegionCount++;
} else if (region.all('.block_dock_placeholder').size() > 0) {
// There are no blocks in the region but there are placeholders.
// All blocks in this region have been docked.
BODY.addClass('empty-region-'+regionname);
BODY.addClass('docked-region-'+regionname);
BODY.removeClass('used-region-'+regionname);
unpopulatedBlockRegions.push(regionname);
}
});
// Next check for legacy regions.
Y.all('.block-region').each(function(region){
if (region.test(SELECTOR.blockregion)) {
// This is a new region, we've already processed it.
return;
}
var hasblocks = (region.all('.block').size() > 0);
// Sigh - there are legacy regions.
containsLegacyRegions = true;
var regionname = region.get('id').replace(/^region\-/, 'side-'),
hasblocks = (region.all('.block').size() > 0);
if (hasblocks) {
populatedblockregions++;
populatedLegacyRegions.push(regionname);
populatedRegionCount++;
} else {
// This legacy region has no blocks so cannot have the -only body tag.
classesToRemove.push(
regionname + '-only'
);
}
allnewregions = false;
blockregions[region.get('id')] = {
hasblocks : hasblocks,
bodyclass : region.get('id').replace(/^region\-/, 'side-')+'-only'
};
});
if (BODY.hasClass('blocks-moving')) {
// open up blocks during blocks positioning
showregions = true;
}
if (populatedblockregions === 0 && showregions === false) {
BODY.addClass(CSS.contentonly);
} else {
BODY.removeClass(CSS.contentonly);
// When we're moving blocks, we do not want to collapse.
isMoving = true;
}
if (!allnewregions) {
if (populatedblockregions === 0 && showregions === false) {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
BODY.removeClass(blockregions[i].bodyclass);
}
}
} else if (populatedblockregions === 1 && showregions === false) {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
if (!blockregions[i].hasblocks) {
BODY.removeClass(blockregions[i].bodyclass);
} else {
BODY.addClass(blockregions[i].bodyclass);
}
}
}
Y.each(unpopulatedBlockRegions, function(regionname) {
classesToAdd.push(
// This block region is empty.
'empty-region-' + regionname,
// Which has the same effect as being docked.
'docked-region-' + regionname
);
classesToRemove.push(
// It is no-longer used.
'used-region-' + regionname,
// It cannot be the only region on screen if it is empty.
regionname + '-only'
);
}, this);
Y.each(populatedBlockRegions, function(regionname) {
classesToAdd.push(
// This block region is in use.
'used-region-' + regionname
);
classesToRemove.push(
// It is not empty.
'empty-region-' + regionname,
// Is it not docked.
'docked-region-' + regionname
);
if (populatedRegionCount === 1 && isMoving === false) {
// There was only one populated region, and we are not moving blocks.
classesToAdd.push(regionname + '-only');
} else {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
BODY.removeClass(blockregions[i].bodyclass);
}
}
// There were multiple block regions visible - remove any 'only' classes.
classesToRemove.push(regionname + '-only');
}
}, this);
if (containsLegacyRegions) {
// Handle the classing for legacy blocks. These have slightly different class names for the body.
if (isMoving || populatedRegionCount !== 1) {
Y.each(populatedLegacyRegions, function(regionname) {
classesToRemove.push(regionname + '-only');
});
} else {
Y.each(populatedLegacyRegions, function(regionname) {
classesToAdd.push(regionname + '-only');
});
}
}
if (!BODY.hasClass('has-region-content')) {
// This page does not have a content region, therefore content-only is implied when all block regions are docked.
if (populatedRegionCount === 0 && isMoving === false) {
// If all blocks are docked, ensure that the content-only class is added anyway.
classesToAdd.push('content-only');
} else {
// Otherwise remove it.
classesToRemove.push('content-only');
}
}
// Modify the body clases.
Y.each(classesToRemove, function(className) {
BODY.removeClass(className);
});
Y.each(classesToAdd, function(className) {
BODY.addClass(className);
});
},
/**
* Adds an item to the dock.
File diff suppressed because one or more lines are too long
+98 -51
View File
@@ -21,7 +21,6 @@ var LOGNS = 'moodle-core-dock',
dockeditemcontainer: 'dockeditem_container',
dockedtitle: 'dockedtitle', // CSS class added to the item's title in each dock
activeitem: 'activeitem', // CSS class added to the active item
contentonly: 'content-only',
dockonload: 'dock_on_load'
},
SELECTOR = {
@@ -732,78 +731,126 @@ DOCK.prototype = {
// Do not resize during initial load
return;
}
var blockregions = [],
populatedblockregions = 0,
allnewregions = true,
showregions = false,
i;
var populatedRegionCount = 0,
populatedBlockRegions = [],
unpopulatedBlockRegions = [],
isMoving = false,
populatedLegacyRegions = [],
containsLegacyRegions = false,
classesToAdd = [],
classesToRemove = [];
// First look for understood regions.
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);
populatedBlockRegions.push(regionname);
populatedRegionCount++;
} else if (region.all('.block_dock_placeholder').size() > 0) {
// There are no blocks in the region but there are placeholders.
// All blocks in this region have been docked.
BODY.addClass('empty-region-'+regionname);
BODY.addClass('docked-region-'+regionname);
BODY.removeClass('used-region-'+regionname);
unpopulatedBlockRegions.push(regionname);
}
});
// Next check for legacy regions.
Y.all('.block-region').each(function(region){
if (region.test(SELECTOR.blockregion)) {
// This is a new region, we've already processed it.
return;
}
var hasblocks = (region.all('.block').size() > 0);
// Sigh - there are legacy regions.
containsLegacyRegions = true;
var regionname = region.get('id').replace(/^region\-/, 'side-'),
hasblocks = (region.all('.block').size() > 0);
if (hasblocks) {
populatedblockregions++;
populatedLegacyRegions.push(regionname);
populatedRegionCount++;
} else {
// This legacy region has no blocks so cannot have the -only body tag.
classesToRemove.push(
regionname + '-only'
);
}
allnewregions = false;
blockregions[region.get('id')] = {
hasblocks : hasblocks,
bodyclass : region.get('id').replace(/^region\-/, 'side-')+'-only'
};
});
if (BODY.hasClass('blocks-moving')) {
// open up blocks during blocks positioning
showregions = true;
}
if (populatedblockregions === 0 && showregions === false) {
BODY.addClass(CSS.contentonly);
} else {
BODY.removeClass(CSS.contentonly);
// When we're moving blocks, we do not want to collapse.
isMoving = true;
}
if (!allnewregions) {
if (populatedblockregions === 0 && showregions === false) {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
BODY.removeClass(blockregions[i].bodyclass);
}
}
} else if (populatedblockregions === 1 && showregions === false) {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
if (!blockregions[i].hasblocks) {
BODY.removeClass(blockregions[i].bodyclass);
} else {
BODY.addClass(blockregions[i].bodyclass);
}
}
}
Y.each(unpopulatedBlockRegions, function(regionname) {
classesToAdd.push(
// This block region is empty.
'empty-region-' + regionname,
// Which has the same effect as being docked.
'docked-region-' + regionname
);
classesToRemove.push(
// It is no-longer used.
'used-region-' + regionname,
// It cannot be the only region on screen if it is empty.
regionname + '-only'
);
}, this);
Y.each(populatedBlockRegions, function(regionname) {
classesToAdd.push(
// This block region is in use.
'used-region-' + regionname
);
classesToRemove.push(
// It is not empty.
'empty-region-' + regionname,
// Is it not docked.
'docked-region-' + regionname
);
if (populatedRegionCount === 1 && isMoving === false) {
// There was only one populated region, and we are not moving blocks.
classesToAdd.push(regionname + '-only');
} else {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
BODY.removeClass(blockregions[i].bodyclass);
}
}
// There were multiple block regions visible - remove any 'only' classes.
classesToRemove.push(regionname + '-only');
}
}, this);
if (containsLegacyRegions) {
// Handle the classing for legacy blocks. These have slightly different class names for the body.
if (isMoving || populatedRegionCount !== 1) {
Y.each(populatedLegacyRegions, function(regionname) {
classesToRemove.push(regionname + '-only');
});
} else {
Y.each(populatedLegacyRegions, function(regionname) {
classesToAdd.push(regionname + '-only');
});
}
}
if (!BODY.hasClass('has-region-content')) {
// This page does not have a content region, therefore content-only is implied when all block regions are docked.
if (populatedRegionCount === 0 && isMoving === false) {
// If all blocks are docked, ensure that the content-only class is added anyway.
classesToAdd.push('content-only');
} else {
// Otherwise remove it.
classesToRemove.push('content-only');
}
}
// Modify the body clases.
Y.each(classesToRemove, function(className) {
BODY.removeClass(className);
});
Y.each(classesToAdd, function(className) {
BODY.addClass(className);
});
},
/**
* Adds an item to the dock.
+98 -51
View File
@@ -19,7 +19,6 @@ var LOGNS = 'moodle-core-dock',
dockeditemcontainer: 'dockeditem_container',
dockedtitle: 'dockedtitle', // CSS class added to the item's title in each dock
activeitem: 'activeitem', // CSS class added to the active item
contentonly: 'content-only',
dockonload: 'dock_on_load'
},
SELECTOR = {
@@ -740,78 +739,126 @@ DOCK.prototype = {
// Do not resize during initial load
return;
}
var blockregions = [],
populatedblockregions = 0,
allnewregions = true,
showregions = false,
i;
var populatedRegionCount = 0,
populatedBlockRegions = [],
unpopulatedBlockRegions = [],
isMoving = false,
populatedLegacyRegions = [],
containsLegacyRegions = false,
classesToAdd = [],
classesToRemove = [];
// First look for understood regions.
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);
populatedBlockRegions.push(regionname);
populatedRegionCount++;
} else if (region.all('.block_dock_placeholder').size() > 0) {
// There are no blocks in the region but there are placeholders.
// All blocks in this region have been docked.
BODY.addClass('empty-region-'+regionname);
BODY.addClass('docked-region-'+regionname);
BODY.removeClass('used-region-'+regionname);
unpopulatedBlockRegions.push(regionname);
}
});
// Next check for legacy regions.
Y.all('.block-region').each(function(region){
if (region.test(SELECTOR.blockregion)) {
// This is a new region, we've already processed it.
return;
}
var hasblocks = (region.all('.block').size() > 0);
// Sigh - there are legacy regions.
containsLegacyRegions = true;
var regionname = region.get('id').replace(/^region\-/, 'side-'),
hasblocks = (region.all('.block').size() > 0);
if (hasblocks) {
populatedblockregions++;
populatedLegacyRegions.push(regionname);
populatedRegionCount++;
} else {
// This legacy region has no blocks so cannot have the -only body tag.
classesToRemove.push(
regionname + '-only'
);
}
allnewregions = false;
blockregions[region.get('id')] = {
hasblocks : hasblocks,
bodyclass : region.get('id').replace(/^region\-/, 'side-')+'-only'
};
});
if (BODY.hasClass('blocks-moving')) {
// open up blocks during blocks positioning
showregions = true;
}
if (populatedblockregions === 0 && showregions === false) {
BODY.addClass(CSS.contentonly);
} else {
BODY.removeClass(CSS.contentonly);
// When we're moving blocks, we do not want to collapse.
isMoving = true;
}
if (!allnewregions) {
if (populatedblockregions === 0 && showregions === false) {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
BODY.removeClass(blockregions[i].bodyclass);
}
}
} else if (populatedblockregions === 1 && showregions === false) {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
if (!blockregions[i].hasblocks) {
BODY.removeClass(blockregions[i].bodyclass);
} else {
BODY.addClass(blockregions[i].bodyclass);
}
}
}
Y.each(unpopulatedBlockRegions, function(regionname) {
classesToAdd.push(
// This block region is empty.
'empty-region-' + regionname,
// Which has the same effect as being docked.
'docked-region-' + regionname
);
classesToRemove.push(
// It is no-longer used.
'used-region-' + regionname,
// It cannot be the only region on screen if it is empty.
regionname + '-only'
);
}, this);
Y.each(populatedBlockRegions, function(regionname) {
classesToAdd.push(
// This block region is in use.
'used-region-' + regionname
);
classesToRemove.push(
// It is not empty.
'empty-region-' + regionname,
// Is it not docked.
'docked-region-' + regionname
);
if (populatedRegionCount === 1 && isMoving === false) {
// There was only one populated region, and we are not moving blocks.
classesToAdd.push(regionname + '-only');
} else {
for (i in blockregions) {
if (blockregions[i].bodyclass) {
BODY.removeClass(blockregions[i].bodyclass);
}
}
// There were multiple block regions visible - remove any 'only' classes.
classesToRemove.push(regionname + '-only');
}
}, this);
if (containsLegacyRegions) {
// Handle the classing for legacy blocks. These have slightly different class names for the body.
if (isMoving || populatedRegionCount !== 1) {
Y.each(populatedLegacyRegions, function(regionname) {
classesToRemove.push(regionname + '-only');
});
} else {
Y.each(populatedLegacyRegions, function(regionname) {
classesToAdd.push(regionname + '-only');
});
}
}
if (!BODY.hasClass('has-region-content')) {
// This page does not have a content region, therefore content-only is implied when all block regions are docked.
if (populatedRegionCount === 0 && isMoving === false) {
// If all blocks are docked, ensure that the content-only class is added anyway.
classesToAdd.push('content-only');
} else {
// Otherwise remove it.
classesToRemove.push('content-only');
}
}
// Modify the body clases.
Y.each(classesToRemove, function(className) {
BODY.removeClass(className);
});
Y.each(classesToAdd, function(className) {
BODY.addClass(className);
});
},
/**
* Adds an item to the dock.