[yelp-xsl] mal2html-gloss: Use <a> for inline gloss terms, for focus

[Shaun McCance <shaunm src gnome org>]

commit 18bb503850c4e1f4c0c7ed996b961028bf1a5723
Author: Shaun McCance <shaunm gnome org>
Date:   Mon Jul 11 16:57:48 2011 -0400

    mal2html-gloss: Use <a> for inline gloss terms, for focus

 xslt/mallard/html/mal2html-gloss.xsl |   48 +++++++++++++++++++++++++++------
 xslt/mallard/html/mal2html-page.xsl  |    8 +++++-
 2 files changed, 46 insertions(+), 10 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-gloss.xsl b/xslt/mallard/html/mal2html-gloss.xsl
index 4d31021..30f2d91 100644
--- a/xslt/mallard/html/mal2html-gloss.xsl
+++ b/xslt/mallard/html/mal2html-gloss.xsl
@@ -101,8 +101,28 @@ include a link to their defining page.
 
 <xsl:template mode="mal2html.inline.mode" match="gloss:term">
   <xsl:variable name="node" select="."/>
-  <span class="gloss-term">
+  <a class="gloss-term">
     <xsl:call-template name="html.lang.attrs"/>
+    <xsl:variable name="target">
+      <xsl:call-template name="mal.link.target">
+        <xsl:with-param name="node" select="$node"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:choose>
+      <xsl:when test="$target = ''">
+        <xsl:attribute name="href">
+          <xsl:text>#</xsl:text>
+        </xsl:attribute>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:attribute name="href">
+          <xsl:value-of select="$target"/>
+        </xsl:attribute>
+        <xsl:attribute name="title">
+          <xsl:call-template name="mal.link.tooltip"/>
+        </xsl:attribute>
+      </xsl:otherwise>
+    </xsl:choose>
     <xsl:apply-templates mode="mal2html.inline.mode"/>
     <xsl:for-each select="$mal.cache">
       <xsl:variable name="terms" select="key('mal.gloss.key', $node/@ref)"/>
@@ -112,7 +132,7 @@ include a link to their defining page.
         </span>
       </xsl:for-each>
     </xsl:for-each>
-  </span>
+  </a>
 </xsl:template>
 
 
@@ -124,21 +144,31 @@ REMARK: FIXME
 <xsl:template name="mal2html.gloss.js">
 <xsl:text><![CDATA[
 $(document).ready(function () {
-  $('span.gloss-term').hover(
-    function () {
+  $('a.gloss-term').each(function () {
+    if ($(this).attr('href') == '#') {
+      $(this).click(function () { return false; });
+    }
+    var showtip = function () {
+      var desc = $(this).children('span.gloss-desc');
+      if (desc.is(':visible'))
+        return;
       var top = $(this).offset().top + $(this).height() + 1;
       var left = $(this).offset().left;
-      var desc = $(this).children('span.gloss-desc');
       var cnt = $(this).closest('div.contents');
       var diff = cnt.offset().left + cnt.width() - desc.width() - 4;
       if (left > diff)
         left = diff;
       desc.css({'top': top + 'px', 'left': left + 'px'}).fadeIn('slow');
-    },
-    function () {
+    };
+    var hidetip = function () {
+      if ($(this).is(':focus'))
+        return;
       $(this).children('span.gloss-desc').fadeOut('fast');
-    }
-  );
+    };
+    $(this).hover(showtip, hidetip);
+    $(this).focus(showtip);
+    $(this).blur(hidetip);
+  });
 });
 ]]></xsl:text>
 </xsl:template>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 1a52ee0..35c9f32 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -801,16 +801,22 @@ dd.gloss-def {
     <xsl:value-of select="$color.gray_border"/><xsl:text>;
   padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
 }
-span.gloss-term {
+a.gloss-term {
+  tabindex: 0;
   border-bottom: dashed 1px </xsl:text>
     <xsl:value-of select="$color.blue_border"/><xsl:text>;
 }
+a.gloss-term:hover {
+  text-decoration: none;
+  border-bottom-style: solid;
+}
 span.gloss-desc {
   display: none;
   position: absolute;
   margin: 0;
   padding: 0.2em 0.5em 0.2em 0.5em;
   max-width: 24em;
+  color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
   background-color: </xsl:text>
     <xsl:value-of select="$color.yellow_background"/><xsl:text>;
   border: solid 1px </xsl:text>