Date: Thu, 28 Mar 2024 12:44:56 -0400 (EDT) Message-ID: <981592718.28390.1711644296612@lyrasis1-roc-mp1> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_28389_1216319489.1711644296612" ------=_Part_28389_1216319489.1711644296612 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
*Please note: Code examples are specialized for one institution'= s Manakin theme and may require significant modification to fit with your r= epository's style and functionality.
For repositories with a sufficiently extensive community/collection hier= archy, navigation and browsing the hierarchy with a stock Manakin theme can= become unmanagable. The TAMU Digital repository addresses this usability p= roblem 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 hiera= rchy. 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 prin= ciple of the system remains the same. We shall henceforth refer to these ic= ons as "clickers".
Let's consider the community list page that appears in your repository u=
nder the path /community-list. In this list, the clickers should immediatel=
y precede the <ul> elements that contain the <li>s of the DSpac=
e artifacts (communities, collections, and items). To achieve this effect, =
we can edit the XSL that generates these lists. For this, we override the t=
emplate named communitySummaryList-DIM
which appears in =
DIM-Handler.xsl
. We edit the "theme-name".xsl
to include an overriding template that will i=
nclude the desired elements:
<= ;!-- A community rendered in the summaryList pattern. Encountered on the co= mmunity-list and on the front page. --> <xsl:template name=3D"communitySummaryList-DIM"> <xsl:variable name=3D"data" select=3D"./mets:dmdSec/mets:mdWrap/= mets:xmlData/dim:dim"/> <p class=3D"ListPlus" style=3D"display:none">[+]</p> <p class=3D"ListMinus">[-]</p> <span class=3D"bold"> <a href=3D"{@OBJID}" class=3D"communitySummaryListAnchorDIM"= > =09 <xsl:choose> =09=09 <xsl:when test=3D"string-length($data/dim:field[@eleme= nt=3D'title'][1]) > 0"> =09=09 <xsl:value-of select=3D"$data/dim:field[@element= =3D'title'][1]"/> =09=09 </xsl:when> =09=09 <xsl:otherwise> =09=09 <i18n:text>xmlui.dri2xhtml.METS-1.0.no-title<= ;/i18n:text> =09=09 </xsl:otherwise> =09 </xsl:choose> </a> </span> </xsl:template>
The reader will note the presence of the <p> clicker elements imme= diately preceding the <span> representing the community in the hierar= chy. Also, the [+] clicker is not displayed as the <span> is shown no= rmally by default at this juncture.
Now, we need some javascript and css tied to the clickers and the follow= ing <span> to produce the expanding/collapsing effect. Let's begin wi= th the javascript. We employ the jQuery library which greatly simplifies cr= oss-browser compatibility as well as facilitating animation. You need to ed= it the sitemap for your theme in order to have the jQuery javascript code i= ncluded on your page. This may be done by including the appropriate <map= :parameter> elements under the <map:transform> element in step 2 o= f 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=3D"javascript#1" value=3D"lib/jquery-1.2.6.min.js"/> <map:parameter name=3D"javascript#2" value=3D"lib/tamu-menus.js"/>
Remember that you'll have to add these elements for each browser you wan= t to support the functionality.
Now, in menus.js, under the
$(docum= ent).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.
=09//co= mmunity/collection hierarchy =09//expansion with the plus sign (or horizontal arrow) =09$("p.ListPlus").click(function(){ =09=09$(this).hide(); =09=09$(this).next("p.ListMinus").show(); =09=09//slideDown animation doesn't work in IE6: =09=09if(navigator.userAgent.match("MSIE 6"))=20 =09=09{ =09=09 $(this).parent().find("p.ListPlus").hide(); =09=09 $(this).parent().find("p.ListMinus").show(); =09=09 $(this).parent().find("p.ListMinus + span.bold ~ ul").show(); =09=09} =09=09else =09=09{ =09=09 $(this).parent().children("ul").slideDown("fast"); =09=09} =09});
This code assigns an anonymous function to occur when the <p> is c=
licked. This function hides the [+] clicker that was clicked, shows the [-]=
clicker, and does a slide-down animation to reveal the contents of the com=
munity. There is also a branch to catch IE6 browsers (for which the animati=
on doesn't work nicely).
The following similar code will effect a collapse when the [-] clicker is =
clicked.
=09//co= ntraction with the minus sign (or vertical arrow) =09$("p.ListMinus").click(function(){ =09=09$(this).hide(); =09=09$(this).prev("p.ListPlus").show(); =09=09//slideUp animation doesn't work in IE6: =09=09if(navigator.userAgent.match("MSIE 6"))=20 =09=09{ =09=09 $(this).parent().find("p.ListPlus").show(); =09=09 $(this).parent().find("p.ListMinus").hide(); =09=09 $(this).parent().find("p.ListMinus + span.bold ~ ul").hide(); =09=09} =09=09else =09=09{ =09=09 $(this).parent().children("ul").slideUp("fast"); =09=09} =09});