[yelp-xsl] mal2html-links: Use ui:thumb extension for mouseover links

[Shaun McCance <shaunm src gnome org>]

commit e6d7b7564b1e561c1ff4c37a9e946c2e19fdb5a1
Author: Shaun McCance <shaunm gnome org>
Date:   Tue Feb 21 18:15:58 2012 -0500

    mal2html-links: Use ui:thumb extension for mouseover links

 xslt/mallard/html/mal2html-links.xsl |  252 +++++++++++++++++++++++++---------
 xslt/mallard/html/mal2html-page.xsl  |   54 +++++++
 2 files changed, 240 insertions(+), 66 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 43c50f6..05b8b40 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -667,6 +667,13 @@ when determining which links to output.
                   <xsl:with-param name="role" select="'topic'"/>
                 </xsl:call-template>
               </xsl:when>
+              <xsl:when test="$node/self::mal:links/@ui:thumbs = 'mouseovers'">
+                <xsl:call-template name="mal2html.ui.links.mouseovers">
+                  <xsl:with-param name="node" select="$node"/>
+                  <xsl:with-param name="links" select="$_links"/>
+                  <xsl:with-param name="role" select="'topic'"/>
+                </xsl:call-template>
+              </xsl:when>
               <xsl:when test="contains($style, ' mouseovers ')">
                 <xsl:call-template name="_mal2html.links.mouseovers">
                   <xsl:with-param name="node" select="$node"/>
@@ -927,7 +934,7 @@ when determining which links to output.
     <xsl:for-each select="$mal.cache">
       <xsl:variable name="target" select="key('mal.cache.key', $link/@xref)"/>
       <div class="links-ui-grid">
-        <xsl:variable name="thumb" select="$target/mal:info/ui:thumb"/>
+        <xsl:variable name="thumbs" select="$target/mal:info/ui:thumb"/>
         <a>
           <xsl:attribute name="href">
             <xsl:call-template name="mal.link.target">
@@ -942,67 +949,12 @@ when determining which links to output.
             </xsl:call-template>
           </xsl:attribute>
           <span class="links-ui-grid-img" style="width: {$width}px; height: {$height}px;">
-            <xsl:if test="$thumb">
-              <img>
-                <xsl:for-each select="$thumb">
-                  <xsl:sort data-type="number" select="number(not(@width))"/>
-                  <xsl:sort data-type="number" select="number(not(@height))"/>
-                  <xsl:sort data-type="number" select="($width div $height) div (@width div @height)"/>
-                  <xsl:sort data-type="number" select="math:abs($width - @width)"/>
-                  <xsl:sort data-type="number" select="math:abs($height - @height)"/>
-                  <xsl:if test="position() = 1">
-                    <xsl:attribute name="src">
-                      <xsl:value-of select="@src"/>
-                    </xsl:attribute>
-                  </xsl:if>
-                  <xsl:choose>
-                    <xsl:when test="$node/@ui:overflow = 'crop'"/>
-                    <xsl:when test="$node/@ui:overflow = 'width'">
-                      <xsl:attribute name="width">
-                        <xsl:value-of select="$width"/>
-                      </xsl:attribute>
-                    </xsl:when>
-                    <xsl:when test="$node/@ui:overflow = 'height'">
-                      <xsl:attribute name="height">
-                        <xsl:value-of select="$height"/>
-                      </xsl:attribute>
-                    </xsl:when>
-                    <xsl:when test="$node/@ui:overflow = 'scale'">
-                      <xsl:attribute name="width">
-                        <xsl:value-of select="$width"/>
-                      </xsl:attribute>
-                      <xsl:attribute name="height">
-                        <xsl:value-of select="$height"/>
-                      </xsl:attribute>
-                    </xsl:when>
-                    <xsl:when test="@width and @height">
-                      <xsl:variable name="ratio" select="$width div $height"/>
-                      <xsl:variable name="tratio" select="@width div @height"/>
-                      <xsl:choose>
-                        <xsl:when test="$ratio &lt; $tratio">
-                          <xsl:attribute name="width">
-                            <xsl:value-of select="$width"/>
-                          </xsl:attribute>
-                        </xsl:when>
-                        <xsl:otherwise>
-                          <xsl:attribute name="height">
-                            <xsl:value-of select="$height"/>
-                          </xsl:attribute>
-                        </xsl:otherwise>
-                      </xsl:choose>
-                    </xsl:when>
-                    <xsl:otherwise>
-                      <xsl:attribute name="width">
-                        <xsl:value-of select="$width"/>
-                      </xsl:attribute>
-                      <xsl:attribute name="height">
-                        <xsl:value-of select="$height"/>
-                      </xsl:attribute>
-                    </xsl:otherwise>
-                  </xsl:choose>
-                </xsl:for-each>
-              </img>
-            </xsl:if>
+            <xsl:call-template name="mal2html.ui.links.img">
+              <xsl:with-param name="links" select="$node"/>
+              <xsl:with-param name="thumbs" select="$thumbs"/>
+              <xsl:with-param name="width" select="$width"/>
+              <xsl:with-param name="height" select="$height"/>
+            </xsl:call-template>
           </span>
           <span class="title" style="width: {$width}px; max-height: {number($height) div 2}px;">
             <xsl:call-template name="mal.link.content">
@@ -1011,10 +963,12 @@ when determining which links to output.
               <xsl:with-param name="role" select="$role"/>
             </xsl:call-template>
           </span>
-          <xsl:if test="$target/mal:info/mal:desc">
-            <span class="desc" style="width: {$width}px; max-height: {number($height) div 2}px;">
-              <xsl:apply-templates select="$target/mal:info/mal:desc/node()"/>
-            </span>
+          <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
+            <xsl:if test="$target/mal:info/mal:desc">
+              <span class="desc" style="width: {$width}px; max-height: {number($height) div 2}px;">
+                <xsl:apply-templates select="$target/mal:info/mal:desc/node()"/>
+              </span>
+            </xsl:if>
           </xsl:if>
         </a>
       </div>
@@ -1022,4 +976,170 @@ when determining which links to output.
   </xsl:for-each>
 </xsl:template>
 
+<xsl:template name="mal2html.ui.links.mouseovers">
+  <xsl:param name="node"/>
+  <xsl:param name="links"/>
+  <xsl:param name="role"/>
+  <xsl:variable name="width">
+    <xsl:choose>
+      <xsl:when test="$node/@ui:width">
+        <xsl:value-of select="$node/@ui:width"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>250</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:variable>
+  <xsl:variable name="height">
+    <xsl:choose>
+      <xsl:when test="$node/@ui:height">
+        <xsl:value-of select="$node/@ui:height"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>200</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:variable>
+  <div class="links-ui-mouseovers" style="width: {$width}px; height: {$height}px;">
+    <xsl:for-each select="$node/ui:thumb[1]">
+      <img>
+        <xsl:copy-of select="@src | @width | @height"/>
+        <xsl:call-template name="mal2html.ui.links.img.attrs">
+          <xsl:with-param name="links" select="$node"/>
+          <xsl:with-param name="thumb" select="."/>
+          <xsl:with-param name="width" select="$width"/>
+          <xsl:with-param name="height" select="$height"/>
+        </xsl:call-template>
+      </img>
+    </xsl:for-each>
+  </div>
+  <ul class="links-ui-mouseovers">
+    <xsl:for-each select="$links">
+      <xsl:sort data-type="number" select="@groupsort"/>
+      <xsl:sort select="mal:title[ type = 'sort']"/>
+      <xsl:variable name="xref" select="@xref"/>
+      <xsl:for-each select="$mal.cache">
+        <xsl:variable name="target" select="key('mal.cache.key', $xref)"/>
+        <xsl:variable name="thumbs" select="$target/mal:info/ui:thumb"/>
+        <li class="links">
+          <a class="bold">
+            <xsl:attribute name="href">
+              <xsl:call-template name="mal.link.target">
+                <xsl:with-param name="xref" select="$xref"/>
+              </xsl:call-template>
+            </xsl:attribute>
+            <xsl:attribute name="title">
+              <xsl:call-template name="mal.link.tooltip">
+                <xsl:with-param name="xref" select="$xref"/>
+                <xsl:with-param name="role" select="$role"/>
+              </xsl:call-template>
+            </xsl:attribute>
+            <span style="width: {$width}px; height: {$height}px;">
+              <xsl:call-template name="mal2html.ui.links.img">
+                <xsl:with-param name="links" select="$node"/>
+                <xsl:with-param name="thumbs" select="$thumbs"/>
+                <xsl:with-param name="width" select="$width"/>
+                <xsl:with-param name="height" select="$height"/>
+              </xsl:call-template>
+            </span>
+            <xsl:call-template name="mal.link.content">
+              <xsl:with-param name="node" select="."/>
+              <xsl:with-param name="xref" select="$xref"/>
+              <xsl:with-param name="role" select="$role"/>
+            </xsl:call-template>
+          </a>
+        </li>
+      </xsl:for-each>
+    </xsl:for-each>
+  </ul>
+  <div class="clear"/>
+</xsl:template>
+
+<xsl:template name="mal2html.ui.links.img">
+  <xsl:param name="links"/>
+  <xsl:param name="thumbs"/>
+  <xsl:param name="width" select="$links/@ui:width"/>
+  <xsl:param name="height" select="$links/@ui:height"/>
+  <xsl:if test="$thumbs">
+    <img>
+      <xsl:for-each select="$thumbs">
+        <xsl:sort data-type="number" select="number(not(@width))"/>
+        <xsl:sort data-type="number" select="number(not(@height))"/>
+        <xsl:sort data-type="number" select="($width div $height) div (@width div @height)"/>
+        <xsl:sort data-type="number" select="math:abs($width - @width)"/>
+        <xsl:sort data-type="number" select="math:abs($height - @height)"/>
+        <xsl:if test="position() = 1">
+          <xsl:attribute name="src">
+            <xsl:value-of select="@src"/>
+          </xsl:attribute>
+          <xsl:call-template name="mal2html.ui.links.img.attrs">
+            <xsl:with-param name="links" select="$links"/>
+            <xsl:with-param name="thumb" select="."/>
+            <xsl:with-param name="width" select="$width"/>
+            <xsl:with-param name="height" select="$height"/>
+          </xsl:call-template>
+        </xsl:if>
+      </xsl:for-each>
+    </img>
+  </xsl:if>
+</xsl:template>
+
+<xsl:template name="mal2html.ui.links.img.attrs">
+  <xsl:param name="links"/>
+  <xsl:param name="thumb"/>
+  <xsl:param name="width" select="$links/@ui:width"/>
+  <xsl:param name="height" select="$links/@ui:height"/>
+  <xsl:choose>
+    <xsl:when test="$links/@ui:overflow = 'crop'"/>
+    <xsl:when test="$links/@ui:overflow = 'width'">
+      <xsl:attribute name="width">
+        <xsl:value-of select="$width"/>
+      </xsl:attribute>
+    </xsl:when>
+    <xsl:when test="$links/@ui:overflow = 'height'">
+      <xsl:attribute name="height">
+        <xsl:value-of select="$height"/>
+      </xsl:attribute>
+    </xsl:when>
+    <xsl:when test="$links/@ui:overflow = 'scale'">
+      <xsl:attribute name="width">
+        <xsl:value-of select="$width"/>
+      </xsl:attribute>
+      <xsl:attribute name="height">
+        <xsl:value-of select="$height"/>
+      </xsl:attribute>
+    </xsl:when>
+    <xsl:when test="$thumb/@width and $thumb/@height">
+      <xsl:variable name="ratio" select="$width div $height"/>
+      <xsl:variable name="tratio" select="$thumb/@width div $thumb/@height"/>
+      <xsl:choose>
+        <xsl:when test="$ratio &lt; $tratio">
+          <xsl:attribute name="width">
+            <xsl:value-of select="$width"/>
+          </xsl:attribute>
+          <xsl:attribute name="height">
+            <xsl:value-of select="round($width * ($thumb/@height div $thumb/@width))"/>
+          </xsl:attribute>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:attribute name="width">
+            <xsl:value-of select="round($height * ($thumb/@width div $thumb/@height))"/>
+          </xsl:attribute>
+          <xsl:attribute name="height">
+            <xsl:value-of select="$height"/>
+          </xsl:attribute>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:when>
+    <xsl:otherwise>
+      <xsl:attribute name="width">
+        <xsl:value-of select="$width"/>
+      </xsl:attribute>
+      <xsl:attribute name="height">
+        <xsl:value-of select="$height"/>
+      </xsl:attribute>
+    </xsl:otherwise>
+  </xsl:choose>
+</xsl:template>
+
 </xsl:stylesheet>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 458fdef..f28b5bd 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -938,6 +938,40 @@ div.links-ui-grid > a > span.title {
   font-weight: bold;
 }
 
+div.links-ui-mouseovers {
+  text-align: center;
+  margin: 0;
+  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
+  overflow: hidden;
+}
+ul.links-ui-mouseovers li { margin: 0; }
+ul.links-ui-mouseovers a {
+  display: inline-block;
+  padding: 4px 1.2em 4px 1.2em;
+  border-bottom: none;
+}
+ul.links-ui-mouseovers a:hover {
+  text-decoration: none;
+  background: </xsl:text><xsl:value-of select="$color.blue_background"/><xsl:text>;
+}
+ul.links-ui-mouseovers a > span {
+  display: none;
+  position: absolute;
+  margin: 0; padding: 0;
+  overflow: hidden;
+  background: </xsl:text><xsl:value-of select="$color.blue_background"/><xsl:text>;
+  text-align: center;
+}
+ media only screen and (max-width: 400px) {
+  ul.links-ui-mouseovers a {
+    display: block;
+    padding: 12px;
+    margin-left: -12px;
+    margin-right: -12px;
+  }
+  div.links-ui-mouseovers { display: none; }
+}
+
 div.links-grid {
   display: inline-block;
   clear: both
@@ -1200,6 +1234,26 @@ $(document).ready(function () {
       );
     });
   });
+  $('div.links-ui-mouseovers').each(function () {
+    var contdiv = $(this);
+    var width = 0;
+    var height = 0;
+    contdiv.next('ul').find('a').each(function () {
+      var mlink = $(this);
+      mlink.hover(
+        function () {
+          if (contdiv.is(':visible')) {
+            var offset = contdiv.offset();
+            mlink.find('img').parent('span').css({left: offset.left, top: offset.top, zIndex: 10});
+            mlink.find('img').parent('span').fadeIn('slow');
+          }
+        },
+        function () {
+          mlink.find('img').parent('span').fadeOut('slow');
+        }
+      );
+    });
+  });
 });
 ]]></xsl:text>
 </xsl:template>