[yelp-xsl/wip/html5] mal2html-gloss: Do gloss terms without js

[Shaun McCance <shaunm src gnome org>]

commit 2f14ee0eff9f0978a8b9ac0a5b3b10fde941a8dc
Author: Shaun McCance <shaunm gnome org>
Date:   Wed Mar 29 12:28:28 2017 -0400

    mal2html-gloss: Do gloss terms without js

 xslt/mallard/html/mal2html-gloss.xsl |   38 ----------------------------------
 xslt/mallard/html/mal2html-page.xsl  |   23 +++++++++++++++++---
 2 files changed, 19 insertions(+), 42 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-gloss.xsl b/xslt/mallard/html/mal2html-gloss.xsl
index 230da5f..a7bb7a2 100644
--- a/xslt/mallard/html/mal2html-gloss.xsl
+++ b/xslt/mallard/html/mal2html-gloss.xsl
@@ -134,42 +134,4 @@ include a link to their defining page.
   </a>
 </xsl:template>
 
-
-<!--**==========================================================================
-mal2html.gloss.js
-
-REMARK: FIXME
--->
-<xsl:template name="mal2html.gloss.js">
-<xsl:text><![CDATA[
-$(document).ready(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 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');
-    };
-    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>
-
 </xsl:stylesheet>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index dd04fba..09f17b2 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -940,7 +940,7 @@ ul.links-uix-hover a {
   padding: 8px 1.2em;
   border-bottom: none;
 }
-ul.links-uix-hover a:hover {
+ul.links-uix-hover a:hover, ul.links-uix-hover a:focus {
   background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
 }
 ul.links-uix-hover img {
@@ -951,7 +951,7 @@ ul.links-uix-hover img {
   opacity: 0.0;
   transition: opacity 0.6s, visibility 0.6s;
 }
-ul.links-uix-hover a:hover img {
+ul.links-uix-hover a:hover img, ul.links-uix-hover a:focus img {
   visibility: visible;
   opacity: 1.0;
   transition: opacity 0.2s, visibility 0.2s;
@@ -1294,7 +1294,7 @@ div.facet input {
   margin: 0;
 }
 
-<!-- FIXME -->
+<!-- experimental/gloss -->
 dt.gloss-term {
   margin-top: 1.2em;
   font-weight: bold;
@@ -1315,6 +1315,7 @@ dd.gloss-def {
   padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
 }
 a.gloss-term {
+  position: relative;
   border-bottom: dashed 1px </xsl:text>
     <xsl:value-of select="$color.blue"/><xsl:text>;
 }
@@ -1325,9 +1326,14 @@ a.gloss-term:hover {
 span.gloss-desc {
   display: none;
   position: absolute;
+  z-index: 100;
   margin: 0;
+  </xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
+  top: 1.2em;
   padding: 0.2em 0.5em 0.2em 0.5em;
+  min-width: 12em;
   max-width: 24em;
+  overflow: hidden;
   color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
   background-color: </xsl:text>
     <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
@@ -1336,6 +1342,16 @@ span.gloss-desc {
   box-shadow: 2px 2px 4px </xsl:text>
     <xsl:value-of select="$color.gray"/><xsl:text>;
 }
+a.gloss-term:hover span.gloss-desc, a.gloss-term:focus span.gloss-desc {
+  display: inline-block;
+  animation-name: yelp-gloss-fade;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+@keyframes yelp-gloss-fade {
+  from { opacity: 0.0; }
+  to   { opacity: 1.0; }
+}
 
 <!-- conditional processing -->
 .if-if { display: none; }
@@ -1391,7 +1407,6 @@ span.status-stub, span.status-draft, span.status-incomplete, span.status-outdate
 <!--%# html.js.mode -->
 <xsl:template mode="html.js.mode" match="mal:page">
   <xsl:call-template name="mal2html.facets.js"/>
-  <xsl:call-template name="mal2html.gloss.js"/>
 <xsl:text><![CDATA[
 $(document).ready(function () {
   $('a.ui-overlay').each(function () {