- [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)
*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.
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:
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.
Remember that you'll have to add these elements for each browser you want to support the functionality.
Now, in menus.js, under the
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.
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.