XSL: sorting based on user input « Digital Humanities Questions & Answers

Digital Humanities Questions & Answers » Markup & Metadata

XSL: sorting based on user input

(6 posts) (4 voices)

Asked 6 years ago by Vika Zafrin
Latest answer from Richard Lehane

Tags:

Vika Zafrin
Member
You know how sometimes you offer to build someone a proof of concept that should take about half an hour, and then it takes days? I did that.

I have a fairly simple bibliography. I'd like to present it as a web page, and give the user three choices: this list should be sortable by author, year of publication, and title. This choice can be presented as the page is loading (so, to re-sort, one must reload) or as buttons or hyperlinks.

The stylesheet itself took no time; it's the choice I'm stumped on. I suspect this can be done fairly trivially with a combination of XSL and JavaScript, but find JavaScript impenetrable. Been trying off and on for a few days to extrapolate from what I'm finding online, to no avail. Perhaps you can help, with or without JavaScript?

Here's the XSL I've got so far, with some assistance from StackOverflow folk. Suggestions on how to modify it for choice?

To summarize: I'd like to use the xsl:sort with the first three parameters (pSortNameAuth, pSortNameYear, pSortNameTitle) interchangeably, based on user input.
Tweet this question
Posted 6 years ago Permalink
Hugh Cayless
Member

You should try local-name() instead of name(), which returns the namespace-qualified name of the node (which is not what you want). But Javascript is likely to be better for this kind of thing. You might be able to just pick up and use a jQuery widget like http://tablesorter.com/docs/ for example.

Posted 6 years ago Permalink

It's not quite as slick as if you were hoping for (and maybe I completely missed something), but given that you have so few sorting options, you could just set up a choose and defer the record styling to a separate template (note that I haven't tested this – if you post the XML I could help refine it if it seems promising:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema" version="2.0">
    <xsl:output method="html"/>
    <xsl:template match="/">
        <xsl:param name="sortField"/>
        <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
            <head>
                <title>Bibliography</title>
            </head>
            <body>
                <xsl:choose>
                    <xsl:when test="$sortField='authors'">
                        <xsl:for-each select="//record">
                            <xsl:sort select="authors"/>
                            <xsl:apply-templates/>
                        </xsl:for-each>
                    </xsl:when>
                    <xsl:when test="$sortField='dates'">
                        <xsl:for-each select="//record">
                            <xsl:sort select="dates"/>
                            <xsl:apply-templates/>
                        </xsl:for-each>
                    </xsl:when>
                    <xsl:when test="$sortField='titles'">
                        <xsl:for-each select="//record">
                            <xsl:sort select="titles"/>
                            <xsl:apply-templates/>
                        </xsl:for-each>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:apply-templates select="//record"/>
                    </xsl:otherwise>
                </xsl:choose>
            </body>
        </html>
 
    </xsl:template>
    <xsl:template match="record">
        <div class="record">
            <hr/>
            <p><strong>Record Number: </strong>
                <xsl:value-of select="rec-number"/>
 
                <xsl:value-of select="contributors/authors/author"/>
                <xsl:text>. </xsl:text>
                <em><xsl:value-of select="titles/title"/>. </em>
                <xsl:value-of select="pub-location"/>: <xsl:value-of select="publisher"/>,
                    <xsl:value-of select="dates/year"/>. <xsl:value-of select="pages"/>
            </p>
        </div>
    </xsl:template>
</xsl:stylesheet>

Posted 6 years ago Permalink

Richard Lehane
Member

A simple approach might be to do the sort three times to create three separate lists on your html page (perhaps not optimal if it is a very large biblio), hide the lists using style="display: none", and use javascript to un-hide whichever list you want and hide the other two.
Something like (and I am not sure how legal it is to just slap the javascript into your XSL as I have done!):

[edit: the code below seems to get sanitised a bit, the "Sort by" options should have an onclick="reveal('author')" etc. javascript call in their anchor tags, like in this gist https://gist.github.com/7ae9c2f8605038f927b9]

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"    xmlns:xs="http://www.w3.org/2001/XMLSchema" version="2.0">
<xsl:output method="html"/>
<xsl:template match="/">
<xsl:param name="pSortNameAuth" select="'authors'"/>
<xsl:param name="pSortNameYear" select="'dates'"/>
<xsl:param name="pSortNameTitle" select="'titles'"/>
<xsl:param name="pSortPosition" select="1"/>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <title>Bibliography</title>
  <script type="text/javascript">
    <xsl:text>
      function reveal(target) {
	      if (target=='author') {
		      document.getElementById('publication').style.display = 'none';
		      document.getElementById('title').style.display = 'none';
		      document.getElementById('author').style.display = '';
		    }
	      if (target=='publication') {
		      document.getElementById('author').style.display = 'none';
		      document.getElementById('title').style.display = 'none';
		      document.getElementById('publication').style.display = '';
		  }
	     if (target=='title') {
		      document.getElementById('author').style.display = 'none';
		      document.getElementById('publication').style.display = 'none';
		      document.getElementById('title').style.display = '';
		    }
	    }
    </xsl:text>
  </script>
  </head>
  <body>
    <p>Sort by: <a href="#top">Author</a> | <a href="#top">Year of publication</a> | <a href="#top">Title</a></p>
    <div id="author">
      <xsl:for-each select="//record">
        <xsl:sort select=".//*[name()=$pSortNameAuth]/*[position()=$pSortPosition]"/>
        <xsl:apply-templates/>
      </xsl:for-each>
    </div>
    <div id="publication" style="display: none">
      <xsl:for-each select="//record">
        <xsl:sort select=".//*[name()=$pSortNameYear]/*[position()=$pSortPosition]"/>
        <xsl:apply-templates/>
      </xsl:for-each>
    </div>
    <div id="title" style="display: none">
      <xsl:for-each select="//record">
        <xsl:sort select=".//*[name()=$pSortNameTitle]/*[position()=$pSortPosition]"/>
        <xsl:apply-templates/>
      </xsl:for-each>
    </div>
  </body>
</html>
</xsl:template>
 
<xsl:template match="record">
  <div class="record">
    <hr/>
    <p><strong>Record Number: </strong> <xsl:value-of select="rec-number"/>
 
    <xsl:value-of select="contributors/authors/author"/>
    <xsl:text>. </xsl:text>
    <em><xsl:value-of select="titles/title"/>. </em>
    <xsl:value-of select="pub-location"/>: <xsl:value-of select="publisher"/>, <xsl:value-of select="dates/year"/>. <xsl:value-of select="pages"/>
    </p>
  </div>
 </xsl:template>
 </xsl:stylesheet>

Posted 6 years ago Permalink

Vika Zafrin
Member

Hugh, thank you -- it seems like, if I'm fine having the bibliography in a table, things get a lot easier all around. Having it formatted like a proper bibliography would be preferable, but the tableSorter widget is certainly an option.

Stéfan, thanks -- this is, indeed, what I'm trying to do. The part I get stuck on is trying to set the value of the sortField parameter and re-transform.

Richard, that's a neat trick -- I might use it for the proof of concept! The perfectionist in me, of course, wants to know how to do it Properly. :)

Posted 6 years ago Permalink
Richard Lehane
Member

Replying to @Vika Zafrin's post:

... building on Hugh's suggestion of a jquery plugin, the new isotope plugin may be worth a look Vika. It allows sorting without tables & looks very snazzy!

Posted 6 years ago Permalink

RSS feed for this topic

Reply

You must log in to post.