Wednesday December 17, 2008
Confluence Resizable Navigation Tree
What bugged me about Confluence a long time, was the navigation in big wiki spaces. A huge step forward is provided by the page tree navigation, which displays a tree of pages on every page. However, I wasn’t satisfied by that: In deeply nested page structures or with long page titles, the page tree either eats up a lot of space, or the page title have line breaks, which makes the page tree losing its clearness.
Ideally, the area which displays the page tree, was resizable and would not break the page titles in multiple lines. As Confluence includes jQuery out-of-the box, and me being a jQuery fan, I used this for practicing my jQuery skill. 
This is a screenshot of the resizable navigation tree:
In case you want to try it out, follow the page tree navigation documentation provided by Atlassian. The only difference: In step 3, where you modify the page layout, paste my code:
#if ($action.isPrintableVersion() == false)
<script src="/includes/js/jquery/jquery.ui-1.5a/jquery.js"></script>
<script src="/includes/js/jquery/jquery.ui-1.5a/jquery.dimensions.js"></script>
<script src="/includes/js/jquery/jquery.ui-1.5a/ui.mouse.js"></script>
<script src="/includes/js/jquery/jquery.ui-1.5a/ui.resizable.js"></script>
<style>
.spacetree * ul{
padding-left:0px;
margin-left: 0px;
}
.spacetree * li{
margin-left: 5px;
margin-right: 5px;
padding-left:5px;
}
div.spacetree {
overflow: hidden;
}
.spacetree * li a {
white-space:nowrap;
}
.spacetree * li {
white-space:nowrap;
}
.ui-resizable-handle.ui-resizable-e {
background-color: #DDDDDD !important;
width: 2px !important;
}
div.resizable {
overflow: hidden;
min-height: 400px;
}
</style>
<script>
AJS.toInit(function () {
var setNavHeight = function() {
jQuery("div.resizable").height(jQuery("td.treenav").height()-10);
};
jQuery("div.resizable").resizable({
handles: "e",
resize: setNavHeight
});
setNavHeight();
jQuery(".wiki-content img[title]").each(function(index, domElement) {
jQuery(domElement).after("<br/><b>Figure: " + jQuery(domElement).attr("title") + "<b>");
})
});
</script>
<table cellspacing="2">
<tr>
<td valign="top" align="left" bgcolor="#F9F9F9" class="noprint treenav">
<div class="resizable" style="padding: 5px;">
<div class="tabletitle">Table of Contents</div>
<div class="spacetree">
#includePage($helper.spaceKey "TreeNavigation")
</div>
</div>
</td>
<td valign="top" align="left" class="pagecontent" style="padding: 5px">
<div class="wiki-content">
$body
</div>
</td>
</tr>
</table>
#else
<div class="wiki-content">
$body
</div>
#end
Remaining issue IMO is to store the size of the page tree in a cookie, so that the user doesn’t have resize the page tree on every page. Unfortunately, as Confluence does not provide the jQuery Cookie library, it needs to be installed manually, and i decided to leave this out for now.
Hope this helps.
Update: Make sure that the script tags at the beginning actually match the context root of your confluence installation. The code above assumes that Confluence is installed at ‘/’. If it is installed at ‘/confluence/’ the script tags have to be changed to:
<script src="/confluence/includes/js/jquery/jquery.ui-1.5a/jquery.js"></script> <script src="/confluence/includes/js/jquery/jquery.ui-1.5a/jquery.dimensions.js"></script> <script src="/confluence/includes/js/jquery/jquery.ui-1.5a/ui.mouse.js"></script> <script src="/confluence/includes/js/jquery/jquery.ui-1.5a/ui.resizable.js"></script>
Posted on Dec 17, 2008 at 21:08 (MET) | Permalink | 15 comments
