SubSpace and Linchpin Theme not working properly
Problem
When using SubSpace Navigation and the Linchpin Theme Add-on the SubSpace Navigation bar is not integrated properly.
Solution 1 - Modifying the Linchpin Theme
Add the following code snippet to the Custom JS in the Advanced section of the Linchpin Theme Configuration
// START: Move Subspace Navigation Menu into Linchpin menu bar
AJS.toInit(function(){
var $subspaceMenu = AJS.$("#navigationbarpro").detach();
AJS.$("#linchpin-header #sub-header").replaceWith($subspaceMenu);
});
// END: Move Subspace into Linchpin menu barAdd the following code snippet to the Custom CSS in the Advanced section of the Linchpin Theme Configuration
/* START: Move Subspace into Linchpin menu bar */
#navigationbarpro {
float: left;
width: 100%;
}
#navigationbarpro .aui-navgroup-horizontal {
border-top: none;
border-bottom: none;
}
#navigationbarpro .aui-navgroup-horizontal .aui-nav > li.folder > a {
padding: 10px;
}
/* END: Move Subspace into Linchpin menu bar */Solution 2 - Modifying Confluence custom HTML
Add the following script to the custom HTML section in "At end of the HEAD"
<script type="text/javascript">
jQuery(document).ready(function() {
var observerOverlayHeader;
var observerSidebar;
var fixTheme = function() {
jQuery('#navigationbarpro .aui-navgroup.aui-navgroup-horizontal').css('margin', '0px');
jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-secondary').prependTo('#navigationbarpro .aui-navgroup-inner');
jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu').css('clear', 'inherit');
jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu').css('float', 'none');
jQuery('#navigationbarpro .aui-navgroup-inner .aui-navgroup-primary.subspaces-menu .aui-nav').css('float', 'none');
var subspaceNavigationHeight = jQuery('#navigationbarpro').height();
var headerMessage = jQuery('#header-precursor');
if(AJS.Meta.get('page-id') === undefined) {
if(AJS.Meta.get('space-key') === undefined) {
jQuery('#page .PageContent').css('margin-top', subspaceNavigationHeight + 'px');
} else {
jQuery('#page .ia-splitter').css('margin-top', subspaceNavigationHeight + 'px');
}
} else {
if(observerOverlayHeader !== undefined || observerSidebar !== undefined) {
observerOverlayHeader.disconnect();
observerSidebar.disconnect();
}
jQuery('#page .ia-splitter').css('margin-top', subspaceNavigationHeight + 'px');
Subspace.lastScrollTop = -1;
observerOverlayHeader = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var header = jQuery('#main-header.overlay-header');
if(header.length > 0) {
var newValue = header.css('top');
var st = $(document).scrollTop();
if (st < Subspace.lastScrollTop || Subspace.lastScrollTop == -1){
setTimeout(function() {
newValue = (180 + subspaceNavigationHeight) + 'px';
header.css('top', newValue);
}, 20);
}
if (st > Subspace.lastScrollTop && Subspace.lastScrollTop != -1){
setTimeout(function() {
newValue = (120 + subspaceNavigationHeight) + 'px';
header.css('top', newValue);
}, 20);
}
Subspace.lastScrollTop = st;
}
});
});
observerSidebar = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
setTimeout(function() {
var newHeight = 180 + subspaceNavigationHeight;
if(headerMessage.length > 0 && (jQuery(window).scrollTop() < headerMessage.height())) {
newHeight += headerMessage.height();
}
jQuery('#page .ia-splitter .ia-fixed-sidebar').css('top', newHeight + 'px');
}, 20);
});
});
var config = { attributes: true };
var target = document.querySelector('#main-header');
observerOverlayHeader.observe(target, config);
target = document.querySelector('#page .ia-splitter .ia-fixed-sidebar');
observerSidebar.observe(target, config);
target = document.querySelector('#main');
observerSidebar.observe(target, config);
}
Subspace.subspaceNavigationHeight = subspaceNavigationHeight;
};
$('#navigationconfigdialog button.aui-button-primary').click(function() {
setTimeout(function() {
var headerMessage = jQuery('#header-precursor');
var newHeight = jQuery('#navigationbarpro').height() > Subspace.subspaceNavigationHeight ? 142 + jQuery('#navigationbarpro').height() : 180 + jQuery('#navigationbarpro').height();
if(headerMessage.length > 0 && (jQuery(window).scrollTop() < headerMessage.height())) {
newHeight += headerMessage.height();
}
jQuery('#page .ia-splitter .ia-fixed-sidebar').css('top', newHeight + 'px');
fixTheme();
}, 20);
});
fixTheme();
});
</script>
Related Articles