<?xml version="1.0" encoding="utf-8"?>
<html>
Files:
- [manakin-source]/themes/[theme-dir]/[theme-name].xsl (The theme's stylesheet)
- [manakin-source]/themes/[theme-dir]/style.css (The theme's css - may be found in a "lib" or "lib/css" subdirectory)
- [manakin-source]/themes/[theme-dir]/sitemap.xmap (The theme's sitemap - may be found in "Main" subdirectory)
- [manakin-source]/themes/[theme-dir]/menus.js (javascript/jQuery - may be wise to place in "lib" subdirectory)
...
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
...
"
...
...
".xsl
...
to include an overriding template that will include the desired elements:
...
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.
...
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.
| Code Block |
|---|
//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 <span>. 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.
| Code Block |
|---|
//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");
}
});
|
...