*Please note: Code examples are specialized for one institution's Manakin theme and may require significant modification to fit with your repository's style and functionality.
For repositories with a sufficiently extensive community/collection hierarchy, navigation and browsing the hierarchy with a stock Manakin theme can become unmanagable. The TAMU Digital repository addresses this usability problem with a javascript-based interface that allows users to collapse and expand sections of the hierarchy with a mouse click.
The first step in creating such an interface for your own Manakin theme is to create extra <p> elements to contain the "[+]" (to expand) and "[-]" (to contract) icons for the user to click when manipulating the hierarchy. If preferred, a developer can use another sort of html element to use images such as arrows or triangles to denote these functions, and the principle of the system remains the same. We shall henceforth refer to these icons as "clickers".
Let's consider the community list page that appears in your repository under the path /community-list. In this list, the clickers should immediately precede the <ul> elements that contain the <li>s of the DSpace artifacts (communities, collections, and items). To achieve this effect, we can edit the XSL that generates these lists. For this, we override the template named communitySummaryList-DIM which appears in DIM-Handler.xsl. We edit the "theme-name".xsl to include an overriding template that will include the desired elements:
<!-- A community rendered in the summaryList pattern. Encountered on the community-list and on the front page. -->
<xsl:template name="communitySummaryList-DIM">
<xsl:variable name="data" select="./mets:dmdSec/mets:mdWrap/mets:xmlData/dim:dim"/>
<p class="ListPlus" style="display:none">[+]</p>
<p class="ListMinus">[-]</p>
<span class="bold">
<a href="{@OBJID}" class="communitySummaryListAnchorDIM">
<xsl:choose>
<xsl:when test="string-length($data/dim:field[@element='title'][1]) > 0">
<xsl:value-of select="$data/dim:field[@element='title'][1]"/>
</xsl:when>
<xsl:otherwise>
<i18n:text>xmlui.dri2xhtml.METS-1.0.no-title</i18n:text>
</xsl:otherwise>
</xsl:choose>
</a>
</span>
</xsl:template>
|
The reader will note the presence of the <p> clicker elements immediately preceding the <span> representing the community in the hierarchy. Also, the [+] clicker is not displayed as the <span> is shown normally by default at this juncture.
Now, we need some javascript and css tied to the clickers and the following <span> to produce the expanding/collapsing effect. Let's begin with the javascript. We employ the jQuery library which greatly simplifies cross-browser compatibility as well as facilitating animation. You need to edit the sitemap for your theme in order to have the jQuery javascript code included on your page. This may be done by including the appropriate <map:parameter> elements under the <map:transform> element in step 2 of the sitemap during which page metadata are added. In the case of the TAMU repository Manakin theme, these elements look like this:
<map:parameter name="javascript#1" value="lib/jquery-1.2.6.min.js"/> <map:parameter name="javascript#2" value="lib/tamu-menus.js"/> |
Remember that you'll have to add these elements for each browser you want to support the functionality.
Now, in menus.js, under the
$(document).ready(function()\{ |
block (which is the main block of a jQuery program, we might include the following code to effect an expansion when the [+] clicker is clicked.
//community/collection hierarchy
//expansion with the plus sign (or horizontal arrow)
$("p.ListPlus").click(function(){
$(this).hide();
$(this).next("p.ListMinus").show();
//slideDown animation doesn't work in IE6:
if(navigator.userAgent.match("MSIE 6"))
{
$(this).parent().find("p.ListPlus").hide();
$(this).parent().find("p.ListMinus").show();
$(this).parent().find("p.ListMinus + span.bold ~ ul").show();
}
else
{
$(this).parent().children("ul").slideDown("fast");
}
});
|
This code assigns an anonymous function to occur when the <p> is clicked. This function hides the [+] clicker that was clicked, shows the [-] clicker, and does a slide-down animation to reveal the contents of the community. There is also a branch to catch IE6 browsers (for which the animation doesn't work nicely).
The following similar code will effect a collapse when the [-] clicker is clicked.
//contraction with the minus sign (or vertical arrow)
$("p.ListMinus").click(function(){
$(this).hide();
$(this).prev("p.ListPlus").show();
//slideUp animation doesn't work in IE6:
if(navigator.userAgent.match("MSIE 6"))
{
$(this).parent().find("p.ListPlus").show();
$(this).parent().find("p.ListMinus").hide();
$(this).parent().find("p.ListMinus + span.bold ~ ul").hide();
}
else
{
$(this).parent().children("ul").slideUp("fast");
}
});
|